3.23CSS多种对齐方式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的多种对齐方式训练</title>
<style type="text/css" media="screen">
body{
height: 500px;
width: 400px;
}
.bt{
height: 30px;
width: 100%x;
background-color: skyblue;
/*行内文字居中*/
text-align: center;
}
.bj{
/*background-color: transparent;*/
background-image: url(images/1.jpg);
/*背景设置不重复,并铺满*/
background-repeat: no-repeat;
background-size: cover;
}
.sy{
height: 40px;
width: 100%;
text-align: right;
}
.lb{
height: 100px;
width: 100%;
/*列表剧中对其*/
margin: auto;
display: table-cell;
vertical-align: middle;
}
.lb ul{
/*无序列表模拟成有序列表*/
list-style-type: decimal;
}
.lb ul li{
/*列表间距拉大*/
padding: 5px;
}
.lb ul li a{
/*去除下划线*/
text-decoration: none;
}
.lb ul li a:hover{
/*鼠标移动到对应a标签，出现下划线字体颜色红色并放大*/
text-decoration: underline;
color: red;
font-size:1.1em;
}
</style>
</head>
<body>
<div class="bt">
<h2>畅销小说排行</h2>
</div>
<div class="bj">
<div class="sy">
<span><a href="">更多分类</a></span><br>
<span><a href="">点击查看总榜</a></span>
</div>
<div class="lb">
<ul>
<li><a href=" ">魔天</a></li>
<li><a href=" ">野村那些事儿</a></li>
<li><a href=" ">山村野花香</a></li>
<li><a href=" ">山村高手</a></li>
<li><a href=" ">乡村小仙医</a></li>
<li><a href=" ">天庭急救电话</a></li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码：
