图文混排

2022/4/8 23:19:32

编程Tag： 网页 css 制作 content height padding 图文混排

本文主要是介绍图文混排，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图文混排-陈敏芳</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body{
font-size: 12px;
line-height: 150%;
color: #666666;
}
a {
color: #003399;
text-decoration: none;
}
a:hover{
color: #999900;
}/*全局样式设置*/
.box{
width: 300px;
margin: 10px auto;
border: 1px soild #ccc;
}
.box h2{
font-size: 12px;
background: #f7f7f7;
padding-left: 5px;
}
.content {
padding: 5px;
}
.box h2, .content ul li{
height: 25px;
line-height: 25px;
}
.content .text{
height: 140px;
margin-bottom: 5px;
}
.content .text a{
float: left;
padding-right: 8px;
}
.content ul li{
list-style: none;
border-top: 1px dotted #ddd;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="box">
<h2>图文混排</h2>
<div class="content">
<div class="text">
<a href="#"><img src="素材.jpeg" width="90px" height="127px" alt="不能正常显示图片"></a>
<a href="#">网页设计与制作</a>
<br>
<p>本书是一本基于Web标准的运用CSS制作网站的教材。本书由吴丰编写，全书以实例为主，从理论到实践，使读者重新认识网页制作过程.</p>
</div>
<ul class="list">
<li><a href="#" target="_blank">网页设计与制作（第五版）</a></li>
<li><a href="#" target="_blank">网页设计与制作（Dreamweaver CS5版）</a></li>
<li><a href="#" target="_blank">精通CSS</a></li>
<li><a href="#" target="_blank">HTML XHTML CSS 基础教程（第6版）</a></li>
<li><a href="#" target="_blank">网页设计与制作</a></li>
<li><a href="#" target="_blank">CSS入门</a></li>
<li><a href="#" target="_blank">超越CSS：WEB设计艺术精髓</a></li>
</ul>
</div>
</div>
</body>
</html>

输出结果：

这篇关于图文混排的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

图文混排

相关编程文章