本篇博客实现一个HTML与CSS简单页面效果实例

index.html

1  2  3  4 
      5  6 
      7  8  9     
     
      10         
      
       11             
       
        12                
        
         13                    
         
          14                                                    极客学院15                        
         
16                        
         
          17                            
          
           18 
           
首页
19 
           
职业课程
20 
           
技术问答
21 
           
VIP会员
22 
          
23                        
         
24                        
         
          25                            
          26                        
         
27                        
         
          28                           
          
           29 
           30 
          
31                        
         
32                
        
33             
       
34             
       
        35                 
        
         36                   
         
熟悉极客学院
37                   
         
加入极客学院，学习最新实战教程，全面提升你的技术能力
38                 
        
39                  
        
40             
        
41             
       
42            43         
      
44         45         
      
       46            @极客学院47         
      
48     49     
     
50 51 

 

css代码：

1 *{ 2     margin:0px; 3     padding:0px; 4 } 5  6 body{ 7     background-color: snow; 8 } 9 .wrapper{10     width:80%;11     height:1000px;12     background-color: antiquewhite;13     margin:0px auto;14 }15 .heading{16     width:100%;17     height:160px;18     background-color: snow;19     margin:0px auto;20 }21 ul{22     margin-left:40px;23     float:left;24     list-style-type:none;25     padding-top:40px;26     padding-bottom:6px;27 }28 a:link,a:visited{29     font-weight:bold;30     color:darkgray;31     text-align:center;32     padding:6px;33     text-decoration: none;34 }35 a:hover,a:active{36     color:blue;37 }38 .heading_title{39     float:left;40     font-family:Arial,Helvetica,sans-serif;41     font-size:30px;42     color:burlywood;43 }44 .heading_nav{45     padding-bottom:30px;46     padding-top:30px;47     width:100%;48     height:30px;49     position:relative;50 }51 li{52     padding-left:10px;53     display:inline;54 }55 56 .heading_img img{57     border-radius:30px;58     display:inline;59     width:46px;60     height:46px;61     box-shadow:0 1px 1px rgba(0,0,0,0.2);62     float:right;63 }64 65 .heading_soptlight form{66     float:right;67     width:100px;68     height:26px;69     position:relative;70     margin-right:82px;71     margin-top:16px;72 }73 form input{74     height:26px;75     border-radius:30px;76 }77 .body{78     width:auto;79     height:auto;80     padding:30px;81 }82 .body_title h3{83     font-size:30px;84     font-family:Arial,Helvetical,sans-serif;85     color:#333333;86 }87 .body_title p{88     margin-top:20px;89     margin-bottom:20px;90 }91 .footing{92     padding-top:20px;93     text-align:center;94     fon-size:10px;95     color:darkgray;96 }

 

效果：