这是我之前在课上老师留大作业做的静态网页。
也是我第二次独立做的前端静态网页。
做的有不足请多多包含，我还在努力中。
这个网页是由HTML跟CSS组成的
下面先展示一下效果图吧
接下来就展示代码吧
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
</head>
<body>
<!-- -------------------------------------头部---------------------------------------------->
<!-- tb:头部 -->
<header id="tb">
<!--------------------------------头部第一个导航---------------------------------------->
<!-- tb-dy-dh:头部第一个导航 -->
<div id="tb-dy-dh">
<!-- tb-dy-dh-list：头部第一个导航列表 -->
<ul id="tb-dy-dh-list">
<li><a href="#">官方微博</a>
<!-- gfwb-xl:官方微博的下拉菜单 -->
<ul id="gfwb-xl">
<!-- gfwb-xl-dy:官方微博的下拉菜单第一行 -->
<li id="gfwb-xl-dy">官方微博</li>
<!-- gfwb-xl-de:官方微博的下拉菜单第二行 -->
<li id="gfwb-xl-de"><a href="#">扫一扫</a></li>
<!-- gfwb-xl-ds:官方微博的下拉菜单第三行 -->
<li id="gfwb-xl-ds"><a href="#">了解最新食品信息</a></li>
</ul>
</li>
<li><a href="#">关注微信</a>
<!-- gzwx-xl:关注微信的下拉菜单 -->
<ul id="gzwx-xl">
<!-- gzwx-xl-dy:关注微信的下拉菜单第一行 -->
<li id="gzwx-xl-dy">关注微信</li>
<!-- gzwx-xl-de:关注微信的下拉菜单第二行 -->
<li id="gzwx-xl-de"><a href="#">扫一扫</a></li>
<!-- gzwx-xl-ds:关注微信的下拉菜单第三行 -->
<li id="gzwx-xl-ds"><a href="#">了解最新食品信息</a></li>
</ul>
</li>
<li><a href="#">正品保证</a>
<!-- zpbz-xl:正品保证的下拉菜单 -->
<ul id="zpbz-xl">
<!-- zpbz-xl-dy:正品保证的下拉菜单第一行 -->
<li id="zpbz-xl-dy">官方微博</li>
<!-- zpbz-xl-de:正品保证的下拉菜单第二行 -->
<li id="zpbz-xl-de"><a href="#">扫一扫</a></li>
<!-- zpbz-xl-ds:正品保证的下拉菜单第三行 -->
<li id="zpbz-xl-ds"><a href="#">了解最新食品信息</a></li>
</ul>
</li>
</ul>
</div>
<!------------------------------------头部搜索框---------------------------------------->
<!-- tb-ssk:头部搜索框 -->
<div id="tb-ssk">
<input type="text" placeholder=" 搜索偶像、商品">
<a href="#"></a>
</div>
<!-- hx:灰线 -->
<div class="hx"></div>
<!--------------------------------头部第二个导航---------------------------------------->
<!-- tb-de-dh:头部第二个导航 -->
<div id="tb-de-dh">
<!-- yrfl:艺人分类 -->
<div id="yrfl">
艺人分类
</div>
<!-- tb-de-dh-list:头部第二个导航列表 -->
<ul id="tb-de-dh-list">
<li><a href="#">首页
<!-- xhx:下划线 -->
<div class="xhx"></div>
</a></li>
<li><a href="#">专辑
<!-- xhx:下划线 -->
<div class="xhx"></div>
</a></li>
<li><a href="#">明星周边
<!-- xhx:下划线 -->
<div class="xhx"></div>
</a></li>
<li><a href="#">明星同款
<!-- xhx:下划线 -->
<div class="xhx"></div>
</a></li>
<li><a href="#">个护美妆
<!-- xhx:下划线 -->
<div class="xhx"></div>
</a></li>
<li><a href="#">影漫周边
<!-- xhx:下划线 -->
<div class="xhx"></div>
</a></li>
<li><a href="#">食品
<!-- xhx:下划线 -->
<div class="xhx"></div>
</a></li>
<li><a href="#">服装配饰
<!-- xhx:下划线 -->
<div class="xhx"></div>
</a></li>
</ul>
</div>
<!-----------------------------------头部图片------------------------------------------>
<!-- tb-tp:头部图片 -->
<div id="tb-tp">
<img src="./images/mall-1.jpg" alt="">
</div>
</header>
<!-- -------------------------------------中间--------------------------------------------->
<!-- zj:中间 -->
<section id="zj">
<!-----------------------------------直击现场------------------------------------------>
<!-- zjxc:直击现场 -->
<div id="zjxc">
<!-- zjxc-bt:直击现场标题 -->
<div id="zjxc-bt">
<h2>直击现场</h2>
<p><a href="#"> Watch Scene</a></p>
</div>
<!-- zjxc-nr:直击现场内容 -->
<div id="zjxc-nr">
<!-- zjxc-nrz:直击现场内容左 -->
<div id="zjxc-nrz">
<!-- zjxc-nrz-list:直击现场内容左列表 -->
<ul id="zjxc-nrz-list">
<li>
<img src="./images/zx-1.png" alt="">
<a href="#">官方应援手灯专区</a>
</li>
<li>
<img src="./images/zx-2.gif" alt="">
<a href="#">签名商品专区</a>
</li>
<li>
<img src="./images/zx-3.png" alt="">
<a href="#">官方DVD专区</a>
</li>
<li>
<img src="./images/zx-4.gif" alt="">
<a href="#">电影周边</a>
</li>
</ul>
</div>
<!-- zjxc-nry:直击现场内容右 -->
<div id="zjxc-nry">
<img src="./images/zx-right_ad.jpg" alt="">
</div>
</div>
</div>
<!-----------------------------------TOP榜------------------------------------------>
<!-- topb:TOP榜 -->
<div id="topb">
<!-- topb-bt:TOP榜标题 -->
<div id="topb-bt">
<h2> TOP榜</h2>
</div>
<!-- topb-nr:TOP榜内容 -->
<div id="topb-nr">
<!-- topb-nr-list:TOP榜内容列表 -->
<ul id="topb-nr-list">
<li>
<span>1</span>
<img src="./images/start-1.jpg" alt="">
<!-- xl:销量 -->
<p class="xl">销量：1425</p>
<!-- bt:标题 -->
<p class="bt">星乐团</p>
</li>
<li>
<span>2</span>
<img src="./images/start-2.jpg" alt="">
<p class="xl">销量：885</p>
<p class="bt">Eva</p>
</li>
<li>
<span>3</span>
<img src="./images/start-3.png" alt="">
<p class="xl">销量：261</p>
<p class="bt">Lisa</p>
</li>
<li>
<span>4</span>
<img src="./images/start-4.jpg" alt="">
<p class="xl">销量：143</p>
<p class="bt">哈哈镜</p>
</li>
<li>
<span>5</span>
<img src="./images/start-5.jpg" alt="">
<p class="xl">销量：81</p>
<p class="bt">娇娇</p>
</li>
<li>
<span>6</span>
<img src="./images/start-6.jpg" alt="">
<p class="xl">销量：67</p>
<p class="bt">冷月</p>
</li>
<li>
<span>7</span>
<img src="./images/start-7.png" alt="">
<p class="xl">销量：62</p>
<p class="bt">BigBoy</p>
</li>
<li>
<span>8</span>
<img src="./images/start-8.jpg" alt="">
<p class="xl">销量：48</p>
<p class="bt">TFY少女团</p>
</li>
</ul>
</div>
</div>
<!-----------------------------------新品首发------------------------------------------>
<!-- xpsf:新品首发 -->
<div id="xpsf">
<!-- xpsf-bt:新品首发标题 -->
<div id="xpsf-bt">
<h2>新品首发</h2>
<p><a href="#"> New Starter</a></p>
</div>
<!-- xpsf-nr:新品首发内容 -->
<div id="xpsf-nr">
<!-- xpsf-nr-list:新品首发内容列表 -->
<ul class="xpsf-nr-list">
<li>
<!-- xpsf-nr-t:新品首发内容图 -->
<div class="xpsf-nr-t">
<img src="./images/new-1.jpg" alt="">
</div>
<!-- xpsf-nr-wb:新品首发内容文本 -->
<div class="xpsf-nr-wb">
<!-- xpsf-nr-bt:新品首发内容标题 -->
<p class="xpsf-nr-bt"><a href="#">【全球预定】 iKON 夏日 DVD</a></p>
<!-- xpsf-nr-jq:新品首发内容价钱 -->
<p class="xpsf-nr-jq"><a href="#">￥273</a></p>
<!-- xpsf-nr-dzl:新品首发内容点赞量 -->
<p class="xpsf-nr-dzl">
<span></span>
<a href="#">0</a>
</p>
</div>
</li>
<li>
<div class="xpsf-nr-t">
<img src="./images/new-2.jpg" alt="">
</div>
<div class="xpsf-nr-wb">
<p class="xpsf-nr-bt"><a href="#">【全球预定】 iKON 夏日 DVD</a></p>
<p class="xpsf-nr-jq"><a href="#">￥273</a></p>
<p class="xpsf-nr-dzl">
<span></span>
<a href="#">0</a>
</p>
</div>
</li>
<li>
<div class="xpsf-nr-t">
<img src="./images/new-3.jpg" alt="">
</div>
<div class="xpsf-nr-wb">
<p class="xpsf-nr-bt"><a href="#">【全球预定】 iKON 夏日 DVD</a></p>
<p class="xpsf-nr-jq"><a href="#">￥273</a></p>
<p class="xpsf-nr-dzl">
<span></span>
<a href="#">0</a>
</p>
</div>
</li>
</ul>
<ul class="xpsf-nr-list">
<li>
<div class="xpsf-nr-t">
<img src="./images/new-4.jpg" alt="">
</div>
<div class="xpsf-nr-wb">
<p class="xpsf-nr-bt"><a href="#">【全球预定】 iKON 夏日 DVD</a></p>
<p class="xpsf-nr-jq"><a href="#">￥273</a></p>
<p class="xpsf-nr-dzl">
<span></span>
<a href="#">0</a>
</p>
</div>
</li>
<li>
<div class="xpsf-nr-t">
<img src="./images/new-5.jpg" alt="">
</div>
<div class="xpsf-nr-wb">
<p class="xpsf-nr-bt"><a href="#">【全球预定】 iKON 夏日 DVD</a></p>
<p class="xpsf-nr-jq"><a href="#">￥273</a></p>
<p class="xpsf-nr-dzl">
<span></span>
<a href="#">0</a>
</p>
</div>
</li>
<li>
<div class="xpsf-nr-t">
<img src="./images/new-6.jpg" alt="">
</div>
<div class="xpsf-nr-wb">
<p class="xpsf-nr-bt"><a href="#">【全球预定】 iKON 夏日 DVD</a></p>
<p class="xpsf-nr-jq"><a href="#">￥273</a></p>
<p class="xpsf-nr-dzl">
<span></span>
<a href="#">0</a>
</p>
</div>
</li>
</ul>
</div>
</div>
<!-----------------------------------大家喜欢------------------------------------------>
<!-- djxh:大家喜欢 -->
<div id="djxh">
<!-- djxh-bt:大家喜欢标题 -->
<div id="djxh-bt">
<h2>大家喜欢</h2>
<p><a href="#"> We Like</a></p>
</div>
<!-- djxh-nr:大家喜欢内容 -->
<div id="djxh-nr">
<!-- djxh-nr-list:大家喜欢内容列表 -->
<ul id="djxh-nr-list">
<li>
<!-- djxh-nr-t:大家喜欢内容图 -->
<div class="djxh-nr-t">
<img src="./images/page-1.jpg" alt="">
</div>
<!-- djxh-nr-bt:大家喜欢内容标题 -->
<p class="djxh-nr-bt"><a href="#">【限量秒杀-独家售卖-现货包邮】 官方应援手灯</a></p>
<!-- djxh-nr-xx:大家喜欢内容详细 -->
<div class="djxh-nr-xx">
<!-- djxh-nr-jq:大家喜欢内容价钱 -->
<p class="djxh-nr-jq"><a href="#">￥79.9</a></p>
<span></span>
<!-- djxh-nr-dzs:大家喜欢内容点赞数 -->
<p class="djxh-nr-dzs"><a href="#">172</a></p>
</div>
</li>
<li>
<div class="djxh-nr-t">
<img src="./images/page-2.png" alt="">
</div>
<p class="djxh-nr-bt"><a href="#">【限量秒杀-独家售卖-现货包邮】 官方应援手灯</a></p>
<div class="djxh-nr-xx">
<p class="djxh-nr-jq"><a href="#">￥79.9</a></p>
<span></span>
<p class="djxh-nr-dzs"><a href="#">172</a></p>
</div>
</li>
<li>
<div class="djxh-nr-t">
<img src="./images/page-3.png" alt="">
</div>
<p class="djxh-nr-bt"><a href="#">【限量秒杀-独家售卖-现货包邮】 官方应援手灯</a></p>
<div class="djxh-nr-xx">
<p class="djxh-nr-jq"><a href="#">￥79.9</a></p>
<span></span>
<p class="djxh-nr-dzs"><a href="#">172</a></p>
</div>
</li>
<li>
<div class="djxh-nr-t">
<img src="./images/page-4.jpg" alt="">
</div>
<p class="djxh-nr-bt"><a href="#">【限量秒杀-独家售卖-现货包邮】 官方应援手灯</a></p>
<div class="djxh-nr-xx">
<p class="djxh-nr-jq"><a href="#">￥79.9</a></p>
<span></span>
<p class="djxh-nr-dzs"><a href="#">172</a></p>
</div>
</li>
<li>
<div class="djxh-nr-t">
<img src="./images/page-5.jpg" alt="">
</div>
<p class="djxh-nr-bt"><a href="#">【限量秒杀-独家售卖-现货包邮】 官方应援手灯</a></p>
<div class="djxh-nr-xx">
<p class="djxh-nr-jq"><a href="#">￥79.9</a></p>
<span></span>
<p class="djxh-nr-dzs"><a href="#">172</a></p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- -------------------------------------底部---------------------------------------------->
<!-- db:底部 -->
<footer id="db">
<!-- dbnr:底部内容 -->
<div id="dbnr">
<!-- dbnr-list:底部内容上面列表 -->
<ul id="dbnr-list">
<li><a href="#">关于我们</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">版权声明</a></li>
<li><a href="#">客服中心</a></li>
</ul>
<!-- dbnr-dy:底部内容第一行 -->
<p id="dbnr-dy"><a href="#">Copyright © 2019 - 2020 广播电视节目制作经营 许可证编号(京)字第1891号 | 京网文[2014]2037-287号 |
网络视听许可证0110413号</a></p>
<!-- dbnr-de:底部内容第二行 -->
<p id="dbnr-de"><a href="#">京公网安备11010502014900号 | 京ICP备11024134号-1 | 京ICP证060716号 | 出版物经营许可证
新出发京批字第直160022号 | 增值电信业务经营许可证B2-20140501</a></p>
</div>
</footer>
</body>
</html>CSS部分
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.hx {
width: 100%;
height: 1px;
background-color: #3f3e3e;
}
/* -------------------------------------------头部------------------------------------------- */
/* tb:头部 */
#tb {}
/* ------------------------------头部第一个导航----------------------------- */
/* tb-dy-dh:头部第一个导航 */
#tb #tb-dy-dh {
width: 100%;
height: 30px;
background-color: black;
}
/* tb-dy-dh-list:头部第一个导航列表 */
#tb #tb-dy-dh #tb-dy-dh-list {
width: 450px;
height: 30px;
float: right;
margin-right: 100px;
/* border: 1px red solid; */
}
#tb #tb-dy-dh #tb-dy-dh-list li {
width: 150px;
height: 30px;
line-height: 15px;
text-align: center;
float: left;
padding-top: 7px;
position: relative;
}
#tb #tb-dy-dh #tb-dy-dh-list li a {
text-decoration: none;
color: #ccc;
font-size: 13px;
width: 150px;
height: 15px;
margin-top: -20px;
display: inline-block;
border-left: #4e4c4c 1px solid;
}
#tb #tb-dy-dh #tb-dy-dh-list li:nth-of-type(1) a {
border: none;
}
#tb #tb-dy-dh #tb-dy-dh-list li a:hover {
color: #ff2c72;
}
/* gfwb-xl:官方微博的下拉菜单 */
#tb #tb-dy-dh #tb-dy-dh-list li #gfwb-xl {
height: 0;
overflow: hidden;
/* display: none; */
}
#tb #tb-dy-dh #tb-dy-dh-list li:hover #gfwb-xl {
width: 150px;
height: 100px;
background-color: white;
position: absolute;
top: 0;
margin: 0;
padding: 0;
z-index: 10;
}
#tb #tb-dy-dh #tb-dy-dh-list li:hover #gfwb-xl li {
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
margin: 0;
padding: 0;
}
/* gfwb-xl-dy:官方微博的下拉菜单第一行 */
#tb #tb-dy-dh #tb-dy-dh-list li:hover #gfwb-xl #gfwb-xl-dy {
margin: 0;
padding: 0;
color: #989393;
font-size: 14px;
}
/* gfwb-xl-de:官方微博的下拉菜单第二行 */
#tb #tb-dy-dh #tb-dy-dh-list li:hover #gfwb-xl #gfwb-xl-de a {
color: #ff2c72;
font-size: 14px;
}
/* gfwb-xl-ds:官方微博的下拉菜单第三行 */
#tb #tb-dy-dh #tb-dy-dh-list li:hover #gfwb-xl #gfwb-xl-ds a {
color: black;
font-size: 14px;
}
/* gzwx-xl:关注微信的下拉菜单 */
#tb #tb-dy-dh #tb-dy-dh-list li #gzwx-xl {
height: 0;
overflow: hidden;
/* display: none; */
}
#tb #tb-dy-dh #tb-dy-dh-list li:hover #gzwx-xl {
width: 150px;
height: 100px;
background-color: white;
position: absolute;
top: 0;
margin: 0;
padding: 0;
z-index: 10;
}
#tb #tb-dy-dh #tb-dy-dh-list li:hover #gzwx-xl li {
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
margin: 0;
padding: 0;
}
/* gzwx-xl-dy:关注微信的下拉菜单第一行 */
#tb #tb-dy-dh #tb-dy-dh-list li:hover #gzwx-xl #gzwx-xl-dy {
margin: 0;
padding: 0;
color: #989393;
font-size: 14px;
border: none;
height: 30px;
line-height: 30px;
}
/* gzwx-xl-de:关注微信的下拉菜单第二行 */
#tb #tb-dy-dh #tb-dy-dh-list li:hover #gzwx-xl #gzwx-xl-de a {
color: #ff2c72;
font-size: 14px;
border: none;
/* height: 30px; */
/* margin-top: 8px; */
/* display: block; */
}
/* gzwx-xl-ds:关注微信的下拉菜单第三行 */
#tb #tb-dy-dh #tb-dy-dh-list li:hover #gzwx-xl #gzwx-xl-ds a {
color: black;
font-size: 14px;
border: none;
}
/* zpbz-xl:正品保证的下拉菜单 */
#tb #tb-dy-dh #tb-dy-dh-list li #zpbz-xl {
height: 0;
overflow: hidden;
/* display: none; */
}
#tb #tb-dy-dh #tb-dy-dh-list li:hover #zpbz-xl {
width: 150px;
height: 100px;
background-color: white;
position: absolute;
top: 0;
margin: 0;
padding: 0;
z-index: 10;
}
#tb #tb-dy-dh #tb-dy-dh-list li:hover #zpbz-xl li {
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
margin: 0;
padding: 0;
}
/* zpbz-xl-dy:正品保证的下拉菜单第一行 */
#tb #tb-dy-dh #tb-dy-dh-list li:hover #zpbz-xl #zpbz-xl-dy {
margin: 0;
padding: 0;
color: #989393;
font-size: 14px;
border: none;
height: 30px;
line-height: 30px;
}
/* zpbz-xl-de:正品保证的下拉菜单第二行 */
#tb #tb-dy-dh #tb-dy-dh-list li:hover #zpbz-xl #zpbz-xl-de a {
color: #ff2c72;
font-size: 14px;
border: none;
/* height: 30px; */
/* margin-top: 8px; */
/* display: block; */
}
/* zpbz-xl-ds:正品保证的下拉菜单第三行 */
#tb #tb-dy-dh #tb-dy-dh-list li:hover #zpbz-xl #zpbz-xl-ds a {
color: black;
font-size: 14px;
border: none;
}
/* ------------------------------头部搜索框----------------------------- */
/* tb-ssk:头部搜索框 */
#tb #tb-ssk {
width: 100%;
height: 150px;
background-color: rgb(32, 33, 35);
text-align: center;
line-height: 200px;
position: relative;
}
#tb #tb-ssk input {
width: 460px;
height: 40px;
background-color: rgb(32, 33, 35);
border: none;
/* color: #4e4c4c; */
/* opacity: 0.5; */
background-image: url(./images/search_icon.png);
background-position: 0 -42px;
}
#tb #tb-ssk a {
width: 20px;
height: 20px;
background-image: url(./images/search_icon.png);
background-position: -465px -9px;
position: absolute;
top: 93px;
right: 565px;
}
/* ------------------------------头部第二个导航----------------------------- */
/* tb-de-dh:头部第二个导航 */
#tb #tb-de-dh {
width: 100%;
height: 40px;
background-color: rgb(32, 33, 35);
}
/* yrfl:艺人分类 */
#tb #tb-de-dh #yrfl {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: black;
color: white;
margin-left: 220px;
float: left;
/* display: inline-block; */
}
/* tb-de-dh-list:头部第二个导航列表 */
#tb #tb-de-dh #tb-de-dh-list {
float: left;
/* display: inline-block; */
margin-left: 100px;
}
#tb #tb-de-dh #tb-de-dh-list li {
float: left;
width: 110px;
height: 40px;
line-height: 40px;
text-align: center;
}
#tb #tb-de-dh #tb-de-dh-list li a {
text-decoration: none;
color: white;
display: block;
position: relative;
}
#tb #tb-de-dh #tb-de-dh-list li a:hover {
color: #ff2c72;
height: 40px;
/* display: inline-block; */
/* border-bottom: #ff2c72 2px solid; */
}
#tb #tb-de-dh #tb-de-dh-list li:nth-of-type(1) a {
color: #ff2c72;
height: 40px;
/* display: inline-block; */
/* border-bottom: #ff2c72 2px solid; */
}
/* xhx:下划线 */
#tb #tb-de-dh #tb-de-dh-list li a:hover .xhx {
width: 60px;
height: 3px;
background-color: #ff2c72;
position: absolute;
top: 37px;
left: 25px;
z-index: 10;
}
#tb #tb-de-dh #tb-de-dh-list li:nth-of-type(1) a .xhx {
width: 60px;
height: 3px;
background-color: #ff2c72;
position: absolute;
top: 37px;
left: 25px;
z-index: 10;
}
/* ------------------------------头部图片----------------------------- */
/* tb-tp:头部图片 */
#tb #tb-tp {
width: 1200px;
height: 480px;
margin: 0 auto;
}
/* -------------------------------------------中间------------------------------------------- */
/* zj:中间 */
#zj {}
/* ------------------------------直击现场----------------------------- */
/* zjxc:直击现场 */
#zj #zjxc {
width: 1200px;
height: 290px;
/* border: 1px red solid; */
margin: 0 auto;
}
/* zjxc-bt:直击现场标题 */
#zj #zjxc #zjxc-bt {
width: 1200px;
height: 80px;
/* border: 1px solid blue; */
margin-top: 30px;
}
#zj #zjxc #zjxc-bt p {
width: 1200px;
height: 15px;
line-height: 15px;
border-left: 3px solid #ff2c72;
margin-top: 15px;
}
#zj #zjxc #zjxc-bt p a {
text-decoration: none;
color: #989393;
}
/* zjxc-nr:直击现场内容 */
#zj #zjxc #zjxc-nr {
width: 1200px;
height: 200px;
/* border: blue 1px solid; */
}
/* zjxc-nrz:直击现场内容左 */
#zj #zjxc #zjxc-nrz {
float: left;
}
/* zjxc-nrz-list:直击现场内容左列表 */
#zj #zjxc #zjxc-nrz #zjxc-nrz-list {
width: 840px;
height: 200px;
/* border: 1px solid red; */
}
#zj #zjxc #zjxc-nrz #zjxc-nrz-list li {
width: 190px;
float: left;
margin-right: 20px;
text-align: center;
}
#zj #zjxc #zjxc-nrz #zjxc-nrz-list li>img {
width: 190px;
margin-bottom: 10px;
}
#zj #zjxc #zjxc-nrz #zjxc-nrz-list li>a {
text-decoration: none;
color: black;
text-align: center;
}
#zj #zjxc #zjxc-nrz #zjxc-nrz-list li>a:hover {
color: #ff2c72;
}
/* zjxc-nry:直击现场内容右 */
#zj #zjxc #zjxc-nry {
float: left;
width: 360px;
}
#zj #zjxc #zjxc-nry>img {
width: 350px;
height: 150px;
margin-left: 10px;
}
/* ------------------------------TOP榜----------------------------- */
/* topb:TOP榜 */
#zj #topb {
width: 1200px;
height: 240px;
margin: 0 auto;
/* border: 1px solid red; */
}
/* topb-bt:TOP榜标题 */
#zj #topb #topb-bt {
width: 1200px;
height: 50px;
line-height: 20px;
/* border: 1px solid blue; */
}
#zj #topb #topb-bt h2 {
height: 20px;
border-left: 3px solid #ff2c72;
}
/* topb-nr:TOP榜内容 */
#zj #topb #topb-nr {
width: 1200px;
}
/* topb-nr-list:TOP榜内容列表 */
#zj #topb #topb-nr #topb-nr-list {
width: 1200px;
}
#zj #topb #topb-nr #topb-nr-list li {
width: 136px;
height: 180px;
float: left;
margin-right: 16px;
position: relative;
/* border: red 1px solid; */
background-color: #f5f3f3;
}
#zj #topb #topb-nr #topb-nr-list li>span {
width: 58px;
height: 57px;
background-image: url(./images/topten-span_02.png);
display: block;
z-index: 10;
position: absolute;
font-size: 25px;
color: black;
text-indent: 10px;
font-weight: 900;
/* margin-top: 10px;
margin-left: 10px; */
}
#zj #topb #topb-nr #topb-nr-list li:nth-of-type(1)>span,
#zj #topb #topb-nr #topb-nr-list li:nth-of-type(2)>span,
#zj #topb #topb-nr #topb-nr-list li:nth-of-type(3)>span {
width: 58px;
height: 57px;
background-image: url(./images/topten-span_01.png);
display: block;
z-index: 10;
position: absolute;
font-size: 25px;
color: white;
text-indent: 10px;
font-weight: 900;
/* margin-top: 10px;
margin-left: 10px; */
}
#zj #topb #topb-nr #topb-nr-list li:nth-of-type(8) {
margin-right: 0;
}
#zj #topb #topb-nr #topb-nr-list li>img {
width: 136px;
}
/* xl:销量 */
#zj #topb #topb-nr #topb-nr-list li>.xl {
width: 136px;
height: 20px;
line-height: 20px;
background-color: rgba(0, 0, 0, .5);
color: white;
text-align: center;
position: absolute;
top: 115px;
z-index: 20;
font-size: 13px;
}
/* bt:标题 */
#zj #topb #topb-nr #topb-nr-list li>.bt {
width: 136px;
text-align: center;
font-weight: 900;
margin-top: 10px;
}
/* ------------------------------新品首发----------------------------- */
/* xpsf:新品首发 */
#zj #xpsf {
width: 1200px;
height: 515px;
margin: 0 auto;
/* border: red solid 1px; */
}
/* xpsf-bt:新品首发标题 */
#zj #xpsf-bt {
width: 1200px;
height: 80px;
/* border: 1px solid blue; */
margin-top: 20px;
}
#zj #xpsf #xpsf-bt p {
width: 1200px;
height: 15px;
line-height: 15px;
border-left: 3px solid #ff2c72;
margin-top: 15px;
}
#zj #xpsf #xpsf-bt p a {
text-decoration: none;
color: #989393;
}
/* xpsf-nr:新品首发内容 */
#zj #xpsf #xpsf-nr {
width: 1200px;
}
/* xpsf-nr-list:新品首发内容列表 */
#zj #xpsf #xpsf-nr .xpsf-nr-list {
width: 1200px;
}
#zj #xpsf #xpsf-nr .xpsf-nr-list li {
width: 390px;
height: 200px;
margin-right: 15px;
margin-bottom: 15px;
float: left;
background-color: #f4eeee;
/* border: 1px solid red; */
}
#zj #xpsf #xpsf-nr .xpsf-nr-list li:nth-of-type(3) {
margin-right: 0px;
}
/* xpsf-nr-t:新品首发内容图 */
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-t {
width: 200px;
height: 200px;
float: left;
}
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-t>img {
width: 200px;
height: 200px;
}
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-t>img:hover {
box-shadow: 2px 2px 5px 5px black;
}
/* xpsf-nr-wb:新品首发内容文本 */
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-wb {
width: 150px;
height: 140px;
margin: 30px 20px;
/* background-color: #989393; */
float: left;
}
/* xpsf-nr-bt:新品首发内容标题 */
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-bt {
width: 150px;
height: 60px;
}
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-bt a {
text-decoration: none;
color: black;
font-size: 13px;
}
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-bt a:hover {
color: #ff2c72;
}
/* xpsf-nr-jq:新品首发内容价钱 */
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-jq {
width: 150px;
height: 40px;
}
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-jq a {
text-decoration: none;
color: #ff2c72;
font-size: 15px;
}
/* xpsf-nr-dzl:新品首发内容点赞量 */
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-dzl {
width: 150px;
height: 20px;
line-height: 20px;
position: relative;
}
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-dzl span {
width: 13px;
height: 20px;
background-image: url(./images/ico.png);
background-position: 0 30px;
position: absolute;
top: 2px;
}
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-dzl span:hover {
width: 13px;
height: 20px;
background-image: url(./images/ico.png);
background-position: 17px 30px;
position: absolute;
top: 2px;
}
#zj #xpsf #xpsf-nr .xpsf-nr-list li .xpsf-nr-dzl a {
text-decoration: none;
color: #bdbdbd;
margin-left: 20px;
}
/* ------------------------------大家喜欢----------------------------- */
/* djxh:大家喜欢 */
#zj #djxh {
width: 1200px;
height: 500px;
margin: 0 auto;
/* border: 1px solid red; */
}
/* djxh:大家喜欢标题 */
#zj #djxh-bt {
width: 1200px;
height: 80px;
/* border: 1px solid blue; */
margin-top: 20px;
}
#zj #djxh #djxh-bt p {
width: 1200px;
height: 15px;
line-height: 15px;
border-left: 3px solid #ff2c72;
margin-top: 15px;
}
#zj #djxh #djxh-bt p a {
text-decoration: none;
color: #989393;
}
/* djxh-nr:大家喜欢内容 */
#zj #djxh #djxh-nr {
width: 1200px;
}
/* djxh-nr-list:大家喜欢内容列表 */
#zj #djxh #djxh-nr #djxh-nr-list {
width: 1200px;
}
#zj #djxh #djxh-nr #djxh-nr-list li {
width: 232px;
margin-right: 10px;
height: 340px;
float: left;
background-color: #f4eeee;
}
#zj #djxh #djxh-nr #djxh-nr-list li:nth-of-type(5) {
margin-right: 0px;
}
/* djxh-nr-t:大家喜欢内容图 */
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-t {
width: 200px;
height: 200px;
margin: 16px;
}
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-t>img {
width: 200px;
height: 200px;
}
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-t>img:hover {
box-shadow: 2px 2px 5px 5px black;
}
/* djxh-nr-bt:大家喜欢内容标题 */
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-bt {
width: 200px;
margin: -3px 16px 16px 16px;
}
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-bt a {
text-decoration: none;
color: black;
font-size: 14px;
}
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-bt a:hover {
color: #ff2c72;
}
/* djxh-nr-xx:大家喜欢内容详细 */
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-xx {
width: 200px;
height: 20px;
line-height: 20px;
/* background-color: aquamarine; */
margin-left: 16px;
margin-right: 16px;
position: relative;
}
/* djxh-nr-jq:大家喜欢内容价钱 */
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-xx .djxh-nr-jq {
width: 150px;
height: 20px;
float: left;
}
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-xx .djxh-nr-jq a {
text-decoration: none;
color: #ff2c72;
font-size: 15px;
}
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-xx span {
width: 13px;
height: 20px;
background-image: url(./images/ico.png);
background-position: 0 30px;
position: absolute;
top: 2px;
}
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-xx span:hover {
width: 13px;
height: 20px;
background-image: url(./images/ico.png);
background-position: 17px 30px;
position: absolute;
top: 2px;
}
/* djxh-nr-dzs:大家喜欢内容点赞数 */
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-xx .djxh-nr-dzs {
float: left;
width: 30px;
height: 20px;
margin-left: 20px;
}
#zj #djxh #djxh-nr #djxh-nr-list li .djxh-nr-xx .djxh-nr-dzs a {
text-decoration: none;
color: #bdbdbd;
}
/* -----------------------------------------低部---------------------------------------------- */
/* db:底部 */
#db {}
/* dbnr:底部内容 */
#db #dbnr {
width: 100%;
height: 200px;
background-color: black;
}
/* dbnr-list:底部内容上面列表 */
#db #dbnr #dbnr-list {
width: 600px;
height: 100px;
line-height: 100px;
/* border: red 1px solid; */
margin: 0 auto;
}
#db #dbnr #dbnr-list li {
float: left;
width: 100px;
height: 100px;
/* border: yellow 1px solid; */
text-align: center;
line-height: 100px;
}
#db #dbnr #dbnr-list li a {
text-decoration: none;
color: #575555;
font-size: 17px;
}
#db #dbnr #dbnr-list li a:hover {
color: #52e2c0;
}
/* dbnr-dy:底部内容第一行 */
#db #dbnr #dbnr-dy {
width: 1030px;
height: 30px;
line-height: 30px;
/* border: green 1px solid; */
margin: 0 auto;
}
#db #dbnr #dbnr-dy a {
text-decoration: none;
color: #575555;
font-size: 17px;
}
#db #dbnr #dbnr-dy a:hover {
color: #52e2c0;
}
/* dbnr-de:底部内容第二行 */
#db #dbnr #dbnr-de {
width: 1280px;
height: 30px;
line-height: 30px;
/* border: green 1px solid; */
margin: 0 auto;
}
#db #dbnr #dbnr-de a {
text-decoration: none;
color: #575555;
font-size: 17px;
}
#db #dbnr #dbnr-de a:hover {
color: #52e2c0;
}
扫一扫
1507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
