《2018年10月26日》【连续387天】
标题:盒子模型复习,新闻列表实例练习;
内容:
<div class="nav">
<div class="cen"></div>
</div>
* {
margin: 0;
padding: 0;
}
/*padding : x y z d; (顺时针)
padding: x y z; (上 左右 下)
padding: x y; (上下 左右)*/
.nav {
padding: 100px;
height: 100px;
width: 100px;
color: green;
background-color: green;
}
.cen {
height: 100px;
width: 100px;
background-color: red;
}
.nav {
padding-left: 100px;
padding-top: 100px;
height: 200px;
width: 200px;
color: green;
background-color: green;
}
例子:
<div class="article">
<h1>New Aritcles</h1>
<ul>
<li><a href="#">javascript的魅力</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">平面设计</a></li>
<li><a href="#">链式编程</a></li>
<li><a href="#">DOM</a></li>
</ul>
</div>
* {
margin: 0;
padding: 0;
}
.article {
position: absolute;
top: 50%;
left: 50%;
margin-left: -205px;
margin-top: -142px;
border: 1px solid #ccc;
width: 380px;
height: 263px;
padding: 20px 15px 0;
}
.article h1 {
color: #202026;
font-size: 20px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-bottom: 12px;
}
li {
list-style: none;
}
.article ul li {
height: 38px;
line-height: 38px;
border-bottom: 1px dashed #ccc;
text-indent: 2em;
}
.article a {
font-size: 12px;
color: #333;
text-decoration: none;
}
.article a:hover {
text-decoration: underline;
}