首页实战-1

首页实战-1

html
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
           <title>首页实战</title>
        <meta http-equiv="Conrent-type" content="text/html;charset=utf-8">
        <meta name="description" content="实战首页布局">
        <link rel="stylesheet" href="csh.css"/>
    <link rel="stylesheet" href="css.css"/>
                
    </head>
          <body>
          <div id="container">
      <div id="logo">
        <img src="logo.gif" alt="" id="logo"/>
    </div>
             <div id="header">
      
        <ul id="nav">
       <li><a href="http:www.70love.com">首页</a></li>
       <li><a href="#">腋臭专题</a></li>
       <li><a href="#">高发人群</a></li>
       <li><a href="#">权威推荐</a></li>
       <li><a href="#">权威推荐</a></li>
       <li><a href="#">家庭医生</a></li>
       <li><a href="#">腋臭论坛</a></li>
        
        
        
       </ul>
     </div>
    
    
     <img src="bj.jpg" alt="" id="banner"/>
     <div id="main">
        <div id="lside">
       <div class="subtitle">
          <img src="5-120601154104-50.gif" alt=""/>
          <h1>文章分类</h1>
      <a href="#">more&gt;&gt;</a>
      </div>
       <div class="four">
          <h2>狐臭常识管理</h2>
      <img src="lside.jpg" alt=""/>
      <ul>
         <li><a href="#">腋臭治疗最佳选择1</a></li>
             <li><a href="#">腋臭治疗最佳选择2</a></li>
             <li><a href="#">腋臭治疗最佳选择3</a></li>
             <li><a href="#">腋臭治疗最佳选择4</a></li>
             <li><a href="#">腋臭治疗最佳选择5</a></li>
      
      </ul>
      </div>
     <div class="four">
          <h2>狐臭常识管理</h2>
      <img src="lside.jpg" alt=""/>
      <ul>
         <li><a href="#">腋臭治疗最佳选择1</a></li>
             <li><a href="#">腋臭治疗最佳选择2</a></li>
             <li><a href="#">腋臭治疗最佳选择3</a></li>
             <li><a href="#">腋臭治疗最佳选择4</a></li>
             <li><a href="#">腋臭治疗最佳选择5</a></li>
      
      </ul>
      </div><div class="four">
          <h2>狐臭常识管理</h2>
      <img src="lside.jpg" alt=""/>
      <ul>
         <li><a href="#">腋臭治疗最佳选择1</a></li>
             <li><a href="#">腋臭治疗最佳选择2</a></li>
             <li><a href="#">腋臭治疗最佳选择3</a></li>
             <li><a href="#">腋臭治疗最佳选择4</a></li>
             <li><a href="#">腋臭治疗最佳选择5</a></li>
      
      </ul>
      </div><div class="four">
          <h2>狐臭常识管理</h2>
      <img src="lside.jpg" alt=""/>
      <ul>
         <li><a href="#">腋臭治疗最佳选择1</a></li>
             <li><a href="#">腋臭治疗最佳选择2</a></li>
             <li><a href="#">腋臭治疗最佳选择3</a></li>
             <li><a href="#">腋臭治疗最佳选择4</a></li>
             <li><a href="#">腋臭治疗最佳选择5</a></li>
      
      </ul>
      </div>
       </div>
        <div id="rside">
       <div class="subtitle">
          <img src="5-120601154104-50.gif" alt=""/>
      <h1>核心业务</h1>
      <a href="#">more&gt;&gt;</a>
     </div>
           <ul id="art">
             <li><a href="#">文章1</a></li>
             <li><a href="#">文章2</a></li>
             <li><a href="#">文章3</a></li>
             <li><a href="#">文章4</a></li>
             <li><a href="#">文章5</a></li>
      
      </ul>
         <div class="subtitle">
          <img src="5-120601154104-50.gif" alt=""/>
      <h1>相关信息</h1>
      <a href="#">more&gt;&gt;</a>
     </div>
     <div id="contact">
      
    
    
     </div>
    </div>
    <div class="clr"></div>
     </div>
    
     <div id="footer">
         <ul>
       <li><a href="#">联系我们1</a></li>
       <li><a href="#">联系我们2</a></li>
       <li><a href="#">联系我们3</a></li>
       <li><a href="#">联系我们4</a></li>
       <li><a href="#">联系我们5</a></li>
    </ul>
    <address>&copy; 2006-2009 山东省青岛市荣世家 版权所有 http://www.bbs-1.com   备案信息</address>
     </div>
    
    
     <div></div>
      </div>
        
         </body>
    </html>

css
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
    .clr{
    clear:both;
    width:0px;
    height:0px;
    }
    #container{
       width:960px;
       margin:0px auto;
    }
    /*总长度960   盒子居中显示*/
    #logo{
       width:241px;
       height:68px;
    }
    #header{
       height:33px;
       background:gray url(nv.png)
    }
    /*导航条高度33   插入背景图片*/
    #nav li{
        
       width:90px;
       margin-right:1px;
       float:left;
      
    }
    /*每个分类导航宽度是90 右外边距是1  因为是<li>标签本身竖向显示，加入漂浮 float:left;*/
    #nav a{
       font-size:15px;
       line-height:33px;
       font-family:'微软雅黑';
       color:#000000;
       display:block;
       width:90px;
       height:33px;
       text-align:center;
       color:white;
    }
    /*导航字体大小15px，字体：微软雅黑，颜色：黑色，如果需要字体设置宽高加上背景的话就需要本身内联元素转换为块状元素display:block;   这是高和宽， 字体居中显示text-align:center;   */
    #nav a:hover{
       color:white;
       background:url(i_navbg2.jpg);
    }
    /*鼠标放上的时候显示字体的颜色跟背景*/
    #banner{
    margin:6px 0;
    }
    #main{
    margin:2px 0 0 0;
    }
    #lside{
    height:469px;
    width:694px;
    border:1px solid #EEE;    /*这个border声明了上右下左*/
    float:left;
    border-top:none;                        /*上边框去掉  border-top：none；*/
    }
    .four img{
    float:left;
    margin:0 0 0 10px;
    padding:6px;
    background:white;
    }
    .four ul{
    margin-left:10px;
    float:left;
    }
    .four li{
    background:url(dot.gif) no-repeat;
    padding-left:15px;
    height:20px;
    }
    .four a{
    }
    .four h2{
    margin:6px 0 6px 10px;
    font-size:16px;
    font-family:'microsoft yahei',simhei,sans-serif;
    }
    #rside{
    height:469px;
    width:260px;
    float:right;
    }
    .subtitle{
    line-height:37px;
    height:37px;
    background:gray url(tb.png);
    }
    .subtitle img{
    float:left;
    margin:10px 0 0 10px;
    }
    .subtitle h1{
    float:left;
    margin-left:10px;
    font-size:16px;
    font-family:'microsoft yahei',simhei,sans-serif;
    }
    .subtitle a{
    float:right;
    font-size:14px;
    color:gray;
    }
    #art{
    background:#EEE;
    margin-top:1px;
    padding-top:10px;
    }
    #art a{
    display:block;
    padding-left:15px;
    height:29px;
    background:url(dot.gif) no-repeat;
    margin-left:10px;
    }
    #art a:hover{
    background:red;
    }
    .four{
    width:326px;
    height:200px;
    background:#EEE;
    margin:10px;
    float:left;
    }
    #contact{
    height:238px;
    background:#EEE;
    margin-top:1px;
    }
    #footer{
    height:120px;
    }
    #footer ul{
    margin-top:10px;
    height:40px;
    background:#EEE;
    }
    #footer li{
    float:left;
    margin-top:10px;
    margin-left:20px;
    }
    #footer address{
    margin-top:10px;
    font-size:12px;
    font-family:'微软雅黑',sans-serif;
    }

201602141455451888995189

weinxin
我的微信
把最实用的经验，分享给最需要的读者，希望每一位来访的朋友都能有所收获！
avatar

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: