前端项目课程6 做酒仙网顶部注意事项有哪些
前端项目课程6 做酒仙网顶部注意事项有哪些
一、总结
一句话总结：
1、css样式代码搁在那？
先搁在本页面，后面很多的时候在一次剪过去
2、如何给页面部分的什么ceo邮箱、社区、电话等字体变成红色？
在这些对应的span前面加上各自的类，然后去批量设置这些类的颜色，比如CEO邮箱，就添加.ceoemail的类，其它类似
.main-right .ceo{
color:#c00;
}
3、做网站的那些图片，如何截取大图里面的小图？
图片如果超出来了，你可以把它放在一个专门的行标签中，比如i标签，设置i标签的宽高，那个大的背景图的多的部分就不会显示出来了
background: url('../img/public-24.png') no-repeat -18px 4px;
4、如何让图片左走（很长的横向图）？
margin-left设置为负数即可，同时一般还是要加上overflow:hedden避免出现横向滚动条。
.banner img{
display: block;
margin-left:-300px;
}
5、有下三角，怎么得到上三角？
直接transform:rotate(180deg)，直接旋转180度即可
6、设置了固定宽度之后，行标签（向上箭头）没上去的原因是什么？
宽度不够
二、做酒仙网顶部注意事项有哪些
1、相关知识
2、代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>酒仙网</title> 6 <link href="public/img/ico.png" rel="shortcut icon" /> 7 <link rel="stylesheet" href="public/css/index.css"> 8 <script src="../public/js/jquery.min.js"></script> 9 <script src="public/js/index.js"></script> 10 </head> 11 <body> 12 <div class="top"> 13 <div class="main"> 14 <div class="main-left"> 15 <span>欢迎来酒仙网！</span> 16 <a href="">请登录</a> 17 <a href="">免费注册</a> 18 </div> 19 <div class="main-right"> 20 <div href="" class='jiuxian' style='block'> 21 <div class='jiuxiantop'> 22 <span>我的酒仙</span> 23 <i class='myjiu'></i> 24 <div class='clear'></div> 25 </div> 26 <div class='mydropdown'> 27 <ul> 28 <li><a href="">我的订单</a></li> 29 <li><a href="">物流跟踪</a></li> 30 <li><a href="">我的优惠券</a></li> 31 </ul> 32 </div> 33 </div> 34 <a href="" class='ceo'>CEO邮箱</a> 35 <a href="" class=''><i class='cart'></i>购物车0件</a> 36 <a href="" class='ceo'>社区</a> 37 <a href="" class='shouji'><i class='pre'></i>手机逛酒仙</a> 38 <a href="">体验店加盟</a> 39 <a href=""><i class='web'></i>网站导航</a> 40 <a href=""><i class='kefu'></i>客户服务</a> 41 <span>客服热线:</span> 42 <span class='ceo'>400-617-9999</span> 43 </div> 44 </div> 45 46 <div class="banner"> 47 <img src="public/img/b234003cb33743b48d213ab834c50ac8.jpg" alt=""> 48 </div> 49 50 <!-- 网站头部 --> 51 <div class="header"> 52 <div class="main"> 53 <div class="middle"> 54 <div class="logo"> 55 <img src="public/img/logo.png" alt=""> 56 </div> 57 58 <div class="adv"> 59 <img src="public/img/logo.gif" alt=""> 60 </div> 61 62 <div class="search"> 63 <div class="search-top"> 64 <form action=""> 65 <input type="text" class='search-form' placeholder='酒仙特卖'> 66 <input type="submit" class="search-btn" value='搜 索'> 67 </form> 68 </div> 69 70 <div class="search-bottom"> 71 <ul> 72 <li><a href="" class='first'>茅台</a></li> 73 <li><a href="">五粮液</a></li> 74 <li><a href="">泸州老窖</a></li> 75 <li><a href="">啤酒</a></li> 76 <li><a href="">酒鬼酒</a></li> 77 <li><a href="">拉菲</a></li> 78 <li><a href="">梅多克产区特卖</a></li> 79 <li><a href="">人头马</a></li> 80 <li><a href="">牛排首发</a></li> 81 </ul> 82 </div> 83 </div> 84 85 <div class="youhui"> 86 <img src="public/img/headerProPic.png" alt=""> 87 </div> 88 89 90 </div> 91 </div> 92 </div> 93 94 <!-- 幻灯片 --> 95 <div class="ppt"> 96 <div class="main"> 97 <div class="div1"> 98 <ul> 99 <li class='banner'>全部商品分类</li> 100 <li>首页</li> 101 <li>葡萄酒馆</li> 102 <li>清仓</li> 103 <li>团购</li> 104 <li>新品发现</li> 105 </ul> 106 </div> 107 108 <div class="menu"> 109 <div class="div2"> 110 <div class="div3"> 111 <ul> 112 <li class='left-menu'> 113 <span><i class='nav1'></i>一键选酒</span> 114 <div class='right'> 115 <div class="right-left"> 116 <div class='menuBottom'> 117 118 </div> 119 <div class="menuRight"> 120 <div class="menuItem"> 121 <div class="menuItemTitle"> 122 <h4>企业用酒</h4> 123 </div> 124 <div class="menuItemCon"> 125 <p> 126 <a href="">商务用酒</a> 127 <a href="">商务用酒</a> 128 <a href="">商务用酒</a> 129 <a href="">商务用酒</a> 130 <a href="">商务用酒</a> 131 <a href="">商务用酒</a> 132 </p> 133 </div> 134 <div class="clear"></div> 135 </div> 136 137 <div class="menuItem"> 138 <div class="menuItemTitle"> 139 <h4>企业用酒</h4> 140 </div> 141 <div class="menuItemCon"> 142 <p> 143 <a href="">商务用酒</a> 144 <a href="">商务用酒</a> 145 <a href="">商务用酒</a> 146 <a href="">商务用酒</a> 147 <a href="">商务用酒</a> 148 <a href="">商务用酒</a> 149 </p> 150 </div> 151 <div class="clear"></div> 152 </div> 153 154 <div class="menuItem"> 155 <div class="menuItemTitle"> 156 <h4>企业用酒</h4> 157 </div> 158 <div class="menuItemCon"> 159 <p> 160 <a href="">商务用酒</a> 161 <a href="">商务用酒</a> 162 <a href="">商务用酒</a> 163 <a href="">商务用酒</a> 164 <a href="">商务用酒</a> 165 <a href="">商务用酒</a> 166 </p> 167 </div> 168 <div class="clear"></div> 169 </div> 170 171 <div class="menuItem"> 172 <div class="menuItemTitle"> 173 <h4>企业用酒</h4> 174 </div> 175 <div class="menuItemCon"> 176 <p> 177 <a href="">商务用酒</a> 178 <a href="">商务用酒</a> 179 <a href="">商务用酒</a> 180 <a href="">商务用酒</a> 181 <a href="">商务用酒</a> 182 <a href="">商务用酒</a> 183 </p> 184 </div> 185 <div class="clear"></div> 186 </div> 187 188 <div class="menuItem"> 189 <div class="menuItemTitle"> 190 <h4>企业用酒</h4> 191 </div> 192 <div class="menuItemCon"> 193 <p> 194 <a href="">商务用酒</a> 195 <a href="">商务用酒</a> 196 <a href="">商务用酒</a> 197 <a href="">商务用酒</a> 198 <a href="">商务用酒</a> 199 <a href="">商务用酒</a> 200 </p> 201 </div> 202 <div class="clear"></div> 203 </div> 204 </div> 205 206 </div> 207 <div class="right-right"> 208 <img src="public/img/301c66a0ad194db4a013f3d52fa2891e.jpg" alt=""> 209 </div> 210 </div> 211 </li> 212 <li class='left-menu'> 213 <span><i class='nav2'></i>白酒</span> 214 <div class='right'> 215 <h3>手机数码</h3> 216 <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p> 217 </div> 218 </li> 219 <li class='left-menu'> 220 <span><i class='nav3'></i>葡萄酒</span> 221 <div class='right'> 222 <h3>电脑办公</h3> 223 <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p> 224 </div> 225 </li> 226 <li class='left-menu'> 227 <span><i class='nav4'></i>洋酒</span> 228 <div class='right'> 229 <h3>家居家装</h3> 230 <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p> 231 </div> 232 </li> 233 </ul> 234 </div> 235 </div> 236 </div> 237 </div> 238 </div> 239 240 <!-- 幻灯片开始或设计 --> 241 <div class="main"> 242 <div class="carousel"> 243 <div class="window"> 244 <div class="image_reel"> 245 <a href="#"> 246 <img src="public/img/ppt1.jpg" alt="" /> 247 </a> 248 <a href="#"> 249 <img src="public/img/ppt2.jpg" alt="" /> 250 </a> 251 <a href="#"> 252 <img src="public/img/ppt3.jpg" alt="" /> 253 </a> 254 <a href="#"> 255 <img src="public/img/ppt1.jpg" alt="" /> 256 </a> 257 </div> 258 </div> 259 <div class="paging"> 260 <a href="#" rel="1">1</a> 261 <a href="#" rel="2">2</a> 262 <a href="#" rel="3">3</a> 263 </div> 264 265 <div class="right-ads"> 266 <div class="img 1"> 267 <img src="public/img/35a96661ec59473795dc9a8e2a12b50a.png" alt=""> 268 </div> 269 <div class="img 2"> 270 <img src="public/img/35a96661ec59473795dc9a8e2a12b50a.png" alt=""> 271 </div> 272 <div class="img 3"> 273 <img src="public/img/35a96661ec59473795dc9a8e2a12b50a.png" alt=""> 274 </div> 275 276 <div class="img 4"> 277 <img src="public/img/9c65123a5b174d1898164b31b972611d.png" alt=""> 278 </div> 279 <div class="img 5"> 280 <img src="public/img/9c65123a5b174d1898164b31b972611d.png" alt=""> 281 </div> 282 <div class="img 6"> 283 <img src="public/img/9c65123a5b174d1898164b31b972611d.png" alt=""> 284 </div> 285 286 <div class="img 7"> 287 <img src="public/img/0165f68717bd47fab2dc78594770ff90.png" alt=""> 288 </div> 289 <div class="img 8"> 290 <img src="public/img/0165f68717bd47fab2dc78594770ff90.png" alt=""> 291 </div> 292 <div class="img 9"> 293 <img src="public/img/0165f68717bd47fab2dc78594770ff90.png" alt=""> 294 </div> 295 </div> 296 </div> 297 </div> 298 299 300 </div> 301 </body> 302 </html>
css
1 *{ 2 font-family: 微软雅黑; 3 margin:0px; 4 padding:0px; 5 font-size:14px; 6 } 7 8 h1{ 9 font-size:30px; 10 } 11 12 a{ 13 text-decoration: none; 14 color:#888; 15 } 16 17 body{ 18 background: #F9F9F9; 19 overflow-x: hidden; 20 } 21 22 .top{ 23 height:26px; 24 background: #F2F2F2; 25 } 26 27 .main{ 28 width:1200px; 29 margin:0 auto; 30 line-height: 26px; 31 color:#888; 32 } 33 34 .main-left{ 35 float: left; 36 } 37 38 .main-right{ 39 float: right; 40 } 41 42 .main-right .ceo{ 43 color:#c00; 44 } 45 46 .main-right .shouji{ 47 background: #c00; 48 color:#fff; 49 padding:0 5px; 50 border-radius:2px; 51 } 52 53 .main-right .cart{ 54 width:15px; 55 height:15px; 56 background: url('../img/public-24.png') no-repeat -18px 4px; 57 padding-left:15px; 58 } 59 60 .main-right .shouji .pre{ 61 width:15px; 62 height:15px; 63 padding-left:15px; 64 background: url('../img/public-24.png') no-repeat -62px 2px; 65 } 66 67 .main-right .web{ 68 width:15px; 69 height:15px; 70 padding-left:15px; 71 background: url('../img/public-24.png') no-repeat -80px 4px; 72 } 73 74 .main-right .kefu{ 75 width:15px; 76 height:15px; 77 padding-left:15px; 78 background: url('../img/public-24.png') no-repeat -90px -260px; 79 } 80 81 .main-left span,.main-left a{ 82 margin-right:5px; 83 } 84 85 .main-right span,.main-right a{ 86 margin-left:5px; 87 } 88 89 .banner{ 90 width:1366px; 91 overflow: hidden; 92 } 93 94 .banner img{ 95 display: block; 96 margin-left:-300px; 97 } 98 99 .main-right .jiuxian{ 100 cursor: pointer; 101 float: left; 102 width:90px; 103 } 104 105 .main-right .jiuxiantop span{ 106 float: left; 107 } 108 .main-right .myjiu{ 109 width:15px; 110 height:15px; 111 background: url('../img/public-24.png') no-repeat -99px 10px; 112 float: left; 113 margin-left:5px; 114 margin-top:2px; 115 } 116 117 .main-right .mydropdown{ 118 position: absolute; 119 width:90px; 120 background: #fff; 121 display: none; 122 } 123 124 .main-right .mydropdown ul{ 125 list-style:none; 126 } 127 128 .clear{ 129 clear:both; 130 } 131 132 .header{ 133 height:125px; 134 background: url('../img/857d5b63bd0141f09343547cf025f584.jpg') no-repeat -290px 0px; 135 } 136 137 .logo{ 138 float: left; 139 height:65px; 140 margin-top:30px; 141 } 142 143 .adv{ 144 margin-top:32px; 145 float: left; 146 margin-left:15px; 147 } 148 149 .search{ 150 margin-top:30px; 151 float: left; 152 margin-left:25px; 153 width:540px; 154 height:65px; 155 } 156 157 .youhui{ 158 margin-top:30px; 159 float: right; 160 } 161 162 .search-top{ 163 height:32px; 164 border:3px solid #c00; 165 } 166 167 .search-form{ 168 width:439px; 169 height:22px; 170 line-height: 22px; 171 padding:5px; 172 border:0 none; 173 color:#666; 174 } 175 176 .search-form:focus{ 177 outline:none; 178 } 179 180 .search-btn{ 181 width:85px; 182 height:32px; 183 line-height: 32px; 184 text-align: center; 185 border:0; 186 font-size:16px; 187 color:#fff; 188 background: #c00; 189 cursor: pointer; 190 float: right; 191 } 192 193 .search-bottom{ 194 width:540px; 195 height:18px; 196 padding-top:5px; 197 /*overflow: hidden;*/ 198 } 199 200 .search-bottom ul{ 201 list-style:none; 202 } 203 204 .search-bottom ul li{ 205 float: left; 206 margin-right:8px; 207 line-height: 18px; 208 } 209 210 .search-bottom .first{ 211 color:#c66; 212 } 213 214 .ppt{ 215 height:34px; 216 background: #900; 217 } 218 219 /*左侧导航*/ 220 .ppt .div1{ 221 height:34px; 222 overflow: hidden; 223 background: #900; 224 } 225 226 .ppt .div1 ul{ 227 width:1200px; 228 margin:0 auto; 229 list-style:none; 230 } 231 232 .ppt .div1 ul li{ 233 float: left; 234 line-height: 34px; 235 margin-left:30px; 236 cursor: pointer; 237 color:#fff; 238 } 239 .ppt .banner{ 240 background: #ce171f; 241 width:150px; 242 text-align: center; 243 margin-left:0px!important; 244 } 245 246 .ppt .div2{ 247 width:1200px; 248 height:470px; 249 margin:0 auto; 250 position: relative; 251 } 252 253 .ppt .div3{ 254 width:150px; 255 height:470px; 256 background: #fff; 257 border-left:1px solid #ccc; 258 border-bottom:1px solid #ccc; 259 } 260 .ppt .div3 ul{ 261 list-style:none; 262 } 263 264 .ppt .div3 ul li{ 265 padding-left:15px; 266 line-height: 30px; 267 border-bottom:1px solid #ccc; 268 } 269 270 .ppt .div3 ul li:last-child{ 271 padding-left:15px; 272 line-height: 30px; 273 border-bottom:none; 274 } 275 276 .ppt .div3 ul li:hover{ 277 cursor: pointer; 278 } 279 280 .ppt .right{ 281 width:640px; 282 height:470px; 283 background: #eee; 284 position: absolute; 285 top:0px; 286 left:150px; 287 color:#000; 288 display: none; 289 z-index:2; 290 } 291 292 .carousel{ 293 height:470px; 294 width:1050px; 295 float: right; 296 background: #aaf; 297 } 298 299 /*幻灯片设计*/ 300 .carousel{ 301 position: relative; 302 } 303 304 .carousel .window { 305 height:470px; 306 width: 1050px; 307 overflow: hidden; /*--Hides anything outside of the set width/height--*/ 308 position: relative; 309 } 310 .carousel .image_reel { 311 position: absolute; 312 top: 0; left: 0; 313 } 314 .carousel .image_reel img {float: left;} 315 316 /*--Paging Styles--*/ 317 .carousel .paging { 318 position: absolute; 319 width: 150px; 320 height:50px; 321 bottom: 0px; 322 right: 50%; 323 margin-right:-75px; 324 z-index: 1; /*--Assures the paging stays on the top layer--*/ 325 text-align: center; 326 line-height: 40px; 327 display: none; /*--Hidden by default, will be later shown with jQuery--*/ 328 } 329 .carousel .paging a { 330 padding: 0px 5px; 331 text-decoration: none; 332 color: #fff; 333 } 334 .carousel .paging a.active { 335 font-weight: bold; 336 background: #920000; 337 border: 1px solid #610000; 338 border-radius: 3px; 339 } 340 .carousel .paging a:hover { 341 font-weight: bold; 342 } 343 344 .paging a{ 345 border-radius:50%; 346 } 347 348 .right-ads{ 349 position: absolute; 350 top:0px; 351 right:0px; 352 width:190px; 353 height:470px; 354 /*overflow: hidden;*/ 355 } 356 357 .right-ads .img{ 358 margin-bottom:1px; 359 display: none; 360 } 361 362 .right-ads img{ 363 display: block; 364 } 365 366 .nav1{ 367 display: inline-block; 368 width:14px; 369 height:20px; 370 background: #f00; 371 margin-right:10px; 372 vertical-align: middle; 373 background: url('../img/public-24.png') -73px -260px; 374 } 375 376 .nav2{ 377 display: inline-block; 378 width:14px; 379 height:20px; 380 background: #f00; 381 margin-right:10px; 382 vertical-align: middle; 383 background: url('../img/public-24.png') 2px -100px; 384 } 385 386 .nav3{ 387 display: inline-block; 388 width:14px; 389 height:20px; 390 background: #f00; 391 margin-right:10px; 392 vertical-align: middle; 393 background: url('../img/public-24.png') -16px -102px; 394 } 395 396 .nav4{ 397 display: inline-block; 398 width:14px; 399 height:20px; 400 background: #f00; 401 margin-right:10px; 402 vertical-align: middle; 403 background: url('../img/public-24.png') -37px -100px; 404 } 405 406 .menu .div3 li.left-menu:hover{ 407 border-left:2px solid #CE171F; 408 } 409 410 .ppt .div3 .right-left{ 411 width:400px; 412 height:470px; 413 padding-top:0px; 414 padding-bottom:0px; 415 padding-left:0px; 416 padding-right:20px; 417 float: left; 418 background: #fff; 419 position: relative; 420 } 421 422 .ppt .div3 .right-left .active{ 423 margin-right:30px; 424 } 425 426 .ppt .div3 .right-left a{ 427 margin-right:15px; 428 } 429 430 .ppt .div3 .right-right{ 431 width:220px; 432 height:470px; 433 float: left; 434 } 435 436 .ppt .div3 .right-right img{ 437 display: block; 438 } 439 440 .ppt .menuItemTitle{ 441 float: left; 442 width:80px; 443 text-align: center; 444 } 445 446 .ppt .menuItemCon{ 447 float: left; 448 width:280px; 449 border-bottom:1px dotted #ccc; 450 margin-left:40px; 451 } 452 453 .ppt .menuItemCon a{ 454 display: inline-block; 455 word-wrap:break-word; 456 } 457 458 .ppt .menuBottom{ 459 width:80px; 460 height:470px; 461 background: #eee; 462 float: left; 463 position: absolute; 464 } 465 466 .ppt .menuRight{ 467 position: absolute; 468 z-index:1; 469 }
