老师帮忙看看有什么需要改进优化

老师帮忙看看有什么需要改进优化

<!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>慕课网</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

ul {list-style: none;}

a {

color: white;

text-decoration: none;

font-family: 微软雅黑;

font-size: 20px;

}

body{background: #ADD8E6;}

.header{

width: 100%;

height: 100%;

background: black;

overflow: hidden;

zoom: 1;

min-width: 800px;

}

.logo{

height: 100px;

float:left;

}

.nav{

height: 100px;

float:right;

}

.logo img{display: block;}

.nav ul{

overflow: hidden;

zoom: 1;

margin-right:40px;

}

.nav ul li{

float: left;

}

.nav ul li a{

padding:0 20px;

height: 100px;

line-height: 100px;

display: block;

}

.main{

width: 100%;

height: 600px;

overflow: hidden;

zoom: 1;

margin: 0 auto;

max-width: 1000px;

}

.left{

float: left;

line-height: 40px;

width: 400px;

padding-top:100px;

margin-right:20%;

}

.right{

float: left;

line-height: 40px;

width: 400px;

padding-top:100px ;

}

.left ul li span{

background: #FF9999;

}

.footer{

width: 100%;

background: black;

position: fixed;

bottom: 0px;

overflow: hidden;

zoom: 1;

line-height: 100px;

}

.flist{

height: 100px;

text-align: center;

}

.flist li{

display: inline;

margin-right: 20px;

}

.flist li a{

padding:0px 20px;

}

</style>

</head>


<body>

<div class="header">

<div class="logo">

<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" />

</div>

<div class="nav">

<ul>

<li><a href="#">课程</a></li>

<li><a href="#">职业路径</a></li>

<li><a href="#">实战</a></li>

<li><a href="#">猿问</a></li>

<li><a href="#">手记</a></li>

</ul>

</div>

</div>

<div class="main">

<div class="left">

<h2>课程推荐</h2>

<ul>

<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;HTML5与CSS3实现动态网页</li>

<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;零基础入门Android语法与界面</li>

<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;IOS基础语法与常用控件</li>

<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;PHP入门开发</li>

<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;JAVA入门开发</li>

</ul>

</div>

<div class="right">

<h2>相关课程</h2>

<ul>

<li>HTML&nbsp;&nbsp; CSS&nbsp;&nbsp; JavaScript</li>

<li>HTML5&nbsp;&nbsp; CSS3&nbsp;&nbsp; jQuery</li>

<li>移动端基础&nbsp;&nbsp; 移动端APP开发</li>

</ul>

</div>

</div>

<div class="footer">

<ul class="flist">

<li><a href="#">网站首页</a></li>

<li><a href="#">企业合作</a></li>

<li><a href="#">人才招聘</a></li>

<li><a href="#">联系我们</a></li>

<li><a href="#">常见问题</a></li>

<li><a href="#">友情链接</a></li>

</ul>

</div>

</body>


</html>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

你好同学,整体页面效果实现的很棒。不需要优化了,继续加油。祝学习愉快 !

  • 二十咚咚 提问者 #1
    你好老师,我缩小放大游览器或者缩放游览器窗口,网页内容会出现一些变化,这些是到后面的响应式才会学习解决嘛?
    2019-05-08 15:56:14
  • 好帮手慕夭夭 回复 提问者 二十咚咚 #2
    没错哦,自适应是后面移动端布局的课程。本阶段的练习页面只有在电脑端正常显示即可。不需要考虑缩小的问题。到了后面阶段,移动端布局再去考虑。
    2019-05-08 19:54:21
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师