小作业

最新推荐文章于 2022-11-08 23:56:36 发布

a2221111

最新推荐文章于 2022-11-08 23:56:36 发布

阅读量113

点赞数

原文链接：http://www.cnblogs.com/TheJoker/p/7543531.html

版权

本文详细解析了京东首页的HTML和CSS布局代码，包括顶部工具条、导航、轮播图及各类广告位的设计与实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5 
  6         <meta charset="utf-8" />
  7         <title></title>
  8         <link rel="stylesheet" href="css/new_one.css" />
  9     </head>
 10 
 11     <body>
 12         <!--大框-->
 13         <div class="dk">
 14             <!--顶部工具条begin-->
 15             <div class="top-tool">
 16                 <!--工具条内导航center begin-->
 17                 <div class="tool-center">
 18                     <!--工具条内导航右begin-->
 19                     <div class="tool-r">
 20                         <div class="tool-little" id="t-l">请登录</div>
 21                         <div class="tool-little">免费注册</div>
 22                         <div class="tool-little">我的订单</div>
 23                         <div class="tool-little">我的京东</div>
 24                         <div class="tool-little">京东会员</div>
 25                         <div class="tool-little">企业采购</div>
 26                         <div class="tool-little">客户服务</div>
 27                         <div class="tool-little">网站导航</div>
 28                         <div class="tool-little">手机京东</div>
 29                     </div>
 30                     <!--工具条内导航右end-->
 31                 </div>
 32                 <!--工具条内导航center end-->
 33             </div>
 34             <!--顶部工具条end-->
 35 
 36             <!--居中大框begin-->
 37             <div class="center">
 38 
 39                 <!--顶部导航begin-->
 40                 <div class="top-nav-dk">
 41                     <!--导航搜索-->
 42                     <div class="top-s">
 43                         <input type="text" />
 44                     </div>
 45                     <!--搜索下小字-->
 46                     <div class="top-font">
 47                         <!--<div class="xz"></div>-->
 48                     </div>
 49                     <!--导航-->
 50                     <div class="top-nav">
 51 
 52                         <!--京东小狗-->
 53                         <div class="jd"></div>
 54 
 55                     </div>
 56                 </div>
 57                 <!--顶部导航end-->
 58                 <!--轮播周围大框begin-->
 59                 <div class="center-all">
 60                     <!--轮播大框左-->
 61                     <div class="center-a">
 62                     </div>
 63                     <!--大图轮播-->
 64                     <div class="center-b">
 65                         <!--轮播-->
 66                         <div class="lb">
 67 
 68                         </div>
 69                         <!--轮播end-->
 70                         <!--轮播下begin-->
 71                         <div class="lb-b">
 72                             <!--轮播下左-->
 73                             <div class="lb-b-l">
 74 
 75                             </div>
 76                             <!--轮播下右-->
 77                             <div class="lb-b-r">
 78 
 79                             </div>
 80                         </div>
 81                         <!--轮播下end-->
 82                     </div>
 83                     <!--轮播右-->
 84                     <div class="center-c">
 85 
 86                     </div>
 87 
 88                 </div>
 89                 <!--轮播周围大框end-->
 90 
 91                 <!--轮播下分类begin-->
 92                 <div class="ify">
 93                     <!--左-->
 94                     <div class="ify-l"></div>
 95                     <!--中-->
 96                     <div class="ify-c"></div>
 97                     <!--右-->
 98                     <div class="ify-r"></div>
 99                 </div>
100                 <!--轮播下分类end-->
101 
102                 <!--领券中心 行begin-->
103                 <div class="ify-buttom">
104 
105                     <!--左-->
106                     <div class="ify-buttom-l"></div>
107 
108                     <!--右-->
109                     <div class="ify-buttom-r"></div>
110 
111                 </div>
112                 <!--领券中心 行end-->
113 
114             </div>
115             <!--居中大框end-->
116 
117             <!--贯穿灰条begin-->
118             <div class="a1190">
119 
120                 <!--灰条居中框begin-->
121                 <div class="a-center">
122 
123                 </div>
124                 <!--灰条居中框begin-->
125 
126             </div>
127             <!--贯穿横条end-->
128 
129             <div style="position:relative;margin-top:15px;width:100%;height:500px;background-color:black"></div>
130 
131         </div>
132         <!--大框结束-->
133         <!--左侧锚点begin-->
134         <!--<div class="left-nav">
135 
136         </div>-->
137     </body>
138 
139 </html>

  1 * {
  2     margin: 0px;
  3     padding: 0px;
  4 }
  5 
  6 
  7 /*大框*/
  8 
  9 .dk {
 10     position: relative;
 11     width: 100%;
 12     height: 100%;
 13     background-color:rgb(246,246,246);
 14 }
 15 
 16 
 17 /*顶部工具条*/
 18 
 19 .top-tool {
 20     poaition: relative;
 21     width: 100%;
 22     height: 30px;
 23     background-color:rgb(227,228,229);
 24 }
 25 /*工具条内导航*/
 26 .tool-center{
 27     /*687-30*/
 28     position:relative;
 29     margin:0px auto;
 30     width:1190px;
 31     height:30px;
 32     background-color:rgb(227,228,229);
 33 }
 34 /*工具条内导航右*/
 35 .tool-r{
 36     position:relative;
 37     margin-left:512px;
 38     width:678px;
 39     height:30px;
 40     background-color:rgb(227,228,229);
 41 }
 42 .tool-little{
 43     float:left;
 44     margin-left:15px;
 45     width:62px;
 46     height:30px;
 47     text-align:center;
 48     line-height:30px;
 49     font-family:"微软雅黑";
 50     font-size:12px;
 51     color:#999;
 52     background-color:rgb(227,228,229);
 53 }
 54 #t-l{
 55     margin-left:0px;
 56 }
 57 
 58 /*居中大框*/
 59 
 60 .center {
 61     position: relative;
 62     margin: 0px auto;
 63     width: 1190px;
 64     height: 100%;
 65     background-color: rgb(246,246,246);
 66 }
 67 
 68 
 69 /*顶部导航*/
 70 
 71 .top-nav-dk {
 72     position: relative;
 73     width: 100%;
 74     height: 140px;
 75     /*background-color: yellow;*/
 76 }
 77 
 78 
 79 /*导航搜索*/
 80 
 81 .top-s {
 82     width: 100%;
 83     height: 60px;
 84     /*background-color: pink;*/
 85 }
 86 /*导航*/
 87 .top-s input{
 88     margin-left:420px;
 89     margin-top:15px;
 90     width:350px;
 91     height:35px;
 92     border:0.5px solid red;
 93 }
 94 
 95 
 96 /*搜索下小字*/
 97 
 98 .top-font {
 99     width: 100%;
100     height: 40px;
101     background-color: green;
102 }
103 /*.xz{
104     background-image: url(../img/1.png);
105     margin-left:300px;
106     
107 }*/
108 
109 /*导航*/
110 
111 .top-nav {
112     width: 100%;
113     height: 40px;
114     background-color: yellowgreen;
115 }
116 
117 
118 /*京东小狗*/
119 
120 .jd {
121     position: absolute;
122     width: 190px;
123     height: 170px;
124     margin-top: -130px;
125     background-color: black;
126     background-image:url(../img/jd.png);
127 }
128 
129 .center-all {
130     position: relative;
131     width: 1190px;
132     height: 480px;
133     background-color: rgb(246,246,246);
134 }
135 
136 
137 /*轮播大框左*/
138 
139 .center-a {
140     float: left;
141     width: 190px;
142     height: 480px;
143     background-color: deeppink;
144     background-image:url(../img/left-nav.png);
145 }
146 
147 
148 /*大图轮播*/
149 
150 .center-b {
151     position: relative;
152     float: left;
153     margin-left: 10px;
154     width: 790px;
155     height: 480px;
156     background-color: rgb(246,246,246);
157 }
158 
159 
160 /*轮播右*/
161 
162 .center-c {
163     float: left;
164     margin-left: 10px;
165     width: 190px;
166     height: 480px;
167     background-color: deeppink;
168     background-image:url(../img/QQ截图20170918131030.png);
169 }
170 
171 
172 /*左侧锚点*/
173 
174 
175 /*.left-nav{
176     position:fixed;
177     margin-right:10%;
178     margin-top:200px;
179     width:34px;
180     height:453px;
181     background-color:blue;
182 }*/
183 
184 
185 /*轮播*/
186 
187 .lb {
188     width: 790px;
189     height: 340px;
190     background-color: pink;
191     background-image:url(../img/lunbo.png);
192     background-size:100%;
193 }
194 
195 
196 /*轮播下*/
197 
198 .lb-b {
199     margin-top: 10px;
200     width: 790px;
201     height: 130px;
202     background-color: red;
203 }
204 
205 .lb-b-l,
206 .lb-b-r {
207     float: left;
208     width: 390px;
209     height: 130px;
210     background-color: gray;
211     background-size:100%;
212     background-image:url(../img/left.png);
213 }
214 
215 .lb-b-r {
216     margin-left: 10px;
217     background-image:url(../img/right.png);
218 }
219 
220 
221 /*轮播下分类*/
222 
223 .ify {
224     position: relative;
225     margin-top: 10px;
226     width: 1190px;
227     height: 444px;
228     background-color: rgb(246,246,246);
229 }
230 /*轮播下分类左,中,右*/
231 .ify-l,
232 .ify-c,
233 .ify-r {
234     float: left;
235     width: 390px;
236     height: 444px;
237     background-color: yellow;
238     background-size:100%;
239     background-image:url(../img/QQ截图20170918130427.png);
240 }
241 
242 .ify-c,
243 .ify-r {
244     margin-left: 10px;
245 }
246 .ify-l{
247     background-image:url(../img/QQ截图20170918130443.png);
248 }
249 .ify-r{
250     background-image:url(../img/QQ截图20170918130443.png);
251 }
252 /*领券中心 行*/
253 .ify-buttom{
254     position:relative;
255     margin-top:30px;
256     width:1190px;
257     height:270px;
258     background-color:rgb(246,246,246);
259 }
260 .ify-buttom-l,.ify-buttom-r{
261     float:left;
262     width:790px;
263     height:270px;
264     background-color:pink;
265     background-image:url(../img/QQ截图20170918131320.png);
266 }
267 .ify-buttom-r{
268     margin-left:10px;
269     width:390px;
270     height:270px;
271     background-image:url(../img/QQ截图20170918131337.png);
272 }
273 
274 /*贯穿灰条*/
275 .a1190{
276     position:relative;
277     margin-top:30px;
278     width:100%;
279     height:100px;
280     background-color:rgb(224,224,224);
281 }
282 /*灰条居中框*/
283 .a-center{
284     /*position:relative;*/
285     margin:0px auto;
286     width:1190px;
287     height:100px;
288     background-color:rgb(224,224,224);
289     background-image:url(../img/QQ截图20170918131822.png);
290 }