387day（盒子模型复习，新闻列表实例练习）

《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;
}