在网页中会有一些样式需要用到固定定位，对于它的使用，我们来作以练习。
一、介绍
固定定位的标签语句为：position：fixed；
和其他定位方法一样，都是需要先在父级元素进行相对定位，然后才能定位到想要定位的地方。
配合使用图层级数来使定位显示的效果更好，图层级数：z-index：n；
还有一些小技巧：
溢出省略号：
overflow:hidden;
text-overflow:eclipse;
white-space:nowarp;
::before /::after
{
content:"";}
linear-gradient(270deg,red,yellow,green,pink) 线性渐变
下面是实践的例子：
二、例子
代码部分：
html部分：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/commen.css"/>
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/font/iconfont.css"/>
</head>
<body>
<!--头部广告-->
<div id="top-adv">
<div class="top-adv">
<a href=""><img src="images/top-0.jpg" alt=""/></a>
<a href="" class="one"><img src="images/top-1.webp" alt=""/></a>
<a href="" class="one"><img src="images/top-2.webp" alt=""/></a>
<span class="iconfont icon-guanbi"></span>
</div>
</div>
<!--头部导航-->
<div id="top">
<div class="top">
<div class="top-left fl">
<span class="iconfont icon-dingwei red"></span>
<a href="">陕西</a>
<div>
<dl>
<dd>
<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>
<a href="">上海</a>
<a href="">上海</a>
<a href="">上海</a>
<a href="" class="active">陕西</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>
<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>
<a href="">上海</a>
</dd>
<dt>地区专享版本</dt>
<dd> <a href="">中国港澳</a>
</dd>
<dt>Available Sites</dt>
<dd>
<a href=""><i class="i1"></i>Global Site</a>
<a href=""><i class="i2"></i>Сайт России</a>
<a href=""><i class="i3"></i>Situs Indonesia</a>
<a href=""><i class="i4"></i>Sitio de España</a>
<a href=""><i class="i5"></i>เว็บไซต์ประเทศไทย</a>
</dd>
</dl>
</div>
</div>
<div class="top-right fr">
<ul>
<li><a href="">您好，请登录</a> <a href="" class="red">免费注册</a></li>
<li>|</li>
<li><a href="">我的订单</a></li>
<li>|</li>
<li class="active"><a href="">我的京东</a><span class="iconfont icon-xiangxia"></span>
<div class="myjd">
<dl>
<dd><table>
<tr>
<td><a href="">待处理订单</a></td>
<td><a href="">消息</a></td>
</tr>
<tr>
<td><a href="">返修退换货</a></td>
<td><a href="">我的回答</a></td>
</tr>
<tr>
<td><a href="">降价商品</a></td>
<td><a href="">我的关注</a></td>
</tr>
</table>
</dd>
</dl>
<dl>
<dd>
<table>
<tr>
<td><a href="">我的京豆</a></td>
<td><a href="">我的优惠券</a></td>
</tr>
<tr>
<td><a href="">我的白条</a></td>
<td><a href="">我的理财</a></td>
</tr>
</table>
</dd>
</dl>
</div>
</li>
<li>|</li>
<li><a href="">京东会员</a></li>
<li>|</li>
<li class="active"><a href="" class="red">企业采购</a><span class="iconfont icon-xiangxia"></span>
<div class="qycg">
<dl>
<dd>
<a href="">企业购</a>
<a href="">商用场景管</a>
<a href="">工业品</a>
<a href="">礼品卡</a>
</dd>
</dl>
</div>
</li>
<li>|</li>
<li class="active"><a href="">客户服务</a><span class="iconfont icon-xiangxia"></span>
<div class="khfw">
<dl>
<dt>客户</dt>
<dd><table>
<tr>
<td><a href="">帮助中心</a></td>
<td><a href="">售后服务</a></td>
</tr>
<tr>
<td><a href="">在线客服</a></td>
<td><a href="">意见建议</a></td>
</tr>
<tr>
<td><a href="">电话客服</a></td>
<td><a href="">客服邮箱</a></td>
</tr>
<tr>
<td><a href="">金融咨询</a></td>
<td><a href="">全球售客服</a></td>
</tr>
</table></dd>
<dt class="khfw2">商户</dt>
<dd><table>
<tr>
<td><a href="">合作招商</a></td>
<td><a href="">成长中心</a></td>
</tr>
<tr>
<td><a href="">商家后台</a></td>
<td><a href="">京麦工作台</a></td>
</tr>
<tr>
<td><a href="">商家帮助</a></td>
<td><a href="">工作平台</a></td>
</tr>
</table></dd>
</dl>
</div>
</li>
<li>|</li>
<li class="active two"><a href="">网站导航</a><span class="iconfont icon-xiangxia"></span>
<div class="wzdh">
<div>
<dl>
<dt class="wzdh11">特色主题</dt>
<dd class="wzdh1"><table>
<tr>
<td><a href="">新品首发</a></td>
<td><a href="">京东金融</a></td>
<td><a href="">全球售</a></td>
<td><a href="">国际站</a></td>
</tr>
<tr>
<td><a href="">京东会员</a></td>
<td><a href="">京东预售</a></td>
<td><a href="">买什么</a></td>
<td><a href="">俄语站</a></td>
</tr>
<tr>
<td><a href="">装机大师</a></td>
<td><a href="">0元测评</a></td>
<td><a href="">港澳售</a></td>
<td><a href="">优惠券</a></td>
</tr>
<tr>
<td><a href="">秒杀</a></td>
<td><a href="">闪购</a></td>
<td><a href="">印尼站</a></td>
<td><a href="">京东金融科技</a></td>
</tr>
<tr>
<td><a href="">陪伴计划</a></td>
<td><a href="">出海招商</a></td>
<td><a href="">拍拍二手</a></td>
</tr>
</table></dd>
</dl>
</div>
<div>
<dl>
<dt>特色主题</dt>
<dd class="wzdh2"><table>
<tr>
<td><a href="">新品首发</a></td>
<td><a href="">京东金融</a></td>
<td><a href="">全球售</a></td>
<td><a href="">国际站</a></td>
</tr>
<tr>
<td><a href="">京东会员</a></td>
<td><a href="">京东预售</a></td>
<td><a href="">买什么</a></td>
<td><a href="">俄语站</a></td>
</tr>
<tr>
<td><a href="">装机大师</a></td>
<td><a href="">0元测评</a></td>
<td><a href="">港澳售</a></td>
<td><a href="">优惠券</a></td>
</tr>
<tr>
<td><a href="">秒杀</a></td>
<td><a href="">闪购</a></td>
<td><a href="">印尼站</a></td>
<td><a href="">京东金融科技</a></td>
</tr>
<tr>
<td><a href="">陪伴计划</a></td>
<td><a href="">出海招商</a></td>
<td><a href="">拍拍二手</a></td>
</tr>
</table></dd>
</dl>
</div>
<div>
<dl>
<dt>特色主题</dt>
<dd class="wzdh3"><table>
<tr>
<td><a href="">新品首发</a></td>
<td><a href="">京东金融</a></td>
<td><a href="">全球售</a></td>
<td><a href="">国际站</a></td>
</tr>
<tr>
<td><a href="">京东会员</a></td>
<td><a href="">京东预售</a></td>
<td><a href="">买什么</a></td>
<td><a href="">俄语站</a></td>
</tr>
<tr>
<td><a href="">装机大师</a></td>
<td><a href="">0元测评</a></td>
<td><a href="">港澳售</a></td>
<td><a href="">优惠券</a></td>
</tr>
<tr>
<td><a href="">秒杀</a></td>
<td><a href="">闪购</a></td>
<td><a href="">印尼站</a></td>
<td><a href="">京东金融科技</a></td>
</tr>
<tr>
<td><a href="">陪伴计划</a></td>
<td><a href="">出海招商</a></td>
<td><a href="">拍拍二手</a></td>
</tr>
</table></dd>
</dl>
</div>
<div>
<dl>
<dt>特色主题</dt>
<dd class="wzdh4"><table>
<tr>
<td><a href="">新品首发</a></td>
<td><a href="">京东金融</a></td>
<td><a href="">全球售</a></td>
<td><a href="">国际站</a></td>
</tr>
<tr>
<td><a href="">京东会员</a></td>
<td><a href="">京东预售</a></td>
<td><a href="">买什么</a></td>
<td><a href="">俄语站</a></td>
</tr>
<tr>
<td><a href="">装机大师</a></td>
<td><a href="">0元测评</a></td>
<td><a href="">港澳售</a></td>
<td><a href="">优惠券</a></td>
</tr>
<tr>
<td><a href="">秒杀</a></td>
<td><a href="">闪购</a></td>
<td><a href="">印尼站</a></td>
<td><a href="">京东金融科技</a></td>
</tr>
<tr>
<td><a href="">陪伴计划</a></td>
<td><a href="">出海招商</a></td>
<td><a href="">拍拍二手</a></td>
</tr>
</table></dd>
</dl>
</div>
</div>
</li>
<li>|</li>
<li><a href="">手机京东</a></li>
</ul>
</div>
</div>
</div>
<!--header模块-->
<div id="header">
<div class="header">
<div class="logo fl">
<a href="">
<img src="images/logo.gif" alt=""/>
</a>
</div>
<div class="search fl">
<div class="searchbox">
<form action="">
<span class="fl">
<input type="text" placeholder="行车记录仪"/>
<i class="iconfont icon-xiangji"></i>
<input type="button"/>
<em class="iconfont icon-sousuokuang"></em>
</span>
</form>
<div class="fl">
<span class="iconfont icon-gouwuche"></span>
<i>0</i>
<a href="">我的购物车</a>
</div>
<p>
<a href="" class="red">王者周年庆</a>
<a href="">5折秒杀</a>
<a href="">5折秒杀</a>
<a href="">5折秒杀</a>
<a href="">5折秒杀</a>
<a href="">5折秒杀</a>
<a href="">5折秒杀</a>
<a href="">5折秒杀</a>
<a href="">5折秒杀</a>
<a href="">5折秒杀</a>
</p>
</div>
<div class="nav">
<a href="" class="red">秒杀</a>
<a href="" class="red">优惠券</a>
<a href="">PLUS会员</a>
<a href="">PLUS会员</a>
<a href="">PLUS会员</a>
<a href="">会员</a>
<a href="">PLUS会员</a>
<a href="">PLUS会员</a>
<a href="">PLUS会员</a>
<a href="">PLUS会员</a>
</div>
</div>
<div class="header-adv fr">
<a href=""><img src="images/head-right.webp" alt=""/></a>
</div>
</div>
</div>
<!--banner模块-->
<div class="banner">
<div class="ban-left fl">
<ul>
<li>
<a href="">家用电器</a>
<div class="ban-left-l1">
<dl>
<dt class="bann1">
<a>家电管></a>
<a>专卖店></a>
<a>家电服务></a>
<a>企业采购></a>
<a>商用电器></a>
<a>以旧换新></a>
<a>商用></a>
</dt>
<dd>
<a href="" class="bann2">冰箱></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>
<a href="">丰田</a>
<a href="">别克</a>
<a href="">台灯</a>
<a href="">大众</a>
<a href="">日产</a>
</dd>
<dd>
<a href="" class="bann2">冰箱></a>
<a href="">多门</a>
<a href="">对开门</a>
<a href="">双门</a>
<a href="">冷柜/冰吧</a>
<a href="">酒柜</a>
<a href="">吸顶灯</a>
</dd>
<dd>
<a href="" class="bann2">功能冰箱></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>
<a href="">丰田</a>
<a href="">别克</a>
</dd>
<dd>
<a href="" class="bann2">冰箱></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>
<a href="">丰田</a>
</dd>
<dd>
<a href="" class="bann2">冰箱冰箱></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>
<a href="">丰田</a>
<a href="">别克</a>
<a href="">台灯</a>
<a href="">大众</a>
<a href="">日产</a>
</dd>
<dd>
<a href="" class="bann2">冰箱></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>
</dd>
<dd>
<a href="" class="bann2">冰箱></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>
<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>
<a href="">丰田</a>
<a href="">别克</a>
<a href="">酒柜</a>
</dd>
<dd>
<a href="" class="bann2">冰箱冰箱></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>
<a href="">丰田</a>
<a href="">别克</a>
</dd>
<dd>
<a href="" class="bann2">冰箱></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>
</dd>
</dl>
<div class="ban-left-r1">
<span>
<a href=""><img src="images/midea.webp" alt=""/></a>
<a href=""><img src="images/midea.webp" alt=""/></a>
<a href=""><img src="images/midea.webp" alt=""/></a>
<a href=""><img src="images/midea.webp" alt=""/></a>
<a href=""><img src="images/midea.webp" alt=""/></a>
<a href=""><img src="images/midea.webp" alt=""/></a>
<a href=""><img src="images/midea.webp" alt=""/></a>
<a href=""><img src="images/midea.webp" alt=""/></a>
</span>
<a href=""><img src="images/tv-img1.webp" alt=""/></a>
<a href=""><img src="images/tv-img2.webp" alt=""/></a>
</div>
</div>
</li>
<li><a href="">手机</a>/<a href="">运营商</a>/<a href="">数码</a>
<div></div>
</li>
<li><a href="">电脑</a>/<a href="">办公</a>
<div></div>
</li>
<li><a href="">家居</a>/<a href="">家具</a>/<a href="">家装</a>/<a href="">厨具</a>
<div></div>
</li>
<li><a href="">男装</a>/<a href="">女装</a>/<a href="">童装</a>/<a href="">内衣</a>
<div></div>
</li>
<li><a href="">美妆</a>/<a href="">个护清洁</a>/<a href="">宠物</a>
<div></div>
</li>
<li><a href="">女鞋</a>/<a href="">箱包</a>/<a href="">钟表</a>/<a href="">珠宝</a>
<div></div>
</li>
<li><a href="">男鞋</a>/<a href="">运动</a>/<a href="">户外</a>
<div></div>
</li>
<li><a href="">房产</a>/<a href="">汽车</a>/<a href="">汽车用品</a>
<div></div>
</li>
<li><a href="">母婴</a>/<a href="">玩具乐器</a><div></div></li>
<li><a href="">食品</a>/<a href="">酒类</a>/<a href="">生鲜</a>/<a href="">特产</a>
<div></div>
</li>
<li><a href="">艺术</a>/<a href="">礼品鲜花</a>/<a href="">农资绿植</a>
<div></div>
</li>
<li><a href="">医药保健</a>/<a href="">计生情趣</a>
<div></div>
</li>
<li><a href="">图书</a>/<a href="">文娱</a>/<a href="">教育</a>/<a href="">电子书</a>
<div></div>
</li>
<li><a href="">机票</a>/<a href="">酒店</a>/<a href="">旅游</a>/<a href="">生活</a>
<div></div>
</li>
<li><a href="">理财</a>/<a href="">众筹</a>/<a href="">白条</a>/<a href="">保险</a>
<div></div>
</li>
<li><a href="">安装</a>/<a href="">维修</a>/<a href="">清洗</a>/<a href="">二手</a>
<div></div>
</li>
<li><a href="">工业品</a>
<div></div>
</li>
</ul>
</div>
<div class="ban-main fl">
<div class="ban-main-left">
<a href="">
<img src="images/ban-1.webp" alt=""/>
</a>
<span>
<i class="active-coin"></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</span>
<button class="btn-left">
<
</button>
<button class="btn-right">
>
</button>
</div>
<div class="ban-main-right">
<a href="">
<img src="images/ban-r-1.webp" alt="" class="ban-main-1"/>
</a>
<a href="">
<img src="images/ban-r-2.webp" alt="" class="ban-main-1"/>
</a>
<a href="">
<img src="images/ban-r-3.webp" alt=""/>
</a>
</div>
</div>
<div class="ban-right fr">
<div class="ban-right-1">
<img src="images/jd-logo.png" alt=""/>
<p>Hi~欢迎逛京东！</p>
<p><a href="">登录</a> | <a href="">注册</a></p>
<i class="ban-right-i1"><a href="">新人福利</a></i>
<i class="ban-right-i2"><a href="">PLUS会员</a></i>
</div>
<div class="ban-right-2">
<i><h3>京东快报</h3><p><a href="">更多 ></a></p></i>
<p>
<a href=""><span>HOT</span>华为p40官方宣布，2020年将发布更多的5G手机</a>
</p>
<p>
<a href=""><span>HOT</span>华为p40官方宣布，2020年将发布更多的5G手机</a>
</p>
<p>
<a href=""><span>热门</span>华为p40官方宣布，2020年将发布更多的5G手机</a>
</p>
<p class="ban-right-2-p4">
<a href=""><span>热门</span>华为p40官方宣布，2020年将发布更多的5G手机</a>
</p>
</div>
<div class="ban-right-3">
<ul>
<li><a href="">
<img src="images/icons/huafei1.png" alt=""/>
<img src="images/icons/huafei2.png" alt=""/>
话费
</a></li>
<li><a href="">
<img src="images/icons/jipiao1.png" alt=""/>
<img src="images/icons/jipiao2.png" alt=""/>
机票
</a></li>
<li><a href="">
<img src="images/icons/jiudian1.png" alt=""/>
<img src="images/icons/jiudian2.png" alt=""/>
酒店
</a></li>
<li><a href="">
<img src="images/icons/youxi1.png" alt=""/>
<img src="images/icons/youxi2.png" alt=""/>
游戏
</a></li>
<li><a href="">
<img src="images/icons/jiayouka1.png" alt=""/>
<img src="images/icons/jiayouka2.png" alt=""/>
加油卡
</a></li>
<li><a href="">
<img src="images/icons/huochepiao1.png" alt=""/>
<img src="images/icons/huochepiao2.png" alt=""/>
<i>热</i>
火车票
</a></li>
<li><a href="">
<img src="images/icons/zhongchou1.png" alt=""/>
<img src="images/icons/zhongchou2.png" alt=""/>
众筹
</a></li>
<li><a href="">
<img src="images/icons/licai1.png" alt=""/>
<img src="images/icons/licai2.png" alt=""/>
理财
</a></li>
<li><a href="">
<img src="images/icons/baitiao1.png" alt=""/>
<img src="images/icons/baitiao2.png" alt=""/>
白条
</a></li>
<li><a href="">
<img src="images/icons/dianyingpiao1.png" alt=""/>
<img src="images/icons/dianyingpiao2.png" alt=""/>
电影票
</a></li>
<li><a href="">
<img src="images/icons/qiyegou1.png" alt=""/>
<img src="images/icons/qiyegou2.png" alt=""/>
企业购
</a></li>
<li><a href="">
<img src="images/icons/lipinka1.png" alt=""/>
<img src="images/icons/lipinka2.png" alt=""/>
礼品卡
</a></li>
</ul>
<h3>
<a href="">话费</a>
<a href="">机票</a>
<a href="" class="active">酒店</a>
</h3>
<div>
<p>
<a href="" class="active">话费充值</a>
<a href="">流量充值</a>
<a href="">套餐变更</a>
</p>
<div>
<div style="display: none">
<form action="">
<p><label for="">号码</label><input type="text" placeholder="移动/联通/电信"/></p>
<p><label for="">面值</label><select name="" id="">
<option value="" selected>100元</option>
<option value="">90元</option>
<option value="">50元</option>
<option value="">10元</option>
</select>
</p>
<p>￥<span>98.00</span>-￥<span>100.00</span></p>
<p><input type="submit" value="快速充值"/></p>
<p><a href="">抢90减40元话费券</a></p>
</form>
</div>
<div style="display: none">
<form action="">
<p><label for="">号码</label><input type="text" placeholder="移动/联通/电信"/></p>
<p><label for="">流量</label><select name="" id="">
<option value="" selected>100元</option>
<option value="">90元</option>
<option value="">50元</option>
<option value="">10元</option>
</select>
<select name="" id="">
<option value="" selected>100元</option>
<option value="">90元</option>
<option value="">50元</option>
<option value="">10元</option>
</select>
</p>
<p>￥<span>98.00</span>-￥<span>100.00</span></p>
<p><input type="submit" value="快速充值"/><a href="">App充值卡</a></p>
<p> </p>
</form>
</div>
<div>
<form action="">
<p><label for="">号码</label><input type="text" placeholder="支持部分地区移动"/></p>
<p><label for="">月费</label><select name="" id="">
<option value="" selected>138元</option>
<option value="">98元</option>
<option value="">68元</option>
<option value="">38元</option>
</select>
</p>
<p><span>500分钟1G流量</span></p>
<p><input type="submit" value="快速充值"/></p>
<p><a href="">中国联通199元不限量</a></p>
</form>
</div>
</div>
</div>
<div>
<p>
<a href="">国内机票</a>
<a href="" class="active">国际/港澳台</a>
<a href="">特惠</a>
</p>
<div class="gnjp">
<div>
<form action="">
<p><input type="radio" name="sex"/><i>单程</i><input type="radio" name="sex"/><i>往返</i></p>
<p><em>出发到达</em></p>
<table width="100px" border="1" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<p>日期 <input type="text"/></p>
<p><input type="submit" value="机票查询"/></p>
<p><a href="">当季热门特惠机票</a></p>
<b><a href=""><img src="./images/change-city.png" alt=""/></a></b>
</form>
</div>
</div>
</div>
<div class="jd">
<p>
<a href="" class="active">国内/港澳台</a>
<a href="">促销活动</a>
</p>
<div>
<form action="">
<p><em>目的地</em><input type="text" value="北京"/></p>
<p>入住日期<input type="text" value="2019-11-07"/></p>
<p>离店日期<input type="text" value="2019-11-08"/></p>
<i><input type="text" value="酒店/商圈/地标"/></i>
<p><input type="submit" value="酒店查询"/></p>
<p><a href="">订酒店，上京东</a></p>
</form>
</div>
</div>
<br/>
<p><i class="iconfont icon-guanbi"></i></p>
</div>
</div>
</div>
<!--右上角广告位-->
<div class="adv">
<a href="">
<img src="images/adv-img1.png" alt=""/>
</a>
</div>
<!--京东秒杀模块-->
<div id="seckill">
<a name="jdms"></a>
<div class="seckill">
<div class="seckill-left fl">
<h2>京东秒杀</h2>
<p><span>14:00</span>点场 倒计时</p>
<p>
<span>00</span> :
<span>49</span> :
<span>06</span>
</p>
</div>
<div class="seckill-main fl">
<ul>
<li><a href="">
<img src="images/ms-img1.webp" alt=""/>
<h5>康佳（KONKA）饮水机家用多功能立式双壶茶吧饮水机KY-C1020S</h5>
<div class="seckill-price">
<span class="sekill-ms">
<i>￥</i>
<span>196.50</span>
</span>
<span class="sekill-origin">
<i>￥</i>
<span>280.00</span>
</span>
</div>
</a></li>
<li><a href="">
<img src="images/ms-img1.webp" alt=""/>
<h5>康佳（KONKA）饮水机家用多功能立式双壶茶吧饮水机KY-C1020S</h5>
<div class="seckill-price">
<span class="sekill-ms">
<i>￥</i>
<span>196.50</span>
</span>
<span class="sekill-origin">
<i>￥</i>
<span>280.00</span>
</span>
</div>
</a></li>
<li><a href="">
<img src="images/ms-img1.webp" alt=""/>
<h5>康佳（KONKA）饮水机家用多功能立式双壶茶吧饮水机KY-C1020S</h5>
<div class="seckill-price">
<span class="sekill-ms">
<i>￥</i>
<span>196.50</span>
</span>
<span class="sekill-origin">
<i>￥</i>
<span>280.00</span>
</span>
</div>
</a></li>
<li><a href="">
<img src="images/ms-img1.webp" alt=""/>
<h5>康佳（KONKA）饮水机家用多功能立式双壶茶吧饮水机KY-C1020S</h5>
<div class="seckill-price">
<span class="sekill-ms">
<i>￥</i>
<span>196.50</span>
</span>
<span class="sekill-origin">
<i>￥</i>
<span>280.00</span>
</span>
</div>
</a></li>
<li><a href="">
<img src="images/ms-img1.webp" alt=""/>
<h5>康佳（KONKA）饮水机家用多功能立式双壶茶吧饮水机KY-C1020S</h5>
<div class="seckill-price">
<span class="sekill-ms">
<i>￥</i>
<span>196.50</span>
</span>
<span class="sekill-origin">
<i>￥</i>
<span>280.00</span>
</span>
</div>
</a></li>
</ul>
</div>
<div class="seckill-right fr">
<ul>
<li><a href="">
<img src="images/seckill-right-1.webp" alt=""/>
<div>
<h4>三星手机专场</h4>
<h5>全场最高直降1405元</h5>
<span>大牌闪购 > </span>
</div>
</a></li>
<li><a href="">
<img src="images/seckill-right-1.webp" alt=""/>
<div>
<h4>三星手机专场</h4>
<h5>全场最高直降1405元</h5>
<span>大牌闪购</span>
</div>
</a></li>
</ul>
<p><i class="active"></i><i></i></p>
</div>
</div>
</div>
<!--顶部搜索框-->
<div id="top-ssk">
<div class="top-ssk-1">
<a href=""><img src="./images/sprite1.png" alt=""/></a>
<form action="">
<span class="fl">
<input type="text" placeholder="海飞丝洗发水"/>
<i class="iconfont icon-xiangji"></i>
<input type="button"/>
<em class="iconfont icon-sousuokuang"></em>
</span>
</form>
<div class="fl">
<span class="iconfont icon-gouwuche"></span>
<i>0</i>
<a href="">我的购物车</a>
</div>
</div>
</div>
<!--右侧导航栏-->
<div id="right-ssk">
<div class="right-ssk-1">
<ul>
<li>
<a href="#jdms"><i>京东秒杀</i></a></a>
</li>
<li>
<a href="" class="right-ssk-img1">
<span><i><img src="./images/11hc.png" alt=""/></i></span>
<span><i><img src="./images/11hc1.png" alt=""/></i></span></a>
</li>
<li>
<a href=""><i>特色优选</i></a>
</li>
<li>
<a href=""><i>频道广场</i></a>
</li>
<li>
<a href=""><i>为你推荐</i></a>
</li>
<li>
<a href=""><i><em class="iconfont icon-kefu1"></em>客服</i></a>
</li>
<li>
<a href=""><i><em class="iconfont icon-bianji"></em>反馈</i></a>
</li>
<li>
<a href=""><i><em class="iconfont icon-xiangshang"></em>顶部</i></a>
</li>
</ul>
</div>
</div>
<!--留白-->
<div style="height:1000px"></div>
</body>
</html>
css部分：
/*头部广告*/
#top-adv{
height:80px;
background: rgb(180, 0, 27);
}
.top-adv,.top,.header,.banner,.seckill,.top-ssk-1{
width:1190px;
margin:auto;
}
.top-adv{
height:80px;
background: url(../images/top-bg.webp);
position: relative;
padding-right: 15px;
cursor: pointer;
}
.top-adv>a.one{
float:right;
margin-top: 15px;
margin-right: 10px;
}
.top-adv span{
position: absolute;
right:0;
top:5px;
width:20px;
height:20px;
background:rgba(45,45,45,.3);
color:rgba(255,255,255,.3);
display: inline-block;
text-align: center;
line-height: 20px;
}
/*头部导航*/
#top{
height:30px;
background: #e3e4e5;
border-bottom:solid 1px #ddd;
}
.top{
height:30px;
line-height: 30px;
position: relative;
}
.top-left{
width:52px;
height:30px;
border:solid 1px #e3e4e5;
position: relative;
}
.top-left:hover,.top-right ul li.active:hover{
background: #fff;
border-left-color:#ccc;
border-right-color:#ccc;
border-bottom-color:#fff;
}
.top-left>span{
display: inline-block;
width:20px;
height:30px;
float:left;
}
.top-left>a{
display:inline-block;
width:30px;
height:30px;
float:left;
line-height: 30px;
}
.top-left>div{
display: none;
width:300px;
height:420px;
border:solid 1px #e3e4e5;
border-top-color:white;
position: absolute;
left:0;
top:29px;
z-index: 1;
background: #fff;
}
.top-left:hover>div{
display: block;
}
.red{
color:#f10215 !important;
}
.top a{
color:#999;
}
.top a:hover{
color:#c81623;
}
.top-right .red:hover{
opacity: 0.5;
}
.top-right ul li{
float:left;
padding:0 5px;
position: relative;
}
.top-right ul li span{
font-size: 8px;
font-weight: bold;
color:#999;
margin-left: 3px;
}
.top-right ul li>div{
display: none;
position: absolute;
top:29px;
border:solid 1px #e3e4e5;
border-top-color:white;
background: #fff;
z-index: 1;
}
.top-right ul li:hover>div{
display:block;
}
.top-right ul li.active:hover{
background: #fff;
}
.myjd{
width:280px;
height:150px;
left:0;
}
.qycg{
width:150px;
height:70px;
left:0;
}
.khfw{
width:170px;
height:240px;
right:0;
}
.wzdh{
width:1190px;
height:165px;
left:0;
}
.top-right li.two{
position: inherit; /*默认的定位值*/
}
/*top二级内容*/
.top-left>div dl{
padding:20px;
}
.top-left>div dl dt{
border-top:solid 1px #e3e4e5;
}
.top-left>div dl dd:first-of-type>a{
width:40px;
height:20px;
margin:0 4px;
display: inline-block;
text-align: center;
line-height: 20px;
}
.top-left>div dl dd:first-of-type>a:hover{
background: #e3e4e5;
}
.top-left dl dd .active{
color:#fff;
background: #f10215;
}
.top-left>div dl dt{
color:#999;
}
.top-left>div dl dd i{
width:15px;
height:12px;
display: inline-block;
background: #f00;
margin-right: 5px;
}
.top-left dl dd:nth-of-type(3) a{
width:128px;
height:30px;
display: inline-block;
float:left;
}
.top-left .i1{
background:url(../images/areamini.png) no-repeat left top;
}
.top-left .i2{
background:url(../images/areamini.png) no-repeat -20px top;
}
.top-left .i3{
background:url(../images/areamini.png) no-repeat -40px top;
}
.top-left .i4{
background:url(../images/areamini.png) no-repeat left -16px;
}
.top-left .i5{
background:url(../images/areamini.png) no-repeat -20px -15px;
}
.myjd dl:nth-of-type(1){
width:280px;
height:90px;
display:inline-block;
float:left;
padding:10px 20px 0 20px;
line-height: 20px;
border-bottom: solid 1px #dddddd;
}
.myjd dl:nth-of-type(1) dd a{
margin-right:60px;
}
.myjd dl:nth-of-type(2){
width:280px;
height:49px;
display:inline-block;
float:left;
padding:5px 20px 0 20px;
line-height: 20px;
}
.myjd dl:nth-of-type(2) dd a{
margin-right:60px;
}
.qycg dl{
width:150px;
height:70px;
padding-top:10px;
}
.qycg dl dd a{
line-height: 20px;
margin:0 10px;
float:left;
}
.khfw dl:nth-of-type(1){
width:280px;
height:120px;
display:inline-block;
float:left;
padding:10px 20px 0 20px;
line-height: 20px;
border-bottom: solid 1px #dddddd;
}
.khfw dl:nth-of-type(1) dd a{
margin-right:15px;
}
.khfw2{
padding-top:15px;
}
.wzdh{
padding:20px;
}
.wzdh dl dt{
margin-bottom: 5px;
padding-left:20px;
}
.wzdh dl{
width:287px;
height:150px;
display:inline-block;
float:left;
line-height: 20px;
}
.wzdh tr td a{
margin-right:10px;
}
.wzdh2,.wzdh3,.wzdh4{
border-left:solid 1px #ddd;
padding-left:20px;
}
/*header模块*/
#header{
height:140px;
background: #fff;
border-bottom: solid 1px #ddd;
}
.header{
height:140px;
padding-top: 10px;
}
.header .logo,.header .header-adv{
width:190px;
height:140px;
}
.header .search{
width:810px;
}
.logo img{
height:120px;
}
.searchbox{
height:60px;
margin-top: 30px;
margin-left: 50px;
}
.searchbox form>span{
width:550px;
height:36px;
border:solid 2px #e2231a;
display: inline-block;
position: relative;
line-height: 32px;
}
.searchbox>div{
width:132px;
height:36px;
border:solid 1px #eee;
margin-left: 20px;
}
.searchbox input{
border:none;
float:left;
}
.searchbox input[type="text"]{
width:488px;
height:32px;
padding-left:10px ;
}
.searchbox input[type="button"]{
width:58px;
height:32px;
background: #e1251b;
}
.searchbox span i{
position: absolute;
right:70px;
width:20px;
height:20px;
color:#9f9f9f;
}
.searchbox span i:hover{
color:#e1251b;
}
.searchbox span em{
position: absolute;
right:19px;
width:20px;
height:22px;
color:#fff;
font-size: 20px;
}
.searchbox>div{
color:#e1251b;
line-height: 34px;
position: relative;
}
.searchbox>div>span{
font-weight: bold;
margin:0 15px 0 20px;
}
.searchbox>div a{
color:#e1251b;
}
.searchbox>div i{
background: #e1251b;
color:#fff;
display: inline-block;
padding:0 3px;
border-radius: 5px;
line-height: 12px;
font-style: normal;
position: absolute;
left:32px;
top:2px;
}
.searchbox>p{
clear:both;
line-height: 20px;
}
.searchbox>p a{
color:#999;
margin-right: 5px;
}
.searchbox>p a:hover{
color:#e1251b;
}
.nav{
height:40px;
line-height: 40px;
font-size: 15px;
}
.nav .red{
font-weight: 700;
}
.nav a{
color:#333;
margin-right: 16px;
}
.nav a:hover{
color:#e1251b;
}
/*banner模块*/
.banner{
margin-top: 10px;
height:473px;
}
.ban-left,.ban-right{
width:190px;
height:470px;
}
.ban-main{
width:790px;
margin:0 10px;
height:470px;
}
.ban-left{
background: #fff;
padding:10px 0;
font-size: 14px;
position: relative;
}
.ban-left ul li{
padding-left:20px;
line-height: 25px;
color:#333;
}
.ban-left ul li:hover{
background: #ddd;
}
.ban-left ul li a{
color:#333;
}
.ban-left ul li a:hover{
color:#e1251b;
}
.ban-main-left{
width:590px;
height:473px;
display:inline-block;
float:left;
position: relative;
}
.ban-main-left>span{
position: absolute;
left:30px;
bottom:20px;
}
.ban-main-left>span>i{
width:8px;
height:8px;
display: inline-block;
background: rgba(255, 255, 255, .4);
border-radius: 50%;
margin-right: 5px;
border:solid 1px rgba(0,0,0,.05);
}
.ban-main-left>span>i:hover,.active-coin{
width: 11px !important;;
height: 11px !important;;
background: rgba(255, 255, 255,1) !important;
border:solid 3px rgba(0,0,0,.5) !important;
}
.ban-main-left>button{
width:25px;
height:35px;
position: absolute;
top:45%;
background: rgba(0, 0, 0, .15);
border:none;
outline:none;
color:#fff;
font-weight: bold;
cursor: pointer;
font-size: 16px;
}
.ban-main-left>button:hover{
background: rgba(0, 0, 0, .5);
}
.ban-main-left button.btn-left{
left:0;
border-top-right-radius:18px;
border-bottom-right-radius: 18px;
}
.ban-main-left button.btn-right{
right:0;
border-top-left-radius: 18px;
border-bottom-left-radius:18px ;
}
.ban-main-right{
width:190px;
height:473px;
display:inline-block;
margin-left:10px;
float:left;
}
.ban-main-right a{
transition: opacity .3s linear;
}
.ban-main-right a:hover{
opacity: 0.6;
}
.ban-main-right img{
width:190px;
height:151px;
display: inline-block;
}
.ban-main-1{
margin-bottom: 5px;
}
.ban-right{
width:190px;
height:473px;
display: inline-block;
float: right;
background:#fff;
position: relative;
}
.ban-right-1{
width:190px;
height:90px;
display: inline-block;
padding:10px 20px;
float: right;
}
.ban-right-1 img{
width:40px;
height:40px;
border-radius:50%;
display: inline-block;
float: left;
}
.ban-right-1 p{
font-size: 12px;
line-height: 24px;
margin-left:50px;
}
.ban-right-1 p a{
color:#333;
}
.ban-right-1 p a:hover{
color:#e1251b;
}
.ban-right-i1{
width:70px;
height:24px;
display: inline-block;
padding:0 5px;
background:#e1251b;
border-radius: 15px;
}
.ban-right-i1 a{
color:#fff;
font-style:normal;
line-height:24px;
padding:0 5px;
}
.ban-right-i1:hover{
color: #ffffff;
background:rgba(225,37,27,.6);
}
.ban-right-i2{
width:70px;
height:24px;
display: inline-block;
background: #000000;;
border-radius: 15px;
}
.ban-right-i2 a{
color: #c0b16c;
font-style:normal;
line-height:24px;
padding-left:10px;
}
.ban-right-i2:hover{
color: #ffffff;
background:rgba(0,0,0,.6);
}
.ban-right-2{
width:190px;
height:130px;
display: inline-block;
padding:0 10px;
margin-bottom:5px;
float: right;
}
.ban-right-2::after,.ban-right-2::before{
content: "";
height:1px;
background: linear-gradient(270deg,#fff,#ccc,#ccc,#fff);
position: absolute;
left:0;
right:0;
}
.ban-right-2 i h3{
font-style:normal;
font-size:14px;
color:#333;
float:left;
}
.ban-right-2 i p a{
font-style:normal;
color:#666;
float:right;
}
.ban-right-2 i p a:hover{
color:#e1251b;
}
.ban-right-2 a span{
width:30px;
height:16px;
display: inline-block;
color: #e33550;
background: #fdeeed;
text-align: center;
margin-right:5px;
}
.ban-right-2 p{
margin-top: 7px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ban-right-2-p4{
margin-bottom: 10px;
}
.ban-right-2 p a{
color:#666;
}
.ban-right-2 p a:hover{
color:#e1251b;
}
.ban-right-3{
width:170px;
}
.ban-right-3 ul li{
width:33%;
height:55px;
text-align: center;
float:left;
position: relative;
}
.ban-right-3 ul li img{
width:28px;
position: absolute;
left:0;
right:0;
margin:auto;
}
.ban-right-3 ul li a>img:last-of-type{
display:none;
}
.ban-right-3 ul li:hover a>img:last-of-type{
display:block;
}
.ban-right-3 ul li a{
line-height: 75px;
color:#999;
}
.ban-right-3 ul li a:hover{
color:#e1251b;
}
.ban-right-3 ul li i{
width:14px;
height:14px;
display: inline-block;
font-size: 10px;
line-height: 14px;
text-align: center;
font-style: normal;
color:#fff;
background: #f00;
position: absolute;
right:0;
top:0;
}
.ban-right-3 ul{
display:none;
}
/*选项卡区域内容*/
.ban-right-3>h3{
font-weight: normal;
font-size: 12px;
height:30px;
display: inline-block;
line-height: 30px;
padding:0 5px;
}
.ban-right-3>h3 a{
color:#999;
height:30px;
line-height:30px;
display:inline-block;
}
.ban-right-3>h3 a:not(:last-of-type){
margin-left:5px;
margin-right:34px;
}
.ban-right-3>h3 .active,.ban-right-3>h3 a:hover{
color:#e1251b;
border-bottom: solid 2px #e1251b;
}
.ban-right-3>div{
margin-left:5px;
}
.ban-right-3>div>p>a{
color:#666;
line-height: 35px;
}
.ban-right-3>div>p>a:not(:last-of-type){
margin-right: 5px;
}
.ban-right-3>div>p>a:hover {
color:#f00;
}
.ban-right-3>div form p{
line-height: 25px;
clear:both;
color:#666;
}
.ban-right-3>div form label{
width:35px;
/*text-align: center;*/
display: inline-block;
/* float:left;*/
}
.ban-right-3>div form p input[type="text"]{
width:124px;
height:20px;
line-height: 20px;
/*float:left;*/
}
.ban-right-3>div form p select{
height:20px;
color:#666;
}
.ban-right-3>div>div>div:first-of-type form p select{
width:124px;
}
.ban-right-3>div>div>div:nth-of-type(2) form p select{
width:58px;
}
.ban-right-3>div>div>div:nth-of-type(2) form p select:first-of-type{
margin-right: 5px;
}
.ban-right-3>div form p:nth-of-type(3){
color:#f00;
}
.ban-right-3>div form input[type="submit"]{
background: #e40015;
color:#fff;
border:none;
border-radius: 10px;
width:60px;
height:20px;
line-height: 18px;
font-size: 10px;
padding:1px 6px;
cursor: pointer;
margin:0 5px;
}
.ban-right-3>div form p:last-of-type a{
color:#5476db;
}
.ban-right-3>div form p:last-of-type a:hover{
color:#f00;
}
.ban-right-3>p{
text-align: center;
}
.ban-right-3>p>i{
width:20px;
height:20px;
color:#666;
font-size:11px;
border-radius: 50%;
padding:3px;
transition: all .3s linear;
cursor: pointer;
}
.ban-right-3>p>i:hover{
background: #900;
color:#fff;
}
.ban-right-3 a.active{
color:#f00;
}
.gnjp>div>form{
position: relative;
}
.gnjp>div>form>p>i{
font-style: normal;
margin:0 10px;
}
.gnjp>div>form>p>em{
font-style: normal;
font-size: 12px;
line-height: 20px;
width:24px;
height:40px;
display: inline-block;
margin-right:10px;
float: left;
}
.gnjp>div>form>table{
width:102px;
height:38px;
margin-left:10px;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
}
.gnjp>div>form>table>tr>td{
border-left:1px solid #ddd;
border-top:1px solid #ddd;
}
.gnjp>div>form>b{
width:18px;
height:18px;
display: block;
position: absolute;
right:22px;
top:35px;
}
.gnjp>div>form>p:nth-of-type(3){
margin-top:10px;
color:#333;
}
.gnjp>div>form>p:nth-of-type(4){
float: left;
}
.jd>p:first-of-type>a{
margin-right:10px;
}
.jd>div>form>p>input[type="text"]{
border:solid 1px #ddd;
width:100px;
color:#ddd;
float: right;
text-align: center;
}
.jd>div>form>p:first-of-type>em{
font-style: normal;
margin-right:5px;
}
.jd>div>form>p:nth-of-type(3){
color:#333;
}
.jd>div>form>i>input[type="text"]{
width:180px;
border:solid 1px #ddd;
color:#ddd;
text-align: center;
height:20px;
}
.ban-right-3>div:first-of-type{
display:none;
}
.ban-right-3>div:nth-of-type(2){
display:none;
}
/*banner二级内容*/
.ban-left ul li>div{
width:1000px;
height:473px;
position: absolute;
left:190px;
top:0;
display: none;
z-index: 2;
}
.ban-left ul li:hover>div{
display: block;
background: #fff;
border:solid 2px #eee;
box-shadow: 2px 0 5px rgba(0,0,0,.3);
}
.bann1{
height:40px;
margin-top: 20px;
width:640px;
line-height: 24px;
display: inline-block;
float:left;
}
.bann1 a{
color:#fff !important;
font-size: 12px;
margin-left:15px;
padding:0 13px;
display: inline-block;
height:24px;
float:left;
background: #000000;
}
.bann1 a:hover{
background:#f10215;
color:#fff !important;
}
.ban-left ul li>div dl{
width:790px;
height:473px;
display: inline-block;
float: left;
}
.ban-left ul li>div dl dd a{
font-size: 12px;
line-height: 24px;
margin-left:10px;
float: left;
}
.ban-left ul li>div dl dd{
width:790px;
text-align: left;
display: inline-block;
float: left;
margin-left:30px;
margin-bottom: 10px;
}
.ban-left-r1{
width:150px;
height:473px;
display:block;
float: right;
padding-top:50px;
margin-right:10px;
}
.ban-left-r1 a img{
width:140px;
height:120px;
display:block;
float: right;
margin-top:1px;
margin-right:5px;
}
.ban-left-r1 span{
width:140px;
height:62px;
display:block;
margin-left: 4px;
margin-bottom: 10px;
}
.ban-left-r1 span a{
width:69px;
height:30px;
display:block;
float:left;
margin-bottom: 1px;
margin-right: 1px;
}
.ban-left-r1 span a img{
width:69px;
height:30px;
display:block;
float:left;
margin-bottom: 1px;
margin-right: 1px;
}
.bann2{
width:60px;
height:30px;
display:inline-block;
text-align: right;
font-weight: 700;
}
/*右上角广告位*/
.adv{
height:100%;
border-right:solid 6px #5f453b;
position: fixed;
right:0;
top:0;
z-index: 9999;
}
.adv a img{
display: inline-block;
position: fixed;
right:0;
top:0;
}
/*京东秒杀模块*/
#seckill{
height: 260px;
margin-top:20px;
}
.seckill{
height:260px;
background: #fff;
}
.seckill-left{
width:190px;
height:260px;
background: url(../images/djs.png);
color:#fff;
text-align: center;
}
.seckill-left>h2{
font-size: 30px;
margin-top:31px;
text-align: center;
font-weight: 700;
margin-bottom: 100px;
}
.seckill-left p:first-of-type{
font-size: 14px;
}
.seckill-left p:first-of-type>span{
font-size: 18px;
}
.seckill-left p:last-of-type{
font-size:18px;
margin-top: 10px;
}
.seckill-left p:last-of-type>span{
display: inline-block;
width:30px;
height:30px;
background: #2f3430;
text-align: center;
font-size: 20px;
font-weight: bold;
line-height: 30px;
}
.seckill-main{
width:800px;
height:260px;
overflow: hidden;
margin-right: 10px;
}
.seckill-main ul li{
width:200px;
height:260px;
float:left;
text-align: center;
padding:40px 20px 0 20px;
position: relative;
}
.seckill-main ul li:after{
content:"";
width:1px;
height:200px;
position: absolute;
top:30px;
right:0;
background:linear-gradient(180deg,#fff,#eee,#fff);
}
.seckill-main ul li img{
width:140px;
height:140px;
}
.seckill-main ul li h5{
height:30px;
line-height: 30px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color:#333;
font-weight: normal;
}
.seckill-main ul li:hover h5{
color:#f00;
}
.seckill-price{
width:160px;
height:24px;
border:solid 1px #e1251b;
background: #e1251b;
position: relative;
}
.seckill-price i{
font-size: 12px;
font-style: normal;
padding-right: 2px;
}
.seckill-price>.sekill-ms{
width:90px;
height:22px;
line-height: 22px;
text-align: center;
font-size: 16px;
font-weight: 700;
color:#fff;
float:left;
}
.seckill-price>.sekill-ms::before{
content: " ";
width: 0;
height: 0;
/*border-color: transparent white transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;*/
border-top:solid 22px transparent;
border-right:solid 8px white;
border-bottom:solid 0 transparent;
border-left:solid 0 transparent;
position: absolute;
top: 0;
left: 84px;
}
.seckill-price>.sekill-origin{
width:66px;
background: #fff;
color:#999;
text-decoration: line-through;
font-size: 12px;
line-height: 22px;
display: inline-block;
float:right;
}
.seckill-right{
width:190px;
height:260px;
padding-right: 10px;
padding-bottom: 10px;
overflow: hidden;
position: relative;
}
.seckill-right ul li{
width:180px;
float:left;
height:250px;
text-align: center;
padding-top: 20px;
}
.seckill-right ul li img{
width:120px;
height:120px;
}
.seckill-right ul li div{
height:110px;
background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(220,224,236,.5));
line-height: 30px;
}
.seckill-right ul li h4{
font-size: 14px;
color:#666;
font-weight: normal;
}
.seckill-right ul li h5{
font-size: 14px;
font-weight: 700;
color:#333;
}
.seckill-right ul li div span{
color:#e1251b;
border:solid 1px #e1251b;
border-radius: 10px;
width:82px;
height:24px;
line-height: 22px;
display: inline-block;
font-weight: 700;
font-size: 12px;
transition: all .3s linear;
}
.seckill-right ul li div span:hover{
background: #e1251b;
color:#fff;
}
.seckill-right>p{
position: absolute;
bottom:0;
left:0;
width:100%;
text-align: center;
line-height: 40px;
}
.seckill-right>p i{
width:4px;
height:4px;
display: inline-block;
border-radius: 50%;
background: #666;
margin-right: 5px;
}
.seckill-right>p i.active{
background: #e1251b!important;
}
/*顶部搜索框*/
#top-ssk{
width:100%;
height:50px;
border-bottom:solid 2px #f10215;
background: #FFFFFF;
position: fixed;
left:0;
top:0;
}
.top-ssk-1{
height:50px;
}
.top-ssk-1>a{
width:125px;
height:40px;
display: inline-block;
float: left;
}
.top-ssk-i1{
width:125px;
height:40px;
display: block;
}
.top-ssk-1 form>span{
width:550px;
height:36px;
border:solid 2px #e2231a;
display: inline-block;
position: relative;
line-height: 32px;
margin:6px 0 0 150px;
}
.top-ssk-1>div{
width:132px;
height:36px;
border:solid 1px #eee;
margin-left: 20px;
margin-top:6px;
}
.top-ssk-1 input{
border:none;
float:left;
}
.top-ssk-1 input[type="text"]{
width:488px;
height:32px;
padding-left:10px ;
}
.top-ssk-1 input[type="button"]{
width:58px;
height:32px;
background: #e1251b;
}
.top-ssk-1 span i{
position: absolute;
right:70px;
width:20px;
height:20px;
color:#9f9f9f;
}
.top-ssk-1 span i:hover{
color:#e1251b;
}
.top-ssk-1 span em{
position: absolute;
right:19px;
width:20px;
height:22px;
color:#fff;
font-size: 20px;
}
.top-ssk-1>div{
color:#e1251b;
line-height: 34px;
position: relative;
}
.top-ssk-1>div>span{
font-weight: bold;
margin:0 15px 0 20px;
}
.top-ssk-1>div a{
color:#e1251b;
}
.top-ssk-1>div i{
background: #e1251b;
color:#fff;
display: inline-block;
padding:0 3px;
border-radius: 5px;
line-height: 12px;
font-style: normal;
position: absolute;
left:32px;
top:2px;
}
/*右侧导航栏*/
#right-ssk{
width:60px;
height:464px;
display: inline-block;
background: #FFFFFF;
position: fixed;
right:85px;
top:70px;
}
.right-ssk-1{
height:464px;
}
.right-ssk-1>ul{
width:60px;
height:406px;
display: inline-block;
}
.right-ssk-1>ul>li{
width:60px;
height:58px;
display: block;
float:left;
cursor:pointer;
position: relative;
}
.right-ssk-1>ul>li::after{
content: "";
height: 1px;
width:60px;
background: linear-gradient(270deg, #fff, #eee, #eee, #fff);
position: absolute;
top:0;
left:0;
}
.right-ssk-1>ul>li>a{
width:60px;
height:58px;
display: block;
font-size: 14px;
line-height: 19px;
padding:10px 16px;
color:#333;
}
.right-ssk-1>ul>li>a>i{
font-style: normal;
}
.right-ssk-1>ul>li>a>span>i>img{
width:28px;
height: 38px;
display: block;
}
.right-ssk-1>ul>li>a>i>em{
width:28px;
height:19px;
display: block;
text-align: center;
}
.right-ssk-1>ul>li>a:hover{
color:#fff;
background: #d60a14;
}
.right-ssk-1>ul>li>a>span:nth-of-type(2)>i>img{
display: none;
}
.right-ssk-img1:hover>span:nth-of-type(1)>i>img{
display: none;
}
.right-ssk-img1:hover>span:nth-of-type(2)>i>img{
display: block;
}
``
总结：一天一天在进步，慢慢对css越来越得心应手，后面还有许多未知的东西，还得更努力才是。
