常用的HTML知识点：
常见的标签：
1. <div>: 定义文档中的分区或区域，通常用于组织和样式化页面的布局。 2. <p>: 定义段落，用于将文本分段展示。 3. <a>: 定义超链接，用于创建页面内或页面间的链接。 4. <img>: 定义图像，用于在页面中插入图片。 5. <ul>: 定义无序列表，用于呈现项目之间没有特定顺序的列表。 6. <ol>: 定义有序列表，用于呈现按顺序排列的项目列表。 7. <li>: 定义列表项，在`<ul>`或`<ol>`中使用，表示每个列表中的单个项目。 8. <table>: 定义表格，用于展示结构化的数据。 9. <tr>: 定义表格行，在`<table>`中使用，表示表格中的一行数据。 10. <td>: 定义表格数据单元格，在`<tr>`中使用，表示表格中的每个数据单元。 11. <form>: 定义表单，用于收集用户输入的数据。 12. <input>: 定义输入字段，如文本框、密码框等，用于用户输入信息。 13. <button>: 定义按钮，可用于提交表单或执行其他操作。 14. <span>: 定义内联文本容器，通常用于对文本的一部分进行样式化或操作。
常用的标题标签：
1. <h1>：定义最高级别的标题。 2. <h2>：定义次级别的标题。 3. <h3>：定义次于`<h2>`的标题。 4. <h4>：定义次于`<h3>`的标题。 5. <h5>：定义次于`<h4>`的标题。 6. <h6>：定义最低级别的标题。
常用的表格标签：
1，<caption>：定义表格标题。 2，<thead>：定义表格的页眉部分。 3，<tbody>：定义表格的主体部分。 4，<tfoot>：定义表格的页脚部分。 5，<th>：定义表格的表头单元格，通常包含标题或其他标识信息。 6，<col>：定义表格中的列。 7，<colgroup>：定义表格中的列组。 8，<caption>：定义表格标题。 9，<thead>：定义表格的页眉部分。 10，<tbody>：定义表格的主体部分。 11，<tfoot>：定义表格的页脚部分。 12，<th>：定义表头单元格，通常包含标题或其他标识信息。 13，<td>：定义表格数据单元格。 14，<tr>：定义表格中的行。
常用的表单标签：
1，<form>：定义表单，用于包裹表单中的各个元素。 2，<input>：定义输入字段，例如文本框、密码框等。 3，<textarea>：定义多行文本输入框。 4，<button>：定义按钮，用于提交表单或执行其他操作。 5，<select>：定义下拉菜单，用户可以从中选择一个或多个选项。 6，<option>：定义 <select> 下拉菜单中的选项。 7，<label>：定义表单元素的标签，通常与输入字段关联，提供更好的可访问性和用户体验。 8，<fieldset>：定义一组相关的表单元素，可以通过边框和标题进行分组。 9，<legend>：定义 <fieldset> 元素的标题。 10，<optgroup>：定义 <select> 下拉菜单中的选项分组。
css知识点：
常用css选择器：
类选择器（Class Selector）: 通过类名选择元素，使用.开头，如.example。 ID 选择器（ID Selector）: 通过元素的 id 属性选择元素，使用#开头，如#header。 元素选择器（Element Selector）: 通过元素的标签名选择元素，如p、div。 后代选择器（Descendant Selector）: 选择嵌套在另一个元素内的元素，使用空格分隔，如div p。 相邻兄弟选择器（Adjacent Sibling Selector）: 选择紧接在另一个元素后面的元素，使用+，如h2 + p。 通用选择器（Universal Selector）: 选择所有元素，使用*。 属性选择器（Attribute Selector）: 通过元素的属性值选择元素，如[type="text"]。 伪类选择器（Pseudo-class Selector）: 用于指定元素的特殊状态，如:hover、:focus。 伪元素选择器（Pseudo-element Selector）: 用于选取元素的特定部分，如::before、::after。
常用的字体修饰：
粗体（Bold）: 通过使用font-weight: bold;属性来使文本显示为粗体。 斜体（Italic）: 通过使用font-style: italic;属性来使文本显示为斜体。 下划线（Underline）: 通过使用text-decoration: underline;属性来给文本添加下划线。 删除线（Strikethrough）: 通过使用text-decoration: line-through;属性来给文本添加删除线。 大写（Uppercase）: 通过使用text-transform: uppercase;属性来将文本转换为大写。 小写（Lowercase）: 通过使用text-transform: lowercase;属性来将文本转换为小写。 首字母大写（Capitalization）: 通过使用text-transform: capitalize;属性来使文本的每个单词的首字母大写。
常用的边框修饰：
边框样式（Border Style）: 通过border-style属性来指定边框的样式，如实线、虚线、双线等。常见取值包括solid（实线）、dashed（虚线）、dotted（点线）等。 边框宽度（Border Width）: 通过border-width属性来指定边框的宽度，可以使用像素（px）、百分比（%）或其他长度单位。 边框颜色（Border Color）: 通过border-color属性来指定边框的颜色，可以使用颜色名称、十六进制值或 RGB 值。 边框圆角（Border Radius）: 通过border-radius属性来指定边框的圆角，可以创建圆角边框效果。 边框阴影（Box Shadow）: 通过box-shadow属性来添加边框阴影效果，可以控制阴影的颜色、模糊程度、偏移量等。
常用的背景修饰：
背景颜色（Background Color）: 通过 background-color 属性来设置元素的背景颜色。 背景图片（Background Image）: 通过 background-image 属性来设置元素的背景图片，可以使用 URL 指定图片路径。 背景重复（Background Repeat）: 通过 background-repeat 属性来设置背景图片的重复方式，常见取值包括 repeat（默认）、no-repeat、repeat-x 和 repeat-y。 背景大小（Background Size）: 通过 background-size 属性来设置背景图片的尺寸，可以使用长度值、百分比或关键字值（如 cover、contain）。 背景位置（Background Position）: 通过 background-position 属性来设置背景图片的位置，可以使用关键字值（如 center、top、bottom）或长度值。 背景固定（Background Attachment）: 通过 background-attachment 属性来设置背景图片是否固定在视口中，常见取值包括 scroll 和 fixed。
一号店网页：
图片展示：
第一页：
第二页：
网页的代码HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/1号店.css"/>
</head>
<body>
<div class="box">
<div class="one">
<div class="dl">
<p>
HI，请<a href="#">登录</a>
/<a href="#">注册</a>
</p>
</div>
<div class="dd">
<p>我的一号店<span></span></p>
<p>收藏夹<span></span></p>
<p>掌上1号店<span></span></p>
<p class="dd66">客户服务<span></span>
<div class="d33">
<ul>
<li>包裹跟踪</li>
<li>常见问题</li>
<li>在线投诉</li>
<li>配送范围</li>
</ul>
</div>
</p>
<p>网站导航<span></span></p>
<p>关于我们<span></span></p>
</div>
</div>
</div>
<div class="two">
<div class="left">
<img src="img/logo.png"/>
</div>
<div class="right">
<span class="right55">商品</span>
<span class="right66">
<input type="text" name="" id="" value="请输入关键字 嘿嘿!" class="input1" />
</span>
<span class="right77">
<button>搜索</button>
</span>
</div>
<div class="bottom">
<ul>
<li>毛巾</li>
<li>卫生纸</li>
<li>电池</li>
<li>洗发露</li>
<li>衣服</li>
<li>鞋子</li>
</ul>
</div>
</div>
<div class="three">
<div class="left">
<p>
所有商品分类
<span></span>
</p>
</div>
<div class="right33">
<ul>
<li class="right123"> 首页</li>
<li class="right123">自营</li>
<li class="right123">1号团</li>
<li>1号商城</li>
<li>闪购</li>
<li>活色生鲜</li>
<li>医药</li>
<li>1号钱包</li>
</ul>
</div>
</div>
<div class="four">
<div class="fourbox">
<div class="left">
<img src="img/nav.png" height="410px"/>
<div class="left33">
<p>进口食品 生鲜 </p>
<p>食品 饮料 烟酒 </p>
<p>母婴 玩具 童装 </p>
<p>家居 家庭清洁 纸品 </p>
<p>美妆 内衣 中老年</p>
<p>鞋靴 箱包 腕表配饰 </p>
<p>男装 户外 户外健身 </p>
<p>手机 数码 电脑办公</p>
<p>小家电 大家电 汽车</p>
<p>保健滋补 医药 成人</p>
<p>礼品 卡 旅游 充值</p>
<ul>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
</ul>
</div>
</div>
<div class="middle">
<img src="img/banner.jpg" width="750px" height="400px"/>
<div class="middle934">
<p></p>
<p></p>
<p></p>
<p></p>
<p class="middle567"></p>
</div>
</div>
<div class="right">
<div class="top55">
<p>
<img src="img/1.jpg"/>
<span class="right666">0元试用</span>
</p>
<p>
<img src="img/2.jpg"/>
<span class="right777">会员俱乐部</span>
</p>
<p>
<img src="img/3.jpg"/>
<span class="right888">礼品卡</span>
</p>
</div>
<div class="middle55">
<p>[社区] 当红明星教你送七夕情人礼！</p>
<p>[社区] 全球口碑姨妈巾都在这！</p>
<p>[社区] V3会员 甜蜜 免费领</p>
</div>
<div class="bottom6666">
<div class="top987">
<ul>
<li style="color: red;">话费充值</li>
<li>彩票</li>
<li>网游卡点</li>
</ul>
</div>
<div class="middle987">
<p>
手机号码:
<input type="text" name="" id="" value="" size="15" class="input11"/>
</p>
<p class="middle996">
面值:
<input type="text" name="" id="" value="" size="15" class="input11"/>
</p>
<p class="middle995">
售价：<span style="color: red;">
￥10.14
</span>
</p>
<p class="middle997">
<button>立即充值</button>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="five">
<div class="left">
<h1 style="color: red; font-size: 15px;">食品饮料</h1>
</div>
<div class="right">
<ul>
<li>咖啡</li>
<li>休闲零食</li>
<li>饼干糕点</li>
<li>啤酒</li>
<li>粮油米面</li>
</ul>
</div>
</div>
<div class="six">
<div class="left">
<div class="top">
<ul>
<li>饼干糕点</li>
<li>休闲零食</li>
<li>饮料果汁</li>
<li>牛奶乳品</li>
<li>冲饮谷物</li>
<li>营养保健</li>
</ul>
</div>
<div class="bottom">
<img src="img/sec1.jpg"/>
<ul>
<li style="color: red;">banner</li>
<li style="color: darkgrey;">banner</li>
</ul>
</div>
</div>
<div class="middle12">
<img src="img/sec1-1.jpg"/>
</div>
<div class="middle23">
<img src="img/sec1-2.jpg"/>
<ul>
<li>吃货天堂</li>
<li style="color: darkgrey;">满49减10</li>
</ul>
</div>
<div class="middle34">
<img src="img/sec1-3.jpg"/>
<ul>
<li>1号酒窖</li>
<li style="color: darkgrey;">百威哈啤酒两件7折</li>
</ul>
</div>
<div class="right23">
<img src="img/sec1-4.jpg"/>
<ul>
<li>夏季美食嘉年华</li>
<li style="color: darkgrey;">粮油1元抢：爆款5折起</li>
</ul>
</div>
<div class="right34">
<img src="img/sec1-5.jpg"/>
<ul>
<li>饮料饮品</li>
<li style="color: darkgrey;"">爆款满99送29</li>
</ul>
<div class="right321">
<span class="right76"><img src="img/sec1-6.jpg"/></span>
<ul class="right56">
<li>甜蜜蜜七夕好礼</li>
<li style="color: darkgrey;"">燕窝买一送一</li>
</ul>
</div>
</div>
</div>
<div class="seven">
<div class="left">
<h2>个护厨卫</h2>
</div>
<div class="right">
<ul>
<li>面部防嗮</li>
<li>沐浴清洁</li>
<li>洗衣液</li>
<li>驱蚊神器</li>
<li>面部防嗮</li>
</ul>
</div>
</div>
<div class="eight">
<div class="left">
<div class="top">
<ul>
<li>洗发护发</li>
<li>脱毛膏/贴</li>
<li>牙刷牙膏</li>
<li>抽纸</li>
<li>消毒液</li>
<li>保鲜膜</li>
</ul>
</div>
<div class="bottom">
<img src="img/sec1-7.jpg"/>
<p style="color:#ACD53C ;">蓝月亮洁净盛典</p>
<p>热销商品5折起</p>
<div class="middle">
<img src="img/sec1-8.jpg"/>
</div>
</div>
<div class="right">
<div class="top">
<img src="img/sec1-9.jpg"/>
<p>自营纸制品品牌</p>
<p style="color: darkgrey;">团购疯抢中</p>
</div>
<div class="bottom">
<img src="img/sec1-10.jpg"/>
<p>自营医务洗护团</p>
<p style="color:darkgrey ;">爆款5折起</p>
</div>
</div>
<div class="right777">
<img src="img/sec1-11.jpg"/>
<p>自营美容护理</p>
<p style="color: darkgrey;">8.18爆款 一贵就赔</p>
</div>
<div class="right899">
<div class="top">
<img src="img/sec1-12.jpg"/>
<p>自营口腔护理</p>
<p style="color: darkgrey;">更多商品第二件2折</p>
</div>
<!--<div class="bottom">
<img src="img/sec1-13.jpg"/>
<p>自营洗发护发</p>
<p style="color: darkgrey;">更多商品第二件2折</p>
</div>-->
</div>
</div>
</div>
<div class="nine">
<div class="left">
<img src="img/sec1-17.jpg"/>
<p>妮飘满99减25</p>
<p style="color: #ACD53C;">与你浪漫七夕</p>
</div>
<div class="middle23">
<p>逼格生活由我打造</p>
<p style="color: darkgrey;">新品上市</p>
<p><button>品质生活轻松家务</button></p>
</div>
<div class="middle67">
<img src="img/sec1-16.jpg"/>
</div>
<div class="middle89">
<img src="img/sec1-15.jpg"/>
<p>自营家庭清洁品牌团</p>
<p style="color: darkgrey;">爆款团购2.3折起</p>
</div>
<div class="right34">
<img src="img/sec1-14.jpg"/>
<p>自营女性护理</p>
<p style="color: darkgrey;">更多商品第二件2折</p>
</div>
<div class="right89">
<img src="img/sec1-13.jpg"/>
<ul>
<li>自营洗发护发</li>
<li style="color: darkgrey;">更多商品第二件2折</li>
</ul>
</div>
<div class="ten">
<div class="top">
<ul>
<li>关于1号店</li>
<li>|</li>
<li>我们的团队</li>
<li>|</li>
<li>网站联盟</li>
<li>|</li>
<li>热门搜索</li>
<li>|</li>
<li>友情链接</li>
<li>|</li>
<li>1号店社区</li>
<li>|</li>
<li>诚征英才</li>
<li>|</li>
<li>商家登录</li>
<li>|</li>
<li>供应商登录</li>
<li>|</li>
<li>放心搜</li>
<li>|</li>
<li>1号店新品</li>
<li>|</li>
<li>开放平台</li>
<li>|</li>
</ul>
</div>
<div class="middle">
<ul>
<li>沪ICP备13D44268号 </li>
<li>|</li>
<li>营业执照 </li>
<li>|</li>
<li>互联网药品信息服务资格证 </li>
<li>|</li>
<li> 互联网药品交易服务资格证</li>
<li>|</li>
</ul>
</div>
<div class="bottom">
<ul>
<li>Copyinght© 1号店网上超市</li>
<li> 2007-2015，</li>
<li> All Right Reserved</li>
<li style="color: darkgrey;"><a href="http://www.jd.com">合作加盟</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
网页的css代码：
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 40px;
background: #F9F9F9;
/*border: 1px solid black;*/
}
.one{
width: 1200px;
height: 40px;
/*border: 1px solid red;*/
margin: 0 auto;
position: relative;
}
.dl{
width: 300px;
height: 40px;
/*border: 1px solid yellow;*/
float: left;
}
.dd{
width: 700px;
height: 40px;
/*border: 1px solid purple;*/
float: right;
}
.dd>P{
/* width: 40px;*/
height: 40px;
line-height: 40px;
float: left;
margin-left: 20px;
cursor: pointer;
}
.dd>P:hover{
color: red;
text-decoration: underline;
}
.dd>P>span{
width: 30px;
height: 30px;
/*border: 1px solid red;*/
display:inline-block;
background-image: url(../img/indexhead_sprite.png);
background-repeat: no-repeat;
background-position:-287px -246px ;
}
.left>span{
/*float: right;*/
width: 20px;
height: 20px;
background-image: url(../img/indexhead_sprite.png);
/*border: 1px solid black;*/
background-repeat: no-repeat;
background-position: -98px -101px;
position: absolute;
top: 160px;
left: 220px;
}
.d33>ul{
width: 85px;
height: 90px;
/*border: 1px solid red;*/
position: absolute;
list-style: none;
padding-left: 10px;
display: none;
top: 40px;
left: 810px;
}
.dd>.dd66{
width: 95px;
height: 40px;
/*border: 1px solid red;/*/
display: inline-block;
margin: 0 auto;
}
.two{
width: 1200px;
height: 80px;
/*border: 1px solid black;*/
margin-top: 20px;
margin: 0 auto;
position: relative;
}
.two>.left{
width: 100px;
height: 70px;
/*border: 1px solid purple;*/
float: left;
position: absolute;
left: 0;
top: 10px;
}
.two>.right{
width: 500px;
height: 40px;
line-height: 40px;
border: 4px solid red;
float: left;
position: absolute;
top: 15px;
left: 260px;
}
.two>.right>span{
right: 30px;
}
.two>.right>.right55{
width: 100px;
height: 40px;
line-height: 40px;
/*border: 1px solid black;*/
float: left;
font-size: 25px;
color: black;
padding-left: 20px;
background:#FFFFFF ;
border: none;
}
.two>.right>.right66{
width: 308px;
height: 40px;
/*border: 1px solid black;*/
border-left: 1px solid darkgray;
float: left;
}
.two>.right>.right66>.input1{
outline: none;
border: none;
color: darkgrey;
}
.two>.right>.right77>button{
float: right;
width: 71px;
height: 44px;
margin-left: 10px;
background:#FF3143 ;
color: white;
font-size: 20px;
border: none;
position: absolute;
top: 0;
left: 420px;
}
.two>.bottom>ul{
width:270px ;
height: 15px;
/*border: 1px solid red;*/
list-style: none;
position: absolute;
top: 64px;
left: 260px;
margin-top: 5px;
}
.two>.bottom>ul>li{
float: left;
margin-right: 5px;
height: 15px;
line-height: 15px;
color: darkgrey;
cursor: pointer;
}
.two>.bottom>ul>li:hover{
color: red;
text-decoration: underline;
}
.three{
width: 1200px;
height: 50px;
/*border: 1px solid red;*/
margin: 0 auto;
margin-top: 20px;
}
.three>.left{
width: 240px;
height: 50px;
/*border: 1px solid purple;*/
background: #FF3C3D;
float: left;
position: relative;
}
.three>.left>p{
height: 50px;
line-height: 50px;
color: white;
text-align: center;
font-size: 17px;
position: absolute;
top: 0;
left: 50px;
}
.three>.right{
width: 600px;
height: 50px;
/*border: 1px solid black;*/
float: left;
}
.three>.right33>ul>li{
float: left;
/*width: 30px;*/
height: 50px;
line-height: 50px;
list-style: none;
margin-right: 15px;
padding-left: 15px;
}
.three>.right33>ul{
color: black;
cursor: pointer;
font-weight: bolder;
}
.three>.right33>ul>.right123{
color: red;
font-weight: bolder;
}
.three>.right33>ul>li:hover{
color: red;
text-decoration: underline;
}
.four{
width: 100%;
height: 400px;
background:#FF3C3D;
/*border: 1px solid red;*/
}
.four>.fourbox{
width: 1200px;
height: 400px;
/*border: 1px solid black;*/
margin: 0 auto;
position: relative;
}
.four>.fourbox>.left{
width: 240px;
height: 400px;
/*border: 1px solid purple;*/
background: #C13131;
}
.four>.fourbox>.left>img{
margin-top: 6px;
margin-left: 5px;
}
.four>.fourbox>.left>.left33{
width: 140px;
height: 400px;
/*line-height: 20px;*/
position: absolute;
top: 2px;
left: 30px;
line-height: 36px;
padding-bottom: 10px;
color: white;
cursor: pointer;
font-size: 10px;
}
.four>.fourbox>.left>.left33>ul{
list-style: none;
position: absolute;
top: 0;
left: 140px;
width: 20px;
height: 36px;
cursor: pointer;
}
.four>.fourbox>.left>.left33>ul>li:hover{
color: red;
text-decoration: underline;
}
.four>.fourbox>.left>.left33>p:hover{
color: dodgerblue;
text-decoration: underline;
}
.four>.fourbox>.middle>img{
position: absolute;
top: 0;
left: 200px;
}
.four>.fourbox>.middle>.middle934{
position: absolute;
left: 600px;
top: 370px;
width: 150px;
height: 20px;
/*border: 1px solid black;*/
}
.four>.fourbox>.middle>.middle934>p{
width: 20px;
height: 20px;
background: white;
float: left;
margin-left: 10px;
}
.four>.fourbox>.middle>.middle934>.middle567{
background: red;
}
.four>.fourbox>.right{
width: 247px;
height: 400px;
/*border: 1px solid yellow;*/
position: absolute;
top: 0;
right: 0;
background: white;
}
.four>.fourbox>.right>.top55{
height: 100px;
border-bottom: 1px solid darkgrey;
margin-top: 5px;
}
.four>.fourbox>.right>.top55>p{
float: left;
margin-right: 30px;
/*border-bottom: 1px solid darkgray;*/
}
.four>.fourbox>.right>.top55>P>.right666{
position: absolute;
top: 55px;
left: 5px;
font-size: 10px;
cursor: pointer;
}
.four>.fourbox>.right>.top55>P>.right666:hover{
color: red;
text-decoration: underline;
}
.four>.fourbox>.right>.top55>P>.right777{
position: absolute;
top: 55px;
left: 75px;
font-size: 10px;
cursor: pointer;
}
/*.four>.fourbox>.right>.top55>P>.right777{
color: red;
text-decoration: underline;
}*/
.four>.fourbox>.right>.top55>P>.right777:hover{
color: red;
text-decoration: underline;
}
.four>.fourbox>.right>.top55>P>.right888{
position: absolute;
top: 55px;
left: 165px;
font-size: 10px;
cursor: pointer;
}
.four>.fourbox>.right>.top55>P>.right888:hover{
color: red;
text-decoration: underline;
}
.four>.fourbox>.right>.middle55{
font-size: 10px;
position: absolute;
left: 10px;
top: 90px;
height: 100px;
line-height: 30px;
width: 215px;
border-bottom: 1px solid darkgrey;
cursor: pointer;
margin-top: 20px;
padding-left: 20px;
}
.four>.fourbox>.right>.middle55:hover{
color: grey;
text-decoration: none;
}
.four>.fourbox>.right>.bottom6666{
width: 400px;
height: 190px;
/*border: 1px solid red;*/
position: absolute;
top: 210px;
left: 0;
}
.four>.fourbox>.right>.bottom6666>.top987{
height: 40px;
width:245px;
line-height: 40px;
color: darkgrey;
/*border: 1px solid lightgrey;*/
}
.four>.fourbox>.right>.bottom6666>.top987>ul>li{
float: left;
list-style: none;
margin-right: 20px;
margin-left: 5px;
cursor: pointer;
}
.four>.fourbox>.right>.bottom6666>.top987>ul>li:hover{
color: red;
text-decoration: underline;
}
.four>.fourbox>.right>.bottom6666>.middle987{
width: 220px;
height: 140px;
/*border: 1px solid darkgoldenrod;*/
position: absolute;
top: 45px;
left: 15px;
cursor: pointer;
}
.four>.fourbox>.right>.bottom6666>.middle987>p{
margin-top: 5px;
}
.four>.fourbox>.right>.bottom6666>.middle987>.middle996{
text-indent: 30px;
cursor: pointer;
}
.four>.fourbox>.right>.bottom6666>.middle987>.middle995{
text-indent: 30px;
cursor: pointer;
}
.four>.fourbox>.right>.bottom6666>.middle987>.middle997{
text-align: center;
margin-top: 15px;
border: none;
/*background: red;
color: white;*/
}
.four>.fourbox>.right>.bottom6666>.middle987>.middle997>button{
background: red;
color: white;
width: 100px;
height: 30px;
border: none;
cursor: pointer;
}
.four>.fourbox>.right>.bottom6666>.middle987>.middle997>button:hover{
color: black;
text-decoration: underline;
}
.five{
width: 1200px;
height: 50px;
/*border: 1px solid black;*/
/*position: absolute;
top: 600px;
left: 0;*/
margin: 0 auto;
margin-top: 10px;
}
.five>.left{
width: 150px;
height: 50px;
line-height: 50px;
/*border: 1px solid red;*/
margin-left: 20px;
cursor: pointer;
float: left;
}
.five>.right>ul{
list-style: none;
width: 500px;
height: 50px;
/*border: 1px solid red;*/
float: right;
}
.five>.right>ul>li{
float: left;
margin-left: 40px;
height: 50px;
line-height: 50px;
cursor: pointer;
color: darkgrey;
}
.five>.right>ul>li:hover{
color: red;
text-decoration: underline;
}
.six{
width: 1200px;
height: 360px;
/*border: 1px solid black;*/
margin: 0 auto;
position: relative;
border-top: 2px solid red;
}
.six>.left{
width: 200px;
height: 360px;
/*border: 1px solid black;*/
}
.six>.left>.top{
width: 200px;
height: 160px;
/*border: 1px solid red;*/
}
.six>.left>.top>ul{
width: 150px;
height: 160px;
}
.six>.left>.top>ul>li{
font-size: 10px;
float: left;
list-style: none;
margin-left: 25px;
margin-top: 20px;
color: darkgrey;
cursor: pointer;
}
.six>.left>.top>ul>li:hover{
color: red;
text-decoration: underline;
}
.six>.left>.bottom{
margin-top: 15px;
position: relative;
}
.six>.left>.bottom>ul{
position: absolute;
top: -15px;
left: 65px;
}
.six>.middle12{
position: absolute;
top: 0;
left: 221px;
}
.six>.middle23{
width: 200px;
height: 160px;
/*border: 1px solid red;*/
position: absolute;
top: 0;
left: 550px;
}
.six>.middle23>img{
position: absolute;
top: 50px;
left: 0
}
.six>.middle23>ul{
text-align: center;
list-style: none;
margin-top: 5px;
cursor: pointer;
}
.six>.middle34>img{
position: absolute;
top: 220px;
left: 570px;
}
.six>.middle34>ul{
list-style: none;
position: absolute;
top: 170px;
left: 610px;
cursor: pointer;
}
.six>.right23{
position: absolute;
top: 50px;
left: 800px;
width:230px;
height: 120px;
}
.six>.right23>ul{
position: absolute;
top: -40px;
left: 30px;
font-size: 10px;
list-style: none;
cursor: pointer;
}
.six>.right34{
width: 200px;
height: 350px;
/*border: 1px solid red;*/
position: absolute;
top: 0;
right: 0;
}
.six>.right34>img{
margin-top: 40px;
}
.six>.right34>ul{
list-style: none;
text-align: center;
position: absolute;
top: 0;
left: 45px;
cursor: pointer;
}
.six>.right23>ul{
position: absolute;
top: -40px;
left: 50px;
list-style: none;
}
.six..right34>.right56>ul{
position: absolute;
top: 200px;
left: 50px;
}
.six>.right34>.right321{
width:200px;
height: 180px;
/*border: 1px solid purple;*/
margin-top: 20px;
}
.six>.right34>.right321>.right76>img{
position: absolute;
top: 230px;
left: 0;
}
.six>.right34>.right321>.right56{
list-style: none;
text-align: center;
margin-top: 10px;
cursor: pointer;
}
.seven{
width: 1200px;
height: 40px;
/*margin-top: 30px;*/
/*border: 1px solid black;*/
margin: 0 auto;
position: relative;
}
.seven>.left{
width: 150px;
height: 40px;
line-height: 40px;
}
.seven>.left>h2{
color: #B8CF39;
margin-left: 20px;
cursor: pointer;
}
.seven>.right{
width: 500px;
height: 40px;
line-height: 40px;
/*border: 1px solid red;*/
float: right;
position: absolute;
top: 0;
right: 0;
}
.seven>.right>ul>li{
list-style: none;
float: left;
margin-left: 30px;
cursor: pointer;
color: darkgrey;
}
.seven>.right>ul>li:hover{
color: red;
text-decoration: underline;
}
.eight{
width: 1200px;
height: 360px;
/*border: 1px solid red;*/
margin: 0 auto;
border-bottom: none;
border-top: 2px solid red;
}
.eight>.left{
width: 1200px;
height: 360px;
/*border: 1px solid black;*/
position: relative;
float: left;
}
.eight>.left>.top{
width: 220px;
height: 160px;
/*border: 1px solid purple;*/
}
.eight>.left>.top>ul{
list-style: none;
}
.eight>.left>.top>ul>li{
float: left;
margin-left: 30px;
height: 50px;
line-height: 50px;
cursor: pointer;
}
.eight>.left>.top>ul>li:hover{
color: red;
text-decoration:underline ;
}
.eight>.left>.bottom{
width: 220px;
height: 200px;
/*border: 1px solid yellow;*/
}
.eight>.left>.bottom>img{
position: absolute;
top: 190px;
left: 0;
}
.eight>.left>.bottom>p{
text-align: center;
font-size: 10px;
}
.eight>.left>.bottom>.middle{
position: absolute;
top: 0;
left: 230px;
}
.eight>.left>.right{
width: 200px;
height: 360px;
/*border: 1px solid black;*/
position: absolute;
top: 0;
left: 570px;
}
.eight>.left>.right>.top{
width: 200px;
height: 180px;
/*border: 1px solid red;*/
}
.eight>.left>.right>.top>img{
position: absolute;
top: 60px;
left: 0;
}
.eight>.left>.right>.top>p{
margin-bottom: 10px;
text-align: center;
margin-top: 5px;
cursor: pointer;
}
.eight>.left>.right>.top>p:hover{
color: red;
text-decoration: underline;
}
.eight>.left>.right>.bottom{
width: 200px;
height: 180px;
/*/border: 1px solid yellow;*/
}
.eight>.left>.right>.bottom>img{
position: absolute;
top: 245px;
left: 0;
}
.eight>.left>.right>.bottom>p{
margin-bottom: 10px;
margin-top: 5px;
cursor: pointer;
text-align: center;
}
.eight>.left>.right>.bottom>p:hover{
color: red;
text-decoration: underline;
}
.eight>.left>.right777{
width: 200px;
height: 360px;
/*border: 1px solid teal;*/
position: absolute;
top: 0;
left: 790px;
}
.eight>.left>.right777>img{
position: absolute;
top: 60px;
left: 0;
}
.eight>.left>.right777>p{
margin-bottom: 10px;
text-align: center;
margin-top: 5px;
cursor: pointer;
}
.eight>.left>.right777>p:hover{
color: red;
text-decoration: underline;
}
.eight>.left>.right899{
width: 200px;
height: 360px;
/*border: 1px solid blue;*/
position: absolute;
top: 0;
left: 1000px;
border-bottom: none;
}
.eight>.left>.right899>.top{
width: 200px;
height: 180px;
/*border: 1px solid red;*/
}
.eight>.left>.right899>.top>img{
position: absolute;
top: 60px;
left: 0;
}
.eight>.left>.right899>.top>p{
margin-top: 5px;
margin-bottom: 10px;
text-align: center;
cursor: pointer;
}
.eight>.left>.right899>.top>p:hover{
color: red;
text-decoration: underline;
}
.eight>.left>.right899>.bottom{
width: 200px;
height: 180px;
/*border: 1px solid yellowgreen;*/
}
.nine{
width: 1200px;
height: 180px;
/*border: 1px solid red;*/
margin: 0 auto;
position: relative;
border-top: none;
}
.nine>.left{
width: 200px;
height: 180px;
/*border: 1px solid purple;*/
}
.nine>.left>img{
position: absolute;
top: 70px;
left: 0;
}
.nine>.left>p{
margin-bottom: 10px;
margin-top: 5px;
text-align: center;
cursor: pointer;
}
.nine>.left>p:hover{
color: red;
text-decoration: underline;
}
.nine>.middle23{
width: 200px;
height: 180px;
/*border: 1px solid black;*/
position: absolute;
top: 0;
left: 200px;
}
.nine>.middle23>p{
margin-top: 20px;
margin-left: 20px;
cursor: pointer;
}
.nine>.middle23>p>button{
background: red;
color: white;
border: none;
width: 160px;
height: 40px;
}
.nine>.middle23>p:hover{
color: yellowgreen;
text-decoration: underline;
}
.nine>.middle67{
width: 160px;
height: 180px;
/*border: 1px solid deepskyblue;*/
position: absolute;
top: 0;
left: 400px;
border-left: none;
}
.nine>.middle89{
width: 220px;
height:180px ;
/*border: 1px solid cyan;*/
position: absolute;
top: 0;
left: 560px;
}
.nine>.middle89>img{
position: absolute;
top: 70px;
left: 0;
}
.nine>.middle89>p{
margin-bottom: 10px;
text-align: center;
margin-top: 5px;
cursor: pointer;
}
.nine>.middle89>p:hover{
color: red;
text-decoration: underline;
}
.nine>.right34{
width: 200px;
height: 180px;
/*border: 1px solid red;*/
position: absolute;
top: 0;
left: 790px;
}
.nine>.right34>img{
position: absolute;
top: 70px;
left: 0;
}
.nine>.right34>p{
margin-bottom: 10px;
margin-top: 5px;
text-align: center;
cursor: pointer;
}
.nine>.right34>p:hover{
color: red;
text-decoration: underline;
}
.nine>.right89>img{
position:absolute ;
top: -110px;
left: 1000px;
}
.nine>.right89>{
position: absolute;
top: 100px;
left: 0;
}
.nine>.right89>ul{
list-style: none;
position: absolute;
top: -170px;
left: 1050px;
cursor: pointer;
}
.nine>.right89>ul>li:hover{
color: red;
text-decoration: underline;
}
.ten{
width: 1200px;
height: 100px;
/*border: 1px solid red;*/
margin: 0 auto;
}
.ten>.top{
width: 1200px;
height: 30px;
/*border: 1px solid yellowgreen;*/
}
.ten>.top>ul{
font-size: 10px;
list-style: none;
}
.ten>.top>ul>li{
float: left;
margin-left: 10px;
padding-left: 10px;
cursor: pointer;
color: darkgrey;
}
.ten>.top>ul>li:hover{
color: red;
text-decoration: underline;
}
.ten>.middle{
width: 1200px;
height: 30px;
/*border: 1px solid black;*/
}
.ten>.middle>ul{
font-size: 10px;
list-style: none;
}
.ten>.middle>ul>li{
float: left;
margin-left: 10px;
cursor: pointer;
text-align: center;
color: darkgrey;
padding-left: 50px;
}
.ten>.middle>ul>li:hover{
color: red;
text-decoration: underline;
}
.ten>.bottom{
width: 1200px;
height: 30px;
/*border: 1px solid deepskyblue;*/
}
.ten>.bottom>ul{
font-size: 10px;
list-style: none;
}
.ten>.bottom>ul>li{
float: left;
margin-left: 10px;
cursor: pointer;
text-align: center;
color: darkgrey;
padding-left: 90px;
}
.ten>.bottom>ul>li:hover{
color: red;
text-decoration: underline;
}名媛坊网页：
图片展示：
第一页：
第二页 ：
第三页：
第四页：
第五页：
第六页：
第七页：
网页的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>名媛坊（正品特卖,全网低价）</title>
<link rel="stylesheet" type="text/css" href="css/名媛坊.css"/>
</head>
<body>
<div class="one">
<div class="left">
<span><p>欢迎来到主页 【登录/注册】</p></span>
</div>
<div class="right">
<ul>
<li>用户中心</li>
<li>我的购物车</li>
<li>公告中心</li>
<li>我的收藏</li>
<li>在线客服</li>
</ul>
</div>
</div>
<div class="two">
<div class="left">
<img src="img/logors11.png"/>
</div>
<div class="middle">
<input type="text" value="输入关键字 搜索商品"/class="middle1">
<p class="middle2">搜索</p>
<p class="middle3">
<span>关键字：</span>
口红
粉底液
气垫
防嗮
腮红
</p>
<ul>
<li class="middle4">找货源</li>
<li>看求购</li>
<li>批发商</li>
<li>咨询圈</li>
<li>招代理</li>
</ul>
</div>
<div class="right">
<div class="right1">
<span class="right2"><img src="img/photo3.png"/></span>
<span>一站式购齐</span>
</div>
<div class="right3">
<img src="img/photo2.png"/>
<span class="right4">满88包邮</span>
</div>
</div>
</div>
<div class="three">
<ul>
<li class="three4">所有商品分类</li>
<li class="three1">首页</li>
<li>会员折扣</li>
<li>热门品牌区</li>
<li>热销产品区</li>
<li>特价清仓区</li>
<li>时尚精品区</li>
<li>福利折扣区</li>
</ul>
</div>
<div class="four">
<div class="left">
<ul>
<li class="left1">名牌口红</li>
<li class="left2">兰蔻 迪奥 香奈儿 阿玛尼 纪梵希 > </li>
</ul>
<ul>
<li class="left1">粉底液</li>
<li class="left2">雅诗兰黛 玖珂菲 魅可 Mac ></li>
</ul>
<ul>
<li class="left1">眼影</li>
<li class="left2">Nars Kate 卡拉泡泡 NYX ></li>
</ul>
<ul>
<li class="left1">防晒隔离</li>
<li class="left2">兰芝 美宝莲 苏菲娜 CPB ></li>
</ul>
<ul>
<li class="left1">气垫</li>
<li class="left2">香奈儿 蒂佳婷 纪梵希 兰蔻 > </li>
</ul>
<ul>
<li class="left1">粉底液</li>
<li class="left2">雅诗兰黛 玖珂菲 魅可 Nars > </li>
</ul>
<ul>
<li class="left1">水乳</li>
<li class="left2">Cemoy 悦诗风吟 珂润 澳尔滨 ></li>
</ul>
<ul class="left8">
<li class="left1">持妆散粉</li>
<li class="left2">贝玲妃 Rcma 纪梵希 迪奥 ></li>
</ul>
</div>
<div class="middle">
<img src="img/photo1.jpg"/>
</div>
<div class="right">
<div class="box">
<div class="top">
<ul>
<li>名媛坊会员</li>
<li class="top1">立即注册</li>
</ul>
</div>
<div class="middle">
<img src="img/egrewr5.png"/>
<input type="text" name="" id="" value=" 用户名\手机号" class="middle1"/>
<span><img src="img/fffegg.png"/></span>
<input type="text" name="" id="" value=" 请输入密码" class="middle6"/>
</div>
<div class="bottom">
<ul>
<li><input type="radio" name="" id="" value="" />自动登录</li>
<li class="bottom1">忘记密码?</li>
</ul>
</div>
<div class="banner">
<ul>
<li>
<input type="checkbox" name="" id="" value="" />男
<input type="checkbox" name="" id="" value="" />女
</li>
</ul>
<ul>
<li>
<select name="">
<option value="">河南</option>
</select>省
<select name="">
<option value="">郑州</option>
</select>市
<select name="">
<option value="">金水</option>
</select>区
</li>
</ul>
<ul class="banner1">
<li>
<select name="">
<option value="">2002</option>
</select>年
<select name="">
<option value="">2</option>
</select>月
<select name="">
<option value="">4</option>
</select>日
</li>
</ul>
<ul>
<li class="banner2">
<textarea name="" rows="" cols="" class="banner3">
名媛坊，是京东集团旗下的一款便捷的电商购物网站，在这里可以想享受到便捷的服务
和购买精美的商品。
</textarea>
</li>
</ul>
</div>
<div class="last">
<input type="button" name="" id="" value="登录" class="last1"/>
</div>
</div>
</div>
</div>
<div class="five">
<div class="left">
<p>名牌美妆</p>
</div>
<div class="right">
<ul>
<li>口红</li>
<li>水乳</li>
<li>粉底液</li>
</ul>
</div>
</div>
<div class="six">
<div class="left">
<div class="top">
<ul>
<li>口红</li>
<li>睫毛膏</li>
<li>粉底液</li>
<li>香水</li>
<li>散粉</li>
<li>眼影</li>
<li>隔离</li>
<li>防晒</li>
<li>妆前粉</li>
</ul>
</div>
<div class="bottom">
<img src="img/background 1.jpg"/>
</div>
</div>
<div class="right">
<div class="top">
<ul>
<li><img src="img/photox1.png"/></li>
<span class="top1"><li>MAC 魅可口红</li></span>
<span class="top2"><li>心动价：￥409 ☞</li></span>
</ul>
<ul>
<li><img src="img/photox2.jpg"/></li>
<span class="top3"><li>迪奥小姐花荡香氛</li></span>
<span class="top4"><li>心动价：￥830 ☞</li></span>
</ul>
<ul>
<li><img src="img/photox3.jpg"/></li>
<span class="top5"><li>圣罗兰（YSL）唇膏</li></span>
<span class="top6"><li>心动价：￥613 ☞</li></span>
</ul>
<ul>
<li><img src="img/photox4.jpg"/></li>
<span class="top7"><li>美国elf纤长浓密睫毛膏</li></span>
<span class="top8"><li>心动价：￥299 ☞</li></span>
</ul>
<ul class="top99">
<li><img src="img/photox5.jpg"/></li>
<span class="top9"><li>新 年 折 扣</li></span>
<span class="top10"><li>全 场 7.5折 ×</li></span>
<span class="top11"><li>全 场 5 折 √</li></span>
</ul>
</div>
<div class="bottom">
<ul>
<li><img src="img/photox6.jpg"/></li>
<span class="top1"><li>兰芝轻盈无痕散粉</li></span>
<span class="top2"><li>心动价：￥359☞</li></span>
</ul>
<ul>
<li><img src="img/photox7.jpg"/></li>
<span class="top3"><li>资生堂夏臻防护乳</li></span>
<span class="top4"><li>心动价：￥469☞</li></span>
</ul>
<ul>
<li><img src="img/photox8.jpg"/></li>
<span class="top5"><li>迪奥恒久气垫粉底</li></span>
<span class="top6"><li>心动价：￥699 ☞</li></span>
</ul>
<ul>
<li><img src="img/photox9.jpg"/></li>
<span class="top7"><li>妈祖珑蓝风铃香水30Ml</li></span>
<span class="top8"><li>心动价：￥759 ☞</li></span>
</ul>
</div>
</div>
</div>
<div class="seven">
<div class="left">
<p>个人护理</p>
</div>
<div class="right">
<ul>
<li>爽肤水</li>
<li>面膜</li>
<li>香水</li>
</ul>
</div>
</div>
<div class="eight">
<div class="left">
<div class="top">
<ul>
<li>面膜</li>
<li>水乳</li>
<li>护发素</li>
<li>精华</li>
<li>身体乳</li>
<li>去角质</li>
<li>眼霜</li>
<li>洁面</li>
<li>卸妆</li>
</ul>
</div>
<div class="bottom">
<img src="img/photos1.jpg"/>
</div>
</div>
<div class="right">
<div class="top">
<ul>
<li><img src="img/photos6.jpg"/></li>
<span class="top1"><li>雅诗兰黛修护眼霜</li></span>
<span class="top2"><li>心动价：￥509 ☞</li></span>
</ul>
<ul>
<li><img src="img/photos7.jpg"/></li>
<span class="top3"><li>日本珂润滋养眼霜</li></span>
<span class="top4"><li>心动价：￥630 ☞</li></span>
</ul>
<ul>
<li><img src="img/photos8.jpg"/></li>
<span class="top5"><li>蓓昂斯温和卸妆水300Ml</li></span>
<span class="top6"><li>心动价：￥113 ☞</li></span>
</ul>
<ul>
<li><img src="img/photos9.jpg"/></li>
<span class="top7"><li>日本进口芙丽芳丝</li></span>
<span class="top8"><li>心动价：￥399 ☞</li></span>
</ul>
<ul class="top99">
<li><img src="img/photox5.jpg"/></li>
<span class="top9"><li>新 春 嘉 年 华 </li></span>
<span class="top10"><li>全 场 7.5折 ×</li></span>
<span class="top11"><li>全 场 5 折 √</li></span>
</ul>
</div>
<div class="bottom">
<ul>
<li><img src="img/photos2.jpg"/></li>
<span class="top1"><li>SK-II前男友面膜10P</li></span>
<span class="top2"><li>心动价：￥1059☞</li></span>
</ul>
<ul>
<li><img src="img/photos3.jpg"/></li>
<span class="top3"><li>日本进口黛珂紫苏水</li></span>
<span class="top4"><li>心动价：￥569☞</li></span>
</ul>
<ul>
<li><img src="img/photos4.jpg"/></li>
<span class="top5"><li>科颜氏金盏花活肤水500Ml</li></span>
<span class="top6"><li>心动价：￥399 ☞</li></span>
</ul>
<ul>
<li><img src="img/photos5.jpg"/></li>
<span class="top7"><li>兰蔻轻盈柔肤水300Ml</li></span>
<span class="top8"><li>心动价：￥759 ☞</li></span>
</ul>
</div>
</div>
</div>
<div class="nine">
<p>猜 你
喜 欢</p>
</div>
<div class="ten">
<div class="top">
<ul>
<li><img src="img/photo7.jpg"/></li>
<li><img src="img/photo8.jpg"/></li>
</ul>
</div>
<div class="middle">
<div class="middle1">
<ul>
<li><img src="img/photoz1.jpg"/></li>
<li class="middle66"><span class="middle9">￥233 </span>销量<span class="middle8">356</span>件</li>
</ul>
<ul>
<li><img src="img/photoz2.jpg"/></li>
<li class="middle67"><span class="middle9">￥433 </span>销量<span class="middle8">296</span>件</li>
</ul>
<ul>
<li><img src="img/photoz3.jpg"/></li>
<li class="middle68"><span class="middle9">￥733 </span>销量<span class="middle8">356</span>件</li>
</ul>
<ul>
<li><img src="img/photoz4.jpg"/></li>
<li class="middle69"><span class="middle9">￥533 </span>销量<span class="middle8">856</span>件</li>
</ul>
</div>
<div class="middle2">
<ul>
<li><img src="img/photoz5.jpg"/></li>
<li class="middle66"><span class="middle9">￥653 </span>销量<span class="middle8">685</span>件</li>
</ul>
<ul>
<li><img src="img/photoz6.jpg"/></li>
<li class="middle67"><span class="middle9">￥639 </span>销量<span class="middle8">546</span>件</li>
</ul>
<ul>
<li><img src="img/photoz7.jpg"/></li>
<li class="middle68"><span class="middle9">￥1353 </span>销量<span class="middle8">866</span>件</li>
</ul>
<ul>
<li><img src="img/photoz8.jpg"/></li>
<li class="middle69"><span class="middle9">￥893 </span>销量<span class="middle8">644</span>件</li>
</ul>
</div>
</div>
</div>
<div class="eleven">
<div class="left">
<p>脸 部 护 理</p>
</div>
<div class="right">
<ul>
<li>补水</li>
<li>面膜</li>
<li>祛痘</li>
<li>美白</li>
<li>防晒</li>
<li>洁面乳</li>
<li>护肤套装</li>
</ul>
</div>
</div>
<div class="twelve">
<div class="left">
<img src="img/banner1.jpg"/>
</div>
<div class="right">
<div class="top">
<ul>
<li><img src="img/banner2.jpg"/></li>
<li class="top1">玉兰油素颜金纯活能水 </li>
<li class="top2">
<span class="top3">￥123.00</span>
销量<span class="top4">345</span>件
</li>
</ul>
<ul>
<li><img src="img/banner3.jpg"/></li>
<li class="top66">施华蔻清爽系列 </li>
<li class="top67">
<span class="top3">￥543.00</span>
销量<span class="top4">545</span>件
</li>
</ul>
<ul>
<li><img src="img/banner4.jpg"/></li>
<li class="top77">潘婷洁净套装 </li>
<li class="top78">
<span class="top3">￥143.00</span>
销量<span class="top4">655</span>件
</li>
</ul>
</div>
<div class="bottom">
<ul>
<li><img src="img/banner5.jpg"/></li>
<li class="top1">梦芭菲宝石洗发水 </li>
<li class="top2">
<span class="top3">￥343.00</span>
销量<span class="top4">753</span>件
</li>
</ul>
<ul>
<li><img src="img/banner6.jpg"/></li>
<li class="top66">百雀羚 保湿乳 </li>
<li class="top67">
<span class="top3">￥143.00</span>
销量<span class="top4">976</span>件
</li>
</ul>
<ul>
<li><img src="img/banner7.jpg"/></li>
<li class="top77">Dove多芬护肤套装 </li>
<li class="top78">
<span class="top3">￥543.00</span>
销量<span class="top4">655</span>件
</li>
</ul>
</div>
</div>
<div class="middle33">
<ul>
<li><img src="img/banner12.jpg"/></li>
<li><img src="img/banner9.jpg"/></li>
<li><img src="img/banner11.jpg"/></li>
<li><img src="img/banner13.jpg"/></li>
<li><img src="img/banner12.jpg"/></li>
<li><img src="img/banner14.jpg"/></li>
</ul>
</div>
</div>
<div class="thirteen">
<div class="left">
<p>今日新品</p>
</div>
<div class="middle">
<p>每天10.00新品特价</p>
</div>
<div class="right">
<p>不喜欢？换一批</p>
</div>
</div>
<div class="fourteen">
<ul>
<li class="left11">
距离结束还有
<span class="red11">2</span>天
<span class="red11">13</span>小时
<span class="red11">34</span>分
</li>
<li><img src="img/bimg1.png"/></li>
<li class="left22">共<span class="red11">
3453
</span>人想买</li>
</ul>
<ul>
<li class="left33">
距离结束还有
<span class="red11">1</span>天
<span class="red11">6</span>小时
<span class="red11">54</span>分
</li>
<li><img src="img/dg19.jpg"/></li>
<li class="lefta1">共<span class="red11">
3453
</span>人想买</li>
</ul> <ul>
<li class="left44">
距离结束还有
<span class="red11">1</span>天
<span class="red11">5</span>小时
<span class="red11">52</span>分
</li>
<li><img src="img/dg23.jpg"/></li>
<li class="lefta2">共<span class="red11">
6464
</span>人想买</li>
</ul>
<ul>
<li class="left55">
距离结束还有
<span class="red11">3</span>天
<span class="red11">13</span>小时
<span class="red11">19</span>分
</li>
<li><img src="img/dg29 (1).jpg"/></li>
<li class="lefta3">共<span class="red11">
3532
</span>人想买</li>
</ul>
<ul>
<li class="left66">
距离结束还有
<span class="red11">4</span>天
<span class="red11">2</span>小时
<span class="red11">34</span>分
</li>
<li><img src="img/dg25.jpg"/></li>
<li class="lefta4">共<span class="red11">
8661
</span>人想买</li>
</ul>
</div>
<div class="fifteen">
<div class="left">
<ul>
<li><img src="img/bimg1.png"/></li>
<li><img src="img/dg13.jpg"/></li>
<li><img src="img/dg_img4.jpg"/></li>
<li><img src="img/dg22.jpg"/></li>
<li><img src="img/dg23.jpg"/></li>
<li><img src="img/dg24.jpg"/></li>
<li><img src="img/dg25.jpg"/></li>
<li><img src="img/dg27.jpg"/></li>
<li><img src="img/dg28.jpg"/></li>
<li><img src="img/dg29.jpg"/></li>
<li><img src="img/dg_img2.jpg"/></li>
<li><img src="img/webpic1.jpg"/></li>
</ul>
</div>
<div class="right">
<div class="top">
<p>精品推荐</p>
</div>
<div class="middle">
<div class="left">
<ul>
<li><img src="img/dg13.jpg"/></li>
<li><img src="img/dg19.jpg"/></li>
<li><img src="img/dg22.jpg"/></li>
<li><img src="img/dg25.jpg"/></li>
<li><img src="img/dg27.jpg"/></li>
</ul>
</div>
<div class="right">
<ul class="right33">
<li>元祖 鲜牛奶蛋糕</li>
<li>尺寸：10寸</li>
<li>
价格：
<span class="right11">￥288.00</span>
</li>
</ul>
<ul class="right44">
<li>曼可苏 真情蛋糕</li>
<li>尺寸：17寸</li>
<li>
价格：
<span class="right11">￥538.00</span>
</li>
</ul>
<ul class="right55">
<li>贝克 水果蛋糕派</li>
<li>尺寸：12寸</li>
<li>
价格：
<span class="right11">￥428.00</span>
</li>
</ul>
<ul class="right66">
<li>樱花恋 爱情结晶</li>
<li>尺寸：14寸</li>
<li>
价格：
<span class="right11">￥1314.00</span>
</li>
</ul>
<ul class="right77">
<li>尚佳妮 巧克力蛋糕</li>
<li>尺寸：15寸</li>
<li>
价格：
<span class="right11">￥658.00</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sixteen">
<div class="left">
<p>鲜花</p>
</div>
<div class="middle">
<p>一种愉悦，一种至高的享受！</p>
</div>
<div class="right">
<ul>
<li>香槟玫瑰</li>
<li>法国玫瑰</li>
<li>牡丹花</li>
<li>郁金香</li>
<li>红玫瑰</li>
<li>白玫瑰</li>
</ul>
</div>
</div>
<div class="seventeen">
<div class="left">
<img src="img/yg (1).jpg"/>
</div>
<div class="right">
<ul>
<li><img src="img/dg_flash5.jpg"/></li>
<li><img src="img/dg_flash4.jpg"/></li>
<li><img src="img/xh16.jpg"/></li>
<li><img src="img/xh21.jpg"/></li>
<li><img src="img/xh22.jpg"/></li>
<li><img src="img/xh24.jpg"/></li>
</ul>
</div>
<div class="bottom">
<div class="left">
<p class="left1"><span class="left3">浪 漫</span> 至 死 不 渝</p>
<p class="left2">Romance <span class="left4">never</span> dies!</p>
</div>
<div class="right">
<ul>
<li><img src="img/xh24.jpg"/></li>
<li><img src="img/xh_img11.jpg"/></li>
<li><img src="img/xh_img9.png"/></li>
</ul>
</div>
</div>
</div>
<div class="eighteen">
<div class="left">
<div class="top">
<p>生日礼物</p>
</div>
<div class="middle">
<img src="img/f1_pic.jpg"/>
</div>
<div class="bottom">
<ul>
<li><span>[1]:</span> 如何选择节日蛋糕？</li>
<li><span>[2]:</span> 不同蛋糕的寓意？</li>
<li><span>[3]:</span> 送爸妈什么样的蛋糕呢？</li>
<li><span>[4]:</span> 不同蛋糕有什么特殊含义？</li>
<li class="bottom11"><span>[5]:</span> 送女朋友什么样的蛋糕？</li>
</ul>
</div>
</div>
<div class="middle">
<div class="top">
<p>最 新 咨 询</p>
</div>
<div class="middle11">
<ul>
<li><span>[特 惠]</span> 1月1店庆 爆嗨</li>
<li><span>[社 区]</span> 让爱飘香公益</li>
<li><span>[公 告]</span> 新春嘉年华狂欢晚会</li>
<li><span>[特 惠]</span> 美妆蓝色盛典</li>
<li class="middle66" ><span>[公 告]</span> 2月14商品全场3.5折</li>
</ul>
</div>
<div class="bottom">
<div class="top">
<p>节 日 提 醒</p>
</div>
<div class="middle99">
<ul>
<li class="middle33"><span>[6.21] 父亲节</span> 进入专题</li>
<li class="middle44"><span>[7.21] 七夕</span> 进入专题</li>
<li class="middle55"><span>[6.1] 儿童节</span> 进入专题</li>
<li class="middle66"><span>[3.8] 女神节</span> 进入专题</li>
</ul>
</div>
</div>
</div>
<div class="right">
<div class="left">
<ul>
<li class="left33">乖乖熊给你倒茶 <span>￥388.99</span></li>
<li><img src="img/srpic1.jpg"/></li>
<li class="left34">原价：￥688.00</li>
</ul>
<ul>
<li class="left44">一心一意真情钻戒<span> ￥1488.99</span></li>
<li><img src="img/srpic2.jpg"/></li>
<li class="left35">原价：￥688.00</li>
</ul>
<ul>
<li class="left55">泰迪熊猫<span> ￥268.00</span></li>
<li><img src="img/jr_img4.jpg"/></li>
<li class="left36">原价：￥388.00</li>
</ul>
</div>
<div class="bottom">
<ul>
<li class="left33">淘气乖乖 <span>￥388.99</span></li>
<li><img src="img/jr_img1.jpg"/></li>
<li class="left34">原价：￥688.00</li>
</ul>
<ul>
<li class="left44">瞌睡兔音乐抱枕<span> ￥188.99</span></li>
<li><img src="img/srpic5.jpg"/></li>
<li class="left35">原价：￥398.00</li>
</ul>
<ul>
<li class="left55">懂你心的熊猫<span> ￥568.00</span></li>
<li><img src="img/srpic4.jpg"/></li>
<li class="left36">原价：￥798.00</li>
</ul>
</div>
</div>
</div>
<div class="nineteen">
<img src="img/f (1).jpg"/>
</div>
<div class="twenty">
<div class="left">
<ul>
<li>用户注册</li>
<li>服务协议</li>
<li>优惠券使用详情</li>
<li>购物流程</li>
<li>付款流程</li>
<li>付款方式</li>
<li>配送范围及时间</li>
<li>配送说明</li>
<li>积分使用规则</li>
<li>订单详情</li>
<li>找回密码</li>
<li>商务合作</li>
<li>退款说明</li>
<li>售前后服务</li>
<li>关于我们</li>
</ul>
</div>
<div class="right">
<p>Once <span>upon</span> a time</p>
</div>
</div>
</body>
</html>
网页的css代码：
*{
margin: 0;
padding: 0;
list-style: none;
}
img:hover{
top: -3px;
box-shadow: 0px 5px 10px 3px #ccc;
}
.one{
width: 1600px;
height: 30px;
margin: 0 auto;
background:#515151 ;
position: relative;
}
.one>.left{
width: 300px;
height: 30px;
/*border: 1px solid red;*/
float: left;
position: absolute;
top: 0;
left: 200px;
position: relative;
}
.one>.left>span>p{
height: 30px;
width: 210px;
line-height: 30px;
color: darkgrey;
cursor: pointer;
position: absolute;
top: 0;
left: 50px;
color: darkgrey;
}
.one>.left>p:hover{
text-decoration: underline;
color: red;
}
.one>.right{
width: 500px;
height: 30px;
/*border: 1px solid red;*/
position: absolute;
top: 0;
left: 870px;
float: right;
}
.one>.right>ul>li{
width: 90px;
height: 30px;
line-height: 30px;
float: left;
margin-left: 10px;
color: darkgrey;
}
.one>.right>ul>li:hover{
text-decoration: underline;
color: red;
}
.two{
width: 1300px;
height: 100px;
margin: 5px auto;
position: relative;
/*border: 1px solid black;*/
}
.two>.left>img{
width: 200px;
height: 100px;
cursor: pointer;
}
.two>.middle{
width: 530px;
height: 100px;
/*border: 1px solid red;*/
position: absolute;
top: 0;
left:330px ;
}
.two>.middle>.middle1{
width: 435px;
height: 30px;
position: absolute;
top: 35px;
left: 50px;
color: darkgrey;
padding-left: 10px;
cursor: pointer;
border: 4px solid red;
}
.two>.middle>.middle2{
width: 60px;
height: 32px;
background: red;
position: absolute;
top: 38px;
left: 440px;
color: white;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.two>.middle>.middle3{
position: absolute;
top: 75px;
left: 50px;
color: darkgrey;
cursor: pointer;
}
.two>.middle>.middle3>span{
color: cyan;
}
.two>.middle>.middle3:hover{
text-decoration: underline;
color: red;
}
.two>.middle>ul{
width: 330px;
height: 20px;
/*border: 1px solid black;*/
position: absolute;
top: 12px;
left: 50px;
}
.two>.middle>ul>li{
float: left;
margin-left: 10px;
width: 50px;
color: darkgrey;
margin-right: 20px;
cursor: pointer;
}
.two>.middle>ul>.middle4{
background: red;
width: 65px;
height: 22px;
position: absolute;
top: -2px;
left: -11px;
text-align: center;
color: white;
}
.two>.middle>ul>li:hover{
text-decoration: underline;
color: red;
}
.two>.middle>ul>.middle4:hover{
color: cyan;
}
.two>.right>.right1{
position: absolute;
top: 40px;
left: 975px;
width: 110px;
height: 30px;
/*border: 1px solid red;*/
}
.two>.right>.right1>.right2>img{
width: 20px;
height: 20px;
line-height: 20px;
position: absolute;
top: 0;
left: -23px;
}
.two>.right>.right1>span{
height: 20px;
line-height: 20px;
position: absolute;
left: 25px;
top: 5px;
cursor: pointer;
}
.two>.right>.right1>span:hover{
text-decoration: underline;
color: red;
}
.two>.right>.right3{
position: absolute;
top: 40px;
left: 1105px;
width: 110px;
height: 30px;
/*border: 1px solid black;*/
}
.two>.right>.right3>img{
width: 20px;
height: 20px;
position: absolute;
top: 5px;
left: 3px;
}
.two>.right>.right3>.right4{
position: absolute;
top: 5px;
left: 25px;
cursor: pointer;
}
.two>.right>.right3>.right4:hover{
text-decoration: underline;
color: red;
}
.three{
height: 30px;
width: 1300px;
margin: 5px auto;
/*border: 1px solid red;*/
position: relative;
background: orange;
position: relative;
}
.three>ul>li{
float: left;
width: 80px;
height: 30px;
margin-right: 10px;
margin-left: 15px;
line-height: 30px;
text-align: center;
color: white;
cursor: pointer;
}
.three>ul>.three1{
/*position: absolute;
top: 0;
left: 150px;*/
padding-left: 250px;
width: 40px;
background: red;
text-align: center;
padding-right: 20px;
margin-left: 10px;
}
.three>ul>.three1:hover{
color: deepskyblue;
}
.three>ul>.three4{
/*padding-left:-20px;*/
width: 230px;
height: 30px;
background: black;
position: absolute;
top: 0;
left: -15px;
border-right: 4px solid white;
}
.three>ul>li:hover{
text-decoration: underline;
color: red;
}
.four{
width: 1300px;
height: 400px;
/*border: 1px solid red;*/
margin: 2px auto;
position: relative;
}
.four>.left{
width: 230px;
height: 400px;
/*border: 1px solid black;*/
background: deeppink;
}
.four>.left>ul{
width: 230px;
height: 47px;
border-bottom: 2px dashed yellow;
margin-top: 2px;
}
.four>.left>.left8{
border-bottom: none;
margin-top: 5px;
cursor: pointer;
}
.four>.left>ul>li{
cursor: pointer;
margin-left: 5px;
}
.four>.left>ul>.left2{
font-size: 11px;
margin-left: 5px;
color: darkgrey;
}
.four>.left>ul>.left1{
font-size: 17px;
margin-left: 40px;
font-weight: bolder;
color: dimgrey;
}
.four>.left>ul>li:hover{
text-decoration: underline;
color: cyan;
}
.four>.middle{
width:800px ;
height: 400px;
/*border: 1px solid black;*/
position: absolute;
top: 0;
left: 230px;
}
.four>.middle>img{
width: 800px;
height: 400px;
margin-left: 4px;
}
.four>.right{
width: 270px;
height: 400px;
/*border-left: 1px solid white;*/
position: absolute;
top: 0;
left: 1030px;
background-image: url(../img/dahongsemohubeijingsucai_5847217.jpg);
}
.four>.right>.box{
width: 250px;
height: 370px;
/*border: 1px solid white;*/
margin-top: 20px;
margin-left: 10px;
background: white;
}
.four>.right>.box>.top{
width: 240px;
height: 30px;
/*border: 1px solid black;*/
margin-left: 5px;
}
.four>.right>.box>.top>ul>li{
float: left;
width: 80px;
height: 30px;
color: darkgrey;
/*border: 1px solid red;*/
}
.four>.right>.box>.top>ul>.top1{
margin-left: 85px;
width: 70px;
color: red;
}
.four>.right>.box>.middle{
width: 240px;
height: 100px;
/*border: 1px solid black;*/
margin-top: 10px;
margin-left: 5px;
}
.four>.right>.box>.middle>img{
width: 31px;
height: 30px;
position: absolute;
top: 67px;
left: 50px;
padding-left: 13px;
padding-top: 6px;
/*float: left;*/
/*border-left: 2px solid darkgrey;
border-bottom: 2px solid darkgrey;
border-top: 3px solid darkgrey;*/
}
.four>.right>.box>.middle>.middle1{
width: 150px;
height: 30px;
margin-top: 10px;
margin-left: 45px;
/*position: absolute;
top: 72px;
left: 83px;*/
/*float: left;*/
border-right:3px solid darkgrey;
border-top:3px solid darkgrey;
border-bottom:3px solid darkgrey;
border-left:3px solid darkgrey;
color: darkgrey;
}
.four>.right>.box>.middle>span>img{
width: 31px;
height: 34px;
margin-left: 20px;
position: absolute;
top: 116px;
left: 43px;
}
.four>.right>.box>.middle>.middle6{
width: 150px;
height: 30px;
margin-top: 10px;
margin-left: 45px;
border-right:3px solid darkgrey;
border-top:3px solid darkgrey;
border-bottom:3px solid darkgrey;
border-left:3px solid darkgrey;
color: darkgrey;
}
.four>.right>.box>.bottom{
width: 240px;
height: 30px;
/*border: 1px solid red;*/
margin-top: 10px;
margin-left: 5px;
}
.four>.right>.box>.bottom>ul>li{
width: 80px;
height: 30px;
/*border: 1px solid red;*/
float: left;
color: darkgrey;
}
.four>.right>.box>.bottom>ul>.bottom1{
margin-left: 70px;
}
.four>.right>.box>.banner{
width: 230px;
height: 140px;
/*border: 1px solid red;*/
margin-top: 5px;
margin-left: 5px;
}
.four>.right>.box>.banner>ul{
margin-left: 10px;
}
.four>.right>.box>.banner>ul>li{
color: darkgrey;
}
.four>.right>.box>.banner>ul>li>select{
color: darkgrey;
}
.four>.right>.box>.banner>.banner1{
margin-top: 10px;
}
.four>.right>.box>.banner>ul>.banner2{
margin-left: 20px;
margin-top: 10px;
}
.four>.right>.box>.banner>ul>.banner2>textarea{
color:grey;
}
.four>.right>.box>.banner>ul>.banner2>.banner3{
width: 150px;
height: 50px;
}
.four>.right>.box>.last>.last1{
width: 150px;
height: 25px;
margin-top: 5px;
margin-left: 35px;
background: red;
border: none;
color: white;
}
.five{
width: 1300px;
height: 30px;
/*border: 1px solid black;*/
margin: 5px auto;
position: relative;
}
.five>.left{
width: 230px;
height: 30px;
/*border: 1px solid red;*/
}
.five>.left>P{
color: black;
padding-left: 50px;
font-weight: bolder;
cursor: pointer;
height: 30px;
line-height: 30px;
font-size: 20px;
}
.five>.left>P:hover{
text-decoration: underline;
color:red;
}
.five>.right{
width: 500px;
height: 30px;
/*border: 1px solid black;*/
position: absolute;
top: 0;
left: 830px;
}
.five>.right>ul>li{
float: left;
width: 60px;
height: 30px;
line-height: 30px;
margin-left: 40px;
padding-left: 50px;
color: deepskyblue;
cursor: pointer;
}
.five>.right>ul>li:hover{
text-decoration: underline;
color:red;
}
.six{
width: 1300px;
height: 400px;
/*border: 1px solid black;*/
margin: 5px auto;
position: relative;
}
.six>.left{
width: 230px;
height: 400px;
/*border: 1px solid red;*/
}
.six>.left>.top{
width: 230px;
height: 190px;
/*border: 1px solid red;*/
background: #B70003;
}
.six>.left>.top>ul>li{
width: 50px;
height: 50px;
/*border: 1px solid black;*/
float: left;
line-height: 50px;
margin-left: 20px;
border-radius: 50%;
text-align: center;
background: white;
margin-top: 10px;
cursor: pointer;
color: darkgrey;
}
.six>.left>.top>ul>li:hover{
text-decoration: underline;
color: red;
}
.six>.left>.bottom{
width: 230px;
height: 200px;
/*border: 1px solid red;*/
}
.six>.left>.bottom>img{
width: 230px;
height: 210px;
}
.six>.right{
height: 400px;
width: 1070px;
/*border: 1px solid black;*/
position: absolute;
top: 0;
left: 230px;
}
.six>.right>.top{
width: 1070px;
height: 200px;
/*border: 1px solid red;*/
background: cyan;
}
.six>.right>.top>ul>li>img{
width: 200px;
height: 160px;
/*border: 1px solid black;*/
cursor: pointer;
}
.six>.right>.top>ul>li{
width: 200px;
height: 200px;
/*border: 1px solid black;*/
float: left;
margin-left: 12px;
margin-top: 4px;
}
.six>.right>.top>ul>span{
width: 200px;
height: 10px;
cursor: pointer;
font-size: 15px;
}
.six>.right>.top>ul>.top1{
position: absolute;
top: 163px;
left: 42px;
color: darkgrey;
}
.six>.right>.top>ul>.top2{
position: absolute;
top: 182px;
left: 40px;
color: red;
}
.six>.right>.top>ul>span:hover{
text-decoration: underline;
color: yellowgreen;
}
.six>.right>.top>ul>.top3{
position: absolute;
top: 163px;
left: 250px;
color: darkgrey;
}
.six>.right>.top>ul>.top4{
position: absolute;
top: 182px;
left: 250px;
color: red;
}
.six>.right>.top>ul>.top5{
position: absolute;
top: 163px;
left: 460px;
color: darkgrey;
}
.six>.right>.top>ul>.top6{
position: absolute;
top: 182px;
left: 460px;
color: red;
}
.six>.right>.top>ul>.top7{
position: absolute;
top: 163px;
left: 670px;
color: darkgrey
}
.six>.right>.top>ul>.top8{
position: absolute;
top: 182px;
left: 680px;
color: red;
}
.six>.right>.top>.top99>li{
margin-left: 0;
}
.six>.right>.top>.top99>li>img{
width: 210px;
height: 372px;
position: absolute;
top: 5px;
left: 853px;
}
.six>.right>.top>.top99>.top9{
position: absolute;
left: 930px;
top: 333px;
color:teal;
}
.six>.right>.top>.top99>.top10{
position: absolute;
left: 930px;
top: 352px;
color: deeppink;
text-decoration: line-through;
}
.six>.right>.top>.top99>.top11{
position: absolute;
left: 900px;
top: 375px;
color: red;
font-weight: bolder;
font-size: 20px;
}
.six>.right>.bottom{
width: 1070px;
height: 200px;
/*border: 1px solid red;*/
background: bisque;
}
.six>.right>.bottom>ul>li>img{
width: 200px;
height: 160px;
cursor: pointer;
}
.six>.right>.bottom>ul>li{
width: 200px;
height: 200px;
/*border: 1px solid black;*/
float: left;
margin-left: 12px;
margin-top: 2px;
font-size: 10px;
}
.six>.right>.bottom>ul>span:hover{
text-decoration: underline;
color: cyan;
}
.six>.right>.bottom>ul>.top1{
position: absolute;
top: 366px;
left: 42px;
color: darkgrey;
font-size: 14px;
cursor: pointer;
}
.six>.right>.bottom>ul>.top2{
position: absolute;
top: 383px;
left: 42px;
color: red;
font-size: 14px;
cursor: pointer;
}
.six>.right>.bottom>ul>.top3{
position: absolute;
top: 366px;
left: 270px;
color: darkgrey;
font-size: 14px;
cursor: pointer;
}
.six>.right>.bottom>ul>.top4{
position: absolute;
top: 383px;
left: 270px;
color: red;
font-size: 14px;
cursor: pointer;
}
.six>.right>.bottom>ul>.top5{
position: absolute;
top: 366px;
left: 475px;
color: darkgrey;
font-size: 14px;
cursor: pointer;
}
.six>.right>.bottom>ul>.top6{
position: absolute;
top: 383px;
left: 475px;
color: red;
font-size: 14px;
cursor: pointer;
}
.six>.right>.bottom>ul>.top7{
position: absolute;
top: 366px;
left: 675px;
color: darkgrey;
font-size: 14px;
cursor: pointer;
}
.six>.right>.bottom>ul>.top8{
position: absolute;
top: 383px;
left: 675px;
color: red;
font-size: 14px;
cursor: pointer;
}
.seven{
width: 1300px;
height: 30px;
margin: 5px auto;
/*border: 1px solid black;*/
position: relative;
}
.seven>.left{
height: 30px;
width: 230px;
/*border: 1px solid red;*/
}
.seven>.left>p{
height: 30px;
line-height: 30px;
/*text-align: center;*/
padding-left: 40px;
font-weight: bolder;
font-size: 20px;
cursor: pointer;
}
.seven>.left>p:hover{
text-decoration: underline;
color: red;
}
.seven>.right>ul>li{
width:80px;
height: 30px;
/*border: 1px solid red;*/
float: left;
margin-left: 40px;
color: plum;
line-height: 30px;
cursor: pointer;
}
.seven>.right>ul{
position: absolute;
top: 0;
left: 900px;
}
.seven>.right>ul>li:hover{
text-decoration: underline;
color: red;
}
.eight{
width: 1300px;
height: 400px;
/*border: 1px solid black;*/
margin: 5px auto;
position: relative;
}
.eight>.left{
width: 230px;
height: 400px;
/*border: 1px solid red;*/
}
.eight>.left>.top{
width: 230px;
height: 190px;
/*border: 1px solid red;*/
background: #030043;
}
.eight>.left>.top>ul>li{
width: 50px;
height: 50px;
/*border: 1px solid black;*/
float: left;
line-height: 50px;
margin-left: 20px;
border-radius: 50%;
text-align: center;
background: white;
margin-top: 10px;
cursor: pointer;
color: darkgrey;
}
.eight>.left>.top>ul>li:hover{
text-decoration: underline;
color: red;
}
.eight>.left>.bottom>img{
width: 230px;
height: 210px;
}
.eight>.right{
height: 400px;
width: 1070px;
/*border: 1px solid red;*/
position: absolute;
top: 0;
left: 230px;
}
.eight>.right>.top{
width: 1070px;
height: 200px;
/*border: 1px solid red;*/
background: cyan;
}
.eight>.right>.top>ul>li>img{
width: 200px;
height: 160px;
/*border: 1px solid black;*/
cursor: pointer;
}
.eight>.right>.top>ul>li{
width: 200px;
height: 200px;
/*border: 1px solid black;*/
float: left;
margin-left: 12px;
margin-top: 4px;
}
.eight>.right>.top>ul>span{
width: 200px;
height: 10px;
cursor: pointer;
font-size: 15px;
}
.eight>.right>.top>ul>.top1{
position: absolute;
top: 163px;
left: 42px;
color: darkgrey;
}
.eight>.right>.top>ul>.top2{
position: absolute;
top: 182px;
left: 40px;
color: red;
}
.eight>.right>.top>ul>span:hover{
text-decoration: underline;
color: yellowgreen;
}
.eight>.right>.top>ul>.top3{
position: absolute;
top: 163px;
left: 250px;
color: darkgrey;
}
.eight>.right>.top>ul>.top4{
position: absolute;
top: 182px;
left: 250px;
color: red;
}
.eight>.right>.top>ul>.top5{
position: absolute;
top: 163px;
left: 460px;
color: darkgrey;
}
.eight>.right>.top>ul>.top6{
position: absolute;
top: 182px;
left: 460px;
color: red;
}
.eight>.right>.top>ul>.top7{
position: absolute;
top: 163px;
left: 670px;
color: darkgrey
}
.eight>.right>.top>ul>.top8{
position: absolute;
top: 182px;
left: 680px;
color: red;
}
.eight>.right>.top>ul>li>img{
width: 200px;
height: 160px;
/*border: 1px solid black;*/
cursor: pointer;
}
.eight>.right>.top>.top99>li{
margin-left: 0;
}
.eight>.right>.top>.top99>li>img{
width: 210px;
height: 372px;
position: absolute;
top: 5px;
left: 853px;
}
.eight>.right>.top>.top99>.top9{
position: absolute;
left: 930px;
top: 333px;
color:teal;
}
.eight>.right>.top>.top99>.top10{
position: absolute;
left: 930px;
top: 352px;
color: deeppink;
text-decoration: line-through;
}
.eight>.right>.top>.top99>.top11{
position: absolute;
left: 900px;
top: 375px;
color: red;
font-weight: bolder;
font-size: 20px;
}
.eight>.right{
height: 400px;
width: 1070px;
/*border: 1px solid black;*/
position: absolute;
top: 0;
left: 230px;
}
.eight>.right>.top{
width: 1070px;
height: 200px;
/*border: 1px solid red;*/
background: cyan;
}
.eight>.right>.top>ul>li>img{
width: 200px;
height: 160px;
/*border: 1px solid black;*/
cursor: pointer;
}
.eight>.right>.top>ul>li{
width: 200px;
height: 200px;
/*border: 1px solid black;*/
float: left;
margin-left: 12px;
margin-top: 4px;
}
.eight>.right>.top>ul>span{
width: 200px;
height: 10px;
cursor: pointer;
font-size: 15px;
}
.eight>.right>.top>ul>.top1{
position: absolute;
top: 163px;
left: 42px;
color: darkgrey;
}
.eight>.right>.top>ul>.top2{
position: absolute;
top: 182px;
left: 40px;
color: red;
}
.eight>.right>.top>ul>span:hover{
text-decoration: underline;
color: yellowgreen;
}
.eight>.right>.top>ul>.top3{
position: absolute;
top: 163px;
left: 250px;
color: darkgrey;
}
.eight>.right>.top>ul>.top4{
position: absolute;
top: 182px;
left: 250px;
color: red;
}
.eight>.right>.top>ul>.top5{
position: absolute;
top: 163px;
left: 460px;
color: darkgrey;
}
.eight>.right>.top>ul>.top6{
position: absolute;
top: 182px;
left: 460px;
color: red;
}
.eight>.right>.top>ul>.top7{
position: absolute;
top: 163px;
left: 670px;
color: darkgrey
}
.eight>.right>.top>ul>.top8{
position: absolute;
top: 182px;
left: 680px;
color: red;
}
.eight>.right>.top>.top99>li{
margin-left: 0;
}
.eight>.right>.top>.top99>li>img{
width: 210px;
height: 372px;
position: absolute;
top: 5px;
left: 853px;
}
.eight>.right>.top>.top99>.top9{
position: absolute;
left: 930px;
top: 333px;
color:teal;
}
.eight>.right>.top>.top99>.top10{
position: absolute;
left: 930px;
top: 352px;
color: deeppink;
text-decoration: line-through;
}
.eight>.right>.top>.top99>.top11{
position: absolute;
left: 900px;
top: 375px;
color: red;
font-weight: bolder;
font-size: 20px;
}
.eight>.right>.bottom{
width: 1070px;
height: 200px;
/*border: 1px solid red;*/
background: bisque;
}
.eight>.right>.bottom>ul>li>img{
width: 200px;
height: 160px;
cursor: pointer;
}
.eight>.right>.bottom>ul>li{
width: 200px;
height: 200px;
/*border: 1px solid black;*/
float: left;
margin-left: 12px;
margin-top: 2px;
font-size: 10px;
}
.eight>.right>.bottom>ul>span:hover{
text-decoration: underline;
color: cyan;
}
.eight>.right>.bottom>ul>.top1{
position: absolute;
top: 366px;
left: 42px;
color: darkgrey;
font-size: 14px;
cursor: pointer;
}
.eight>.right>.bottom>ul>.top2{
position: absolute;
top: 383px;
left: 42px;
color: red;
font-size: 14px;
cursor: pointer;
}
.eight>.right>.bottom>ul>.top3{
position: absolute;
top: 366px;
left: 270px;
color: darkgrey;
font-size: 14px;
cursor: pointer;
}
.eight>.right>.bottom>ul>.top4{
position: absolute;
top: 383px;
left: 270px;
color: red;
font-size: 14px;
cursor: pointer;
}
.eight>.right>.bottom>ul>.top5{
position: absolute;
top: 366px;
left: 475px;
color: darkgrey;
font-size: 14px;
cursor: pointer;
}
.eight>.right>.bottom>ul>.top6{
position: absolute;
top: 383px;
left: 475px;
color: red;
font-size: 14px;
cursor: pointer;
}
.eight>.right>.bottom>ul>.top7{
position: absolute;
top: 366px;
left: 675px;
color: darkgrey;
font-size: 14px;
cursor: pointer;
}
.eight>.right>.bottom>ul>.top8{
position: absolute;
top: 383px;
left: 675px;
color: red;
font-size: 14px;
cursor: pointer;
}
.nine{
width: 1300px;
height: 40px;
/*border: 1px solid red;*/
margin: 5px auto;
position: relative;
}
.nine>p{
position: absolute;
top: 0;
left: 500px;
font-size: 25px;
font-weight: bolder;
height: 40px;
line-height: 40px;
cursor: pointer;
color: darkslategray;
text-decoration: underline;
}
.nine>p:hover{
text-decoration: underline;
color: red;
}
.ten{
width: 1300px;
height: 750px;
/*border: 1px solid black;*/
margin: 5px auto;
position: relative;
}
.ten>.top{
width: 1300px;
height: 250px;
/*border: 1px solid red;*/
}
.ten>.top>ul>li>img{
width: 646px;
height: 250px;
float: left;
margin-left: 3px;
cursor: pointer;
}
.ten>.middle{
width: 1300px;
height: 500px;
/*border: 1px solid red;*/
}
.ten>.middle>.middle1{
width: 1300px;
height: 250px;
/*border: 1px solid red ;*/
background: cyan;
}
.ten>.middle>.middle1>ul>li>img{
width: 250px;
height: 200px;
margin-top: 10px;
margin-left: 10px;
}
.ten>.middle>.middle1>ul>li{
float: left;
width: 250px;
height: 200px;
margin-left: 60px;
cursor: pointer;
/*border: 1px solid red;*/
}
.ten>.middle>.middle1>ul>li:hover{
text-decoration: underline;
color: red;
}
.ten>.middle>.middle1>ul>li>.middle9{
color: red;
}
.ten>.middle>.middle1>ul>li>.middle8{
color: red;
}
.ten>.middle>.middle1>ul>.middle66{
width: 220px;
height: 30px;
/*border: 1px solid purple;*/
position: absolute;
top: 475px;
left: 30px;
}
.ten>.middle>.middle1>ul>.middle67{
width: 220px;
height: 30px;
/*border: 1px solid purple;*/
position: absolute;
top: 475px;
left: 350px;
}
.ten>.middle>.middle1>ul>.middle68{
width: 220px;
height: 30px;
/*border: 1px solid purple;*/
position: absolute;
top: 475px;
left: 660px;
}
.ten>.middle>.middle1>ul>.middle69{
width: 220px;
height: 30px;
/*border: 1px solid purple;*/
position: absolute;
top: 475px;
left: 970px;
}
.ten>.middle>.middle2{
width: 1300px;
height: 250px;
/*border: 1px solid red ;*/
background: orange;
}
.ten>.middle>.middle2>ul>li>img{
width: 250px;
height: 200px;
margin-top: 10px;
margin-left: 10px;
}
.ten>.middle>.middle2>ul>li{
float: left;
width: 250px;
height: 200px;
margin-left: 60px;
cursor: pointer;
/*border: 1px solid red;*/
}
.ten>.middle>.middle2>ul>li:hover{
text-decoration: underline;
color: red;
}
.ten>.middle>.middle2>ul>li>.middle9{
color: red;
}
.ten>.middle>.middle2>ul>li>.middle8{
color: red;
}
.ten>.middle>.middle2>ul>.middle66{
width: 220px;
height: 30px;
/*border: 1px solid purple;*/
position: absolute;
top: 730px;
left: 30px;
}
.ten>.middle>.middle2>ul>.middle67{
width: 220px;
height: 30px;
/*border: 1px solid purple;*/
position: absolute;
top: 730px;
left: 350px;
}
.ten>.middle>.middle2>ul>.middle68{
width: 220px;
height: 30px;
/*border: 1px solid purple;*/
position: absolute;
top: 730px;
left: 660px;
}
.ten>.middle>.middle2>ul>.middle69{
width: 220px;
height: 30px;
/*border: 1px solid purple;*/
position: absolute;
top: 730px;
left: 970px;
}
.eleven{
width: 1300px;
height: 30px;
/*border: 1px solid black;*/
margin: 5px auto;
position: relative;
}
.eleven>.left{
width: 300px;
height: 30px;
/*border: 1px solid red;*/
}
.eleven>.left>p{
height: 30px;
line-height: 30px;
padding-left: 80px;
font-size: 20px;
color: red;
cursor: pointer;
}
.eleven>.left>p:hover{
text-decoration: underline;
color: yellowgreen;
}
.eleven>.right{
width: 600px;
height: 30px;
/*border: 1px solid red;*/
position: absolute;
top: 0;
left: 700px;
}
.eleven>.right>ul>li{
width: 80px;
height: 30px;
/*border: 1px solid red;*/
float: left;
line-height: 30px;
color: darkgrey;
cursor: pointer;
}
.eleven>.right>ul>li:hover{
text-decoration: underline;
color: red;
}
.twelve{
width: 1300px;
height: 600px;
/*border: 1px solid black;*/
margin: 5px auto;
position: relative;
}
.twelve>.left{
width: 600px;
height:450px ;
/*border: 1px solid black;*/
}
.twelve>.left>img{
height: 450px;
width: 600px;
}
.twelve>.right{
width: 700px;
height: 450px;
/*border: 1px solid red;*/
position: absolute;
top: 0;
left: 600px;
}
.twelve>.right>.top{
width: 700px;
height:225px;
background: cyan;
/*border: 1px solid palegoldenrod;*/
}
.twelve>.right>.top>ul>li>img{
width: 200px;
height: 180px;
margin-top: 4px;
margin-left: 15px;
float: left;
}
.twelve>.right>.top>ul>li{
font-size: 15px;
margin-left: 17px;
cursor: pointer;
}
.twelve>.right>.top>ul>li:hover{
text-decoration: underline;
color: palegreen;
}
.twelve>.right>.top>ul>.top1{
position: absolute;
top: 190px;
left: 30px;
}
.twelve>.right>.top>ul>.top2{
position: absolute;
top: 208px;
left: 30px;
}
.twelve>.right>.top>ul>.top2>.top3{
color: red;
}
.twelve>.right>.top>ul>.top2>.top4{
color: red;
}
.twelve>.right>.top>ul>.top66{
position: absolute;
top: 190px;
left: 280px;
}
.twelve>.right>.top>ul>.top67{
position: absolute;
top: 208px;
left: 250px;
}
.twelve>.right>.top>ul>.top77{
position: absolute;
top: 190px;
left: 500px;
}
.twelve>.right>.top>ul>.top78{
position: absolute;
top: 208px;
left: 470px;
}
.twelve>.right>.top>ul>.top66>.top3{
color: red;
}
.twelve>.right>.top>ul>.top67>.top4{
color: red;
}
.twelve>.right>.top>ul>.top78>.top3{
color: red;
}
.twelve>.right>.top>ul>.top78>.top4{
color: red;
}
.twelve>.right>.bottom{
width: 700px;
height: 225px;
/*border: 1px solid yellow;*/
background: orange;
}
.twelve>.right>.bottom>ul>li>img{
width: 200px;
height: 180px;
margin-top: 4px;
margin-left: 15px;
float: left;
}
.twelve>.right>.bottom>ul>li{
font-size: 15px;
margin-left: 17px;
cursor: pointer;
}
.twelve>.right>.bottom>ul>li:hover{
text-decoration: underline;
color: palegreen;
}
.twelve>.right>.bottom>ul>.top1{
position: absolute;
top: 412px;
left: 60px;
}
.twelve>.right>.bottom>ul>.top2{
position: absolute;
top: 432px;
left: 30px;
}
.twelve>.right>.bottom>ul>.top2>.top3{
color: red;
}
.twelve>.right>.bottom>ul>.top2>.top4{
color: red;
}
.twelve>.right>.bottom>ul>.top66{
position: absolute;
top: 412px;
left: 280px;
}
.twelve>.right>.bottom>ul>.top67{
position: absolute;
top: 432px;
left: 250px;
}
.twelve>.right>.bottom>ul>.top77{
position: absolute;
top: 412px;
left: 490px;
}
.twelve>.right>.bottom>ul>.top78{
position: absolute;
top: 432px;
left: 480px;
}
.twelve>.right>.bottom>ul>.top66>.top3{
color: red;
}
.twelve>.right>.bottom>ul>.top67>.top4{
color: red;
}
.twelve>.right>.bottom>ul>.top78>.top3{
color: red;
}
.twelve>.right>.bottom>ul>.top78>.top4{
color: red;
}
.twelve>.middle33{
position: absolute;
top: 452px;
left: 0;
width: 1300px;
height: 150px;
/*border: 1px solid yellow;*/
}
.twelve>.middle33>ul>li>img{
float: left;
cursor: pointer;
}
.twelve>.middle33>ul>li{
margin-left: 5px;
}
.thirteen{
width: 1300px;
height: 30px;
/*border: 1px solid red;*/
margin: 5px auto;
position: relative;
}
.thirteen>.left{
width: 130px;
height: 30px;
/*border: 1px solid red;*/
}
.thirteen>.left>P{
height: 30px;
line-height: 30px;
color: grey;
font-weight: bolder;
margin-left: 40px;
cursor: pointer;
}
.thirteen>.middle{
width: 150px;
height: 30px;
/*border: 1px solid red ;*/
position: absolute;
top: 0;
left: 180px;
border-radius: 20px;
background: darkgrey;
}
.thirteen>.middle>P{
height: 30px;
text-align: center;
line-height: 30px;
color: red;
text-decoration: underline;
cursor: pointer;
}
.thirteen>.right{
width: 140px;
height: 30px;
/*border: 1px solid red;*/
position: absolute;
top: 0;
left: 1100px;
}
.thirteen>.right>P{
height: 30px;
line-height: 30px;
color: darkgrey;
cursor: pointer;
}
.thirteen>.right>P:hover{
text-decoration: underline;
color: red;
}
.fourteen{
width: 1300px;
height: 350px;
/*border: 1px solid red;*/
margin: 5px auto;
background: aquamarine;
position: relative;
}
.fourteen>ul>li>img{
width: 250px;
height: 280px;
margin-top: 30px;
float: left;
margin-left: 7px;
cursor: pointer;
}
.fourteen>ul>li:hover{
color: red;
text-decoration: underline;
}
.fourteen>ul>li>.red11{
color: red;
}
.fourteen>ul>.left22{
position: absolute;
top: 320px;
left: 50px;
color: gray;
font-weight: bolder;
cursor: pointer;
}
.fourteen>ul>.left11{
position: absolute;
top: 5px;
left: 50px;
color: gray;
font-weight: bolder;
cursor: pointer;
font-size: 13px;
}
.fourteen>ul>.left33{
position: absolute;
top: 5px;
left: 310px;
font-weight: bolder;
cursor: pointer;
font-size: 13px;
color: grey;
}
.fourteen>ul>.left44{
position: absolute;
top: 5px;
left: 560px;
font-weight: bolder;
cursor: pointer;
font-size: 13px;
color: grey;
}
.fourteen>ul>.left44{
position: absolute;
top: 5px;
left: 560px;
font-weight: bolder;
cursor: pointer;
font-size: 13px;
color: grey;
}
.fourteen>ul>.left55{
position: absolute;
top: 5px;
left: 820px;
font-weight: bolder;
cursor: pointer;
font-size: 13px;
color: grey;
}
.fourteen>ul>.left66{
position: absolute;
top: 5px;
left: 1070px;
font-weight: bolder;
cursor: pointer;
font-size: 13px;
color: grey;
}
.fourteen>ul>.lefta1{
position: absolute;
top: 320px;
left: 330px;
color: gray;
font-weight: bolder;
cursor: pointer;
}
.fourteen>ul>.lefta2{
position: absolute;
top: 320px;
left: 590px;
color: gray;
font-weight: bolder;
cursor: pointer;
}
.fourteen>ul>.lefta3{
position: absolute;
top: 320px;
left: 850px;
color: gray;
font-weight: bolder;
cursor: pointer;
}
.fourteen>ul>.lefta4{
position: absolute;
top: 320px;
right: 80px;
color: gray;
font-weight: bolder;
cursor: pointer;
}
.fifteen{
width: 1300px;
height:650px;
/*border: 1px solid red;*/
margin: 5px auto;
position: relative;
}
.fifteen>.left{
width: 900px;
height: 650px;
/*border: 1px solid red;*/
}
.fifteen>.left>ul>li>img{
width: 200px;
height: 200px;
float: left;
text-align: center;
margin-top: 10px;
margin-left: 20px;
}
.fifteen>.left>ul>li{
width: 200px;
height: 200px;
/*border: 1px solid red;*/
float: left;
margin-left: 10px;
}
.fifteen>.right{
width:400px;
height: 650px;
/*border: 1px solid black;*/
position: absolute;
top: 0;
left: 900px;
}
.fifteen>.right>.top{
width:400px;
height: 50px;
/*border: 1ps solid deeppink;*/
background: deeppink;
}
.fifteen>.right>.top>p{
color: white;
height: 50px;
line-height: 50px;
font-size: 30px;
text-align: center;
cursor: pointer;
}
.fifteen>.right>.top>p:hover{
text-decoration: underline;
color: cyan;
}
.fifteen>.right>.middle{
width: 400px;
height: 600px;
border: 1px solid palegreen;
}
.fifteen>.right>.middle>.left{
width: 180px;
height: 600px;
/*border: 1px solid red;*/
background: darkcyan;
}
.fifteen>.right>.middle>.left>ul>li>img{
width: 180px;
height: 110px;
margin-top: 5px;
}
.fifteen>.right>.middle>.right{
width: 220px;
height: 600px;
/*border: 1px solid red;*/
position: absolute;
top: 50px;
left: 180px;
background: orange;
}
.fifteen>.right>.middle>.right>ul>li>.right11{
color: red;
}
.fifteen>.right>.middle>.right>.right33{
margin-left: 40px;
margin-top: 20px;
color: grey;
font-weight: bolder;
font-size: 20px;
cursor: pointer;
}
.fifteen>.right>.middle>.right>.right44{
margin-left: 40px;
margin-top: 20px;
color: grey;
font-weight: bolder;
font-size: 20px;
cursor: pointer;
position: absolute;
top: 120px;
}
.fifteen>.right>.middle>.right>.right55{
margin-left: 40px;
margin-top: 20px;
color: grey;
font-weight: bolder;
font-size: 20px;
cursor: pointer;
position: absolute;
top: 240px;
}
.fifteen>.right>.middle>.right>.right66{
margin-left: 40px;
margin-top: 20px;
color: grey;
font-weight: bolder;
font-size: 20px;
cursor: pointer;
position: absolute;
top: 360px;
}
.fifteen>.right>.middle>.right>.right77{
margin-left: 40px;
margin-top: 20px;
color: grey;
font-weight: bolder;
font-size: 20px;
cursor: pointer;
position: absolute;
top: 470px;
}
.sixteen{
width: 1300px;
height: 50px;
/*border: 1px solid red;*/
margin: 5px auto;
position: relative;
}
.sixteen>.left{
width: 100px;
height: 50px;
/*border: 1px solid red;*/
}
.sixteen>.left>p{
color: red;
font-size: 25px;
height: 50px;
line-height: 50px;
text-align: center;
font-weight: bolder;
cursor: pointer;
}
.sixteen>.middle{
width: 350px;
height: 50px;
position: absolute;
top: 0;
left: 300px;
/*border: 1px solid black;*/
}
.sixteen>.middle>p{
color: darkgrey;
font-size: 25px;
height: 50px;
line-height: 50px;
cursor: pointer;
}
.sixteen>.right{
width: 600px;
height: 50px;
position: absolute;
top: 0;
right: 0;
/*border: 1px solid black;*/
}
.sixteen>.right>ul>li{
float: left;
width: 70px;
height: 50px;
color: palevioletred;
cursor: pointer;
line-height: 50px;
font-weight: bolder;
margin-left: 20px;
/*border: 1px solid red;*/
}
.seventeen{
width: 1300px;
height: 600px;
position: relative;
/*border: 1px solid red;*/
margin: 5px auto;
}
.seventeen>.left{
width: 600px;
height: 400px;
/*border: 1px solid red;*/
}
.seventeen>.left>img{
width: 600px;
height: 400px;
cursor: pointer;
}
.seventeen>.right{
width: 700px;
height: 400px;
position: absolute;
top: 0;
left: 600px;
background: darkcyan;
/*border: 1px solid black;*/
}
.seventeen>.right>ul>li>img{
width: 190px;
height: 190px;
float: left;
margin-top: 5px;
margin-left: 35px;
cursor: pointer;
}
.seventeen>.bottom{
width: 1300px;
height: 200px;
/*border: 1px solid black;*/
}
.seventeen>.bottom>.left{
width: 600px;
height: 195px;
background: orange;
/*border: 1px solid black;*/
}
.seventeen>.bottom>.left>.left1{
color: white;
font-size: 40px;
position: absolute;
top: 450px;
left: 150px;
font-weight: bolder;
}
.seventeen>.bottom>.left>.left1>.left3{
color: red;
}
.seventeen>.bottom>.left>.left2{
color: black;
font-size: 40px;
position: absolute;
top: 500px;
left: 100px;
font-style: italic;
font-weight: bolder;
}
.seventeen>.bottom>.left>.left2>.left4{
color: turquoise;
}
.seventeen>.bottom>.right{
width: 700px;
height: 200px;
position: absolute;
top: 400px;
left: 600px;
background: aquamarine;
/*border: 1px solid black;*/
}
.seventeen>.bottom>.right>ul>li{
float: left;
}
.seventeen>.bottom>.right>ul>li>img{
width: 190px;
height: 190px;
float: left;
margin-top: 5px;
margin-left: 35px;
cursor: pointer;
}
.eighteen{
width: 1300px;
height: 600px;
/*border: 1px solid red;*/
margin: 5px auto;
position: relative;
}
.eighteen>.left{
width: 230px;
height: 600px;
/*border: 1px solid black;*/
}
.eighteen>.left>.top{
width: 230px;
height: 50px;
background: red;
/*border: 1px solid red;*/
}
.eighteen>.left>.top>p{
color: white;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: bolder;
cursor: pointer;
}
.eighteen>.left>.top>p:hover{
text-decoration: underline;
color: orange;
}
.eighteen>.left>.middle{
width: 230px;
height: 250px;
/*border: 1px solid red;*/
margin-top: 20px;
}
.eighteen>.left>.middle>img{
margin-left: 15px;
width: 200px;
height: 200px;
margin-top: 20px;
}.eighteen>.left>.bottom{
width: 230px;
height: 275px;
background: blueviolet;
}
.eighteen>.left>.bottom>ul>li{
color: darkgrey;
height: 40px;
width: 220px;
border-bottom:2px crimson dashed;
/*border: 1px solid black;*/
padding-top: 15px;
line-height: 20px;
padding-left: 10px;
margin-right: 20px;
cursor: pointer;
font-size: 15px;
font-weight: bolder;
}
.eighteen>.left>.bottom>ul>li:hover{
text-decoration: underline;
color: yellow;
}
.eighteen>.left>.bottom>ul>li>span{
color: red;
}
.eighteen>.left>.bottom>ul>.bottom11{
border-bottom: none;
}
.eighteen>.middle{
width: 300px;
height:600px;
/*border: 1px solid black;*/
position: absolute;
top: 0;
left: 230px;
background: #700E22;
}
.eighteen>.middle>.top{
width: 300px;
height:50px;
background: grey;
/*border: 1px solid black;*/
}
.eighteen>.middle>.top>p{
color: white;
font-size: 20px;
text-align: center;
padding-top: 10px;
font-weight: bolder;
cursor: pointer;
}
.eighteen>.middle>.middle11{
width: 300px;
height: 250px;
/*border: 1px solid red;*/
}
.eighteen>.middle>.middle11>ul>li{
width: 280px;
border-bottom: 2px cyan dashed;
height: 40px;
/*border: 1px solid black;*/
margin-top: 10px;
padding-left: 20px;
font-size: 15px;
font-weight: bolder;
color:grey;
cursor: pointer;
}
.eighteen>.middle>.middle11>ul>li:hover{
text-decoration: underline;
color: deeppink;
}
.eighteen>.middle>.middle11>ul>li>span{
color: red;
font-size: 15px;
}
.eighteen>.middle>.middle11>ul>.middle66{
border-bottom: none;
}
.eighteen>.middle>.bottom{
width: 300px;
height: 290px;
position: absolute;
top: 320px;
left: 0;
/*border: 1px solid black;*/
}
.eighteen>.middle>.bottom>.top{
width: 300px;
height: 55px;
position: absolute;
top: 3px;
cursor: pointer;
left: 0;
background: olivedrab;
/*border: 1px solid black;*/
border-bottom: 2px dashed deeppink;
}
.eighteen>.middle>.bottom>.top>p{
color: white;
font-size: 20px;
font-weight: bolder;
text-align: center;
height: 50px;
line-height: 50px;
}
.eighteen>.middle>.bottom>.top>p:hover{
text-decoration: underline;
color: deeppink;
}
.eighteen>.middle>.bottom>.middle99{
width: 300px;
height: 278px;
/*border: 1px solid black;*/
}
.eighteen>.middle>.bottom>.middle99>ul>li{
width: 280px;
height: 55px;
margin-top: 10px;
line-height: 55px;
font-size: 15px;
margin-top: -0;
color: grey;
cursor: pointer;
padding-left: 20px;
margin-bottom: 15px;
border-bottom: 2px dashed deeppink;
font-weight: bolder;
/*border: 1px solid black;*/
}
.eighteen>.middle>.bottom>.middle99>ul>li:hover{
text-decoration: underline;
color: springgreen;
}
.eighteen>.middle>.bottom>.middle99>ul{
position: absolute;
top: 50px;
left: 0;
}
.eighteen>.middle>.bottom>.middle99>ul>li>span{
color: red;
}
.eighteen>.middle>.bottom>.middle99>ul>.middle66{
border-bottom: none;
position: absolute;
top: 175px;
left: 0;
}
.eighteen>.middle>.bottom>.middle99>ul>.middle55{
position: absolute;
top: 125px;
left: 0;
}
.eighteen>.middle>.bottom>.middle99>ul>.middle44{
position: absolute;
top: 70px;
left: 0;
}
.eighteen>.middle>.bottom>.middle99>ul>.middle33{
position: absolute;
top: 10px;
left: 0;
}
.eighteen>.right{
width: 768px;
height: 600px;
position: absolute;
top: 0;
left: 532px;
/*border: 1px solid red;*/
}
.eighteen>.right>.left{
width: 768px;
height: 300px;
background: orange;
/*border: 1px solid black;*/
}
.eighteen>.right>.left>ul>li>img{
width: 230px;
height: 230px;
float: left;
margin-left: 20px;
margin-top: 10px;
cursor: pointer;
}
.eighteen>.right>.left>ul>li>span{
color: red;
}
.eighteen>.right>.left>ul>li:hover{
text-decoration: underline;
color: yellow;
}
.eighteen>.right>.left>ul>.left33{
position: absolute;
top: 250px;
left: 25px;
cursor: pointer;
font-weight: bolder;
color: gray;
}
.eighteen>.right>.left>ul>.left34{
position: absolute;
top: 275px;
left: 80px;
font-weight: bolder;
color: orchid;
cursor: pointer;
text-decoration: line-through;
}
.eighteen>.right>.left>ul>.left44{
position: absolute;
top: 250px;
left: 280px;
cursor: pointer;
font-weight: bolder;
color: gray;
}
.eighteen>.right>.left>ul>.left35{
position: absolute;
top: 275px;
left: 320px;
font-weight: bolder;
color: orchid;
cursor: pointer;
text-decoration: line-through;
}
.eighteen>.right>.left>ul>.left55{
position: absolute;
top: 250px;
left: 550px;
cursor: pointer;
font-weight: bolder;
color: gray;
}
.eighteen>.right>.left>ul>.left36{
position: absolute;
top: 275px;
left: 570px;
font-weight: bolder;
color: orchid;
cursor: pointer;
text-decoration: line-through;
}
.eighteen>.right>.bottom{
width: 768px;
height: 300px;
background: cyan;
/*border: 1px solid black;*/
}
.eighteen>.right>.bottom>ul>li>img{
width: 230px;
height: 230px;
float: left;
margin-left: 20px;
margin-top: 10px;
cursor: pointer;
}
.eighteen>.right>.bottom>ul>li>span{
color: red;
}
.eighteen>.right>.bottom>ul>li:hover{
text-decoration: underline;
color: yellow;
}
.eighteen>.right>.bottom>ul>.left33{
position: absolute;
top: 550px;
left: 50px;
cursor: pointer;
font-weight: bolder;
color: gray;
}
.eighteen>.right>.bottom>ul>.left34{
position: absolute;
top: 575px;
left: 80px;
font-weight: bolder;
color: orchid;
cursor: pointer;
text-decoration: line-through;
}
.eighteen>.right>.bottom>ul>.left44{
position: absolute;
top: 550px;
left: 280px;
cursor: pointer;
font-weight: bolder;
color: gray;
}
.eighteen>.right>.bottom>ul>.left35{
position: absolute;
top: 575px;
left: 320px;
font-weight: bolder;
color: orchid;
cursor: pointer;
text-decoration: line-through;
}
.eighteen>.right>.bottom>ul>.left55{
position: absolute;
top: 550px;
left: 540px;
cursor: pointer;
/*font-weight: bolder;*/
color: gray;
}
.eighteen>.right>.bottom>ul>.left36{
position: absolute;
top: 575px;
left: 570px;
font-weight: bolder;
color: orchid;
cursor: pointer;
text-decoration: line-through;
}
.nineteen{
width: 1300px;
height: 66px;
/*border: 3px solid deeppink;*/
margin: 5px auto;
}
.nineteen>img{
width: 1300px;
height: 65px;
cursor: pointer;
}
.twenty{
width: 1300px;
height: 200px;
/*border: 1px solid red;*/
margin: 5px auto;
position: relative;
}
.twenty>.left{
width: 1000px;
height: 200px;
background: black;
/*border: 1px solid red;*/
}
.twenty>.left>ul>li{
width: 150px;
height: 50px;
float: left;
color: darkgrey;
font-weight: bolder;
background: white;
margin-top: 10px;
margin-left: 40px;
border-radius: 20px;
line-height: 50px;
cursor: pointer;
text-align: center;
/*border: 1px solid white;*/
}
.twenty>.left>ul>li:hover{
text-decoration: underline;
color: red;
}
.twenty>.right{
width: 300px;
height: 200px;
/*border: 1px solid red;*/
position: absolute;
top: 0;
left: 1000px;
background: saddlebrown;
}
.twenty>.right>p{
color: black;
font-size: 30px;
font-weight: bolder;
margin-top: 70px;
margin-left: 10px;
}
.twenty>.right>p>span{
color: red;
}
.twenty>.right>p:hover{
text-decoration: underline;
color: darkcyan;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
