郑州做网站的公司哪家,新手学做网站 pdf 下载,手机网站主机,wordpress 密码更改个人主页#xff1a;学习前端的小z 个人专栏#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结#xff0c;欢迎大家在评论区交流讨论#xff01; 文章目录 作业小结 作业 .bg-backward {width: 60px; height: 60px;background: url(..… 个人主页学习前端的小z 个人专栏HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结欢迎大家在评论区交流讨论 文章目录 作业小结 作业 .bg-backward {width: 60px; height: 60px;background: url(../images/css_sprites.png) -187px -10px;
}.bg-cart {width: 25px; height: 25px;background: url(../images/css_sprites.png) -10px -183px;
}.bg-envelope {width: 26px; height: 20px;background: url(../images/css_sprites.png) -10px -228px;
}.bg-dribble {width: 20px; height: 21px;background: url(../images/css_sprites.png) -267px -109px;
}.bg-facebook {width: 11px; height: 20px;background: url(../images/css_sprites.png) -10px -268px;
}.bg-forward {width: 60px; height: 60px;background: url(../images/css_sprites.png) -187px -90px;
}.bg-logo {width: 157px; height: 153px;background: url(../images/css_sprites.png) -10px -10px;
}.cart {width: 13px; height: 20px;background: url(../images/css_sprites.png) -267px -188px;
}.bg-msn {width: 16px; height: 16px;background: url(../images/css_sprites.png) -100px -228px;
}.bg-phone {width: 21px; height: 29px;background: url(../images/css_sprites.png) -267px -10px;
}.bg-rss {width: 16px; height: 16px;background: url(../images/css_sprites.png) -136px -228px;
}.bg-telephone {width: 18px; height: 30px;background: url(../images/css_sprites.png) -267px -59px;
}.bg-slider {width: 48px; height: 9px;background: url(../images/css_sprites.png) -55px -183px;
}.bg-vimeo {width: 21px; height: 18px;background: url(../images/css_sprites.png) -267px -150px;
}.bg-twitter {width: 24px; height: 16px;background: url(../images/css_sprites.png) -56px -228px;
}.bg-founder-team {width: 13px; height: 20px;background: url(../images/css_sprites.png) -267px -188px;
}.bg-dribble {width: 20px; height: 21px;background: url(../images/css_sprites2.png) -10px -10px;
}.bg-msn {width: 16px; height: 16px;background: url(../images/css_sprites2.png) -51px -51px;
}.bg-twitter {width: 24px; height: 16px;background: url(../images/css_sprites2.png) -50px -10px;
}.bg-vimeo {width: 21px; height: 18px;background: url(../images/css_sprites2.png) -10px -51px;
}.bg-facebook {width: 11px; height: 20px;background: url(../images/css_sprites2.png) -94px -46px;
}.bg-rss {width: 16px; height: 16px;background: url(../images/css_sprites2.png) -94px -10px;
}.bg-envelope {width: 26px; height: 20px;background: url(../images/css_sprites3.png) -51px -10px;
}.bg-phone {width: 21px; height: 29px;background: url(../images/css_sprites3.png) -10px -10px;
}.bg-telephone {width: 18px; height: 30px;background: url(../images/css_sprites3.png) -10px -59px;
}* {margin: 0;padding: 0;
}body {font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, 宋体, sans-serif;
}a {color: white;text-decoration: none;
}ul {list-style: none;
}.auto-center {width: 1000px;margin-left: auto;margin-right: auto;
}.full-center {min-width: 1000px;
}.pull-left {float: left;
}.pull-right {float: right;
}.clearfix::after {content: ;display: block;clear: both;
}.text-ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}.text-left {text-align: left;
}.text-right {text-align: right;
}!DOCTYPE html
htmlheadmeta charsetUTF-8meta namekeywords content商城首页meta namedescription content商城首页title商城首页/titlelink relstylesheet href./css/common.csslink relstylesheet href./css/sprites.cssstyle.header, .copy{background-color: #2a2b2c;font-size: 14px;}.header .item {display: inline-block;line-height: 44px;margin-left: 40px;}.header .item* {vertical-align: middle;}.header .icon {display: inline-block;}.banner {background-color: #35c3d9;}.banner.auto-center {position: relative;height: 500px;}.banner .logo {width: 180px;height: 106px;background: url(./images/1.png) center / cover no-repeat;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);}.banner .nav {box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);}.banner .nav a{display: inline-block;width: 103px;text-align: center;line-height: 106px;}.banner .navli {float: left;}.banner .clothes {position: absolute;bottom: 18px;left: 0;}.banner .title {position: absolute;width: 413px;bottom: 141px;right: 0;font-size: 60px;font-weight: normal;color: white;text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);text-align: center;}.banner .backward, .banner .forward{position: absolute;top: 50%;margin-top: -30px;}.banner .backward {left: -128px;}.banner .forward {right: -128px;}.big-title {margin-top: 30px;}.big-title.pull-left {padding-left: 49px;font-weight: normal;color: #434343;font-size: 60px;}.big-title.pull-right {width: 175px;line-height: 73px;background-color: #35c3d9;font-size: 60px;text-align: center;margin-right: 30px;}.category {margin-top: 30px;width: 1050px;font-size: 36px;color: #ffffff;}.category.pull-left {position: relative;width: 300px;height: 150px;margin-left: 25px;margin-right: 25px;}.category.pull-leftspan {position: absolute;line-height: 40px;left: 24px;top: 50%;margin-top: -40px;}.products, .brands {margin-top: 50px;}.products .title, .brands .title{position: relative;padding-bottom: 26px;border-bottom: 1px solid #e5e4e4;font-size: 30px;color:#1e1e20;}.brands .title {border-bottom: none;}.products .title-btn, .brands .title-btn{color: white;background-color: #35c4da;padding: 0 28px;margin-left: 30px;}.products h3 {font-size: inherit;}.products .bottom-icon {position: absolute;left: 0;bottom: -10px;width: 60px;height: 20px;background: #35c4da url(./images/6.png) center / 80% no-repeat;}.products .product-list {margin-top: 30px;width: 1068px;margin-left: -34px;font-size: 0;}.products .product-listli {display: inline-block;width: 288px;margin: 0 34px 44px;font-size: 24px;border: 1px solid #e7e7e7;box-sizing: border-box;color: #858585; }.products .img-box {padding: 19px 38px;border-bottom: 1px solid #e5e4e4;} .products .img-box .img {display: block;height: 210px;background-color: black;}.products .desc {display: block;padding: 13px 16px 0;font-size: 24px;color: #858585;}.products .action {padding: 22px 21px 28px;}.products .price, .products .add-cart-btn {display: inline-block;vertical-align: middle;}.products .price {font-size: 30px;}.products .add-cart-btn {color: white;background-color: #35c4da;padding: 9px 6px;font-size: 18px;border-radius: 5px;}.fotter {box-shadow: 0px -3px 15px 0px rgba(0,0,0,0.1);margin-top: 65px;}.footer .column {float: left;padding-top: 34px;width: 250px;box-sizing: border-box;font-size: 13px;}.footer .title {font-size: 24px;color: #858585;line-height: 50px;}.footer .desc {padding: 10px 0;}.footer .icons {letter-spacing: 10px;}.footer .iconsspan {display: inline-block;vertical-align: middle;}.footer .column {float: left;padding-top: 34px;width: 250px;box-sizing: border-box;font-size: 13px; }.footer .title {font-size: 24px;color: #858585;line-height: 50px;}.footer .date-listli {padding: 15px 0;border-bottom: 1px dashed #e5e4e4;}.footer .concat-listli {line-height: 40px;}.footer .icon {display: inline-block;vertical-align: middle;}.footer .input-row {margin-top: 10px;}.footer .input {display: block;width: 100%;outline: none;border: none;line-height: 36px;font-size: 20px;padding-left: 18px;border-bottom: 1px solid #ccc;background-color: #fafafa;box-sizing: border-box;}.footer .submit {background-color: #35c4da;padding: 12px 38px;outline: none;border: none;color: white;}.bottom {display: inline-block;padding: 13px 13px 1px 4px;font-size: 14px;line-height: 50px;box-shadow: 0px 1px 0px 0px }.bottomspan {line-height: 13px;margin-right: 15px;}.copy {color:white;/* width: 1400px; *//* height: 27px; */}/style/headbodydiv classheader full-centerdivdiv classauto-centerdiv classpull-righta classitem href#span结账/span/aa classitem href#span classicon bg-founder-team/spanspan我的账户/span/aa classitem href#span classicon bg-cart/spanspan购物车3/span/a/div/div/div/divdiv classbanner full-centerdiv classauto-center clearfixa classlogo pull-left href#/aul classnav pull-right clearfixlia href#主页/a/lilia href#新闻/a/lilia href#产品/a/lilia href#特征/a/lilia href#联系人/a/li/ulimg classclothes src./images/2.pngh2 classtitle查看我们最新的时装/h2img classbackward src./images/backward.png height60img classforward src./images/forward.png height60/div/divdiv classbig-title auto-center clearfixh1 classpull-left查看我们独特的时尚/h1a classpull-right href#方法/a/divdiv classcategory auto-center clearfixdiv classpull-left stylebackground: #35c3d9 url(./images/3.png) 90% center no-repeat;span出售br60%/span/divdiv classpull-left stylebackground: #91b900 url(./images/4.png) 90% center no-repeat;span自由br航运的/span/divdiv classpull-left stylebackground: #f356b3 url(./images/5.png) 90% center no-repeat;span24/7br支持/span/div/divdiv classproducts auto-centerdiv classtitleh3span特色/spanspan classtitle-btn商品/span/h3div classbottom-icon/div/divul classproduct-listlidiv classimg-boxdiv classimg/div/diva classdesc text-ellipsis href#女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤/adiv classclearfix action span classprice pull-left35.99/spanspan classadd-cart-btn pull-right加入购物车/span/div/lilidiv classimg-boxdiv classimg/div/diva classdesc text-ellipsis href#女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤/adiv classclearfix action span classprice pull-left35.99/spanspan classadd-cart-btn pull-right加入购物车/span/div/lilidiv classimg-boxdiv classimg/div/diva classdesc text-ellipsis href#女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤/adiv classclearfix action span classprice pull-left35.99/spanspan classadd-cart-btn pull-right加入购物车/span/div/li/ul/divdivdiv classproducts auto-centerdiv classtitleh3span最新上架的/spanspan classtitle-btn商品/span/h3div classbottom-icon/div/divul classproduct-listlidiv classimg-boxdiv classimg/div/diva classdesc text-ellipsis href#女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤/adiv classclearfix action span classprice pull-left35.99/spanspan classadd-cart-btn pull-right加入购物车/span/div/lilidiv classimg-boxdiv classimg/div/diva classdesc text-ellipsis href#女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤/adiv classclearfix action span classprice pull-left35.99/spanspan classadd-cart-btn pull-right加入购物车/span/div/lilidiv classimg-boxdiv classimg/div/diva classdesc text-ellipsis href#女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤/adiv classclearfix action span classprice pull-left35.99/spanspan classadd-cart-btn pull-right加入购物车/span/div/lilidiv classimg-boxdiv classimg/div/diva classdesc text-ellipsis href#女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤/adiv classclearfix action span classprice pull-left35.99/spanspan classadd-cart-btn pull-right加入购物车/span/div/lilidiv classimg-boxdiv classimg/div/diva classdesc text-ellipsis href#女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤/adiv classclearfix action span classprice pull-left35.99/spanspan classadd-cart-btn pull-right加入购物车/span/div/lilidiv classimg-boxdiv classimg/div/diva classdesc text-ellipsis href#女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤/adiv classclearfix action span classprice pull-left35.99/spanspan classadd-cart-btn pull-right加入购物车/span/div/lilidiv classimg-boxdiv classimg/div/diva classdesc text-ellipsis href#女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤/adiv classclearfix action span classprice pull-left35.99/spanspan classadd-cart-btn pull-right加入购物车/span/div/lilidiv classimg-boxdiv classimg/div/diva classdesc text-ellipsis href#女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤女式T恤/adiv classclearfix action span classprice pull-left35.99/spanspan classadd-cart-btn pull-right加入购物车/span/div/li/ul/divdiv classbrands auto-centerdiv classtitleh3span主要的/spanspan classtitle-btn品牌/span/h3/divdiv classclearfixa classpull-left href#img src./images/brand1.png height131/aa classpull-left href#img src./images/brand2.png height131/aa classpull-left href#img src./images/brand3.png height131/aa classpull-left href#img src./images/brand4.png height131/aa classpull-left href#img src./images/brand5.png height131/aa classpull-left href#img src./images/brand6.png height131/a/div/divdiv classfooter full-centerdiv classauto-center clearfixdiv classcolumnh4 classtitle关于我们的点点滴滴/h4p classdesc但让我们想想。br没有一个生命是来自国外的精英儿童。br所以让他受苦吧。br他很荣幸能帮助他。/ph4 classtitle跟着我们/h4div classiconsspan classbg-facebook/spanspan classbg-twitter/spanspan classbg-rss/spanspan classbg-vimeo/spanspan classbg-dribble/spanspan classbg-msn/span/div/divdiv classcolumnh4 classtitle档案/h4ul classdate-listli2012年3月/lili2012年3月/lili2012年3月/lili2012年3月/li/ul/divdiv classcolumnh4 classtitle联系我们/h4ul classconcat-listlispan classicon bg-envelope/spanspaninfopremiumcoding.com/span/lilispan classicon bg-phone/spanspan800 756 156/span/lilispan classicon bg-telephone/spanspan386408007561/span/li/ul/divdiv classcolumnh4 classtitle签署新闻稿/h4form action# methodpostdiv classinput-rowinput classinput typetext namename placeholder名字/divdiv classinput-rowinput classinput typetext nameemail1 placeholder电子邮件/divdiv classinput-rowinput classsubmit typesubmit value订阅/div/form/div/div/divdiv classcopy full-centerdiv classauto-center clearfixdiv class bottom pull-rightElegantica copy;2012 by PremiumCoding | All Rights Reserved/divdiv class bottom pull-leftspan主页/spanspan投资组合/spanspan网站地图/spanspan联系人/span/div/div /div/body
/html小结
从给定的一个ui设计图中可以找到对应的一些css样式主要利用布局思维将盒子一层层嵌套实现还包括了定位、浮动以及精灵图。
