一；再次练习文章
编码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>国际在线</title>
<style >
#conter{
width: 700px;
height: 200px;
margin: 0px 40px;
}
.page{
text-indent: 30px;
}
#first{
/*字体的颜色*/
color: #ff0000;
/*字体的大小*/
font-size: 30px;
/*上下的距离也就是行间距*/
line-height: 100px;
/*字间距*/
letter-spacing: 10px;
}
</style>
</head>
<body>
<div id="conter">
<h1 id="first">×××与新闻工作者：那些难忘的瞬间</h1>
<p class="page">
原标题：×××与新闻工作者；那些难忘的瞬间
</p>
<p class="page">
新华网记者 黄月 王子恢
</p>
<p class="page" id="a">
<!-- <u></u>这是标注的下划线 -->
<u>[学习进行时]11月8日是第十七届中国记者节。×××一直关系新闻工作者，近一年见，在人民日报社、新华社、中央电视台等媒体调研考察时，他接触做多的就是一线编辑人员。一个个难忘的瞬间，浓缩着总书记对广大新闻工作者的关爱。</u>
</p>
<h4 id="second">看望获奖者，要求新闻工作者坚持“四项”</h4>
<p class="page" id="b">
</p>
</div>
</body>
</html>
第二；文章标题的使用
编码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>序列</title>
<style >
li{
text-align: center;
list-style: none;
width: 70px;
background-color: #ff0000;
float: left;
margin: 0 20px;
}
</style>
</head>
<body>
<div>
<ul>
<li>数学</li>
<li>高数</li>
<li>线性代数</li>
<li>概率分析</li>
</ul>
</div>
</body>
</html>
如图所示
三；文章标题栏的再次练习
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body,ul{
/*清除外边距和内边距。*/
margin: 0px;
padding: 0px;
}
#banner{
/*最长边框的宽度、高度、背景色*/
height: 50px;
width: 100%;
background-color: red;
}
#container{
/*标题栏的高度、宽度、外边距、背景色*/
width: 600px;
height: 50px;
/*margin: 0px auto;*/
background-color: red;
}
li{
list-style: none;
width: 60px;
height: 50px;
/* background-color: blue; */
float: left;
margin-right:3px;
color: white;
/*垂直居中、左右居中*/
text-align: center;
line-height: 50px;
}
li:hover{
background-color: orange;
}
</style>
</head>
<body>
<div id="banner">
<ul id="container">
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>政治</li>
<li>化学</li>
</div>
</body>
</html>
自己练习 51CTO的 标题栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
<style>
div{
width: 1500px;
margin: 0px auto;
background-color: #ff0000;
}
li{
/*去掉点*/
list-style: none;
/*这是字体的宽度*/
width: 90px;
height: 50px;
/*行高*/
line-height: 50px;
background-color: #be0000;
/*字体的外边框*/
margin: 0px 0px;
float: left;
/*字体与背景居中*/
text-align: center;
/*字体大小*/
font-size: 20px;
color: #ffffff;
}
</style>
</head>
<body>
<div>
<ul>
<li>新闻</li>
<li>云计算</li>
<li>大数据</li>
<li>移动</li>
<li>网络</li>
<li>安全</li>
<li>系统</li>
<li>开发</li>
<li>服务器</li>
<li>存储</li>
<li>数据库</li>
<li>虚拟化</li>
<li>商务办公</li>
<li>CIOage</li>
<li>读书</li>
</ul>
</div>
</body>
</html>
如图所示
心得体会：
多加练习，熟悉套路！
