收藏
批改状态：合格
老师批语：
3.23-常见的对齐方式及列表的应用！
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.23-常见的对齐方式及列表的应用！</title>
<style type="text/css">
.danhang {text-align:center;width:300px;height:200px;border:1px solid red;line-height:200px;float:left;}
.duo {text-align:center;width:350px;height:200px;border:1px solid yellow;display:table-cell;vertical-align:middle;}
.kuai{width:400px;height:200px;border:1px solid blue;display:table-cell;vertical-align:middle;}
.kuai .kz{width:200px;height:100px;background-color:cyan;margin:0 auto;text-align:center;line-height:100px;}
.bdk{width:500px;height:200px;background-color:lightblue;text-align:center;display:table-cell;vertical-align:bottom;}
.bdk ul li{list-style:none;display:inline;}
.new{border:1px solid brown;border-radius:5px;clear:both;width:350px;height:300px;}
.new h3{margin-left:10px;color:red;}
.new ul{list-style-image: url(images/tb.gif);padding:0 0 0 10px;margin:0px;font-size:0.9em;}
.new ul li{list-style-position:inside;}
.new ul li a{text-decoration:none;}
.new ul li a:hover{color:brown;font-size:1.05em;text-decoration:underline;}
</style>
</head>
<body>
<div class="danhang">这里是一个单本文件的水平和垂直居中！</div>
<div class="duo">
<a href="">这里是多行文件居中，这是第一行！</a><br>
<a href="">这里也是多行文本居中，这是第二行！</a>
</div>
<div class="kuai"><div class="kz">这里是一个块元素！</div></div>
<div class="bdk">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="new">
<h3>最新新闻 <small>news</small></h3>
<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>
<li><a href="">这里写的是新闻内容,点击时进入查看详情! >></a></li>
<li><a href="">这里写的是新闻内容,点击时进入查看详情! >></a></li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
