2019-05-10

模拟百度首页

html代码

    
        
        
        
        
        
    
    
    
        

            

                
新闻
                
hao123
                
地图
                
视频
                
贴吧
                
学术
                
登录
                
设置
            
        
        
            

                    

                

                    
                    
                
            
        

            

            
                

            百度
            
            

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

              百度推广
            

                @2019 Baidu使用百度前必读
           意见反馈
                京ICP证030173号京公网安备11000002000001号 
            
        
    

CSS外部声明代码

/*去掉内外边距*/
*{margin: 0;padding: 0;}
 /*设置网页导航栏大小*/
#header{width: 100%;height: 45px}
   /*设置子标签的样式*/
    #header_nav{position: absolute;top: 25px;right: 90px}
    /*给子标签添加浮动,并且删除无序列表的小黑点,并设置a标签之间的间距*/
    #header_nav li{float: left;list-style: none;margin-left: 24px}
    /*为a标签添加颜色,字体大小,比重,行高*/
    #header_nav li a{color: #333333;font-size: 13px;font-weight: 700;line-height: 24px}
/*设置网页主题不分大小*/
#main{width: 100%;height: 384px; text-align: center}
    #main img{margin-top: 60px ;width: 269px;height: 92px;margin-bottom: 21px}
    /*设置搜索框对象*/
    input[type=text]{height: 34px;width: 539px;border: solid 1px #4992ff;background-image: url("../img/inp1.png");background-repeat: no-repeat;background-position-x:500px;background-position-y: -1px}
    input[type=submit]{height: 36px;width: 100px; font-size: 15px;color: #fff;background-color: #2d78f4;border: solid #2d78f4;letter-spacing: 1px;position: relative;right: 5px;top: 1px;}

/*设置网页底部大小*/
 #footer{width: 100%;height: 206px;text-align: center}
        /*给二维码添加样式*/
        #erv{width: 65px;height: 65px;margin-top: 8px}
        /*给百度两个字添加字体大小格式*/
        b{font-size: 13px;}
        /*给子div标签添加行高,字体大小,及其位置*/
        #footer_href{line-height: 30px; font-size: 11px;margin-top: 15px}
        /*给a标签中的字体添加颜色和字体间距*/
        #footer_href a{color: gray;margin-left: 11px;}
        /*使用伪类选择器给超链接标签添加颜色改变样式*/
#header_nav li a:hover{color: darkblue}

显示效果:

省略了右边栏的js.png