请老师帮我看一下代码哪里需要优化
老师，您好。
请您帮我看一下代码中哪里需要优化，感谢。
代码见下方：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.main{
width:600px;
height:320px;
margin:0 auto;
}
.main .title{
width:600px;
text-align:center;
font-weight:bold;
font-size:20px;
color:black;
padding-top:30px;
padding-bottom:30px;
}
.main .pic{
width:280px;
height:160px;
font-size:12px;
font-weight:bold;
float:left;
position:relative;
}
.main .pic .left{
position:absolute;
float:left;
}
.main .pic .right{
float:left;
padding-left:310px;
}
.main img{
width:280px;
height:160px;
padding-bottom:5px;}
</style>
</head>
<body>
<div class="main">
<div class="title">ENJOY YOUR LIFE</div>
<div class="pic">
<div class="left">
<img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg" />
<div class="des1">Life is like a book,just read more and more refined,more write more carefully.When read,mind open,things have been indifferent to heart.Life is the precipitation.</div>
</div>
<div class="right">
<img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg" />
<div class="des2">Life is like a book,just read more and more refined,more write more carefully.When read,mind open,all things have been indifferent to heart.Life is the precipitation.</div>
</div>
</div>
</body>
</html>0
收起
正在回答
3回答
你好同学 , .pic>div你可以理解为是选择.pic的紧邻子元素 .这样就不会选中pic的孙子元素了 , 如果同学还不熟悉 ,建议参考前面课程中的教辅学习一下 , 并自己写几行代码测试一下效果 ,能够帮助自己巩固 :
希望对你有帮助 , 祝学习愉快 ,望采纳 .
Amanda_Ding
2019-02-25 12:32:55
@灰灰520 ，您好
按照您给的建议已做优化的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.main{
width:590px;
height:320px;
margin:0 auto;
}
.main .title{
width:600px;
text-align:center;
font-weight:bold;
font-size:20px;
color:black;
padding-top:30px;
padding-bottom:30px;
}
.main .pic{
/* width:280px;
height:160px; */
width:600px;
padding:10px;
font-size:12px;
font-weight:bold;
float:left;
/* position:relative; */
}
/* .main .pic .left{
position:absolute;
float:left;
}
.main .pic .right{
float:left;
padding-left:310px;
} */
.main img{
width:280px;
height:160px;
padding-bottom:5px;}
</style>
</head>
<body>
<div class="main">
<div class="title">ENJOY YOUR LIFE</div>
<div class="pic">
<div class="left">
<img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg" />
<div class="des1">Life is like a book,just read more and more refined,more write more carefully.When read,mind open,things have been indifferent to heart.Life is the precipitation.</div>
</div>
<div class="right">
<img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg" />
<div class="des2">Life is like a book,just read more and more refined,more write more carefully.When read,mind open,all things have been indifferent to heart.Life is the precipitation.</div>
</div>
</div>
</body>
</html>最终前端还是有误，具体显示如下图：
还请您再详解一下，感谢。
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星