首页 > 代码库 > css重要学习经验
css重要学习经验
<body>
<div class="slider">
<ul class="clearfix">
<li><a href="http://www.mamicode.com/#bg1">Hipster Fashion Haircut </a></li>
<li><a href="http://www.mamicode.com/#bg2">Cloud Computing Services & Consulting</a></li>
<li><a href="http://www.mamicode.com/#bg3">My haire is sooo fantastic!</a></li>
<li><a href="http://www.mamicode.com/#bg4">Eat healthy & excersice!</a></li>
<li><a href="http://www.mamicode.com/#bg5">Lips so kissable I could die ...</a></li>
</ul>
</div>
无css时候：
首先在
.slider li {
display: inline-block; //添加的inline-block使<li>元素成一行
width: 170px;
height: 130px;
margin-right: 15px;
}
接着添加
.slider a {
display: inline-block;//行内元素
width: 170px;
padding-top: 70px; //填充上边距70px
padding-bottom: 20px;
position: relative;
cursor: pointer;
border: 2px solid #fff; //外边框
border-radius: 5px;
vertical-align: top; //在inline-block行内元素里高对齐
color: #fff; //字体颜色
text-decoration: none; //消去下划线
font-size: 22px;
font-family: ‘Yesteryear‘, cursive;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3); //阴影
}
nth-of-type是个很重要的筛选函数
.wrapper > p:nth-of-type(2n){ background: orange;}
通过“:nth-of-type(2n)”选择器，将容器“div.wrapper”中偶数段数p的背景设置为橙色.slider li:nth-of-type(1) a {
background-color: #02646e;
}
.slider li:nth-of-type(2) a {
background-color: #eb0837;
}
.slider li:nth-of-type(3) a {
background-color: #67b374;
}
.slider li:nth-of-type(4) a {
background-color: #e6674a;
}
.slider li:nth-of-type(5) a {
background-color: #e61061;
}
参照慕课网十天学会css第七节练习题
css重要学习经验