内容概览
- 模拟淘宝首页(静态)
- 一、项目重难点
- 二、效果图及源码
模拟淘宝首页(静态)
一、项目重难点
- 样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应HTML页面的样式重置。
line-height
属性的不同值的区别body { font-size: 16px line-height: normal; /* 默认。设置合理的行间距。其子级元素继承的是:同下所示 */ line-height: 15px; /* 行高为:15px ; 其子级元素继承的是:同下所示 */ line-height: 100%; /* 行高为:16*200%=32px ; 其子级元素继承的是:同下所示 */ line-height: 5em; /* 行高为:16*5=80px ; 其子级元素继承的是:该父级元素计算后的值,即如果其子元素的字体大小变为了10px,那么该子元素的行高还是为:其父级设置的80px */ line-height: 1.5; /* 行高为:16*1.5=24px ; 其子级元素继承的是:line-height的值,即如果其子元素的字体大小变为了10px,那么该子元素的行高为:10*1.5=15px */ }
- CSS @规则
/* @规则 @charset 设置样式表的编码 @import 引入其他样式文件 @media 媒体查询 @font-face 自定义字体 */
- favicon(设置HTML文档标题前面的 logo 小图标)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>淘宝网 - 淘!我喜欢</title> <link rel="stylesheet" href="./css/index.css"> <link rel="icon" href="favicon.ico"> //★★★模拟淘宝商城官网“HTML文档标题”前面的logo小图标。详见下图 !!! </head> <body> </body> </html>
- base标签
// base标签(一个页面只能出现一个base标签) href="www.baidu/123/" target="_blank"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>淘宝网 - 淘!我喜欢</title> <link rel="stylesheet" href="./css/index.css"> <link rel="icon" href="favicon.ico"> <base href="www.baidu/123/" target="_blank"> //★★★base标签在HTML页面结构中所处的位置 </head> <body> <a href="demo.jpg"></a> //★★★实际href中资源的地址为:www.baidu/123/demo.jpg </body> </html>
- 自定义图标
// 自定义图标,即一种文字(@font-face)———— 常用:阿里妈妈-iconfont
- 在写HTML结构时,能少嵌套的就少嵌套
- h标签的应用场景
// h标签的作用(有利于SEO) h1: 用于网页中的大标题,或者logo。(一个HTML页面中,h1标签只能用一次) h2:用于副标题,或者根据实际情况应用 h3:用于某个版块的标题(可以有多个) h4:用于某个版块的内部出现的标题 h5、h6:用于某个版块内部嵌套的另一个版块的标题等
- 【注意】a标签与a标签以及块级标签嵌套的场景
- 盒模型的分类
盒模型: 1)标准盒模型 总宽度 = border(左右) + width + padding(左右) 总高度 = border(上下) + height + padding(上下) 2)IE混杂模型(怪异盒模型 --> box-sizing: border-box) 总宽度 = width 总高度 = height
- 【注意】以图换字的两类方法
- 渐变背景色
/* 渐变背景色 1)谷歌浏览器、... 、IE 10+ background-image: linear-gradient(to right, #ff9000, #ff5000); 方向(可省略,默认:to bottom), 起始颜色, 结束颜色 2)IE 7、8、9(IE滤镜) filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); 起始颜色 结束颜色(rgba) 渐变方向(1:从左往右;2:从上往下) */ /* CSS 3.0 中的 过渡效果 transition: background-color 0.3s; */
calc()
函数/* 1) width: 1000px; 2) width: calc(100% - 190px); --> 适用于:IE 9+ 父级的宽 - 190px ==> 1000px */
- 【注意】"浮动"在对HTML页面布局时的灵活运用
rgba()
函数/* background-color: rgba(0, 0, 0, 0.5); 适用于:IE 9 及 IE 9+ background-color:#000\9; 适用于:IE 9 以下的浏览器认识(此处的"\9"可触发:CSS HACK) filter: alpha(opacity=30); 透明效果 */
- 【注意】子级有浮动,父级一定要清浮动(“三件套”)
- 图片的居中对齐
/* 图片居中对齐的两种实现方式: 1)模拟单元格(表格中单元格内的内容都是垂直居中对齐的) display: table-cell; vertical: middle; 2)弹性盒模型(适用于:IE 10 和 IE 10+) display: flex; justify-content: space-around; 弹性项目平均分布在该行上,两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。否则,弹性项目沿该行分布,且彼此间隔相等(比如是20px),同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。 align-items: center; 均分垂直方向的间距 */
- CSS Sprites
/* 雪碧图(CSS精灵) 1、缩小图标文件的大小 2、减少图片的http请求,减轻服务器的压力,节省带宽 利用:background-position 属性,如下: background: #ffe4dc url(../images/ico.png) 0 -572px no-repeat; 注意:设置“位置”的原理 */
- 【注意】"相对定位"的应用(相对于自己原来的位置进行定位)
- 使 ul 列表中的所有 li 元素居中对齐
/* 当ul列表中的所有li元素需要在父级盒子内部居中显示时,不能用 float: left; 直接在ul中设置"text-align: center;", 再将li元素的display设置为inline-block,就可以实现居中显示。 */
- 表格布局
例如,实现淘宝商城中的以下效果,可以采用“表格”布局:/* 表格布局(table) 1、边框设置简便 2、单元格内容垂直居中 3、单元格的宽度会自动计算 */
/* 淘宝商城_CSS代码节选示例 */ table { border-collapse: collapse; /* 边框模式---合并的模式:即两个单元格之间的的边框只需要显示一个就行 */ } th,td { padding: 0; } /* 表头为th;普通单元格为td;行为tr */ /* 图标区域 */ .firstRight .icon { width: 100%; height: 229px; background-color: #fff; table-layout: fixed; /* 定义列宽的算法---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 td 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; }
- .webp(图片格式)
/* .webp 是谷歌开发的一种图片格式,只能用于在网站中显示,其体积相较于普通的图片格式小得多,且图片的清晰度不变 IE不支持、火狐在65以上的版本支持,谷歌支持。 可以通过JS判断用户所用浏览器的版本,以选择相应的图片格式。 */
- 实现“词”换行
/* word-break: keep-all; 在空格的地方强制换行 */
- 使用“伪元素”的注意事项
/* ::after 和 :after 区别 1) : 表示伪类 2):: 表示伪元素(是 CSS 3.0 中的标准,IE_8不认识两个冒号,因此为了兼容IE_8,可以直接将伪元素写为 :before 或 :after ) */
二、效果图及源码
- 效果图如下:
- 源码如下:(获取详细源码及所用素材文件等—请戳我!!!)
1> index.html
2> index.css<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘宝网 - 淘!我喜欢</title> <link rel="stylesheet" href="css/index.css"> <link rel="icon" href="favicon.ico"> <base target="_blank"> </head> <body> <!-- ★ 划分HTML结构的依据:内容、颜色块、间距、边框。★ --> <!-- 头部信息 --> <div id="headMessage" class="clearfix layer"> <ul class="fl"> <li> <span>中国大陆</span> <span class="iconfont arrow"></span> </li> <li class="mr7"> <a href="#" class="login mr7">亲,请登录</a> <a href="#">免费注册</a> </li> <li> <a href="#">手机逛淘宝</a> </li> </ul> <ul class="fr"> <li> <a href="#">我的淘宝</a> <span class="iconfont arrow"></span> </li> <li> <span class="iconfont mr5 c4"></span> <a href="#">购物车</a> <strong>0</strong> <span class="iconfont arrow"></span> </li> <li> <a href="#"><span class="iconfont mr5 store">㐲</span>收藏夹</a> <span class="iconfont arrow"></span> </li> <li> <a href="#">商品分类</a> </li> <li class="line">|</li> <li> <a href="#">千牛卖家中心</a> <span class="iconfont arrow"></span> </li> <li> <a href="#">联系客服</a> <span class="iconfont arrow"></span> </li> <li> <span class="iconfont c4 mr5"></span> <a href="#">网站导航</a> <span class="iconfont arrow"></span> </li> </ul> </div> <!-- 头部广告 --> <div id="headAd"> <div class="layer clearfix"> <a href="#" class="fl go"><img src="images/headAd-logo.png" alt=""></a> <ul class="fr"> <!-- <li> <a href="#" class="fr"><img src="images/headAd-list-item-01.png" alt=""></a> <h3><a href="#">电视会场</a></h3> <p><a href="#">最高降2000</a></p> </li> --> <li class="item1"> <a href="#" class="fr"> <img src="images/headAd-list-item-01.png" alt=""> </a> <h3><a href="#">电视会场</a></h3> <p><a href="#">最高降2000</a></p> </li> <li class="item2"> <a href="#" class="fr"> <img src="images/headAd-list-item-02.png" alt=""> </a> <h3><a href="#">电视会场</a></h3> <p><a href="#">最高降2000</a></p> </li> <li class="item3"> <a href="#" class="fr"> <img src="images/headAd-list-item-03.png" alt=""> </a> <h3><a href="#">电视会场</a></h3> <p><a href="#">最高降2000</a></p> </li> <li class="item4"> <a href="#" class="fr"> <img src="images/headAd-list-item-04.png" alt=""> </a> <h3><a href="#">电视会场</a></h3> <p><a href="#">最高降2000</a></p> </li> <li class="item5"> <a href="#" class="fr"> <img src="images/headAd-list-item-05.png" alt=""> </a> <h3><a href="#">电视会场</a></h3> <p><a href="#">最高降2000</a></p> </li> </ul> </div> </div> <!-- 头部搜索 --> <div id="headSearch"> <div class="clearfix layer"> <!-- <h1><a href="#"><img src="images/headSearch-logo.gif" alt="淘宝网"></a></h1> --> <h1 class="fl"><a href="#">淘宝网</a></h1> <div class="code fr"> <span class="iconfont close"></span> <span class="c5">手机淘宝</span> <img src="images/headSearch-code.png" alt=""> </div> <div class="search"> <ul class="searchTab clearfix"> <li class="active">宝贝</li> <li>天猫</li> <li>店铺</li> </ul> <div class="searchContent clearfix"> <form action=""> <div class="searchBox fl"> <input type="text"> <div class="placeholder"> <i class="iconfont"></i> <span>毛衣女冬中长款加厚</span> </div> <span class="iconfont imgSearch"></span> </div> <div class="btn fl"> <button type="submit">搜索</button> </div> </form> </div> <div class="hotKey"> <a href="#">连衣裙</a> <a href="#">四件套</a> <a href="#" class="c5">潮流T恤</a> <a href="#">时尚女鞋</a> <a href="#">短裤</a> <a href="#">半身裙</a> <a href="#">男士外套</a> <a href="#">墙纸</a> <a href="#">行车记录仪</a> <a href="#">新款男鞋</a> <a href="#">耳机</a> <a href="#">时尚女包</a> <a href="#">沙发</a> </div> </div> </div> </div> <!-- 导航 --> <div id="nav" class="layer clearfix"> <h2 class="fl">主题市场</h2> <ul> <li class="size"><a href="#">天猫</a></li> <li class="size"><a href="#">聚划算</a></li> <li class="size"><a href="#">天猫超市</a></li> <li class="line">|</li> <li><a href="#">淘抢购</a></li> <li><a href="#">电器城</a></li> <li><a href="#">司法拍卖</a></li> <li><a href="#">淘宝心选</a></li> <li><a href="#">兴农脱贫</a></li> <li class="line">|</li> <li><a href="#">飞猪旅行</a></li> <li><a href="#">智能生活</a></li> <li><a href="#">苏宁易购</a></li> </ul> </div> <!-- 首屏内容 --> <div id="firstScreen" class="layer clearfix"> <!-- 左边的内容 --> <div class="firstLeft fl"> <!-- 侧边导航 --> <div class="sideNav fl"> <ul> <li> <a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span class="iconfont fr"></span> </li> <li> <a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a><span class="iconfont fr"></span> </li> <li> <a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span class="iconfont fr"></span> </li> <li> <a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span class="iconfont fr"></span> </li> <li> <a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span class="iconfont fr"></span> </li> <li> <a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span class="iconfont fr"></span> </li> <li> <a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span class="iconfont fr"></span> </li> <li> <a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span class="iconfont fr"></span> </li> <li> <a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span class="iconfont fr"></span> </li> <li> <a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span class="iconfont fr"></span> </li> <li> <a href="#">面料采集</a> / <a href="#">装修</a> / <a href="#">建材</a><span class="iconfont fr"></span> </li> <li> <a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span class="iconfont fr"></span> </li> <li> <a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span class="iconfont fr"></span> </li> <li> <a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span class="iconfont fr"></span> </li> <li> <a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span class="iconfont fr"></span> </li> <li> <a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span class="iconfont fr"></span> </li> </ul> </div> <!-- 图片1容器 --> <div class="img1Box fl"> <div class="pic fl"> <div class="img"> <a href="#"><img src="images/img1Box-pic-04.jpg" alt=""></a> </div> <button class="iconfont leftBtn"></button> <button class="iconfont rightBtn"></button> <div class="circle"> <span class="active"></span><span></span><span></span><span></span><span></span> </div> </div> <div class="ad fr"> <a href="#"><img src="images/img1Box-ad-01.jpg" alt=""></a> </div> </div> <!-- 图片2容器 --> <div class="img2Box fl"> <div class="pic fl"> <div class="picTitle"> <div class="text clearfix"> <span class="fl bg">理想生活上天猫</span> <span class="fr"><i>1</i>/6</span> </div> <div class="line"> <span></span> </div> </div> <div class="img"> <a href="#"><img src="images/img2Box-pic-03.jpg" alt=""></a> <a href="#"><img src="images/img2Box-pic-04.jpg" alt=""></a> </div> <button class="iconfont leftBtn"></button> <button class="iconfont rightBtn"></button> </div> <div class="ad fr"> <p class="title">今日特卖</p> <a href="#"><img src="images/img2Box-ad-01.jpg" alt=""></a> </div> </div> <!-- 淘宝论坛 --> <div class="news fl"> <div class="hd fl"> <h3>淘宝论坛</h3> <p>让你的生活更有趣</p> </div> <div class="newList fr"> <div class="item"> <a href="#" class="fl img"><img src="images/news-img-01.jpg" alt=""></a> <h4><a href="https://headline.bbs.taobao/detail.html?postId=8739614">淘宝头条“新品”内容招稿&内容规范【新增钉钉群】</a></h4> <p><a href="https://headline.bbs.taobao/detail.html?postId=8739614">各位达人小伙伴:现向各位广泛征集各领域新品内容,优质稿件头条公域将给予曝光扶持!</a></p> <a href="https://index.bbs.taobao/home.html" class="more">更多></a> </div> </div> </div> </div> <!-- 右边的内容 --> <div class="firstRight fr"> <!-- 用户 --> <div class="user"> <a href="#" class="avatar"><img src="images/firstRight-userBox-icon.jpg" alt=""></a> <p class="username">Hi! 你好</p> <p class="members"> <a href="#" class="gold">领淘金币抵钱</a> <a href="#" class="club">会员俱乐部</a> </p> <div class="btn"> <button class="login">登录</button> <button class="register">注册</button> <button class="shop">登录</button> </div> </div> <!-- 举报 --> <a href="#" class="tipOff"> <span>网上有害信息举报专区</span><i class="iconfont"></i> </a> <!-- 公告区 --> <div class="notice"> <ul class="title"> <li class="active"><a href="#">公告</a></li> <li><a href="#">规则</a></li> <li><a href="#">论坛</a></li> <li><a href="#">安全</a></li> <li><a href="#">公益</a></li> </ul> <ul class="content clearfix"> <li class="item1"><a href="#">95公益周阿里、腾讯等六家公司同台联合做公益</a></li> <li><a href="#">淘宝造物节之城市秘密</a></li> <li><a href="#">聚划算88红包省钱卡</a></li> </ul> </div> <!-- 图标区域 --> <table class="icon"> <tr> <td class="item1"> <a href="#"> <span></span> <i>充话费</i> </a> </td> <td class="item2"> <a href="#"> <span></span> <i>旅行</i> </a> </td> <td class="item3"> <a href="#"> <span></span> <i>车险</i> </a> </td> <td class="item4"> <a href="#"> <span></span> <i>游戏</i> </a> </td> </tr> <tr> <td class="item5"> <a href="#"> <span></span> <i>彩票</i> </a> </td> <td class="item6"> <a href="#"> <span></span> <i>电影</i> </a> </td> <td class="item7"> <a href="#"> <span></span> <i>酒店</i> </a> </td> <td class="item8"> <a href="#"> <span></span> <i>理财</i> </a> </td> </tr> <tr> <td class="item9"> <a href="#"> <span></span> <i>找服务</i> </a> </td> <td class="item10"> <a href="#"> <span></span> <i>演出</i> </a> </td> <td class="item11"> <a href="#"> <span></span> <i>水电煤</i> </a> </td> <td class="item12"> <a href="#"> <span></span> <i>火车票</i> </a> </td> </tr> </table> <!-- APP --> <div class="app"> <div class="title clearfix"> <h3 class="fl">阿里APP</h3> <a href="#" class="fr">更多></a> </div> <ul class="appIcon"> <li><a href="#"><img src="images/app_01.png" alt=""></a></li> <li><a href="#"><img src="images/app_02.png" alt=""></a></li> <li><a href="#"><img src="images/app_03.png" alt=""></a></li> <li><a href="#"><img src="images/app_04.png" alt=""></a></li> <li><a href="#"><img src="images/app_05.png" alt=""></a></li> <li><a href="#"><img src="images/app_06.png" alt=""></a></li> <li><a href="#"><img src="images/app_07.png" alt=""></a></li> <li><a href="#"><img src="images/app_08.png" alt=""></a></li> <li><a href="#"><img src="images/app_09.png" alt=""></a></li> <li><a href="#"><img src="images/app_10.png" alt=""></a></li> </ul> </div> </div> </div> <!-- 有好货与爱逛街 --> <div id="iGoodsShopping" class="layer clearfix mt10"> <!-- 有好货 --> <div class="goods fl"> <div class="head clearfix"> <h3 class="fl"> <img src="images/goods.png" alt="有好货"> <span class="iconfont"></span> <i>与品质生活不期而遇</i> </h3> <a href="#" class="fr change">换一换</a> </div> <ul class="list"> <li> <a href="#"><img src="images/goods_img_01.png" alt=""></a> <h4><a href="#">老铁,这是电吸门,请轻点关门</a></h4> <p class="text"><a href="#">电吸门可以避免车门未关紧闭带来的安全隐患,这款电吸门,拥有外观、新型专利保障,确保使用安全性,无需改装原车装饰,无需电脑编程及复杂的布线,就能让你毫不费力的关闭车门,体验前所未有的触感,而且门锁闭过程会让你感觉舒适,声音特别轻,告别传统沉闷的巨响。</a></p> <a href="#" class="comment"> <span class="iconfont"></span><i>1675 人说好</i> </a> </li> <li> <a href="#"><img src="images/goods_img_02.png" alt=""></a> <h4><a href="#">窗台整理架,利用家中每一寸空间</a></h4> <p class="text"><a href="#">简单易操作的设计,就算是女孩子一个人也完全没有问题。多种尺寸的选择,能满足不同空间与人群的使用需求。可伸缩的同时,移动起来也非常的方便,反复利用更环保。贴心人性化的围栏设计搭配优质耐用的选材,承重力杠杠滴且物品不易滑落,美观又实用。</a></p> <a href="#" class="comment"> <span class="iconfont"></span><i>338 人说好</i> </a> </li> <li> <a href="#"><img src="images/goods_img_03.png" alt=""></a> <h4><a href="#">“中国造”车睡神器,自驾游更轻松</a></h4> <p class="text"><a href="#">一般的我们去旅行,自驾的时候酒店都爆满,带上车载折叠床,随时随地将后排升级为车载大床房。如果去前不着村后不着地的地方,更需要车载折叠床来休息了。安装简单,扎实牢固,安全贴心而且可以睡下不止一个人哦,不愧是车睡神器,有了它自驾游更轻松了。</a></p> <a href="#" class="comment"> <span class="iconfont"></span><i>21 人说好</i> </a> </li> <li> <a href="#"><img src="images/goods_img_04.png" alt=""></a> <h4><a href="#">SUSISU 幻境流沙眼影盘</a></h4> <p class="text"><a href="#">幻境流沙,超级美腻外包装。</a></p> <a href="#" class="comment"> <span class="iconfont"></span><i>287 人说好</i> </a> </li> <li> <a href="#"><img src="images/goods_img_05.png" alt=""></a> <h4><a href="#">可折叠加厚双面使用榻榻米床垫</a></h4> <p class="text"><a href="#">可以折叠的榻榻米床垫,收纳不占空间,正反两面都可以使用,同时纯棉材质舒适亲肤,透气性好,保持贴身换将干爽 不粘腻。</a></p> <a href="#" class="comment"> <span class="iconfont"></span><i>106 人说好</i> </a> </li> <li> <a href="#"><img src="images/goods_img_06.png" alt=""></a> <h4><a href="#">YSL限量眼影银盘</a></h4> <p class="text"><a href="#">金属边框闪亮眼影盒,彰显低调的奢华之美。</a></p> <a href="#" class="comment"> <span class="iconfont"></span><i>30 人说好</i> </a> </li> </ul> </div> <!-- 爱逛街 --> <div class="goods fr shopping"> <div class="head clearfix"> <h3 class="fl"> <img src="images/shopping.png" alt="爱逛街"> <span class="iconfont"></span> <i>献给聪明可爱的你</i> </h3> <a href="#" class="fr change">更多></a> </div> <ul class="list"> <li> <a href="#"><img src="images/shopping_img_01.png" alt=""></a> <p class="text"> <span class="iconfont"></span> <a href="#">绑带英伦雪地靴</a> </p> <a href="#" class="comment"> <span><img src="images/shopping_img_01_icon.png" alt=""></span><i>淘***娘</i> </a> </li> <li> <a href="#"><img src="images/shopping_img_02.png" alt=""></a> <p class="text"> <span class="iconfont"></span> <a href="#">极简风的电脑桌收纳也是杠杠的</a> </p> <a href="#" class="comment"> <span><img src="images/shopping_img_02_icon.png" alt=""></span><i>小***范</i> </a> </li> <li> <a href="#"><img src="images/shopping_img_03.png" alt=""></a> <p class="text"> <span class="iconfont"></span> <a href="#">你的好友个性卫衣上线,温暖又时髦</a> </p> <a href="#" class="comment"> <span><img src="images/shopping_img_03_icon.png" alt=""></span><i>A***U</i> </a> </li> <li> <a href="#"><img src="images/shopping_img_04.png" alt=""></a> <p class="text"> <span class="iconfont"></span> <a href="#">仿真兔毛大翻领皮草大衣</a> </p> <a href="#" class="comment"> <span><img src="images/shopping_img_04_icon.png" alt=""></span><i>一***牌</i> </a> </li> <li> <a href="#"><img src="images/shopping_img_05.png" alt=""></a> <p class="text"> <span class="iconfont"></span> <a href="#">百褶小立领</a> </p> <a href="#" class="comment"> <span><img src="images/shopping_img_05_icon.png" alt=""></span><i>日***装</i> </a> </li> <li> <a href="#"><img src="images/shopping_img_06.png" alt=""></a> <p class="text"> <span class="iconfont"></span> <a href="#">复古娃娃领格子衬衫</a> </p> <a href="#" class="comment"> <span><img src="images/shopping_img_06_icon.png" alt=""></span><i>日***装</i> </a> </li> </div> </div> <!-- 右侧固定定位导航 --> <div id="tool"> <span class="iconfont"></span> <div class="btn"> <a href="#iGoodsShopping" target="_self" class="c4 active">爱逛 好货</a> <a href="#" class="c5">好店 直播</a> <a href="#" class="c6">品质 特色</a> <a href="#" class="c7">实惠 热卖</a> <a href="#" class="c4">猜你 喜欢</a> <a href="#" class="item6">反馈</a> <a href="#" class="">暴恐 举报</a> </div> </div> <!-- 占位符 --> <br> <br> <br> </body> </html>
3> reset.css/* @规则 @charset 设置样式表的编码 @import 导入其他样式文件 ---(样式模块化) @media 媒体查询 --- (eg:移动端适配、...) @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 { height: 35px; } #headMessage li { float: left; height: 35px; line-height: 35px; padding: 0 6px; font-size: 0; } #headMessage a { color: #6c6c6c; font-size: 12px; } #headMessage a:hover { color: #f40; } #headMessage a:hover span.store { color: #f40; } #headMessage a.login { color: #f22e00; } #headMessage span { font-size: 12px; } #headMessage span.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; } /* 头部广告 */ #headAd { background-color: #ff4600; } #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; box-sizing: border-box; /* 盒模型: 1、标准盒模型 总宽度=border(左右)+width+padding(左右) 总高度=border(上下)+width+padding(上下) 2、IE盒模型(怪异盒模型) 总宽度=width 总高度=height */ } #headAd li h3 { font-size: 20px; line-height: 28px; } #headAd li a { color: #fff; display: block; } #headAd li p { font-size: 14px; line-height: 20px; } #headAd li a img { width: 52px; height: 52px; border-radius: 5px; } #headAd li.item1 { background: url(../images/headAd-list-01.png) no-repeat; } #headAd li.item2 { background: url(../images/headAd-list-02.png) no-repeat; } #headAd li.item3 { background: url(../images/headAd-list-03.png) no-repeat; } #headAd li.item4 { background: url(../images/headAd-list-04.png) no-repeat; } #headAd li.item5 { background: url(../images/headAd-list-05.png) no-repeat; margin-right: 0; } /* 头部搜索 */ #headSearch { background-color: #fff; padding: 24px 0 10px 0; } #headSearch h1 a { display: block; width: 190px; height: 58px; background: url(../images/headSearch-logo-v1.png) center no-repeat; text-indent: -9999px; overflow: hidden; margin-top: 8px; } #headSearch .code { position: relative; width: 72px; height: 86px; border: 1px solid #eee; text-align: center; margin-right: 110px; } #headSearch .code img { width: 62px; height: 62px; } #headSearch .close { position: absolute; left: -16px; top: -1px; width: 14px; height: 14px; line-height: 14px; font-size: 14px; color: #ddd; border: 1px solid #eee; cursor: pointer; } #headSearch .search { width: 630px; margin: 0 auto; } #headSearch .searchTab { height: 22px; padding-left: 17px; } #headSearch .search li { float: left; width: 36px; line-height: 22px; margin-right: 4px; text-align: center; color: #f40; cursor: pointer; } #headSearch .search li:hover { background-color: #ffeee5; } #headSearch .search li.active { color: #fff; font-weight: bold; /* 渐变背景---CSS3属性---ie10以上 */ /* 以下是:线性渐变(参数依次为:渐变方向、起始颜色、结束颜色) */ background-image: linear-gradient(to right, #ff9000, #ff5000); /* IE滤镜(能够向下兼容到ie6)---以下是:线性渐变 */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); border-radius: 5px 5px 0 0; } #headSearch .searchContent { height: 40px; } #headSearch .searchBox { position: relative; width: 554px; height: 40px; box-sizing: border-box; border: 2px solid #ff5000; border-right: none; border-radius: 20px 0 0 20px; overflow: hidden; } #headSearch .searchBox input { width: 490px; height: 36px; line-height: 36px; outline: none; border: none; text-indent: 10px; position: absolute; z-index: 2; /* 此处的背景颜色设置为:透明 --- 以便能够看到后面的文字 */ background-color: transparent; } #headSearch .searchBox .placeholder { position: absolute; top: 6px; left: 14px; } #headSearch .searchBox .placeholder span { color: #9c9c9c; vertical-align: 1px; } #headSearch .searchBox .imgSearch { position: absolute; right: 20px; top: -2px; font-size: 28px; color: #9c9c9c; 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); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); 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 { margin-left: 190px; height: 30px; /* width: 1000px; width: calc(100% - 190px); */ /* calc(); 支持情况:IE9+ */ /* 设置渐变 */ background-image: linear-gradient(to right, #ff9000, #ff5000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); } #nav ul li { float: left; line-height: 30px; margin: 0 7px; font-size: 14px; color: #fff; padding: 0 5px; position: relative; } #nav ul li.size { font-size: 16px; } #nav ul li a { color: #fff; font-weight: bold; } #nav ul li.line { margin: 0; padding: 0; } #nav ul li.line::before { display: none; } #nav ul li:hover::before { content: ''; position: absolute; width: 23px; height: 13px; background-image: url(../images/icon_01.png); background-position: center; background-size: contain; top: -13px; left: 50%; margin-left: -12px; } /* 首屏内容 */ /* 左边的内容 */ .firstLeft { width: 890px; } /* 侧边导航 */ .firstLeft .sideNav { width: 190px; height: 522px; background: #fff; border: 1px solid #ff5000; box-sizing: border-box; border-top: none; padding-top: 5px; padding-bottom: 3px; } .firstLeft .sideNav li { height: 32px; line-height: 32px; padding-left: 25px; padding-right: 7px; font-size: 14px; color: #999; transition: background-color 0.3s; } .firstLeft .sideNav li a { font-size: 14px; color: #666; } .firstLeft .sideNav li span { font-size: 12px; } .firstLeft .sideNav li:hover { background-color: #ffe4dc; color: #f50; } .firstLeft .sideNav li:hover a { color: #f50; } .firstLeft .sideNav li:hover a:hover { text-decoration: underline; } /* 图片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; background-color: rgba(0, 0, 0, .3); /* 支持情况:ie9+ */ background-color: #000\9; /* 只有ie9以下的ie浏览器认识(CSS-hack) */ filter: alpha(opacity=30); /* 透明 */ position: absolute; top: 50%; 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: -35px; border-radius: 10px; padding: 3px 0; font-size: 0; background-color: rgba(255, 255, 255, .3); /* ie8不支持 */ } .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 { height: 17px; line-height: 17px; } .firstLeft .img2Box .picTitle .text .bg { background: url(../images/img2Box-picTitle-tianmao.png) no-repeat left; padding-left: 136px; color: #666; } .firstLeft .img2Box .picTitle .text i { color: #ff1648; } .firstLeft .img2Box .picTitle .line { height: 3px; background-color: #ff1648; position: relative; } .firstLeft .img2Box .picTitle .line span { width: 87px; height: 3px; background-color: #000; position: absolute; left: 0; } .firstLeft .img2Box .img { width: 520px; height: 200px; background-color: #fff; position: relative; display: table-cell; /* 对应单元格td 所有内容都能垂直居中显示 */ vertical-align: middle; /* 弹性盒模型---兼容性: ie10+ */ /* display: flex; justify-content: space-around; align-items: center; */ } .firstLeft .img2Box .img img { margin: 0 9px; } .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/taobaoluntan.png) no-repeat; background-size: contain; 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; color: #999; } /* 右边的内容 */ .firstRight { width: 290px; margin-top: 10px; } /* 用户 */ .firstRight .user { height: 140px; padding: 5px; background: url(../images/firstRight-userBox-bg.png) no-repeat; background-size: cover; } .firstRight .user .avatar { display: block; width: 50px; height: 50px; margin: 0 auto; border-radius: 50%; overflow: hidden; } .firstRight .user .avatar img { width: 50px; height: 50px; } .firstRight .user .username { text-align: center; line-height: 16px; } .firstRight .user .members { text-align: center; font-size: 0; } .firstRight .user .members a { display: inline-block; font-size: 12px; border-radius: 9px; padding: 0 10px 0 20px; margin: 0 2px; /* background-color: #ffe4dc; */ } .firstRight .user .members a.gold { background: #ffe4dc url(../images/ico.png) 0 -572px no-repeat; } .firstRight .user .members a.club { background: #ffe4dc 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; cursor: pointer; /* 设置渐变 */ background-image: linear-gradient(to right, #ff9000, #ff5000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); } .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 { font-size: 12px; vertical-align: 1px; position: relative; /* 相对于原来的位置进行定位,不影响前面文本的居中显示 */ left: 30px; } /* 公告区 */ .firstRight .notice { height: 108px; background-color: #fff; } .firstRight .notice .title { text-align: center; font-size: 0; padding-top: 10px; } .firstRight .notice .title li { display: inline-block; font-size: 12px; line-height: 20px; padding: 0 4px; margin: 0 10px; } .firstRight .notice .title li.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%; } /* 图标区域 */ .firstRight .icon { width: 100%; height: 229px; background-color: #fff; table-layout: fixed; /* 定义列宽的算法---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 td 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: #fff; } .firstRight .app .title { height: 30px; line-height: 30px; } .firstRight .app .title h3 { font-size: 14px; padding-left: 14px; } .firstRight .app .title a { margin-right: 10px; } .firstRight .app .title a:hover { color: #f40; } .firstRight .app .appIcon { text-align: center; font-size: 0; } .firstRight .app .appIcon li { display: inline-block; width: 32px; height: 32px; margin: 0 10px 8px 10px; } .firstRight .app .appIcon li img { width: 32px; height: 32px; } /* 有好货与爱逛街 */ #iGoodsShopping .goods { width: 590px; height: 658px; background-color: #fff; overflow: hidden; /*每一个li标签都有一个margin-bottom,但最后一行li标签其实不需要设置margin-bottom,所以此处做此设置。已隐藏margin多挤出来的的部分*/ } #iGoodsShopping .goods .head { height: 24px; line-height: 24px; margin: 20px 0; padding: 0 20px; } #iGoodsShopping .goods .head h3 { font-size: 0; font-weight: normal; } #iGoodsShopping .goods .head h3 img { height: 24px; } #iGoodsShopping .goods .head h3 span { vertical-align: middle; color: #ccc; font-size: 20px; margin: 0 5px; } #iGoodsShopping .goods .head h3 i { font-size: 12px; vertical-align: middle; color: #999; } #iGoodsShopping .goods .head .change { color: #999; } #iGoodsShopping .goods .list { font-size: 0; text-align: center; } #iGoodsShopping .goods .list li { display: inline-block; width: 180px; margin: 0 2px 35px 2px; } #iGoodsShopping .goods .list li img { width: 180px; height: 180px; } #iGoodsShopping .goods .list li h4 { font-size: 16px; height: 28px; line-height: 28px; font-weight: normal; text-align: left; overflow: hidden; } #iGoodsShopping .goods .list li h4 a:hover { color: #f40; } #iGoodsShopping .goods .list li .text { height: 24px; line-height: 24px; font-size: 14px; overflow: hidden; } #iGoodsShopping .goods .list li .text a { color: #999; } #iGoodsShopping .goods .list li ment { display: block; height: 22px; line-height: 22px; font-size: 12px; color: #35b1ff; margin-top: 12px; text-align: left; } #iGoodsShopping .goods .list li ment span { font-size: 14px; margin-right: 4px; } /* 爱逛街 */ #iGoodsShopping .shopping .list li .text { height: 44px; line-height: 22px; font-size: 14px; overflow: hidden; margin-top: 11px; } #iGoodsShopping .shopping .list li .text span { font-size: 14px; color: #ebebeb; position: relative; top: -5px; } #iGoodsShopping .shopping .list li .text a:hover { color: #f40; } #iGoodsShopping .shopping .list li ment { color: #999; } #iGoodsShopping .shopping .list li ment img { width: 22px; height: 22px; border-radius: 50%; } /* 右侧固定定位导航 */ #tool { width: 50px; height: 350px; position: fixed; top: 280px; right: 7%; } #tool span { font-size: 32px; color: #ff7f13; width: 50px; height: 36px; line-height: 36px; text-align: center; position: absolute; top: -28px; } #tool div { height: 350px; border-radius: 8px; overflow: hidden; } #tool a { display: block; width: 50px; height: 50px; text-align: center; background-color: #fff; word-break: keep-all; /*在空格的地方使其强制换行*/ padding-top: 6px; box-sizing: border-box; position: relative; } #tool a::after { /*ie8不兼容“::”,故要想兼容ie8,则此处的伪元素前面应该为“:” */ content: ''; border-bottom: 1px solid #efefef; width: 34px; position: absolute; left: 8px; bottom: 0; } #tool a.item6 { line-height: 40px; } #tool a:hover, #tool a.active { color: #fff; font-weight: bold; /* 设置渐变 */ background-image: linear-gradient(135deg, #ff9000, #ff5000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); } #tool a:hover::after, #tool a.active::after { display: none; }
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,button { margin: 0; padding: 0; } button { outline: none; border: none; } table { border-collapse: collapse; /* 边框模式---合并的模式:即两个单元格之间的的边框只需要显示一个就行 */ } th,td { padding: 0; } body { font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; /* 字体大小/行高 字体 */ color: #3c3c3c; background-color: #f4f4f4; } /* 预定义class */ .clearfix::after { content: ''; display: block; clear: both; } .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; } .mr10 { margin-right: 10px; } .mt10 { margin-top: 10px; }
总结自《渡一教育_2020权威HTML+CSS零基础入学》
更多推荐
HTML+CSS零基础学习笔记(五)— 模拟淘宝首页(静态)
发布评论