仿新版百度首页，99%还原真实百度首页。

老规矩，首先上效果图

 效果还可以吧，

接下来我们要做的第一步 就是编写百度首页的HTML代码：

 

    
    
    
    
    
    



    

        新闻
        hao123
        地图
        视频
        贴吧
        登录
        设置
        更多产品
        

            

                搜索设置
                高级搜索
                关闭预测
                搜索历史
            
        
    
    

        

            
        
        

            
            
        
    
    

        

            把百度设为主页 
            关于百度 
            About Baidu
        
        

            ©2015 Baidu
            使用百度必读
            意见反馈
            鲁ICP证666666号
            
        
    

是不是感觉代码量有点少，

 

在夸你非常聪明的同时我想说：

我们毕竟没有100%还原百度首页，效果上也有所差别。

 

是不是你已经复制过去查看效果了，结果一看什么也不是。。。。

不要急嘛，让人家先去洗个澡收拾一下嘛，

一。。。。。。 这。。。 

 

不要想歪了，码这些代码有点热而已，仅此而已

把手拿上来放到键盘上，来看一下CSS代码吧：

 

body {
    margin: 0;
    padding: 0;
}

.top {
    margin-top: 20px;
    text-align: right;
}

.top a {
    color: #333;
    font-size: 13px;
    margin-right: 10px;
}

.top a span {
    font-weight: bold;
}

/*.top a:nth-child(1) {
    font-weight: bold;
}

.top a:nth-child(2) {
    font-weight: bold;
}

.top a:nth-child(3) {
    font-weight: bold;
}

.top a:nth-child(4) {
    font-weight: bold;
}

.top a:nth-child(5) {
    font-weight: bold;
}*/

.top a:hover {
    color: #0909F7;
}

.menu {
    display: none;
    background-color: red;
    margin-left: 90.5%;
    margin-top: .5%;
    font-size: 15px;
    position: relative;
    float: right;
    left: -66px;
    top: -7px;
    width: 80px;
    height: 115px;
    background-image: url(img/memu.png);
}

.inner {
    position: relative;
    left: -15px;
    top: 15px;
}

.more {
    height: 30px;
    width: 75px;
    background-color: #3385FF;
    font-size: 12px;
    color: #FFF;
    border: solid;
}

.midden {
    margin-top: 7%;
    text-align: center;
}

.midden img {
    width: 270px;
    height: 129px;
}

.count {
    margin-top: 20px;
    text-align: center;
}

#text {
    width: 540px;
    height: 30px;
    font-size: 16px;
}

.btn {
    height: 44px;
    width: 100px;
    background-color: #3385FF;
    font-size: 15px;
    color: #FFF;
    border: solid;
    margin-left: -10px;
    border-style: none\9;
    height: 36px\9;
}

.btn:hover {
    cursor: pointer;
}

.footing {
    text-align: center;
    margin-top: 20%;
}

.about a {
    color: #0909F7;
    font-size: 13px;
}

.info {
    margin-top: 10px;
}

.copyright {
    color: #575151;
    font-size: 12px;
    font-family: "΢ÈíÑźÚ";
}

.img1 {
    margin-left: -6px;
    margin-bottom: -4px;
}

到这里基本大功告成了，

 

我们再来添加一个文本框焦点的获取和简单的搜索功能。

 

window.onload = function() {
    document.getElementById('text').focus();
}

function keydown()
{
	if(event.keyCode==13)
		{document.getElementById('btn').click();return false;}
}

function message() {
    // $("#text").val();
    // alert($("#text").val());
    location.href = "http://www.baidu.com/s?wd=" + $("#text").val() + "&ie=UTF-8";
}

好了到这里我们的百度首页已经完成了，

 

是不是有的同学还久久不能平复内心的鸡动。