仿百度首页并实现搜索功能
学了html和css之后没有做过什么大的项目,没有什么项目经验,所以决定从小的项目做起,然后做大的项目,循序渐进,增加自己的项目经历和增强自己的动手能力.
百度首页没有特别多的东西,所以仿起来比较容易,但是要做到完全一模一样还是要花费一些功夫的.
一 做一些准备工作:
1 编辑器:webstorm,浏览器:Chrome;
2 利用Chrome的Image downloader插件抓取百度首页的图片，作为素材。
3编程实现
二 项目的文件结构
百度首页
.
├── css
│ └── index.css
├── images
│ ├── a1.png
│ ├── bang.png
│ ├── bd_logo1_31bdc765.png
│ ├── copy_rignt.png
│ ├── favicon.ico
│ ├── image.png
│ ├── logo.png
│ ├── logo_top_ca79a146.png
│ ├── music.png
│ ├── tuiguang.png
│ ├── wenku.png
│ └── zhidao.png
└── index.html
三 代码
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度一下，你就知道</title> <!--标题栏的图标--> <link rel="shortcut icon" href="images/favicon.ico"/> <link rel="stylesheet" href="css/index.css"> </head> <body> <!--头部--> <div class="header"> <ul id="header_left"> <li> <a href="#"> 佛山： <img src="images/a1.png" alt="天气"> <span>27°C</span> <span style="color: #3388ff; font-weight: bold;">优</span> 43 </a> </li> <li> <a href="#">宝箱</a> </li> <li> <a href="#">换肤</a> </li> <li> <a href="#">消息</a> </li> <li> <a href="#">显示频道</a> </li> </ul> <div id="more_things"> 更多产品 <!--平常的时候处于隐藏状态,利用伪类,当鼠标放在上面的时候显示--> <ul> <li><a href="#"><img src="images/music.png" alt=""/>音乐</a></li> <li><a href="#"><img src="images/image.png" alt=""/>图片</a></li> <li><a href="#"><img src="images/zhidao.png" alt=""/>知道</a></li> <li><a href="#"><img src="images/wenku.png" alt=""/>文库</a></li> <li><a href="#"><img src="images/bang.png" alt=""/>风云榜</a></li> <li><a href="#"><img src="images/tuiguang.png" alt=""/>百度推广</a></li> <li><a href="#">全部产品>></a></li> </ul> </div> <ul id="header_right"> <li><a href="#">糯米</a></li> <li><a href="#">新闻</a></li> <li><a href="#">hao123</a></li> <li><a href="#">地图</a></li> <li><a href="#">视频</a></li> <li><a href="#">贴吧</a></li> <li><a href="#">凯里塔</a></li> <li><a href="#">设置</a></li> </ul> </div> <!--内容--> <div class="content"> <div class="logo"> <div><a href="http://www/baidu.com"><img src="images/logo.png" alt=""/></a></div> <!--利用百度提供的接口实现搜索功能,下面还需要添加js代码--> <form onsubmit="return baiduWithHttps(this)" action="http://www.baidu.com/baidu" target="_blank"> <input name="tn" type="hidden" value="SE_zzsearchcode_shhzc78w"> <input type="text" onfocus="checkHttps" name="word" size="30" id="search_text"> <input type="submit" value="百度一下" id="search_button"> </form> </div> </div> <!--底部--> <div class="footer"> <a href="#" id="sethome">设为首页</a> <span>©2015Baidu <a href="#">使用百度前必读</a></span> <a href="#">意见反馈</a> <span>京ICP证030173号</span> <img src="images/copy_rignt.png" alt=""/> </div> <!--百度搜索的js代码--> <script src="http://s1.bdstatic.com/r/www/cache/global/js/BaiduHttps_20150714_zhanzhang.js"></script> <script> function checkHttps() { BaiduHttps.useHttps(); } ; function baiduWithHttps(formname) { var data = BaiduHttps.useHttps(); if (data.s === 0) { return true; } else { formname.action = 'https://www.baidu.com/baidu' + '?ssl_s=1&ssl_c' + data.ssl_code; return true; } } ; </script> </body> </html>
index.css
* { margin: 0; padding: 0; } body { font-family: arial; } /*头部*/ .header { background-color: #ffffff; border: 1px solid #ebebeb; } /*头部左边*/ .header ul#header_left { font-size: 12px; float: left; padding:5px 0; } .header ul#header_left li { display: inline; margin-right: 19px; } .header ul#header_left li a { color: #555555; } /*控制第一个列表项*/ .header ul#header_left li:first-child { margin-left: 15px; border-right: 1px solid black; } .header ul#header_left li:first-child span { padding-left: 5px; padding-right: 5px; } .header ul#header_left li:first-child a { text-decoration: none; } /*更多产品*/ .header div#more_things { float: right; background-color: #398bfb; font-size: 13px; font-weight: bold; line-height: 34px; width: 66px; height: 30px; padding-left: 10px; color: #ffffff; } .header div#more_things ul{ list-style: none; padding: 0 0; color: #000000; display: none; } .header div#more_things ul img{ width:40px; height: 36px; margin:10px 13px 5px 13px; } .header div#more_things ul li a{ color: #000000; font-size: 12px; font-weight: normal; line-height: 14px; text-align: center; text-decoration: none; width: 66px; height:76px; display: block; border-bottom: 1px solid #f0f0f0; padding-right: 20px; } .header div#more_things ul li a:focus,.header div#more_things ul li a:hover{ text-decoration: underline; } .header div#more_things:hover{ color: #000000; background-color: #ffffff; } .header div#more_things:hover ul li a{ border-left: 1px solid #f0f0f0; } .header div#more_things:hover ul{ display: block; } /*头部右边*/ .header ul#header_right{ float:right; list-style: none; padding:5px 0; } .header ul#header_right li { display: inline; } .header ul#header_right li a{ color: #000; font-size: 13px; margin-left: 19px; } .header ul#header_right li:last-child { padding-right: 19px; } .header:after{ content: '.'; display: block; visibility: hidden; height: 0; clear:both; } div.content{ text-align:center; margin: 0px 143px; height:293.375px; width: 1000px; padding:0px 0px 370px 0px; } div.content img{ width:270px; height: 129px; margin:73px 0 0 0; bottom: 10px; left: 50%; } div.content input#search_text{ width:525px; height:20px; border-left:1px solid #3388ff; border-top:1px solid #3388ff; border-bottom:1px solid #3388ff; border-right: none; padding: 9px 7px; display:inline-block; font-size:16px; vertical-align:top; margin-top: 14px; padding-right: 0px; margin-right: 0px; } div.content input#search_button{ margin-top: 14px; width: 102px; height:40px; line-height:38px; font-size: 16px; text-align:center; background-color:#317ef3; border: none; border-bottom: 1px solid #2868c8; display: inline-block; color:#ffffff; padding-left: 0px; margin-left: 0px; position: relative; left: -5px; } div.footer{ width:100%; height:17px; font-size:12px; text-align: center; color:#999999; margin-bottom:12px; } div.footer a{ color:#000; text-decoration: none; color:#999999; } div.footer > a:first-child{ color:#0079f5; } div.footer a:focus,div.footer a:hover{ text-decoration:underline; }
四 资源下载http://download.csdn.net/detail/u013073714/9269899
转载请注明出处:http://www.cnblogs.com/kerita/p/4966191.html
