提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
提示:以下是本篇文章正文内容,下面案例可供参考
一、html5 css3
示例:利用html5标签一步一步搭建页面。html作为骨架,css染上颜色。
二、使用步骤
1.连接css,规范html语句。
代码如下(示例):
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>淘宝网 - 淘!我喜欢</title> | |
<link rel="stylesheet" href="css/index.css"> | |
<link rel="icon" href="favicon.ico"> | |
<base target="_blank"> | |
</head> | |
<body> | |
<!-- 头部信息 --> | |
<div id="headMessage" class="layer clearfix"> | |
<ul class="fl"> | |
<li class="title"> | |
<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 stroe">㐲</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/go.png" alt=""></a> | |
<ul class="fr"> | |
<li class="item1"> | |
<a href="#" class="fr"> | |
<img src="images/adimg_01.jpg" alt=""> | |
</a> | |
<h3><a href="#">电视会场</a></h3> | |
<p><a href="#">最高降2000</a></p> | |
</li> | |
<li class="item2"> | |
<a href="#" class="fr"> | |
<img src="images/adimg_02.jpg" alt=""> | |
</a> | |
<h3><a href="#">电视会场</a></h3> | |
<p><a href="#">最高降2000</a></p> | |
</li> | |
<li class="item3"> | |
<a href="#" class="fr"> | |
<img src="images/adimg_03.jpg" alt=""> | |
</a> | |
<h3><a href="#">电视会场</a></h3> | |
<p><a href="#">最高降2000</a></p> | |
</li> | |
<li class="item4"> | |
<a href="#" class="fr"> | |
<img src="images/adimg_04.jpg" alt=""> | |
</a> | |
<h3><a href="#">电视会场</a></h3> | |
<p><a href="#">最高降2000</a></p> | |
</li> | |
<li class="item5"> | |
<a href="#" class="fr"> | |
<img src="images/adimg_05.jpg" alt=""> | |
</a> | |
<h3><a href="#">电视会场</a></h3> | |
<p><a href="#">最高降2000</a></p> | |
</li> | |
<!-- <li> | |
<a href="#" class="fr"><img src="images/adimg_01.jpg" alt=""></a> | |
<h3><a href="#">电视会场</a></h3> | |
<p><a href="#">最高降2000</a></p> | |
</li> --> | |
</ul> | |
</div> | |
</div> | |
<!-- 头部搜索 --> | |
<div id="headSearch"> | |
<div class="cleafix layer"> | |
<!-- <h1><a href="#"><img src="images/logo.png" 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/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>网红裤腰带 洋气 国际范 9.9包邮</span> | |
</div> | |
<span class="iconfont imgSearch"></span> | |
</div> | |
<div class="btn fl"> | |
<button type="submit">搜索</button> | |
</div> | |
</form> | |
</div> | |
<div class="hotKey"> | |
<a href="#" class="c5">积木</a> | |
<a href="#">网线</a> | |
<a href="#" class="c5">爬行垫</a> | |
<a href="#">时尚连衣裙</a> | |
<a href="#">男士T恤</a> | |
<a href="#" class="c5">时尚休闲裤</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 fr"> | |
<div class="pic fl"> | |
<div class="img"> | |
<a href="#"><img src="images/pic_01.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/ad_02.jpg" alt=""></a> | |
</div> | |
</div> | |
<!-- 图片2容器 --> | |
<div class="img2Box fr"> | |
<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/pic_02.jpg" alt=""></a><a href="#"><img src="images/pic_03.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/ad_03.jpg" alt=""></a> | |
</div> | |
</div> | |
<!-- 淘宝头条 --> | |
<div class="news fl"> | |
<div class="hd fl"> | |
<h3>淘宝头条</h3> | |
<p>让你的生活更有趣</p> | |
</div> | |
<div class="newList fr"> | |
<div class="imtem"> | |
<a href="#" class="fl img"><img src="images/news_img_01.jpg" alt=""></a> | |
<h4><a href="#">微漫酱访谈第三期:超萌舞见弥音音!</a></h4> | |
<p><a href="#">哈喽,大家好,我是你们可爱的微漫酱,今天我们请到了一位舞见小姐姐来做客我们的访谈事,她就是弥音音!</a></p> | |
<a href="#" class="more">更多></a> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- 右边的内容 --> | |
<div class="firstRight fr"> | |
<!-- 用户 --> | |
<div class="user"> | |
<a href="#" class="avatar"><img src="images/avatar.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="#">天猫618进入热身 84个品牌在天猫共获粉丝4.3亿</a></li> | |
<li><a href="#">天猫618五折卖车</a></li> | |
<li><a href="#">天猫618直播间观看指南</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 cleafix"> | |
<h3 class="fl">阿里APP</h3> | |
<a href="#" class="fr">更多></a> | |
</div> | |
<ul class="appIcon"> | |
<li><a href="#"><img src="images/app_01.webp" 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.jpg" 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 class="layer cleafix mt10"> | |
<!-- 有好货 --> | |
<div class="goods fl"> | |
<div class="head cleafix"> | |
<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/shop_img_01.jpg" alt=""></a> | |
<h4><a href="#">max破产都要买的口红</a></h4> | |
<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p> | |
<a href="#" class="comment"> | |
<span class="iconfont"></span><i>5950 人说好</i> | |
</a> | |
</li> | |
<li> | |
<a href="#"><img src="images/shop_img_02.jpg" alt=""></a> | |
<h4><a href="#">max破产都要买的口红</a></h4> | |
<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p> | |
<a href="#" class="comment"> | |
<span class="iconfont"></span><i>5950 人说好</i> | |
</a> | |
</li> | |
<li> | |
<a href="#"><img src="images/shop_img_03.jpg" alt=""></a> | |
<h4><a href="#">max破产都要买的口红</a></h4> | |
<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p> | |
<a href="#" class="comment"> | |
<span class="iconfont"></span><i>5950 人说好</i> | |
</a> | |
</li> | |
<li> | |
<a href="#"><img src="images/shop_img_04.jpg" alt=""></a> | |
<h4><a href="#">max破产都要买的口红</a></h4> | |
<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p> | |
<a href="#" class="comment"> | |
<span class="iconfont"></span><i>5950 人说好</i> | |
</a> | |
</li> | |
<li> | |
<a href="#"><img src="images/shop_img_05.jpg" alt=""></a> | |
<h4><a href="#">max破产都要买的口红</a></h4> | |
<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p> | |
<a href="#" class="comment"> | |
<span class="iconfont"></span><i>5950 人说好</i> | |
</a> | |
</li> | |
<li> | |
<a href="#"><img src="images/shop_img_06.jpg" alt=""></a> | |
<h4><a href="#">max破产都要买的口红</a></h4> | |
<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p> | |
<a href="#" class="comment"> | |
<span class="iconfont"></span><i>5950 人说好</i> | |
</a> | |
</li> | |
</ul> | |
</div> | |
<!-- 爱逛街 --> | |
<div class="goods fr shooping"> | |
<div class="head cleafix"> | |
<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/shop_img_07.jpg" alt=""></a> | |
<p class="text"> | |
<span class="iconfont"></span> | |
<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a> | |
</p> | |
<a href="#" class="comment"> | |
<span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i> | |
</a> | |
</li> | |
<li> | |
<a href="#"><img src="images/shop_img_08.jpg" alt=""></a> | |
<p class="text"> | |
<span class="iconfont"></span> | |
<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a> | |
</p> | |
<a href="#" class="comment"> | |
<span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i> | |
</a> | |
</li> | |
<li> | |
<a href="#"><img src="images/shop_img_09.jpg" alt=""></a> | |
<p class="text"> | |
<span class="iconfont"></span> | |
<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a> | |
</p> | |
<a href="#" class="comment"> | |
<span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i> | |
</a> | |
</li> | |
<li> | |
<a href="#"><img src="images/shop_img_01.jpg" alt=""></a> | |
<p class="text"> | |
<span class="iconfont"></span> | |
<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a> | |
</p> | |
<a href="#" class="comment"> | |
<span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i> | |
</a> | |
</li> | |
<li> | |
<a href="#"><img src="images/shop_img_10.jpg" alt=""></a> | |
<p class="text"> | |
<span class="iconfont"></span> | |
<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a> | |
</p> | |
<a href="#" class="comment"> | |
<span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i> | |
</a> | |
</li> | |
<li> | |
<a href="#"><img src="images/shop_img_11.jpg" alt=""></a> | |
<p class="text"> | |
<span class="iconfont"></span> | |
<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a> | |
</p> | |
<a href="#" class="comment"> | |
<span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i> | |
</a> | |
</li> | |
</ul> | |
</div> | |
</div> | |
<!-- 右侧固定定位导航 --> | |
<div id="tool"> | |
<span class="iconfont"></span> | |
<div class="btn"> | |
<a href="#" 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> | |
</body> | |
</html> <!--以下是css部分,将这一部分复制到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{ float: left; line-height: 35px; padding: 0 6px; font-size: 0; } #headMessage a{ color: #6c6c6c; font-size: 12px; } #headMessage a:hover{ 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.stroe{ 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; 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_02.png) no-repeat; } #headAd li.item3{ background: url(../images/adbg_03.png) no-repeat; } #headAd li.item4{ background: url(../images/adbg_04.png) no-repeat; } #headAd li.item5{ background: url(../images/adbg_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/logo.png) center no-repeat; text-indent: -9999px; overflow: hidden; margin-top: 8px; } #headSearch .code{ width: 72px; height: 86px; border: 1px solid #eee; position: relative; margin-right: 110px; text-align: center; } #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; border: 1px solid #eee; color: #ddd; cursor: pointer; } #headSearch .search{ width: 630px; margin: 0 auto; } #headSearch .searchTab{ 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); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); border-radius: 6px 6px 0 0; } #headSearch .searchContent{ height: 40px; } #headSearch .searchBox{ width: 554px; height: 40px; box-sizing: border-box; border: 2px solid #ff5000; border-right: none; border-radius: 20px 0 0 20px; overflow: hidden; position: relative; } #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 .placeholder{ position: absolute; top: 6px; left: 14px; } #headSearch .placeholder span{ color: #9c9c9c; vertical-align: 1px; } #headSearch .imgSearch{ font-size: 28px; color: #9c9c9c; position: absolute; right: 20px; 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); 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); */ /* 支持情况: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:hover:before{ content: ''; position: absolute; width: 23px; height: 13px; background-image: url(../images/ico_01.gif); 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; } .firstLeft .sideNav li{ height: 32px; line-height: 32px; padding-left: 25px; color: #999; font-size: 14px; transition: background-color 0.3s; } .firstLeft .sideNav li a{ font-size: 14px; color: #666; } .firstLeft .sideNav li span{ font-size: 12px; margin-right: 5px; } .firstLeft .sideNav li:hover{ background: #ffe4dc; color: #f50; } .firstLeft .sideNav li:hover a{ color: #f50; } .firstLeft .sideNav 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,0.3); /* 支持情况:IE9+ */ background-color: #000\9; /* IE9以下的浏览器认识 */ 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,0.3); } .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/title_bg.png) no-repeat left; padding-left: 136px; columns: #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; vertical-align: middle; /* display: flex; 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; color: #999; } /* 右边的内容 */ .firstRight{ width: 290px; margin-top: 10px; } /* 用户 */ .firstRight .user{ height: 140px; padding-top: 5px; background-image: url(../images/user_bg.png); } .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: #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; border: none; 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%; color: #ff5000; } /* 图标区域 */ .firstRight .icon{ width: 100%; height: 231px; 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 h3{ font-size: 14px; padding-left: 14px; } .firstRight .app a{ margin-right: 10px; } .firstRight .app a:hover{ color: #f40; } .firstRight .app .appIcon{ text-align: center; font-size: 0; } .firstRight .app .appIcon li{ width: 32px; height: 32px; display: inline-block; margin: 0 10px 8px 10px; } .firstRight .app .appIcon li img{ width: 32px; height: 32px; } /* 有好货与爱逛街 */ /* 有好货 */ .goods{ width: 590px; height: 658px; background-color: #fff; overflow: hidden; } .goods .head{ height: 24px; line-height: 24px; margin: 20px 0; padding: 0 20px; } .goods .head h3{ font-size: 0; font-weight: normal; } .goods .head h3 img{ height: 24px; } .goods .head h3 span{ vertical-align: middle; color: #ccc; font-size: 20px; margin: 0 5px; } .goods .head h3 i{ font-size: 12px; vertical-align: middle; color: #999; } .goods .head .change{ color: #999; } .goods .list{ font-size: 0; text-align: center; } .goods .list li{ width: 180px; display: inline-block; 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{ font-size: 14px; margin-right: 4px; } /* 爱逛街 */ .shooping .list li .text{ height: 44px; line-height: 22px; font-size: 14px; overflow: hidden; margin-top: 11px;; } .shooping .list li .text span{ font-size: 14px; color: #ebebeb; position: relative; top: -5px; } .shooping .list li .text a:hover{ color: #f40; } .shooping .list li .comment{ color: #999; } .shooping .list li .comment img{ width: 22px; height: 22px; border-radius: 50%; } /* 右侧固定定位导航 */ #tool{ width: 50px; height: 350px; /* background-color: #f00; */ position: fixed; top: 100px; right: 3%; /* border: 1px solid #f00; */ } #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: #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; bottom: 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; } |
还有一个淘宝facicon.ico小标签,自己去下载放入和index.html同级文件中即可。不加也可以。
总结
以基本html标签和css实现页面。适合新手练习。