一、H1
html标题标签有h1、h2、h3······h6，特点是默认加粗，有上下留白。默认有换行。
二、css
1. padding
内边距，不写参数代表四周。
2. border-bottom
下边框。
3. float
往往和html中父级节点的 overflow:auto; 联用，确保父级节点的高度。
三、ul
< ul > 标签定义无序列表。
将 < ul > 标签与 < li > 标签一起使用，创建无序列表。
四、工程代码
1. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>News 1021</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div id="wrapper">
<div class="header"></div>
<div class="main">
<div class="news1">
<div class="moduletitle">
<h1>张艺兴</h1>
<strong>Lay-Z</strong>
</div>
<div class="content">
<div class="mcline1">
<img src="img/zyx(2).JPG" />
<span>张艺兴|以高品质对待舞台，以高标准引领风暴，新鲜视角解读“舞”力，专业态度鉴证“舞”魂，今晚22:00 ，张艺兴《舞蹈风暴》高能来袭。</span>
</div>
<ul class="mcline2">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
</ul>
</div>
</div>
<!--第二个新闻列表-->
<div class="news2">
<div class="moduletitle">
<h1>张艺兴</h1>
<strong>Lay-Z</strong>
</div>
<div class="content">
<div class="mcline1">
<img src="img/zyx(5).JPG" />
<span>张艺兴|引领非凡风暴，鉴证无限可能。张艺兴《舞蹈风暴》初亮相，转换舞台，依旧是舞蹈世界里敢为人先的探寻者。</span>
</div>
<ul class="mcline2">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
</ul>
</div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
2. main.css
.main{
width: 700px;
margin: auto; /* 自动居中 */
}
.main .news1{
width: 300px;
border: 1px solid #ccc;
float: left;
margin-left: 10px;
padding: 10px;
}
.main .news2{
width: 300px;
border: 1px solid #ccc;
float: left;
margin-left: 10px;
padding: 10px;
}
.main .news1 img{
float: left;
width: 50%;
}
.main .news2 img{
float: left;
width: 57%;
}
.main .news1 .moduletitle{
padding-bottom: 5px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.main .news2 .moduletitle{
padding-bottom: 5px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.main .news1 .moduletitle h1{
color: cadetblue;
margin-bottom: 3px;
}
.main .news2 .moduletitle h1{
color: cadetblue;
margin-bottom: 3px;
}
.main .news1 .moduletitle strong{
color: #ccc;
}
.main .news2 .moduletitle strong{
color: #ccc;
}
.main .news1 .content .mcline1{
background-color: #eee;
overflow: auto;
}
.main .news2 .content .mcline1{
background-color: #eee;
overflow: auto;
}
.main .news1 .content .mcline1 span{
width: 120px;
padding: 10px;
float: left;
}
.main .news2 .content .mcline1 span{
width: 105px;
padding: 10px;
float: left;
}
.main .news1 .content ul{
margin: 10px;
padding: 20px;
}
.main .news1 .content ul li{
margin-bottom: 10px;
}
.main .news2 .content ul{
margin: 10px;
padding: 20px;
}
.main .news2 .content ul li{
margin-bottom: 10px;
}
3. 运行效果
