总觉得自己代码写的很繁杂 有很多冗余的地方 请问老师我的代码有哪些可以改进的地方
来源：2-12 编程练习
Secret_17
2019-11-21 14:56:10
总觉得自己代码写的很繁杂 有很多冗余的地方 很多地方不能跟题目完全一致的实现 请问老师我的代码有哪些可以改进的地方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习</title>
<style type="text/css">
*{margin: 0px;
padding: 0px;}
html,body {
height: 100%;
background-color: #00FFFF;
}
.header{background-color: #000;
width: 100%;
height: 100px;
}
.header ul {
float: right;
display: inline-block;
line-height: 100px;
color: #fff;
font-size: 20px;
margin: 0;
}
.header ul li{display: inline-block;
margin: 0 20px;}
.container{
position: relative;
margin: 0 auto;
background-color: #FFF;
height: 100%;
width:100%;
padding-top: 0px;
}
.a{height: 100%;width:33%;
float: left;
background-color: #00FFFF;
}
.b{height: 100%;width:33%;
background-color: #00FFFF;
float: left;
right: 0;}
.c{height: 100%;width:34%;
background-color: #00FFFF;
float: left;
right: 0;}
.foot{
position: relative;
background-color: #000;
bottom: 0px;
height: 100px;
width: 100%}
.foot ul{color: #fff;
position: absolute;
width: 1000px;
line-height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.foot ul li{
display: inline-block;
list-style-type: none;
float: left;
margin:0 80px;
}
.contg-1{
float: right;
padding: 50px 50px 0 0;
}
.contg-3{width: 250px;
margin: 50px auto;
}
.contg-1 ul li{
margin-top: 50px;
}
.contg-1 ul li span{
background: red;
}
.contg-3 div{margin-top: 10px;
}
</style>
</head>
<body>
<div class="header">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="">
<ul>
<li>牛逼</li>
<li>牛逼</li>
<li>牛逼</li>
<li>牛逼牛逼</li>
<li>牛逼</li>
</ul>
</div>
<div class="container">
<div class="a">
<dvi class="contg-1">
<h1>课程推荐</h1>
<ul type="none">
<li><p><span>职业道路</span> HTML5与CSS3实现动态网页</p></li>
<li><p><span>职业道路</span> 零基础入门Android语法与界面</p></li>
<li><p><span>职业道路</span> iOS基础语法与常用控件</p></li>
<li><p><span>职业道路</span> PHP入门开发</p></li>
<li><p><span>职业道路</span> JAVA入门开发</p></li>
</ul>
</dvi>
</div>
<div class="b">
<dvi class="contg-1">
<h1>课程推荐</h1>
<ul type="none">
<li><p><span>职业道路</span> HTML5与CSS3实现动态网页</p></li>
<li><p><span>职业道路</span> 零基础入门Android语法与界面</p></li>
<li><p><span>职业道路</span> iOS基础语法与常用控件</p></li>
<li><p><span>职业道路</span> PHP入门开发</p></li>
<li><p><span>职业道路</span> JAVA入门开发</p></li>
</ul>
</dvi>
</div>
<div class="c">
<div class="contg-3">
<h1>登陆</h1>
<form>
<div><input type="text" name="user" maxlength="30" placeholder="帐号" style="height: 3em; width: 250px;"></div>
<div><input type="password" name="pwd" maxlength="30" placeholder="密码" style="height: 3em;width: 250px;"></div>
<div>
<button style="width: 20px;height: 2.5em;width: 254px;background-color: red;color: #fff;font-size: 20px;" >登陆</button>
</div>
</form>
</div>
</div>
</div>
<div class="foot">
<ul>
<li>牛逼</li>
<li>牛逼</li>
<li>牛逼</li>
<li>牛逼牛逼</li>
<li>牛逼</li>
</ul>
</div>
</body>
</html>
2回答
-
同学你好，可以打开控制台查看，如下：
li里面的文字数量不同，宽度也不同，li宽度像加，即可得到ul的宽度
同学可以测试下。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0 -
好帮手慕言
2019-11-21
同学你好，可以参考如下：
1、主体右侧没有橘色的边框。建议：可以给类名为c的元素设置左边框。代码参考：
2、为了更美观，建议把登录按钮的边框去掉。
3、页脚区域的内容没有实现水平居中的效果。建议：ul元素的宽度可以设置为内容的总宽度。
代码参考：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
1h019-11-21
相似问题