老师麻烦检查下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
h3{
text-align: center;
font-size: 30px;
}
div{
position: relative;
float: left;
padding: 10px;
height: 500px;
}
p{
text-align: left;
font-size: 16px;
font-weight: bolder;
position: absolute;
margin: 0;
left: 0;
top: 0;
left: 0;
right: 0;
padding-top: 256px;
margin-left: 10px;
}
</style>
</head>
<body>
<div>
<h3>ENJOY THE LIFE</h3>
<dl>
<div class="list-one">
<dt > <img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg" ></dt>
<dd >
<p>Life is like a book ,just read more and more <br>refined more write more carecfully
. When read <br>mind open all things have been indifferent to <br>hear .Life is the precipition</p></dd>
</div>
<div class="list-two">
<dt> <img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg" ></dt>
<dd>
<p>
Life is like a book ,just read more and more <br>refined more write more carecfully
. When read <br>mind open all things have been indifferent to <br>hear .Life is the precipition</p></dd>
</div>
</dl>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，代码实现效果基本可以，不过以下几点需要注意一下：
1、设置样式之前建议清除元素默认的margin和padding，以免影响页面布局，如图
2、建议外层div盒子与内层div盒子的样式分开设置，外层div盒子用于页面分区，不宜设置浮动。
给外层div元素设置class类名，并单独设置宽度和水平居中属性，如图
3、标签嵌套问题：根据标签嵌套规则，建议dl标签中只嵌套dt和dd标签，不建议嵌套其他标签，如图
4、文字部分的样式，建议参考如下代码简化一下，如图
祝学习愉快！
-
豆包侠 #1
老师 我按照你说的更改了下 可是效果都没了 这是咋回事
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
h3{
text-align: center;
font-size: 30px;
}
.box{
width: 892px;
margin: 0 auto;
}
.box div{
position: relative;
float: left;
padding: 10px;
height: 500px;
}
p{
text-align: left;
font-size: 16px;
font-weight: bolder;
}
</style>
</head>
<body>
<div class="box">
<h3>ENJOY THE LIFE</h3>
<dl>
<dt > <img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg" ></dt>
<dd ><p>
Life is like a book ,just read more and more <br>refined more write more carecfully
. When read <br>mind open all things have been indifferent to <br>hear .Life is the precipition</p></dd>
<dt> <img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg" ></dt>
<dd>
<p> Life is like a book ,just read more and more <br>refined more write more carecfully
. When read <br>mind open all things have been indifferent to <br>hear .Life is the precipition</p></dd>
</dl>
</div>
</body>
</html>
2021-09-02 10:11:35
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星