开发
项目背景图
html,body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: url(..) no-repeat center;
background-size: cover;
}
表单居中
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
居右布局
display: flex;
justify-content: flex-end;
子绝父相
固定布局
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
max-width: 540px;
min-width: 320px;
height: 44px;
width:100%;
background-color: pink;
精灵图
.my::before{
width: 23px;
height: 23px;
content:"";
display:block;
background: url('../images/sprite.png') no-repeat -59px -194px;
background-size: 104px auto;
margin: 5px auto 0;
}
加影子
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
标签属性修饰
a{
text-decoration: none;
}
div{
box-sizing: border-box;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
重复样式的快捷写法
.local-nav li [class^="local_icon"] {
width: 32px;
height: 32px;
margin-top: 8px;
background-color: pink;
background: url(../images/localnav_bg.png) no-repeat 0 0;
background-size: 32px auto;
}
.local-nav li .local_icon2 {
background-position: 0 -32px;
}
文字阴影
text-shadow: 1px 1px rgba(0, 0, 0, .2);
灵活运用伪元素
.nav-item a:nth-child(1){
border-bottom: 1px solid #fff;
}
.nav-item:nth-child(1) a{
border: none;
}
背景渐变
background: -webkit-linear-gradient(left,lightblue,pink);
字体不显示
// 1.
text-indent: -999px;
// 2.
font-size: 0;
旋转箭头
.more::after{
content: "";
position: absolute;
top: 9px;
right: 9px;
width: 7px;
height: 7px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}