本周总结 前端第二次作业 模仿制作百度界面

 前端第二次作业：
制作百度界面：
https://www.baidu.com/
要求：
模仿制作，相似度达99%。
仿照https://www.runoob.com/css/css-tutorial.html

1、源代码 

HTML:

    
    
    
    
    


    
    
        
            新闻
            hao123
            地图
            贴吧
            视频
            图片
            网盘
            
                 更多
                    
                        
                            
                                
                                知到
                            
                            
                                
                                百科
                            
                            
                                
                                翻译
                            
                            
                                
                                健康
                            
                            
                                
                                文库
                            
                            
                                
                                学术
                            
                            
                                
                                音乐
                            

                        
                    
                
            
        
        
            
                设置
                
                    
                        搜索设置
                        高级搜索
                        关闭预测
                        隐私设置
                        关闭热搜
                    
                
            
            登录
        
    
    
    
    
        
            
                
            
            
            
            
                
                    
                        百度热搜
                        >
                    
                    
                        
                        换一换
                    
                
            
        
        
        
            
                
                    
                        
                            1
                            上海新增本土88+770 无死亡病例
                            热
                        
                        
                            2
                            520
                            新
                        
                        
                            3
                            中国队正式递补东京奥运接力铜牌
                            热
                        
                    
                
                
                    
                        
                            4
                            专家回应不建议掏空6个钱包凑首付
                            新
                        
                        
                            5
                            郑州一老师漏掉15名考生高考报名
                            热
                        
                        
                            6
                            联合国：17亿人或面临粮食危机
                            热
                        
                    
                
            
        
    
    
    
    
        
            
                关于百度
                About Baidu
                使用百度前必读
                帮助中心
                京公网安备11000002000001号
                京ICP证030173号
                ©2022Baidu
                互联网药品信息服务资格证书 (京)-经营性-2017-0020
                信息网络传播视听节目许可证 0110516
            
        
    
    

CSS:

/* 清除默认效果 */
* {
    padding: 0;
    margin: 0;
    color: #222;
}

a {
    text-decoration: none;
}

/* 头部导航 */
a:hover {
    color: #4e71f2;
}

li {
    list-style: none;
}

.header {
    height: 60px;
    line-height: 60px;
    text-align: center;
}

/* 左侧导航栏 */
.header .left {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 100;
    padding-left: 24px;
}


.header .li_1 {
    float: left;
    font: 13px/23px Arial, sans-serif;
    color: #222;
    position: relative;
    margin-right: 24px;
    margin-top: 19px;
    /* display: inline-block; */

}

/* 右侧导航栏 */
.header .right {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 100;
    height: 60px;
    padding-right: 24px;
    padding-left: 200px;
    float: right;

}

.right #more_li {
    color: #222;
    position: relative;
    margin-right: 24px;
    display: inline-block;
    font-size: 13px;
}

.header .right .r_btn1 {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

.right #more_menu {
    display: none;
    position: absolute;
    top: 48px;
    width: 84px;
    line-height: 23px;
    text-align: center;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .15);
    border-radius: 12px;
}

.right #more_menu li {
    margin-top: 9px;
}

#more_li:hover #more_menu {
    display: block;
}

.header .right .r_btn2 {
    display: inline-block;
    margin-top: 19px;
    background-color: #4e71f2;
    padding-left: 2px;
    font-size: 14px;
    height: 24px;
    width: 48px;
    color: #fff;
    line-height: 24px;
    border-radius: 6px;

}

#more_wrap {
    position: relative;
    display: block;
}

#more_box {
    display: none;
    position: absolute;
    right: -12px;
    top: 30px;
    width: 300px;
    height: 223px;
    line-height: 15px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    background-color: #fff;
    /*box-shadow: 10 10;*/
}

#more_box li {
    margin-left: 18px;
}

#more_list:hover #more_box {
    display: block;
}

#more_box img {
    height: 42px;
    width: 42px;
    border: 1px solid rgba(0, 0, 0, .03);
    border-radius: 12px;
}

.tag_more {
    width: 42px;
    text-align: center;
}

.more_li {
    float: left;
    line-height: 24px;
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 16px;

}

/* 主体部分 */

.box {
    width: 654px;
    height: 44px;
    margin: 200px auto 100px;
    position: relative;
}

/* 输入框 */
input {
    outline: none;
    border: 2px solid #a7aab5;
    height: 44px;
    width: 550px;
    box-sizing: border-box;
    text-indent: 0px;
    font-size: 16px;
    border-radius: 10px 0 0 10px;
}

/* 输入框聚焦 */
input:focus {
    color: #000;
    background-color: #fff;
    border-color: #4e6ef2 !important;
    height: 90px;
    border-radius: 10px 0 10px 10px;
}

/* 百度一下 */
#submit_size {
    height: 44px;
    width: 108px;
    border: none;
    color: white;
    box-sizing: border-box;
    background-color: #4e6ef2;
    position: absolute;
    left: 550px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
}

/* 百度图标 */

.imges {
    text-align: center;
    display: inline-block;
    width: 270px;
    height: 129px;
    margin-left: -135px;
    position: absolute;
    top: -140px;
    left: 327px;
}

/* 百度热搜和换一换 */
.isindex-wrap {
    width: 654px;
    height: 24px;
    margin-top: 45px;
    position: relative;
    text-align: left;
}

.hotandchange {
    font-size: 14px;
    width: 654px;
    height: 24px;
    text-align: left;
}

.hotserch {
    position: relative;
    float: left;
    font-weight: bold;
    line-height: 24px;
}

.r {
    color: #8a8a8a;
}

.changeimg {
    color: #8a8a8a;
    width: 16px;
    height: 16px;
}

.change {
    position: relative;
    color: #8a8a8a;
    float: right;
}

.changeA {
    color: #8a8a8a;
}

.baiduhot div {
    width: 50%;
    overflow: hidden;
    float: left;
    line-height: 32px;
}

.title-content-title {
    margin-right: 20px;
    float: left;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
}

.title-content-title1 {
    margin-left: 20px;
    float: left;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
}

.right-hot {
    float: right;
    line-height: 20px;
}

.top1 {
    color: #fe2d46;
}

.top2 {
    color: #f60;
}

.top3 {
    color: #faa90e;
}

.other-top {
    background: 0 0;
    color: #9195a3;
}

.re {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: rgb(255, 102, 0);
    color: aliceblue;
    font-size: 12px;
    text-align: center;
    border-radius: 4px;
    line-height: 16px;
}

.xin {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: rgb(255, 69, 91);
    color: aliceblue;
    font-size: 12px;
    text-align: center;
    border-radius: 4px;
    line-height: 16px;
}

.shang {
    background-color: rgba(38, 90, 246, 0.84);
    display: inline-block;
    width: 16px;
    height: 16px;
    color: aliceblue;
    font-size: 12px;
    text-align: center;
    border-radius: 4px;
    line-height: 16px;
}

/* 底部 */
.bottom {
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0;
    background-color: #fbfbfb;
    line-height: 40px;
    font-size: 12px;
}

.bottom_l li a {
    float: left;
    padding-left: 14px;
    color: #9195a3;
}

.bottom_l li a:hover {
    color: #222;
}

.bottom_l li span {
    float: left;
    padding-left: 14px;
    color: #9195a3;
}

2、效果图