2-12编程练习 请老师看一下代码有哪里可以优化的地方吗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.nav{
width: 100%;
height: 100px;
background: black;
}
img{cursor: pointer;}
.navwordgroup{
float: right;
}
.navword{
display: inline;
color:white;
font:bold 22px/100px "宋体";
cursor: pointer;
margin: 30px;
}
.content{
width: 100%;
height: 600px;
background: #add8e6;
}
p{margin-top:20px;margin-bottom: 20px;}
span{cursor: pointer;margin-right: 20px;}
.special{background: #f99;}
.content_l{
width:33%;
height: 600px;
/*border: 1px solid red;*/
float:left;
position: relative;
}
.content_l_word{
position: absolute;
top:25%;
left: 30%;
}
.content_m{
width:33%;
height: 600px;
float: left;
position: relative;
}
.content_m_word{
position: absolute;
top:25%;
left: 30%;
}
.content_w{
width:1%;
height: 600px;
float: left;
background: #f99;
}
.content_r{
width:33%;
height: 600px;
float: right;
position: relative;
}
.content_r_word{
position: absolute;
top:25%;
left: 10%;
}
.scanf{font-size: 20px;margin-top: 20px;height: 50px;width: 360px;}
.sub{background: red;
color: white;
width: 360px;
height: 50px;
display: block;
font:22px "宋体";
margin-top:20px;}
.footer{
width: 100%;
height: 100px;
background: black;
text-align: center;
}
.footerword{
display: inline;
color: white;
font:16px/100px "宋体";
margin: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"/>
<div class="navwordgroup">
<div class="navword">课程</div>
<div class="navword">职业路径</div>
<div class="navword">实战</div>
<div class="navword">猿问</div>
<div class="navword">手记</div>
</div>
</div>
<div class="content">
<div class="content_l">
<div class="content_l_word">
<h1>课程推荐</h1>
<p><span class="special">职业路径</span><span>HTML5与CSS3实现动态网页</span></p>
<p><span class="special">职业路径</span><span>零基础入门Android语法与界面</span></p>
<p><span class="special">职业路径</span><span>iOS基础语法与常用控件</span></p>
<p><span class="special">职业路径</span><span>PHP入门开发</span></p>
<p><span class="special">职业路径</span><span>Java入门开发</span></p>
</div>
</div>
<div class="content_m">
<div class="content_m_word">
<h1>课程相关</h1>
<p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
<p><span>HTML5</span><span>CSS3</span><span>jQuery</span></p>
<p><span>移动端基础</span><span>移动端APP开发</span></p>
</div>
</div>
<div class="content_w"></div>
<div class="content_r">
<div class="content_r_word">
<h1>登录</h1>
<form>
<input type="text" name="login" placeholder="请输入登录邮箱/手机号" class="scanf" size="30" >
<input type="password" name="password" placeholder="6-16位密码，区分大小写，不能用空格" class="scanf" size="30" maxlength="16">
<!-- <input type="submit" name="submit" size="" size="20" class="sub"> -->
<button class="sub">登录</button>
</form>
</div>
</div>
</div>
<div class="footer">
<div class="footerword">网站首页</div>
<div class="footerword">企业合作</div>
<div class="footerword">人才招聘</div>
<div class="footerword">联系我们</div>
<div class="footerword">常见问题</div>
<div class="footerword">友情链接</div>
</div>
</body>
</html>34
收起
正在回答
3回答
如果要实现元素的位置，可以使用内外边距去调整。
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星