请老师帮我看一下代码哪里需要优化

老师，您好。

请您帮我看一下代码中哪里需要优化，感谢。

代码见下方：

<!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>

Amanda_Ding 2019-02-24

源自：项目：网页布局案例 2-7 编程练习

收起

3回答

好帮手慕夭夭回答被采纳获得+3积分 2019-02-25 17:18:16

你好同学 , .pic>div你可以理解为是选择.pic的紧邻子元素 .这样就不会选中pic的孙子元素了 , 如果同学还不熟悉 ,建议参考前面课程中的教辅学习一下 , 并自己写几行代码测试一下效果 ,能够帮助自己巩固 :

地址 :http://file.mukewang.com/class/assist/184/3661251/css%20%E9%80%89%E6%8B%A9%E5%99%A8%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C.pdf

希望对你有帮助 , 祝学习愉快 ,望采纳 .

收起回答

提问者 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>

最终前端还是有误，具体显示如下图：

还请您再详解一下，感谢。

收起回答

好帮手慕夭夭 2019-02-25 12:04:54

你好同学 , 代码中两个图片的盒子都设置了浮动 , 所以不需要在使用定位了 ,之所以盒子浮动后第二个被挤下去 ,是因为父容器盒子宽度太小了 ,如下调整 :

大盒子的宽度与上面的标题盒子宽度保持一致 ,高度可以去掉 ,

如上完善一下吧 , 祝学习愉快 ,望采纳 .

收起回答

提问者 Amanda_Ding #1

您好，感谢您的回答。已按照您提供的答案优化了代码，但是前端显示还是有问题，具体见上方回复内容。

2019-02-25 12:31:03
好帮手慕夭夭回复提问者 Amanda_Ding #2

你好同学 , 老师看了一下同学修改后的代码 , 第二张截图中的修改代码同学还没有去修改呢 , 再按照第二张截图中的代码完善一下哦 .

2019-02-25 13:40:40
提问者 Amanda_Ding 回复好帮手慕夭夭 #3

感谢您的答案，已按照图2进行修改，并得到最终的正确实现效果。现有一个问题：由于之前的课程内容中好像没有教授类似于【.main .pic>div{....}】里“>”的用法，请问这个“>”是怎么回事？具体的用法有哪些？

2019-02-25 16:50:49