从头开始学前端,先从小事做起,多写代码。
第一版:使用基本的html和css元素,在学完《html+css快速上手》后,可以将基本的元素配齐,和基本样式基本布局,但缺少对于块元素的排版,圆角边框等等。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="nav">
<div class="navleft">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">直播</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">学术</a>
<a href="#">更多</a>
</div>
<div class="navright">
<a href="#">设置</a>
<a href="#" id="login">登录</a>
</div>
<div class="clear"></div>
</div>
<div class="main">
<div class="pic">
<img src="images/1.png" alt="">
</div>
<div class="search">
<input type="text"/>
<input type="button" value="百度一下"/>
</div>
</div>
<div class="foot">
<a href="#">关于百度</a>
<a href="#">about BaiDu</a>
<a href="#">使用百度必读</a>
<a href="#">帮助中心</a>
<a href="#">京备10212222200</a>
</div>
</body>
</html>
Css代码
*{
margin: 0;
padding: 0;
}
.navleft{
float: left;
}
.navright{
float: right;
}
.nav a{
text-decoration: none;
color: black;
margin: 10px;
width: 30px;
height: 20px;
}
.nav a:hover{
color: blue;
}
#login{
background-color: #4E6EF2;
color: white;
}
.clear{
clear: both;
}
.main{
text-align: center;
}
.pic{
text-align: center;
}
.search{
text-align: center;
}
.foot{
position: fixed;
bottom: 0px;
}
.foot a{
text-decoration: none;
color: black;
}
第二版效果如下:
代码如下,基本只改了CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="nav ">
<div class="navleft">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">直播</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">学术</a>
<a href="#">更多</a>
</div>
<div class="navright">
<a href="#">设置</a>
<a href="#" id="login">登录</a>
</div>
</div>
<div class="main">
<div class="pic">
<img src="images/1.png" alt="">
</div>
<div class="search">
<div class="holder">
<input type="text" id="searchcontent"/>
<a href="#">百度一下</a>
</div>
</div>
</div>
<div class="foot">
<a href="#">关于百度</a>
<a href="#">about BaiDu</a>
<a href="#">使用百度必读</a>
<a href="#">帮助中心</a>
<a href="#">京备10212222200</a>
</div>
</body>
</html>
CSS代码:
*{
margin: 0;
padding: 0;
}
.navleft{
float: left;
height: 40px;
}
.navright{
float: right;
height: 40px;
}
.nav{
*zoom:1;
}
.nav::after{
clear: both;
content: "";
display: block;
height: 0;
visibility: hidden;
}
.navleft a{
font: 13px/23px Arial,sans-serif;
float: left;
text-decoration: none;
color: black;
margin: 10px;
padding: 5px;
}
.navright a{
font: 13px/23px Arial,sans-serif;
float: right;
text-decoration: none;
color: black;
margin: 10px;
padding: 5px;
}
.nav a:hover{
color: blue;
}
#login{
background-color: #4E6EF2;
color: white;
border-radius: 5px;
}
.main{
text-align: center;
}
.pic{
text-align: center;
}
.pic img{
width: 200px;
height: 100px;
}
.search{
text-align: center;
width:100% ;
height: 30px;
}
.foot{
position: fixed;
bottom: 0px;
}
.foot a{
padding-left: 150px;
text-decoration: none;
color: black;
}
.search{
text-align: center;
}
.holder{
display: inline-block;
}
#searchcontent{
height: 36px;
width: 500px;
float: left;
border-radius: 10px 0 0 10px;
border-width: 1px;
border-color: CEC7C4;
border-right: 0px;
}
.search a{
text-decoration: none;
display: inline-block;
width: 100px;
/*这里也可以使用基线对齐,height36px*/
height: 38px;
line-height: 36px;
text-align: center;
border-radius: 0px 5px 5px 0px;
font-family: "微软雅黑";
cursor: pointer;
background-color: #4E6EF2;
color: white;
float: left;
}
.search a:hover{
background-color: blue;
}
还有很多可以优化的,比如初始化浏览器样式,页面导航栏更加美化,注意样式表书写顺序,合并相同的定义,利用继承合并属性,去除多余标签等,这里就懒得一一实现了,毕竟模仿网页和自己构思个页面还是不一样,模仿贵在通过自己的实践达到相似效果,看源码会禁锢自己的想法,自己构思则可以多看源码,学习他人所长,这些编码细节我会多多在以后的编程实践中注意一下。按理应该优化到和百度首页一模一样的,但我决定加快进度,从下一个项目开始注意吧。
多说两句:今天看到一篇文章,大意是“程序员,别再卷了”,个人感觉,计算机和其他行业一样,都是一个很专业的职业,没有什么工作是轻松的,没有献身的决心,做什么事都做不好,世界虽大,并没有地方可供我们逃避。