超详细实现淘宝静态页面(附全部代码) |
您所在的位置：网站首页 › 淘宝的源码模式在什么位置 › 超详细实现淘宝静态页面(附全部代码) |
超详细实现淘宝静态页面(附全部代码)
|
文章目录
一:基本结构与样式二:头部信息结构1.淘宝小图标2.目前效果3.代码
三:头部信息样式与自定义图标1.设置收藏夹图标注意:
四:头部广告结构与样式1.h标签的应用
五:全部代码1.index.html2.index.css3.reset.css
一:基本结构与样式
1.划分结构的顺序是自上而下,从左往右,保证内容在一行内能显示 2.考虑的因素有内容,颜色块,间距 二:头部信息结构 1.淘宝小图标1.1图标必须放在网站的根目录中,不要放进images哦,如图:
index.html: 淘宝网-淘!我喜欢 中国大陆 亲,请登录 免费注册 手机逛淘宝 我的淘宝 购物车 0 收藏夹 商品分类 千牛卖家中心 联系客服 网站导航index.css: /* @规则 @charset 设置样式表的编码 @import 导入其他样式文件 @meida 媒体查询 @font-face自定义字体 */ @import 'reset.css'reset.css /* 样式重置 */ body,p,h1,h2,h3,h4{ margin: 0; } ul{ margin: 0; padding: 0; list-style: none; } img{ border:none; /* 垂直对齐方式 */ vertical-align: middle; } a{ text-decoration: none; color: #3c3c3c; } i{ font-style: normal; } input{ margin: 0; padding: 0; } button{ outline: none; } body{ /* 设置字体 font是复合属性,写在一起要尊重规则 */ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; color: #3c3c3c; background-color: #f4f4f4; } /* 预定义样式 常使用的 */ /* 清除浮动三件套 */ .clearfix:after{ content:''; clear: both; display: block; } /* 浮动 */ .fl{ float: left; } .fr{ float:right; } .leayer{ width: 1190px; margin:0 auto; } /* 常用颜色 */ .c4{ color: f40; } .c5{ color: #f50; } .mt10{ margin-top: 10px; } .mr10{ margin-right: 10px; } 三:头部信息样式与自定义图标 1.设置收藏夹图标注意:我这里只下载了一个收藏夹图标作为演示,大家记得把后面需要用到的图标一起下载了 1.1在阿里巴巴矢量库中下载一个收藏夹的图标(星星图标),将它添加入库 1.4根据文件说明的步骤,第一步,拷贝@font-face,放到index.css文件中 将解压后的文件夹中的这几个文件复制到项目中新创建的一个文件夹中 1.6 第三步 在主页面index.html的收藏夹图标的span标签里中引入 添加class=“iconfont” 并且加字体编码,字体编码在图标的下面,分号不要忘记 1.我们发现span标签之前如果有回车,就自动识别成空格,浏览器中展示图标和文字之间就会有距离,并且空格是由字体大小决定的,也就是你设置的font-size 解决方法:父级li设置font-size:0,但是这样其他文字不见了,我们再在a标签里给其他字体设置font-size:12就好了 2.自定义span标签里的图标和文字的距离,我们统一改变它的样式,在span标签后添加一个类arrow 其他的操作就不一一赘述了,给图标文字之间设置距离,改变图标颜色 四:头部广告结构与样式 1.h标签的应用h1用于大标题,h2标签应用的时候就知道了,h3标签一般用于板块标题,h4标签用于板块里面的标题 五:全部代码 1.index.html 淘宝网-淘!我喜欢 中国大陆 亲,请登录 免费注册 手机逛淘宝 我的淘宝 购物车 0 收藏夹 商品分类 | 千牛卖家中心 联系客服 网站导航 电视会场 最高降2000 电视会场 最高降2000 电视会场 最高降2000 电视会场 最高降2000 电视会场 最高降2000 淘宝网 手机淘宝 宝贝 天猫 店铺 裤子高腰直筒裤女 搜索 新款连衣裙 潮流T恤 四件套 时尚女鞋 短裤 半身裙 男士外套 墙纸 行车记录仪 新款男鞋 耳机 时尚女包 沙发 主题市场 天猫 聚划算 天猫超市 | 淘抢购 电器城 司法拍卖 淘宝心选 | 飞猪旅行 智能生活 苏宁易购 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 女装/ 内衣/ 家居 理想生活上天猫 1/6 今日热卖 淘宝头条 让你的生活更有趣 微漫酱访谈第三期：超萌舞见弥音音！ 哈喽，大家好，我是你们可爱的微漫酱，今天我们请到了一位舞见小姐姐来做客我们的访谈事，她就是弥音音！ 更多> Hi! 你好 领淘金币抵钱 会员俱乐部 登录 注册 开店 网上有害信息举报专区 公告 规则 论坛 安全 公益 天猫618进入热身 84个品牌在天猫共获粉丝4.3亿 天猫618五折卖车 天猫618直播间观看指南 充话费 旅行 车险 游戏 彩票 电影 酒店 理财 找服务 演出 水电煤 火车票 阿里APP 更多> 与美好生活不期而遇 换一换 max破产都要买的口红 《破产姐妹》max最爱Tarte哑光口红笔 5950 人说好 max破产都要买的口红 《破产姐妹》max最爱Tarte哑光口红笔 5950 人说好 max破产都要买的口红 《破产姐妹》max最爱Tarte哑光口红笔 5950 人说好 max破产都要买的口红 《破产姐妹》max最爱Tarte哑光口红笔 5950 人说好 max破产都要买的口红 《破产姐妹》max最爱Tarte哑光口红笔 5950 人说好 max破产都要买的口红 《破产姐妹》max最爱Tarte哑光口红笔 5950 人说好 献给聪明可爱的你 换一换 【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠 爱逛***01 【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠 爱逛***01 【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠 爱逛***01 【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠 爱逛***01 【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠 爱逛***01 【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠 爱逛***01 㖺 爱逛 好货 好店 直播 品质 特色 实惠 热卖 猜你 喜欢 反馈 暴恐 举报 2.index.css /* @规则 @charset 设置样式表的编码 @import 导入其他样式文件 @meida 媒体查询 @font-face自定义字体 */ @import "reset.css"; @font-face { font-family: "iconfont"; src: url("../font/iconfont.eot"); src: url("../font/iconfont.eot?#iefix") format("embedded-opentype"), url("../font/iconfont.woff2") format("woff2"), url("../font/iconfont.woff") format("woff"), url("../font/iconfont.ttf") format("truetype"), url("../font/iconfont.svg#iconfont") format("svg"); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 头部信息 */ #headMessage li { /* 设置浮动后li的父级ul不需要清除浮动了,因为ul是设置浮动了的,不用担心有问题了*/ float: left; line-height: 35px; padding: 0 6px; /* 去除span标签里图标和文字的距离 */ font-size: 0; } #headMessage a { /* 行高在上面的li标签已经设置过了 */ color: #6c6c6c; font-size: 12px; } #headMessage a:hover { color: #f40; } #headMessage a .login { color: #f22e00; } #headMessage span { font-size: 12px; } #headMessage .arrow { margin-left: 7px; } #headMessage li strong { font-size: 12px; color: #f22e00; } /* 收藏夹颜色 */ #headMessage li span.store { color: #9c9c9c; } #headMessage li.line { font-size: 12px; color: #ddd; padding: 0 5px; } /* 头部广告 */ #headAd { background-color: #f12f04; } #headAd .go { display: block; padding: 10px 10px 10px 15px; } #headAd .go img { width: 80px; height: 80px; } #headAd ul { padding-top: 13px; } #headAd li { float: left; width: 209px; height: 75px; margin-right: 10px; padding: 12px 15px 0 15px; /* 触发怪异盒模型 不需要关心修改padding什么的,不受padding和border的影响*/ box-sizing: border-box; /* 盒模型 1.标准盒模型 总宽度=border(左右)+width+padding(左右) 总高度=border(上下)+height+padding(上下) 2.IE盒模型(怪异盒模型) 总宽度=width 总高度=height */ } #headAd li h3 { font-size: 20px; line-height: 28px; } #headAd li p { font-size: 14px; line-height: 20px; } #headAd li a { color: #fff; /* 鼠标放上去就有小手了 */ /* display: block; */ } #headAd li a img { width: 52px; height: 52px; border-radius: 5px; } #headAd li.item1 { background: url(../images/adbg_01.png) no-repeat; } #headAd li.item2 { background: url(../images/adbg_01.png) no-repeat; } #headAd li.item3 { background: url(../images/adbg_01.png) no-repeat; } #headAd li.item4 { background: url(../images/adbg_01.png) no-repeat; } #headAd li.item5 { background: url(../images/adbg_01.png) no-repeat; /* 最后一个后面没元素了 */ margin-right: 0; } /* 头部搜索 */ #headSearch { background-color: #fff; padding: 24px 0px 10px 0px; } #headSearch h1 a { display: block; width: 190px; height: 58px; /* 以图换字首行缩进。往左走 文字消失 */ background: url(../images/logo.png) center no-repeat; text-indent: -9999px; overflow: hidden; } #headSearch .code { width: 72px; height: 86px; position: relative; border: 1px solid #eee; margin-right: 110px; text-align: center; } /* 二维码 72 86 #eee mr110 6262 */ #headSearch .code img { width: 62px; height: 62px; } #headSearch .close { position: absolute; /* ×移到外面 宽度14+边框2 */ left: -16px; top: -1px; width: 14px; height: 14px; line-height: 14px; font-size: 14px; border: 1px solid #eee; color: #ddd; cursor: pointer; } #headSearch .search { width: 630px; margin: 0 auto; } #headSearch .searchTab { /* height22 最好给个高度，不然容易跟着左右图片走，可能出现文字环绕效果*/ height: 22px; padding-left: 17px; } #headSearch .searchTab li { float: left; width: 36px; line-height: 22px; margin-right: 4px; text-align: center; color: #f40; cursor: pointer; } #headSearch .searchTab li:hover { background-color: #ffeee5; } #headSearch .searchTab li.active { color: #fff; font-weight: bold; /*渐变背景线性渐变从左至右开始的颜色结束的颜色*/ background-image: linear-gradient(to right, #ff9000, #ff5000); border-radius: 6px 6px 0 0; } #headSearch .searchContent { height: 40px; } #headSearch .searchBox { width: 554px; height: 40px; /*设置成怪异盒模型这样给paddingborder都不受影响*/ box-sizing: border-box; border: 2px solid #ff5000; /*没有右侧边框*/ border-right: none; /*只有上和左有圆角*/ border-radius: 20 0 0 20px; overflow: hidden; position: relative; } #headSearch .searchBox input { /* 宽度留点给搜索图片 */ width: 490px; /* 内容高度：高度40px-边框2px*2 */ height: 36px; line-height: 36px; /* 去除边框 */ outline: none; border: none; /* 输入文字前的距离 */ text-indent: 10px; /* placeholder把input盖住了，设置个定位，和placeholder 处在同等级别，再给个z-index*/ position: absolute; z-index: 1; background-color: transparent; /*透明，为了能够看到后面的文字*/ } #headSearch .placeholder { position: absolute; top: 6px; left: 14px; } #headSearch .placeholder span { color: #9c9c9c; /* 往上走 */ vertical-align: 1px; } /* 照相机 */ #headSearch .imgSearch { font-size: 28px; position: absolute; right: 20px; color: #9c9c9c; top: -2px; cursor: pointer; } #headSearch .searchContent button { width: 74px; height: 40px; text-align: center; font-size: 18px; line-height: 40px; color: #fff; border: none; background-image: linear-gradient(to right, #ff9000, #ff5000); border-radius: 0 20px 20px 0; } #headSearch .hotKey { height: 25px; line-height: 25px; } #headSearch .hotKey a:hover { color: #f50; } /* 导航 */ #nav h2 { width: 190px; height: 30px; line-height: 30px; font-size: 16px; color: #fff; text-align: center; background-color: #f50; } #nav ul { float: left; /* 计算calc()注意符号前后必须有空格 任意单位都可以 */ width: calc(100% - 190px); background-image: linear-gradient(to right, #ff9000, #ff5000); } /* li l30* mr07 f14*/ #nav ul li { line-height: 30px; float: left; margin: 0 7px; font-size: 14px; color: #fff; padding: 0 5px; position: relative; } /*为什么a:hover::before而不是a::before:hover 是要放在a标签上才有效果，后面那是放在a标签的伪类上会有效果 */ #nav ul li:hover:before { content: ""; position: absolute; width: 23px; height: 13px; background-image: url(../images/ico_01.gif); top: -13px; /* 居中 */ left: 50%; /* width的一半 23/2 12或者13都行 */ margin-left: -12px; } #nav ul li.size { font-size: 16px; } #nav ul li a { color: #fff; font-weight: bold; } #nav ul li.line { margin: 0; } /* 首屏内容 */ /* 左边的内容w890 */ .firstLeft { width: 890px; } /* 侧边导航w190 h522 bcddd */ .firstLeft .sideNav { width: 190px; height: 522px; background: #fff; border: 1px solid #ff5000; /* 边框超出去了没有对齐 */ box-sizing: border-box; border-top: none; padding-top: 5px; } .firstLeft .sideNav li { height: 32px; line-height: 32px; padding-left: 25px; color: #999; /*过渡背景色*/ transition: background-color 0.3s; font-size: 14px; } .firstLeft .sideNav li:hover { background: #ffe4dc; color: #f50; } .firstLeft .sideNav li a { font-size: 14px; color: #666; } .firstLeft .sideNav a:hover { text-decoration: underline; } /* 鼠标移入li a标签的字体变色 */ .firstLeft .sideNav li:hover a { color: #f50; } .firstLeft .sideNav li span { font-size: 12px; margin-right: 5px; } /* 图片1容器 */ .firstLeft .img1Box { width: 690px; height: 282px; margin-top: 10px; } .firstLeft .pic { width: 520px; position: relative; } .firstLeft .pic button { width: 20px; height: 30px; line-height: 30px; color: #fff; cursor: pointer; border: none; /*支持情况IE9*/ background-color: rgba(0, 0, 0, 0.3); /*针对IE9以下的浏览器*/ /*background-color: #000\9; */ /* 透明 */ filter: alpha(opacity=30); position: absolute; top: 50%; /*宽度的一半15px*/ margin-top: -15px; display: none; } .firstLeft .pic button.leftBtn { left: 0; border-radius: 0 15px 15px 0; } .firstLeft .pic button.rightBtn { right: 0; border-radius: 15px 0 0 15px; } .firstLeft .pic:hover button { display: block; } .firstLeft .pic .circle { position: absolute; bottom: 15px; left: 50%; margin-left: -28px; background-color: rgba(255, 255, 255, 0.3); border-radius: 10px; padding: 3px 0; font-size: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .firstLeft .pic .circle span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #fff; margin: 0 3px; cursor: pointer; } .firstLeft .pic .circle span.active { background-color: #ff5000; } firstLeft .ad { width: 160px; } firstLeft .ad img { width: 160px; } /* 图片2容器*/ .firstLeft .img2Box { width: 690px; height: 220px; margin-top: 10px; } .firstLeft .img2Box .picTitle { height: 20px; } .firstLeft .img2Box .picTitle text { /* 20-3 f12控制台量出线高是3px */ height: 17px; line-height: 17px; } .firstLeft .img2Box .picTitle .bg { background: url(../images/title_bg.png) no-repeat; padding-left: 136px; columns: #666; } .firstLeft .img2Box .picTitle i { color: #ff1648; } .firstLeft .img2Box .picTitle .line { height: 3px; background-color: #ff1648; } .firstLeft .img2Box .img { width: 520px; height: 200px; background-color: #fff; position: relative; /* 设置图片垂直居中 */ display: table-cell; /*单元格*/ vertical-align: middle; /*方法二:弹性盒子 兼容性很差 display: flexbox; /* 水平对齐 */ justify-content: space-around; /* 垂直方向 align-items: center; */ } .firstLeft .img2Box .img img { margin: 0 10px; } .firstLeft .img2Box .ad title { height: 20px; line-height: 20px; } /* 淘宝头条 */ .firstLeft .news { width: 890px; height: 100px; background: #fff; margin-top: 10px; box-sizing: border-box; padding: 13px 13px 13px 20px; } .firstLeft .news .hd { margin-top: 15px; } .firstLeft .news .hd h3 { /* 以图换字 */ width: 129px; height: 26px; background: url("../images/news_logo.png") no-repeat; /* 隐藏文字 */ text-indent: -9999px; overflow: hidden; } .firstLeft .news .hd p { color: #999; line-height: 24px; } .firstLeft .news .newList { width: 680px; /* 设置相对定位,"更多"一会要定位*/ position: relative; } .firstLeft .news .newList .img { margin-right: 15px; } .firstLeft .news .newList .img img { width: 130px; height: 73px; } .firstLeft .news .newList h4 { line-height: 28px; font-size: 16px; font-weight: normal; } .firstLeft .news .newList h4 a { color: #333; } .firstLeft .news .newList h4 a:hover, .firstLeft .news .newList .more:hover { color: #ff5000; } .firstLeft .news .newList p { line-height: 18px; font-size: 14px; } .firstLeft .news .newList p a { color: #999; } .firstLeft .news .newList .more { position: absolute; top: 0; right: 0; } /* 右边内容 */ .firstRight { width: 290px; margin-top: 10px; } .firstRight .user { height: 140px; background: url("../images/user_bg.png"); padding-top: 5px; } .firstRight .user .avatar { display: block; width: 50px; height: 50px; margin: 0 auto; /* 给父级元素设置的弧度，所以超出部分隐藏才会是圆形 */ border-radius: 50%; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .firstRight .user .avatar img { width: 50px; height: 50px; } .firstRight .user .username { text-align: center; line-height: 16px; } .firstRight .user .members { text-align: center; line-height: 0; } .firstRight .user .members a { line-height: 12px; border-radius: 9px; -webkit-border-radius: 9px; -moz-border-radius: 9px; -ms-border-radius: 9px; -o-border-radius: 9px; padding: 0 10px 0 15px; margin: 0 2px; } /* 精灵图 */ .firstRight .user .members a.gold { background: #ffe4cd url("../images/ico.png") 0 -572px no-repeat; } .firstRight .user .members a.club { background: #ffe4cd url("../images/ico.png") 0 -528px no-repeat; } .firstRight .user .btn { text-align: center; } .firstRight .user .btn button { width: 75px; height: 25px; line-height: 25px; margin: 12px 2px 0 2px; color: #fff; font-weight: bold; border-radius: 4px; border: none; background-image: linear-gradient(to right, #ff9000, #ff5000); } .firstRight .user .btn button.login { width: 92px; } .firstRight .tipOff { display: block; height: 26px; line-height: 26px; color: #f40; background: #ffe4dc; text-align: center; } .firstRight .tipOff i { line-height: 12px; vertical-align: 1px; /* 相对定位，相对原来位置 */ position: relative; left: 30px; } .firstRight .notice { height: 108px; background-color: #fff; } .firstRight .notice .title { text-align: center; /* 这里设置为0 下面给li标签再设置字体大小，这样字之间的间距就没了 */ font-size: 0; padding-top: 10px; } .firstRight .notice .title li { /* inline-block简单来说就是将对象呈现为inline对象， 但是对象的内容作为block对象呈现。 之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值， 使其既具有block的宽度高度特性又具有inline的同行特性。 */ display: inline-block; font-size: 12px; line-height: 20px; padding: 0 4px; margin: 0 4px; } .firstRight .notice .title li a.active { font-weight: bold; border-bottom: 2px solid #f40; } .firstRight .notice .title li a:hover { color: #f40; } .firstRight .notice .content { margin: 0 12px; padding-top: 10px; } .firstRight .notice .content li { height: 25px; line-height: 25px; overflow: hidden; float: left; width: 130px; } .firstRight .notice .content li a:hover, .firstRight .notice .content li.item1 a { color: #ff5000; } .firstRight .notice .content li.item1 { width: 100%; color: #ff5000; } /* 图标区 */ .firstRight .icon { width: 100%; height: 231px; background: #fff; /* 定义列宽的算法,fixed的计算方式根据表格宽度自动计算列宽,每列宽度均分整个表格的宽度 */ table-layout: fixed; } .firstRight .icon td { border: 1px solid #f4f4f4; text-align: center; } .firstRight .icon td span { display: block; width: 24px; height: 24px; margin: 0 auto; background: url("../images/ico.png") no-repeat; } .firstRight .icon i { line-height: 34px; color: #333; } .firstRight .icon .item1 span { background-position: 0 0; } .firstRight .icon .item2 span { background-position: 0 -87px; } .firstRight .icon .item3 span { background-position: 0 -44px; } .firstRight .icon .item4 span { background-position: 0 -132px; } .firstRight .icon .item5 span { background-position: 0 -176px; } .firstRight .icon .item6 span { background-position: 0 -220px; } .firstRight .icon .item7 span { background-position: 0 -264px; } .firstRight .icon .item8 span { background-position: 0 -308px; } .firstRight .icon .item9 span { background-position: 0 -352px; } .firstRight .icon .item10 span { background-position: 0 -396px; } .firstRight .icon .item11 span { background-position: 0 -440px; } .firstRight .icon .item12 span { background-position: 0 -484px; } /* APP */ .firstRight .app { height: 111px; background-color: #fff; } .firstRight .app .title h3 { font-size: 14px; padding-left: 14px; } .firstRight .app .title a { margin-left: 10px; } .firstRight .app .title a:hover { color: #f40; } .firstRight .app .appIcon { text-align: center; font-size: 0; } .firstRight .app .appIcon li { /* 变成行级块元素 变成横排序*/ display: inline-block; margin: 0 10px 8px 10px; width: 32px; height: 32px; } .firstRight .app .appIcon li img { width: 32px; height: 32px; } /* 有好货 */ .goods { width: 590px; height: 658px; background: #fff; } .goods .head { height: 24px; margin: 20px 0; padding: 0 20px; line-height: 24px; } .goods .head h3 { /* 预防换行符解析成空格 */ font-size: 0; font-weight: normal; } .goods .head h3 img { height: 24px; } .goods .head h3 span { /* 和img标签对齐 */ vertical-align: middle; color: #ccc; font-size: 20px; margin: 0 5px; } .goods .head h3 i { font-size: 12px; /* 对齐 */ vertical-align: middle; } .goods .head .change { color: #999; } .goods .list { /* 居中对齐,并且在一行中显示,所以换成inline-block,如果用float要设置成居中还得算距离,很麻烦 */ /* 但是设置inline-block就得处理换行符被解析成空格的问题,先在父级设置字体为0 */ font-size: 0; text-align: center; } .goods .list li { display: inline-block; width: 180px; margin: 0 2px 35px 2px; text-align: left; } .goods .list li img { width: 180px; height: 180px; } .goods .list li h4 { font-size: 16px; height: 28px; line-height: 28px; font-weight: normal; } .goods .list li h4 a:hover { color: #f40; } .goods .list li .text { height: 24px; line-height: 24px; font-size: 14px; overflow: hidden; } .goods .list li .text a { color: #999; } .goods .list li .comment { display: block; height: 22px; line-height: 22px; font-size: 12px; color: #35b1ff; margin-top: 12px; } .goods .list li .comment span { margin-right: 4px; font-size: 14px; } /* 爱逛街 */ .shopping .list li .text { height: 44px; /* 行高是高度的一半,这样文字占两行 */ line-height: 22px; font-size: 14px; margin-top: 11px; overflow: hidden; } .shopping .list li .text span { font-size: 14px; color: #ebebeb; /* 相对自己原来位置上移 */ position: relative; top: -5px; } .shopping .list li a:hover { color: #f40; } .shopping .list span img { width: 22px; height: 22px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .shopping .list li .comment i { color: #999; } /* 右侧固定定位导航 */ #tool { width: 50px; height: 350px; /* background-color: #f00; */ position: fixed; top: 100px; right: 3%; } #tool span { font-size: 32px; color: #ff7f13; width: 50px; height: 36px; line-height: 36px; text-align: center; position: absolute; top: -28px; } #tool .btn { height: 350px; border-radius: 8px; overflow: hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } #tool a{ display: block; width: 50px; height: 50px; text-align: center; background: #fff; /* 在空格的地方强制换行 */ word-break: keep-all; padding-top:6px; box-sizing: border-box; position: relative; } #tool a:after{ content: ''; border-bottom: 1px solid #efefef; width: 34px; position: absolute; left: 8px; top: 0; } #tool a.item6{ line-height: 40px; } #tool a:hover,#tool a.active{ background-image: linear-gradient(135deg,#ff9000,#ff5000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); color: #fff; font-weight: bold; } #tool a:hover:after,#tool a.active:after{ border: none; } 3.reset.css /* 样式重置 */ body,p,h1,h2,h3,h4,ul{ margin: 0; } ul{ margin: 0; padding: 0; list-style: none; } img{ border:none; /* 垂直对齐方式 */ vertical-align: middle; } a{ text-decoration: none; color: #3c3c3c; } i{ font-style: normal; } input,button{ margin: 0; padding: 0; } button{ outline: none; } table{ border-collapse: collapse; } th,td{ padding: 0; } body{ /* 设置字体 font是复合属性,写在一起要尊重规则 */ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; /* font-family: '宋体'; font-family: '\5b8b\4f53'; font-family: SimSun; font-family: "微软雅黑"; font-family: Miscrosoft YaHei; */ color: #3c3c3c; /* background-color: #f4f4f4; */ } /* 预定义样式 常使用的 */ /* 清除浮动三件套 */ .clearfix:after{ content:''; clear: both; display: block; } /* 浮动 */ .fl{ float: left; } .fr{ float:right; } .layer{ width: 1190px; margin:0 auto; } /* 常用颜色 */ .c4{ color: #f40; } .c5{ color: #f50; } .c6{ color: #8d7afb; } .c7{ color: #a8c001; } .mr5{ margin-right: 5px; } .mr7{ margin-right: 7px; } .mt10{ margin-top: 10px; } .mr10{ margin-right: 10px; } |
1.2引入图标
1.2在购物车里点击下载代码 
1.3解压后,找到使用说明的文件 
我们用unicode编码的方式引用它
然后我们可以修改刚刚拷贝过来的代码中的路径 
1.5 说明文档的第二步.复制到index.css中 
大家查看效果 
其他图标同样的操作,在span标签添加class=“iconfont”,再写上编码【本文地址】
今日新闻 |
推荐新闻 |