html+css实现百度首页（简单版）

从头开始学前端，先从小事做起，多写代码。
第一版：使用基本的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="data: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="data: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;
}

还有很多可以优化的，比如初始化浏览器样式，页面导航栏更加美化，注意样式表书写顺序，合并相同的定义，利用继承合并属性，去除多余标签等，这里就懒得一一实现了，毕竟模仿网页和自己构思个页面还是不一样，模仿贵在通过自己的实践达到相似效果，看源码会禁锢自己的想法，自己构思则可以多看源码，学习他人所长，这些编码细节我会多多在以后的编程实践中注意一下。按理应该优化到和百度首页一模一样的，但我决定加快进度，从下一个项目开始注意吧。
多说两句：今天看到一篇文章，大意是“程序员，别再卷了”，个人感觉，计算机和其他行业一样，都是一个很专业的职业，没有什么工作是轻松的，没有献身的决心，做什么事都做不好，世界虽大，并没有地方可供我们逃避。

html+css实现百度首页（简单版）相关推荐

HTML+CSS模仿百度首页
目录一实现界面二实现代码 2.1 baidu.html 2.1.1 盒子标签 2.1.2 超链接标签 2.1.3 列表标签 2.1.4 表单控件(表单元素) 2.2 baidu.css 2.2 ...
html+CSS之百度首页练习
废话不多说,上代码!!!!!!!!!!! 搜索框有点小小的bug,有会的大神麻烦评论区或私发一下.感谢!! 鼠标放在搜索框时,百度一下的按钮会有黑边. 源码: HTML代码: <!DOCTYPE ...
html+css 百度首页练习
这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口 ...
【HTML+CSS】练习：百度首页模拟
色块定位法通过style添加css,设置background-color,方便查看当前div在什么位置. 一个简单的小练习,复杂的部分全部使用截图. 整体布局百度首页模拟.html <htm ...
HTML+CSS实现百度网盘首页
HTML+CSS实现百度云盘首页 HTML <!DOCTYPE html> <html><head><meta charset="utf-8&quo ...
HTML+CSS基础知识简单版
HTML+CSS基础知识简单版一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
模仿百度首页页面（附带源码）html+css
文章目录前言一.实现界面二.代码 1.百度页面.html 2.baidu.css 三.图片总结前言链接:https://pan.baidu.com/s/1CVGAlba5xZdricUpI ...
html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
css top 定位百分比,css 使用relative设置top为百分比值的方法(仿百度首页)
前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现垂直伸缩 * ...
百度Al在线语音合成(简单版)
百度Al在线语音合成(简单版) 1.登录网址 https://ai.baidu.com/tech/speech/tts 点击跳转 2.登录百度账号并创建应用在应用列表创建新应用:全部默认.应用名称与 ...

html+css实现百度首页（简单版）

html+css实现百度首页（简单版）相关推荐

最新文章

热门文章