老师我的代码还可以优化吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;font-family: "微软雅黑";}
.container{
width:100%;
height:1000px;
}
.header a,.foot a{
color:#FFF;
text-decoration:none;
}
/*网页头部*/
.header{
width:100%;
height:100px;
background-color:black;
position:fixed;
top:0;
}
/*头部导航*/
.nav{
height:100px;
float:right;
font-size:20px;
font-weight:bold;
line-height:100px;
}
.nav a{margin-right:30px;}
/*网页主体*/
.main{
width:100%;
height:1000px;
background:#87cefa;
}
/*主体左边内容*/
.left{
float:left;
width:25%;
height:850px;
margin-left:10%;
padding-top:150px;
}
.left span{
background-color:pink;
font-weight:bold;
}
.left div{
margin-top:20px;
}
.left div a{
text-decoration:none;
color:black;
}
/*主题中间内容*/
.center{
float:left;
width:20%;
height:850px;
margin-left:5%;
padding-top:150px;
}
.center div{
margin-top:20px;
}
/*粉色线条*/
.b{
float:left;
width:5px;
height:1000px;
background-color:pink;
margin-left:5%;
}
/*主体右边内容*/
.right{
float:right;
width:25%;
height:850px;
padding-top:150px;
margin-left:5%;
}
input{
display:block;
width:200px;
height:30px;
margin-top:15px;
font-size:10px;
}
.button{
background-color:red;
font-size:16px;
color:#FFF;
}
/*网页底部*/
.footer{
width:100%;
height:50px;
background-color:black;
position:fixed;
bottom:0;
font-size:16px;
font-weight:bold;
line-height:50px;
text-align:center;
}
.foot a{margin-left:20px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="cantainer">
<!--网页头部-->
<div class="header">
<a href="#"><img src="img/logo.png"/></a>
<div class="nav">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
<!--网页主体-->
<div class="main">
<!--主体左边内容-->
<div class="left">
<h1>课程推荐</h1>
<div><span>职业路径</span> <a href="#">HTML5与CSS3实现动态网页</a></div>
<div><span>职业路径</span> <a href="#">零基础入门Android语法与界面</a></div>
<div><span>职业路径</span> <a href="#">ios基础语法与常用控件</a></div>
<div><span>职业路径</span> <a href="#">PHP入门开发</a></div>
<div><span>职业路径</span> <a href="#">JAVA入门开发</a></div>
</div>
<!--主体中间内容-->
<div class="center">
<h1>相关课程</h1>
<div>HTML CSS Javascript</div>
<div>HTML5 CSS3 Jquery</div>
<div>移动端基础 移动端APP开发</div>
</div>
<!--粉色线条-->
<div class="b"></div>
<!--主体右边内容-->
<div class="right">
<h1>登录</h1>
<form>
<input type="text" name="name" placeholder="请输入登录邮箱/手机号"/>
<input type="password" name="paw" placeholder="6~16位密码，区分大小写，不能用空格"/>
<input type="button" name="dl" value="登录" class="button"/>
</form>
</div>
</div>
<!--网页底部-->
<div class="footer">
<div class="foot">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</div>
</div>
</body>
</html>还有哪里可以优化啊老师，另外按钮白边怎么去掉呢。请老师帮忙看看
0
收起
正在回答
1回答
1、html中尽量少用 可以使用如下方式，结合css完成
2、去掉按钮的白边问题，这个白边是按钮的默认边框，只需要给.button设置border:none;即可
祝学习愉快！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星