您的位置：首页 > Web前端

【Happy-coder的前端学习日记】首次实例练习-百度首页

2019-08-23 23:21 274 查看

百度首页-前端首次实例练习

最近边工作边学习前端，由于租的房子到公司需要一个小时的地铁车程（龙华到固戍），所以学习的时间基本是在上下班的地铁上和晚上到家的一两个小时。本篇文章是初步学习了HTML+CSS后自己码的百度首页，代码较冗余，用了非常多的选择器，布局也不是特别轻盈。今晚敲出来的第一个页面让我想起了大学里学C语言时第一次敲出来的“HELLO WORLD！”画面，还是有点兴奋的！

菜鸡代码，纪念一下，过两个月后再来反省。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度首页练习</title>
<style>

div{
text-align:center;
}
.header{
height:250px;
}
.content{
height:200px;
}
.nav{
height:50px;
font-size:20px;
}
.ic{
height:30px;
}
.wenku{
height:30px;
}
.tuiguang{
height:30px;
}
.zhuye{
height:30px;
}
.chihe{
height:40px;
}
.shuru{
height:50px;
}
input[type=text]{
width:700px;
height:30px;
}
input[type=submit]{
width:70px;
height:30px;
}
img[src="baidulogo.png"]{
height:200px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="baidulogo.png" alt="baidu" >
</div>
</div>
<div class="nav">
<a href="http://news.baidu.com/">新闻</a>
网页
<a href="http://tieba.baidu.com/">贴吧</a>
<a href="https://zhidao.baidu.com/">知道</a>
<a href="http://music.taihe.com/">音乐</a>
<a href="http://image.baidu.com/">图片</a>
<a href="http://v.baidu.com/">视频</a>
<a href="https://map.baidu.com/@12697919.69,2560977.31,12z">地图</a>
</div>
<div class="content">
<div class="shuru">
<input type="text" name="" id=""  >
<input type="submit" value="百度一下">
</div>
<div class="wenku">
<a href="https://baike.baidu.com/">百科</a>
|
<a href="https://wenku.baidu.com/">文库</a>
|
<a href="https://www.hao123.com/">hao123</a>
|
<a href="https://www.baidu.com/more/">更多>></a>
</div>
</div>
<div class="chihe">
<img src="ic.jpg" alt="" class="ic">
<a href="https://koubei.baidu.com/">百度地图带你吃喝玩乐，全心全意为人民服务</a>
</div>
<div class="zhuye">
<a href="#">把百度设为主页</a>
<a href="https://srf.baidu.com/default/">百度输入法</a>
</div>
<div class="tuiguang">
<a href="#">加入百度推广</a>
|
<a href="#">搜索风云榜</a>
|
<a href="#">关于百度</a>
|
<a href="#">About Baidu</a>
</div>
<div>@2016Baidu 使用百度前必读  京ICP证666号</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航