2-11编程练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
body{margin:0;padding:0;color:#fff;}
.header{width:100%;height:100px;background:black;position:fixed;top:0;}
.logo{width:300px;height:100px;background:url(http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png);float:left;}
.nav{float:right;line-height:100px;}
.nav a{text-decoration:none;font-family:"黑体";font-size:25px;padding:25px;}
.nav a:link,.footer a:link{color:#fff;}
.nav a:visited,.footer a:visited{color:#fff;}
.nav a:hover,.footer a:hover{color:#fff;}
.nav a:active,.footer a:active{color:#fff;}
.container{width:100%;height:1000px;background:#ffa07a;}
h2,p,form{margin:20px;padding:0;font-family:"微软雅黑";}
h2{font-weight:lighter;}
.left{width:28%;height:1000px;background:#add8e6;color:black;float:left;padding-left:10%;}
.left a,.middle a{text-decoration:none;}
.left a:link,.middle a:link{color:black;}
.left a:visited,.middle a:visited{color:black;}
.left a:hover,.middle a:hover{color:black;}
.left a:active,.middle a:active{color:black;}
.left a{padding:15px;}
span{background:#f08080;}
.middle{width:28%;height:1000px;background:#add8e6;color:black;float:left;}
.middle a{padding:20px;}
.middle h2{padding-left:20px;}
.right{width:33%;height:1000px;background:#add8e6;color:black;float:right;}
input{display:block;margin:20px;padding:10px;}
.right h2{padding-left:20px;}
.submit{width:260px;background:red;font-family:"微软雅黑";color:#fff;font-size:20px;border:0;}
.left,.middle,.right{padding-top:50px;}
.footer{width:100%;height:100px;background:black;line-height:100px;text-align:center;position:fixed;bottom:0;}
.footer a{text-decoration:none;font-family:"黑体";font-size:20px;padding:20px;}
.one{width:100%;height:100px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo"></div>
<div class="nav">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
<div class="one"></div>
<div class="container">
<div class="left">
<h2>课程推荐</h2>
<p><span>职业路径</span><a href="#">HTML5与CSS3实现动态网页</a></p>
<p><span>职业路径</span><a href="#">零基础入门Android语法与界面</a></p>
<p><span>职业路径</span><a href="#">iOS基础语法与常用控件</a></p>
<p><span>职业路径</span><a href="#">PHP入门开发</a></p>
<p><span>职业路径</span><a href="#">JAVA入门开发</a></p>
</div>
<div class="middle">
<h2>相关课程</h2>
<p><a href="#">HTML</a><a href="#">CSS</a><a href="#">JavaScript</a></p>
<p><a href="#">HTML5</a><a href="#">CSS3</a><a href="#">Jquery</a></p>
<p><a href="#">移动端基础</a><a href="#">移动端APP开发</a></p>
</div>
<div class="right">
<h2>登录</h2>
<form>
<input type="text" name="username" placeholder="请输入登录邮箱/手机号" size="35">
<input type="password" name="password" placeholder="6~16位密码，区分大小写，不能用空格" maxlength="16" size="35">
<input type="submit" name="submit" value="登录" class="submit">
</form>
</div>
</div>
<div class="one"></div>
<div class="footer">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</body>
</html>
老师我这样写有什么错误么 还可以优化么
另外一般这样的编程练习大概要花多久呢
正在回答
你好，实现的效果是可以的，关于代码优化：1、a四种状态的颜色是一样的，所以这里可以直接设置a，例：
2、中间右侧，建议：登录按钮可与登录密码的宽度设置一致，直接在样式中设置就好了哦。
3、建议：底部导航与顶部右侧的导航，可尝试使用ul列表设置下。
练习的时间不是固定的，主要看该部分的知识掌握，以及熟练程度，多多练习，会掌握的更加熟练滴
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星