对于静态页面我们首先要分析整体页面的布局,需要用怎么样的布局方式,从上而下进行页面的分析和样式的编写,对于公共的页面可以写在一个组件里,需要时直接调用。
html简述
名称 | 特点 | 是否可以改变宽高等 | 常用元素 |
---|---|---|---|
块级元素 | 独占一行 | 可以 | div,p,h1-h6,ul,ol,li |
行内块元素 | 一行可以显示多个 | 可以 | input,img,textarea,select,option |
行内元素 | 一行可以显示多个 | 不可以,由本身内容大小决定 | span,a,strong,em,del,ins |
css简述
1.设置居中
1.1水平居中
1.1.1块级元素的水平居中,需设置块级元素的宽度,来实现整体的水平居中
width:100px;
margin:0 auto
1.1.2.行内元素,行内块元素的水平居中,给其父元素添加
text-align:center
1.2.垂直居中
1.2.1.line-height与height值相同实现垂直居中。
height:100px;
line-height:100px
1.2.2.通过vertical-align:middle配合设为行内块实现垂直居中
display:inline-block;
vertical-align:middle
2.浮动(float)
一个大盒子(ul)里装了多个小盒子(li)的常用写法
ul {
/*若父元素没有高度,要清除浮动*/
overflow:hidden
}
li {
float: left;
margin-right: 20px;
}
li:last-child {
margin-right: 0;
}
/*或者使用:not选择器*/
li:not(:last-child){
margin-right: 20px;
}
3.定位(position)
固定定位常用于弹框
弹框弹起时遮罩层样式,千万不要忘记写left:0,否则会出现左边有块是白色
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
子绝父相(子元素会相对于它最近的父元素进行移动)
子:position: absolute
父:position: relative
用于展示一些在某种事件下才显示出来的元素
.select{
position: absolute;
top: 40%;
left: 10px;
z-index: 999;
}
content必须要有,一个伪元素三角形
.select::before{
position: absolute;
content: '';
left:50%;
top:18px;
transform: translateX(-50%);
border-bottom: 9px solid #fff;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
}
结合动画使用(animation)
li {
position: relative;
.rotate {
position: absolute;
}
&:hover .turntable {
animation: spin 2s linear 2;
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}