笔记 | PHP 2012 | 首页 header 区域实战

• Html部分

    
        
        
        
        
            
               
        
    
        

            
                                               
                
                

                    
首页
                    
业务介绍
                    
技术优势
                    
精品案例
                    
关于我们
                    
文章观点
                    
联系我们
                
            
            
                                               
                
            
            

                

                    

                    

                    

                    

                
                

                    

                    

                
            
            

        
    

• css初始化文件(见前面笔记)
• ind.css

img {
    display: block;
}
/******** container ********/
#container {
    width: 1002px;
    margin: 0 auto;
}
/******** container header ********/
#header {
    width: 1002px;
    height: 128px;
    background: green url(../images/top_bg.jpg);
}
#nav li {
    list-style: none;
    float: left;
    width: 90px;
    height: 37px;
    margin-right: 2px;
}
#nav li a:link {
    display: block;
    width: 90px;
    height: 37px;
    background: url(../images/nav_bg.gif);
    text-align: center;
    font: 15px/37px simhei;    /* font: 必须加字体, 否则可能解析错误 */
    color: #363636;
}
#nav li a:visited {
    background: url(../images/nav_on.gif);
    color: #FFF;
}
/******** container banner ********/
#banner {
    width: 1000px;
    height: 237px;
    margin: 8px 0;
    padding: 0 1px;
}
/******** container main********/
#main {
    width: 1002px;
    height: 464px;
    background: pink;
}
/******** container main mleft ********/
#mleft {
    width: 694px;
    height: 464px;
    background: purple;
    float: left;
}
.yewu {
    width: 337px;
    height: 222px;
    margin: 5px;
    float: left;
    background: orange;
}
/******** container main mrig ********/
#mrig {
    width: 294px;
    height: 464px;
    background: silver;
    float: right;
}
#view {
    width: 294px;
    height: 227px;
    margin-bottom: 10px;
    background: purple;
}
#contact {
    width: 294px;
    height: 227px;
    background: #CCC;
}
/******** container footer ********/
#footer {
    margin-top: 10px;
    width: 1002px;
    height: 53px;
    background: yellow;
}

• 效果预览图

---

2012_d1_①_022 026