请问老师有需要修改或优化的地方吗?
来源：2-7 编程练习
小小代码员
2019-08-07 11:32:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/*此处写代码*/
*{
padding: 0;
margin: 0;
}
.container{
width: 1200px;
height: 400px;
margin: 0 auto;
position: relative;
}
.container h3{
text-transform: uppercase;
padding-bottom: 30px;
text-align: center;
}
dl img{
display: block;
width: 426px;
height: 240px;
}
dl.left{
float: left;
margin-left: 150px;
}
dl.right{
float: right;
margin-right: 150px;
}
dl dt{
width: 426px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<h3>life is like a book</h3>
<dl class="left">
<dd>
<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg" alt="">
</dd>
<dt>life is like a book,justread more and morelife is like a book,justread more and morelife is like a book,justread more and morelife is like a book,justread more and more</dt>
</dl>
<dl class="right">
<dd>
<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg" alt="">
</dd>
<dt>life is like a book,justread more and morelife is like a book,justread more and morelife is like a book,justreadmore and morelife is like a book,justread more and more</dt>
</dl>
</div>
</body>
</html>
1回答
-
同学你好， 代码整体效果实现的不错。
建议优化： 可以给标题添加一个上内边距， 让标题上方有一定的空白间距， 让显示效果更好哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
0
相似问题