发表于 | 分类于

文字和小图标实例

方法一

  • 适合场景 图标的位置在文字附近
  • 缺点 icon的位置不能自由控制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.con {
    width: 500px;
    margin: 50px auto;
}

h3 {
    font-weight: 400;
    font-size: 18px;
    height: 35px;
    line-height: 35px;
}

i {
    display: inline-block;
    width: 12px;
    height: 12px;
    /*控制水平*/
    margin-right: 5px;
    /*控制垂直*/
    vertical-align: -1px;
    background-image: url('./icon01.png');
    background-repeat: no-repeat;
    background-size: 100%;
}
1
2
3
<div class="con">
    <h3><i></i>梁嘉裕梁嘉裕</h3>
</div>

方法二

  • 适合场景 不做动态 后期不会做修改的
  • 缺点 不方便修改和做效果
1
2
3
4
5
6
7
8
9
10
11
12
h3 {
    font-weight: 400;
    font-size: 18px;
    height: 35px;
    line-height: 35px;
    /*将文字和图标隔开*/
    padding-left: 30px;
    background-image: url('./icon01.png');
    background-repeat: no-repeat;
    /*控制图标的位置*/
    background-position: left;
}
1
2
3
<div class="con">
    <h3>梁嘉裕梁嘉裕</h3>
</div>

方法三

  • 适合场景 要求位置自由比较高的
  • 缺点 要计算位置和父元素相对定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
h3 {
    position: relative;
    font-weight: 400;
    font-size: 18px;
    height: 35px;
    line-height: 35px;
}

.icon {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    background-image: url('./icon01.png');
    background-repeat: no-repeat;
}
1
2
3
4
5
<div class="con">
    <h3>梁嘉裕梁嘉裕
        <div class="icon"></div>
    </h3>
</div>

发表于 | 分类于

基于手机宽度开发rem单位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*iphoen5*/
@media screen and  (min-width:320px) {
    html {
        font-size: 32px;
    }
}
/*iphone6*/
@media screen and  (min-width:375px) {
    html {
        font-size: 37.5px;
    }
}
/*ip6p*/
@media screen and  (min-width:414px) {
    html {
        font-size: 41.4px;
    }
}

用途

  • 小图标大小用rem单位做开发 做出响应
  • 高度和布局的宽度可以用rem做响应开发
  • 效果图可以基础ip6做出响应式
  • font-size 大小 可以不基于rem开发
  • 实例小米商城

像搜索条这种飘动 可以基于绝对定位

1
2
3
4
5
6
7
8
9
10
11
.search-form {
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    width: 80%;
    height: 0.8rem;
    border-radius: 5px;
    background-color: #fff;
}
  • 先通过定位 在设置宽度和高度 百分比单位是相对父元素

发表于 | 分类于

grid响应式系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
@charset "UTF-8";
// 容器
.container {
  margin-right: auto;
  margin-left: auto;
  &::after,
  &::before {
    display: table;
    content: "";
  }
  &::after {
    clear: both;
  }
}

// 百分比
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  &::after,
  &::before {
    display: table;
    content: "";
  }
  &::after {
    clear: both;
  }
}

// row
.g-row {
  &::after,
  &::before {
    display: table;
    content: "";
  }
  &::after {
    clear: both;
  }
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

// 一个格子的宽度
$one: (100%/24);
// 响应750以下 手机
@media (max-width:767px) {
  @for $i from 1 to 25 {
    .g-col-xs-#{$i} {
      float: left;
      width: $one*$i;
    }
    .g-col-xs-offset-#{$i} {
      margin-left: $one*$i
    }
  }
}

// 响应768以上 平板
@media (min-width:768px) {
  @for $i from 1 to 25 {
    .g-col-sm-#{$i} {
      float: left;
      width: $one*$i;
    }
    .g-col-sm-offset-#{$i} {
      margin-left: $one*$i
    }
  }
}

// 响应992以上 电脑小屏
@media (min-width:992px) {
  @for $i from 1 to 25 {
    .g-col-md-#{$i} {
      float: left;
      width: $one*$i;
    }
    .g-col-md-offset-#{$i} {
      margin-left: $one*$i
    }
  }
}

// 电脑宽屏
@media (min-width:1200px) {
  @for $i from 1 to 25 {
    .g-col-lg-#{$i} {
      float: left;
      width: $one*$i;
    }
    .g-col-lg-offset-#{$i} {
      margin-left: $one*$i
    }
  }
}

@media (max-width:767px) {
  .g-xs-hidden {
    display: none !important;
  }
  .g-xs-show {
    display: block !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .g-sm-hidden {
    display: none !important;
  }
  .g-sm-show {
    display: block !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .g-md-hidden {
    display: none !important;
  }
  .g-md-show {
    display: block !important;
  }
}

@media (min-width: 1200px) {
  .g-lg-hidden {
    display: none !important;
  }
  .g-lg-show {
    display: block !important;
  }
}

发表于 | 分类于

参考文章 阮一峰 张老师

transition 过渡

  • transition-property 过渡的属性名
  • transition-delay 过渡的时间
  • transition-timing-function 过渡的速度函数
  • transition-delay 过渡延迟

使用注意

  • transition 需要知道中间状态的变化 如0px到100px 不能0px到auto，display的block到none
  • transition 需要事件触发，不能网页加载自动发生

动画 animation

  • animation-name 绑定动画名字
  • animation-duration 动画持续时间
  • animation-timing-function 动画速度函数
  • animation-delay 动画延迟
  • animation-iteration-count 次数 infinite
  • animation-fill-mode 动画结束状态
  • animation-direction 动画方向
  • animation-play-state 动画暂停和运动 paused running

定义

1
2
3
4
5
6
7
8
@keyframes item{
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

transform 转换

  • 定义让元素2d或3d转换

  • 场景元素过渡动画、过渡动画、元素位移、旋转等等

rotate(angle)

  • 定义2d旋转 单位deg 表示度数 顺时针
  • 旋转中心为中心默认

transform-origin

  • 定义盒子的圆心坐标 默认为中心

发表于 | 分类于

rem

  • rem单位是根据html的font-size的大小定义的

不同设备的font-size

1
2
3
4
5
6
7
8
9
10
// 根据设备的宽度设置htm的font-size
(function(win) {
  var winHtml = win.document.documentElement;
  var width = winHtml.getBoundingClientRect().width;
  if (width >= 640) {
    width = 640
  }
  var rem = width / 10;
  winHtml.style.fontSize = rem + 'px';
})(window)

利用sass 便利转化rem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@charset "UTF-8";
// 设计稿的分辨率
$baseDevice: 640;
// 前端切图移动端默认正常显示尺寸320
$device: 320;
// 默认html font-size
$baseFontSize: 32px;
// scss function
@function px2rem($px, $base-font-size: $baseDevice / $device * $baseFontSize) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2rem($px + 0px); // That may fail.
  }
  @else if (unit($px)==rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}

发表于 | 分类于

CSS布局

单页面布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*背景*/
.container {
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/*内容*/
.con__middle {
  background-color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 100px;
}
  • 适合用于简单的单页面布局
  • 场景 h5简单推广页 只用于手机端
  • container 表示单页面的背景
  • 内容需要固定宽度和高度居中
  • 单位vw、vh、rem做响应式单位

inline-block 两端布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*列表容器*/
.container {
  width: 650px;
  margin: auto;
  text-align: justify;
  font-size: 0;
}
/*列表元素*/
.item {
  display: inline-block;
  width: 150px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #000;
}
/*最后一行 让上面变为两端对齐*/
.justify_fix {
  display: inline-block;
  width: 100%;
  height: 0;
  overflow: hidden;
}
/*让最好一行向左对齐 */
.left_fix {
  display: inline-block;
  height: 0;
  margin: 0;
  overflow: hidden;
}
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <!--最后一行两端对齐-->
  <span class="justify_fix"></span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <!--最后一行左对齐-->
  <span class="item left_fix">&nbsp;</span>
  <span class="item left_fix">&nbsp;</span>
</div>
  • justify 表示一行的内联元素两端对齐
  • 这一行要填满一行，所以未行不会对齐

图片自适应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.wrap {
  float: left;
  overflow: hidden;
  width: 50%;
}

.box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/*添加一个子元素 通内边距撑开父元素的盒子模型*/
.box::before {
  content: '';
  padding-top: 100%;
  display: block;
}
/*内容通过绝对定位来放置*/
.img-item {
  position: absolute;
  top: 0;
  max-width: 100%;
  max-height: 100%;
}
<div class="wrap">
  <div class="box">
    <img src="./head-img.jpg" alt="" class="img-item">
  </div>
</div>
  • 原理通过子元素撑开父元素盒子
  • 适用于不同大小的图片的自适应 做响应式