Html+css仿淘宝页⾯练习常⽤的样式;
1), 设置⽹页置顶
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
默认是有边距的，设置所有的外边距为0px
2 )，设置链接⽆下划线
Html代码
1 text-decoration: none;
3)，淘宝搜索框的样式设置
Html代码
1 width:650px;
2  border:4px solid #ff3300;
3 height:30px;
4 vertical-align:top;
5 border-right:none;
4)，搜索按钮的设置
Html代码
1 border:4px solid #ff3300;
2  width:100px;
3  height:40px;
4 background:#ff3300;
5 font-size:20px;
6 color:#FFFFFF;
7 margin-left:0px; 左边距为0
8 border-left:none; 左边⽆边框
9 vertical-align:top; 向上对齐
5)，使⽤div定位
Html代码
1 #Layer3 {
2    position:absolute;
3    left:1004px;
4    top:243px;
5    width:280px;
6    height:466px;
7    z-index:2;
8    background-color:#F7F7F7;
9 }
1<html>
2
3<head>
4<meta charset="UTF-8">
5<title>MM</title>
6
7<link rel="stylesheet" type="text/css" href="lesson3.css">
8
9
10
11
12</head>
13<body>
14<div class="top1">
15<div class="word1">亲，请登录</div>
16<div class="word2">免费注册</div>
17<div class="word3">⼿机逛淘宝</div>
18<div class="word4">
19<span class="one" >我的淘宝</span>
20<span class="one" >购物车</span>
21<span class="one" >收藏夹</span>
22<span class="one" >商品分类</span>
23<span class="one" >卖家中⼼</span>
24<span class="one" ></span>
25<span class="one" >⽹站导航</span>
26
27
28</div>
29</div>
30<div class="subface">
31
32
33<div class="subface1">
34
35<div class="picture1"></div>
36<div class="picture2"></div>
37<div class="picture4"></div>
38<div class="picture5"></div>
39<div class="picture6"></div>
40<div class="word11"><h5>今⽇热卖</h5></div>
41<div class="center8">
42
43
44<span class="word9">天猫必逛</span>
45<em class="word10">热门品牌，天天上天猫！</em>
46<strong>
47<i>4/6</i>
48
49
50</strong>
51<hr>
52
53
54
55
56
57
58</div>
59<div class="right1">
60<div class="right2">
61<span class="right3">
62<a href="#">登录</a>
63</span>
64<span class="right3">
65<a href="#">注册</a>
66</span>
67<span class="right3">
68<a href="#">开店</a>
69</span>
70
71
72
73
74
75
76
77
78</ul>
79</div>
80<div class="right4">
81<ul class="nav2">
82<li class="list-item2"><a href="#">公告</a></li>
83<li class="list-item2"><a href="#">规则</a></li>
84<li class="list-item2"><a href="#">论坛</a></li>
85<li class="list-item2"><a href="#">安全</a></li>
86<li class="list-item2"><a href="#">公益</a></li>
87<li class="list-item2"><a href="#">马云：希望未来中国500强⾥有200个CEO来⾃</a></li> 88<li class="list-item2"><a href="#">阿⾥第⼆届“校友”⼤</a></li>
89<li class="list-item2"><a href="#">惠誉评级将阿⾥定为</a></li>
90
91
92</ul>
93
94
95</div>
96<div class="picture3"></div>
97
98
99<div class="word7">Hi！<strong>你好</strong></div>
100<div class="word8"><span class="three">领淘⾦币抵钱</span>
101或去
102<span class="three">会员俱乐部</span>
103
104</div>
105
106
107
108
109</div>
110
111
112</div>
113
114
115<div class="center7">
116<ul class="nav">
117<li class="list-item">
118<a href="#">天猫</a>
119</li>
120<li class="list-item">
121<a href="#">聚划算</a>
122</li>
123<li class="list-item">
124<a href="#">天猫超市</a>
125</li>
126<li class="list-item1">
127<a href="#">淘抢购</a>
128</li>
129<li class="list-item1">
130<a href="#">电器城</a>
131</li>
html网页设计css132<li class="list-item1">
133<a href="#">司法拍卖</a>
134</li>
135<li class="list-item1">
136<a href="#">中国质造</a>
137</li>
138<li class="list-item1">
139<a href="#">特⾊中国</a>
140</li>
141<li class="list-item1">
142<a href="#">飞猪旅⾏</a>
143</li>
144<li class="list-item1">
145<a href="#">智能⽣活</a>
146</li>
147<li class="list-item1">
148<a href="#">苏宁易购</a>
149</li>
150</ul>
151</div>
152<div class="left1">
153<div class="left3"></div>
154<div class="left2"><h3>主题市场</h3>
155<div class="logo4"></div>
156</div>
157<ul>
158<li class="word6"><span class="left">⼥装/ 男装/ 内⾐</span></li>
159<li class="word6"><span class="left">鞋靴/ 箱包/ 配件</span></li>
160<li class="word6"><span class="left">童装玩具/孕产/⽤</span></li>
161<li class="word6"><span class="left">家电/ 数码/ ⼿机</span></li>
162<li class="word6"><span class="left">美妆/ 洗漱/保健品</span></li>
163<li class="word6"><span class="left">珠宝/ 眼镜/ ⼿表</span></li>
164<li class="word6"><span class="left">运动/ 户外/ 乐器</span></li>
165<li class="word6"><span class="left">游戏/ 动漫/ 影视</span></li>
166<li class="word6"><span class="left">美⾷/ ⽣鲜/ 零⾷</span></li>
167<li class="word6"><span class="left">鲜花/ 宠物/ 农资</span></li>
168<li class="word6"><span class="left">房产/ 装修/ 建材</span></li>
169<li class="word6"><span class="left">家具/ 家饰/ 家纺</span></li>
170<li class="word6"><span class="left">汽车/⼆⼿车/ ⽤品</span></li>
171<li class="word6"><span class="left">办公/ DIY/五⾦电</span></li>
172<li class="word6"><span class="left">百货/ 餐厨/家庭保</span></li>
173<li class="word6"><span class="left">游戏/ 卡劵/本地服</span></li>
174</ul>
175</div>
176<div class="top2">
177<div class="logo1"></div>
178
179
180<div class="centre1">
181<div class="center6">新款连⾐裙四件套潮流T恤时尚⼥鞋短裤半⾝裙男⼠外套墙纸⾏车记录仪新款男鞋⽿机182<div class="small1"><span class="two">更多</span></div>
183</div>
184<ul >
185<li class="word5">宝贝</li>
186<li class="word5">天猫</li>
187<li class="word5">店铺</li>
188</ul>
189
190
191<div class="centre2">
192<div class="center5">潮男冬季必⼊</div>
193
194
195
196<div class="center4">⾼级<br>搜索</div>
197<div class="centre3">搜索</div>
198</div>
199</div>
200</div>
201</div>
202<div class="bottom">
203<div class="bottom1">
204<div class="bottom2"></div>
205<a href="#" class="word14"><strong>吃货的后裔</strong><br>
206<span class="word12">翻滚吧美⾷君</span></a><br><em class="word13">⼈⽓13728</em>
207</div>
208<div class="bottom3">
209<div class="bottom4"></div>
210<a href="#" class="word15"><strong>囤货⼀族</strong><br>
211<span class="word16">会囤会⽣活</span></a><br>
212<em class="word13">⼈⽓76000</em>
213</div>
214<div class="bottom3">
215<div class="bottom6"></div>
216<a href="#" class="word18"><strong>⽆辣不欢者</strong><br><span class="word19">辣即正义</span></a><br> 217<em class="word13">⼈⽓5209</em>
218</div>
219<div class="bottom3">
220<div class="bottom8"></div>
221<a href="#" class="word20"><strong>装修家</strong><br><span class="word21">装扮我的家</span></a><br> 222<em class="word13">⼈⽓45496</em>
223</div>
224<div class="bottom3">
225<div class="bottom5"></div>
226<a href="#" class="word22"><strong>有车⼀族</strong><br><span class="word23">定义车⽣活</
span></a><br> 227<em class="word13">最新发现</em>
228</div>
229
230
231
232
233
234
235
236
237</div>
238
239
240<div class="right5">
241<div class="right9">
242<div class="right10">
243<div class="icon11"></div>
244<a class="word25" href="#">充话费</a>
245</div>
246<div class="right10">
247<div class="icon12"></div>
248<a class="word25" href="#">游戏</a>
249
250
251</div>
252<div class="right10">
253<div class="icon13"></div>
254<a class="word25" href="#">旅⾏</a>
255
256
257</div>
258<div class="right10">
259<div class="icon14"></div>
260<a class="word25" href="#">旅⾏</a>
261
262
263</div>
264<div class="right10">
265<div class="icon15"></div>
266<a class="word25" href="#"></a>
267
268
269</div>
270<div class="right10">
271<div class="icon16"></div>
272<a class="word25" href="#">电影</a>
273
274
275</div>
276<div class="right10">
277<div class="icon17"></div>
278<a class="word25" href="#">点外卖</a>
279
280
281</div>
282<div class="right10">
283<div class="icon18"></div>
284<a class="word25" href="#">理财</a>
285
286
287</div>
288<div class="right11">
289<div class="icon19"></div>
290<a class="word26" href="#">服务</a>
291
292
293</div>
294<div class="right11">
295<div class="icon20"></div>
296<a class="word26" href="#">⾳乐</a>
297
298
299</div>
300<div class="right11">
301<div class="icon21"></div>
302<a class="word26" href="#">⽔电煤</a>
303
304
305</div>
306<div class="right11">
307<div class="icon22"></div>
308<a class="word26" href="#">⽕车票</a>
309</div>
310</div>
311</div>
312<div class="right6">
313<div class="right7">
314<span class="word24"><h3>阿⾥APP</span> 315<a  class="more" href="#">更多</a></h3> 316<ul class="right8">
317<li class="icon1"><a href="#"></a></li>
318<li class="icon2"><a href="#"></a></li>
319<li class="icon3"><a href="#"></a></li>
320<li class="icon4"><a href="#"></a></li>
321<li class="icon5"><a href="#"></a></li>
322<li class="icon6"><a href="#"></a></li>
323<li class="icon7"><a href="#"></a></li>
324<li class="icon8"><a href="#"></a></li>
325<li class="icon9"><a href="#"></a></li>
326<li class="icon10"><a href="#"></a></li> 327</ul>
328</div>
329</div>
330</body>
331</html>
Html
1*{
2padding: 0;
3margin: 0;
4 }
6position: absolute;
7top:0;
8width:100%;
9height:35px;
10margin:0px auto;
11
12background-color: #f5f5f5;
13
14
15 }
16.word1{
17float: left;
18margin-top:10px;
19    margin-right: 7px;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。