请老师看下哪些地方需要改进

来源:2-10 编程练习

慕瓜6889430

2019-11-24 21:57:58

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>页面布局2-10</title>

<style type="text/css">

*{

padding:0;

margin:0;

}

ul li{

list-style:none;

}

.header{

width:100%;

height:100px;

background:black;

color:white;

}

.logo{

width:200px;

height:100px;

float:left;

}

.nav{

float:right;


}

.nav ul li{

float:left;

line-height:100px;

padding-right:40px;

}

.main{

width:100%;

height:430px;

background:#87ceeb;


}

.left{

width:50%;

height:430px;

float:left;

display:table;

}

.con-left{

display:table;

margin:0 auto;

padding-top:50px;

line-height:2em;

font-size:12px;

        }

        span{

        background:#FF6347;

        }

.right{

width:50%;

height:430px;

float:right;

}

.con-right{

padding-top:50px;

line-height:2em;

font-size:12px;

        }


        .footer{

        width:100%;

        height:100px;

        background:black;

        color:white;

        line-height:100px;


        }


       .footer ul{

        padding-left:20%;

       }


        .footer ul li{

        float:left;

        margin:0 auto;

        padding-left:50px; 

        }


</style>

</head>

<body>

   <!-- 页面头部 -->

   <div class="header">

      <div class="logo"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></div>

      <div class="nav">

      <ul>

      <li>课程</li>

            <li>职业路径</li>

            <li>实战</li>

            <li>猿问</li>

            <li>手记</li>

      </ul>

      </div>

   </div>

   <!-- 页面主体 -->

   <div class="main">

    <!-- 左侧部分 -->

    <div class="left">

       <div class="con-left">

    <h3>课程推荐</h3>

    <p><span>职业路径</span> HTML5与CSS3实现动态网页</p>

    <p><span>职业路径</span> 零基础入门Android语法与界面</p>

    <p><span>职业路径</span> IOS基础语法与常用控件</p>

    <p><span>职业路径</span> PHP入门开发</p>

    <p><span>职业路径</span> JAVA入门开发</p>

       </div>

    </div>

    <!-- 右侧部分 -->

    <div class="right">

       <div class="con-right">

    <h3>相关课程</h3>

    <p>HTML CSS JavaScript</p>

    <p>HTML5 CSS3 Jquery</p>

    <p>移动端基础 移动端APP开发</p>

      </div>

    </div>

   </div>

   <!-- 页面底部 -->

   <div class="footer">

    <ul>

            <li>网站首页</li>

            <li>企业合作</li>

            <li>人才招聘</li>

            <li>联系我们</li>

            <li>常见问题</li>

            <li>友情链接</li>

        </ul>  

   </div>

</body>

</html>


写回答

1回答

好帮手慕夭夭

2019-11-25

同学你好,代码需要完善的地方参考如下:

1.列表文字太小了,建议把如下属性去掉,文字显示默认的效果更好

http://img.mukewang.com/climg/5ddb40d909548e0a03890243.jpg

http://img.mukewang.com/climg/5ddb40e3096262fe03320171.jpg

2.尾部内容没有整体居中

http://img.mukewang.com/climg/5ddb414d0999fd0519060115.jpg

如下设置:

http://img.mukewang.com/climg/5ddb41460972f7b108030500.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程