[移动开发]学习小程序第12天

1.css和样式的注释

css的注释方法：

/* background-attachment: red; */

2.class和id选择器

id和class的区别：

class选择器可以多次使用
id只能用一次

3.颜色三种的使用

十六进制、rgb、颜色名称（blue、red等等）

4.css中文本的常用样式

.txt{
    text-align: right;
    text-decoration: line-through;

}
.txt2{
    font-size: 40px;
    
}

<view class="txt">￥19999</view>
<view class="txt2">￥3239</view>
<view class="txt3">￥13459</view>

5.css的边框和边距

6.css内边距padding

padding:10px 20px 30px 50px;
    /* 两者是一样的，上面表示和下面的表示 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 50px;

顺序是上，右，下，左，顺时针

7.边框border

	border-style: solid;
    border-width:5px;
    border-color: yellow;
    /* 上面的和下面的表示是一样的 */
    border:5px solid yellow;

8.外边距margin

margin:10px;

9.border-radius设置圆角边框

border-radius: 10px 20px 30px 50px;

10.画出一个月牙

<view>
<view class="root-f">
<view class="root-s"></view>
</view>
</view>

```css
.root-f{
    background:red;
    width: 200px;
    height:200px;
    border-radius: 100px;
}
.root-s{
    width:150px;
    height:150px;
    background: gainsboro;
    border-radius: 75px;
}

11.搜索框的实现

<view class="root">
<view class="son">搜索</view>
</view>

.root{
    background:#ffb965;
    padding:10px;

}
.son{
    background:white;
    border-radius: 15px;
    text-align: center;
    color:green;
}

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ffb965",
    "navigationBarTitleText": "吃外卖",
    "navigationBarTextStyle":"black"
  },

12.px和rpx的适配问题

<view class="view1">整个屏幕</view>
<view class="view2">屏幕的一半</view>

.view1{
    background:red;
    /* 整个屏幕都是750rpx，一半就是375rpx */
    width: 750rpx;
}
.view2{
    background:orange;
    width:375rpx;

}

13.image

<image src="https://pic.baike.soso.com/ugc/baikepic2/6749/20210720102025-811299437_jpeg_3968_2976_3786803.jpg/0"></image>

14.通过image显示网络图片

<image 
class="img"
src="https://pic.baike.soso.com/ugc/baikepic2/6749/20210720102025-811299437_jpeg_3968_2976_3786803.jpg/0"></image>