常用的样式;
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" style="margin-right:10px">我的淘宝</span> 20 <span class="one" style="margin-right:10px">购物车</span> 21 <span class="one" style="margin-right:10px">收藏夹</span> 22 <span class="one" style="margin-right:10px">商品分类</span> 23 <span class="one" style="margin-right:10px">卖家中心</span> 24 <span class="one" style="margin-right:10px">联系客服</span> 25 <span class="one" style="margin-right:10px">网站导航</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> 132 <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>