这是用HTML和CSS模仿的网易云静态页面
具体的效果图如下:
补充:
-
因为时间关系所以好多地方时重复的,大家可以自行修改就可以
-
关于代码方法个人认为还是有很多不足的，代码冗长，不够精简，还是需要多多简练
-
同时希望大家指出不足之处，让我与各位共勉之
-
一年三百六十日，多是横戈马上行。 ——戚继光《马上作》
具体代码如下s：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易云</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/main-common.css">
</head>
<body>
<!-- 头部 -->
<div id="g-topbar">
<div class="m-top">
<div class="wrap">
<h1 class="logo">
</h1>
<ul class="m-nav">
<li class="first">
<span>
<a href="javascript:;" >
<em>发现音乐</em>
<span class="cor"> </span>
</a>
</span>
</li>
<li>
<span>
<a href="javascript:;">
<em>我的音乐</em>
</a>
</span>
</li>
<li>
<span>
<a href="javascript:;">
<em>朋友</em>
</a>
</span>
</li>
<li>
<span>
<a href="javascript:;">
<em>商城</em>
</a>
</span>
</li>
<li>
<span>
<a href="javascript:;">
<em>音乐人</em>
</a>
</span>
</li>
<li class="last">
<span>
<a href="javascript:;">
<em>下载客户端</em>
</a>
</span>
<sup class="hot"> </sup>
</li>
</ul >
<div class="m-tophead">
<a hidefocus="true" href="javascript:;" class="link">登录</a>
</div>
<a hidefocus="true" href="javascript:;" class="m-create-center">创作者中心</a>
<div class="m-search">
<div class="searchbg">
<span class="parent">
<input type="text" class="txt" placeholder="音乐/视频/电台/用户">
<!-- <label class="ph" @click="change" v-if="show1">{{message}}</label> -->
</span>
</div>
</div>
</div>
</div>
<div class="m-subtop">
<div class="ms-set">
<div class="navitems">
<ul>
<li>
<a href="javascript:;">
<em>推荐</em>
</a>
</li>
<li>
<a href="javascript:;">
<em>排行榜</em>
</a>
</li>
<li>
<a href="javascript:;">
<em>歌单
<span class="f-icon"> </span>
</em>
</a>
</li>
<li>
<a href="javascript:;">
<em>主播电台</em>
</a>
</li>
<li>
<a href="javascript:;">
<em>歌手</em>
</a>
</li>
<li>
<a href="javascript:;">
<em>新碟上架</em>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 主页模块 -->
<div class="w">
<div class="subw">
<a class="arrow-l arrow ft-u" hidefocus="true" href="javascript:;" ></a>
<a class="arrow-r arrow ft-u" hidefocus="true" href="javascript:;" ></a>
<div class="l-pr">
<img class="imgs" src="./images/pr-1.jpg" alt="pr1" >
</div>
<div class="r-download">
<!-- <img class="download-p" src="./images/download.png" alt="download"> -->
<a class="download-p" href="javascript:;"></a>
<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
</div>
<div class="dots">
<a class="a-red" hidefocus="true" href="javascript:;" ></a>
<a hidefocus="true" href="javascript:;" ></a>
<a hidefocus="true" href="javascript:;" ></a>
<a hidefocus="true" href="javascript:;" ></a>
<a hidefocus="true" href="javascript:;" ></a>
<a hidefocus="true" href="javascript:;" ></a>
<a hidefocus="true" href="javascript:;" ></a>
<a hidefocus="true" href="javascript:;" ></a>
<a hidefocus="true" href="javascript:;" ></a>
<a hidefocus="true" href="javascript:;" ></a>
</div>
</div>
</div>
<!-- 主体模块 -->
<div class="main">
<div class="main-l">
<div class="m-l-top">
<div class="top-nav">
<span class="top-nav-logo"></span>
<a class="top-nav-l" href="javascript:;">热门推荐</a>
<div class="top-nav-m">
<a class="ft-u" hidefocus="true" href="javascript:;" >话语</a>
<span>|</span>
<a class="ft-u" hidefocus="true" href="javascript:;" >流行</a>
<span>|</span>
<a class="ft-u" hidefocus="true" href="javascript:;" >摇滚</a>
<span>|</span>
<a class="ft-u" hidefocus="true" href="javascript:;" >民谣</a>
<span>|</span>
<a class="ft-u" hidefocus="true" href="javascript:;" >电子</a>
</div>
<div class="top-nav-r ft-u">
<a hidefocus="true" href="javascript:;" >更多</a>
<i class="more-logo"> </i>
</div>
</div>
<div class="top-main">
<ul class="top-main-news">
<li>
<div class="news-a">
<img src="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l"></span>
<span class="img-buttom-m">618万</span>
<a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
</div>
</div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a>
</p>
</li>
<li>
<div class="news-a">
<img src="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l"></span>
<span class="img-buttom-m">618万</span>
<a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
</div>
</div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a>
</p>
</li>
<li>
<div class="news-a">
<img src="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l"></span>
<span class="img-buttom-m">618万</span>
<a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
</div>
</div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a>
</p>
</li>
<li>
<div class="news-a">
<img src="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l"></span>
<span class="img-buttom-m">618万</span>
<a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
</div>
</div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a>
</p>
</li>
<li>
<div class="news-a">
<img src="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l"></span>
<span class="img-buttom-m">618万</span>
<a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
</div>
</div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a>
</p>
</li>
<li>
<div class="news-a">
<img src="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l"></span>
<span class="img-buttom-m">618万</span>
<a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
</div>
</div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a>
</p>
</li>
<li>
<div class="news-a">
<img src="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l"></span>
<span class="img-buttom-m">618万</span>
<a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
</div>
</div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a>
</p>
</li>
<li>
<div class="news-a">
<img src="./images/news-a.jpg" alt="news">
<div class="img-buttom">
<span class="img-buttom-l"></span>
<span class="img-buttom-m">618万</span>
<a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
</div>
</div>
<p>
<a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a>
</p>
</li>
</ul>
</div>
</div>
<div class="m-l-middle">
<div class="top-nav">
<span class="top-nav-logo"></span>
<a class="top-nav-l" href="javascript:;">新碟上架</a>
<div class="top-nav-r">
<a hidefocus="true" href="javascript:;" >更多</a>
<i class="more-logo"> </i>
</div>
</div>
<div class="middle-main">
<div class="m-inner">
<a class="click-flag-l" hidefocus="true" href="javascript:;" > </a>
<div class="roll-imgs">
<ul>
<li>
<div class="cover-record">
<img src="./images/record_1.jpg" alt="img">
<a class="record" hidefocus="true" href="javascript:;" ></a>
<a class="play-record" hidefocus="true" href="javascript:;" ></a>
</div>
<p class="song-title">
<a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHT</a>
</p>
<p class="songer">
<a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPS</a>
</p>
</li>
<li>
<div class="cover-record">
<img src="./images/record_1.jpg" alt="img">
<a class="record" hidefocus="true" href="javascript:;" ></a>
<a class="play-record" hidefocus="true" href="javascript:;" ></a>
</div>
<p class="song-title">
<a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHT</a>
</p>
<p class="songer">
<a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPS</a>
</p>
</li>
<li>
<div class="cover-record">
<img src="./images/record_1.jpg" alt="img">
<a class="record" hidefocus="true" href="javascript:;" ></a>
<a class="play-record" hidefocus="true" href="javascript:;" ></a>
</div>
<p class="song-title">
<a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHT</a>
</p>
<p class="songer">
<a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPS</a>
</p>
</li>
<li>
<div class="cover-record">
<img src="./images/record_1.jpg" alt="img">
<a class="record" hidefocus="true" href="javascript:;" ></a>
<a class="play-record" hidefocus="true" href="javascript:;" ></a>
</div>
<p class="song-title">
<a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHT</a>
</p>
<p class="songer">
<a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPS</a>
</p>
</li>
<li>
<div class="cover-record">
<img src="./images/record_1.jpg" alt="img">
<a class="record" hidefocus="true" href="javascript:;" ></a>
<a class="play-record" hidefocus="true" href="javascript:;" ></a>
</div>
<p class="song-title">
<a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHT</a>
</p>
<p class="songer">
<a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPS</a>
</p>
</li>
</ul>
</div>
<a class="click-flag-r" hidefocus="true" href="javascript:;" > </a>
</div>
</div>
</div>
<div class="m-l-bottom">
<div class="top-nav">
<span class="top-nav-logo"></span>
<a class="top-nav-l" href="javascript:;">榜单</a>
<div class="top-nav-r">
<a hidefocus="true" href="javascript:;" >更多</a>
<i class="more-logo"> </i>
</div>
</div>
<div class="b-content">
<div class="bc">
<div class="bc-top">
<img src="./images/notice.jpg" alt="原创榜">
<div class="t-title">
<h3>飙升榜</h3>
<a class="tt-play" title="播放" hidefocus="true" href="javascript:;" ></a>
<a class="tt-collect" title="收藏" hidefocus="true" href="javascript:;" ></a>
</div>
</div>
<dd>
<ol>
<li>
<span class="no no-top">1</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no no-top">2</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no no-top">3</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">4</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">5</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">6</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">7</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">8</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">9</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">10</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
</ol>
<div class="b-more">
<a class="click-flag-r" hidefocus="true" href="javascript:;" >查看全部></a>
</div>
</dd>
</div>
<div class="bc">
<div class="bc-top">
<img src="./images/notice.jpg" alt="原创榜">
<div class="t-title">
<h3>飙升榜</h3>
<a class="tt-play" title="播放" hidefocus="true" href="javascript:;" ></a>
<a class="tt-collect" title="收藏" hidefocus="true" href="javascript:;" ></a>
</div>
</div>
<dd>
<ol>
<li>
<span class="no no-top">1</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no no-top">2</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no no-top">3</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">4</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">5</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">6</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">7</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">8</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">9</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">10</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
</ol>
<div class="b-more">
<a class="click-flag-r" hidefocus="true" href="javascript:;" >查看全部></a>
</div>
</dd>
</div>
<div class="bc">
<div class="bc-top">
<img src="./images/notice.jpg" alt="原创榜">
<div class="t-title">
<h3>飙升榜</h3>
<a class="tt-play" title="播放" hidefocus="true" href="javascript:;" ></a>
<a class="tt-collect" title="收藏" hidefocus="true" href="javascript:;" ></a>
</div>
</div>
<dd>
<ol>
<li>
<span class="no no-top">1</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no no-top">2</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no no-top">3</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">4</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">5</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">6</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">7</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">8</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">9</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
<li>
<span class="no">10</span>
<a hidefocus="true" href="javascript:;">ginger snaps</a>
</li>
</ol>
<div class="b-more">
<a class="click-flag-r" hidefocus="true" href="javascript:;" >查看全部></a>
</div>
</dd>
</div>
<!-- <div class="bc-l"></div>
<div class="bc-m"></div>
<div class="bc-r"></div> -->
</div>
</div>
</div>
<div class="main-r">
<div class="mr-top">
<p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
<a hidefocus="true" href="javascript:;" >用户登录</a>
</div>
<div class="mr-middle">
<h3>
<span>入驻歌手</span>
<a hidefocus="true" href="javascript:;">查看全部></a>
</h3>
<ul>
<li>
<img src="./images/slider.jpg" alt="Fine乐队">
<div class="li-content">
<h4>
<span>Fine乐队</span>
</h4>
<p>独立创作人</p>
</div>
</li>
<li>
<img src="./images/slider.jpg" alt="Fine乐队">
<div class="li-content">
<h4>
<span>Fine乐队</span>
</h4>
<p>独立创作人</p>
</div>
</li>
<li>
<img src="./images/slider.jpg" alt="Fine乐队">
<div class="li-content">
<h4>
<span>Fine乐队</span>
</h4>
<p>独立创作人</p>
</div>
</li>
<li>
<img src="./images/slider.jpg" alt="Fine乐队">
<div class="li-content">
<h4>
<span>Fine乐队</span>
</h4>
<p>独立创作人</p>
</div>
</li>
<li>
<img src="./images/slider.jpg" alt="Fine乐队">
<div class="li-content">
<h4>
<span>Fine乐队</span>
</h4>
<p>独立创作人</p>
</div>
</li>
</ul>
<div class="ask">
<a class="a-content" hidefocus="true" href="javascript:;" >
<i>申请成为网易音乐人</i>
</a>
</div>
</div>
<div class="mr-bottom">
<h3>热门主播</h3>
<ul>
<li>
<img src="./images/slider-bottom.jpg" alt="莫非定律">
<div class="lc">
<h4>
<span class=".ft-u">莫非定律MoreFeel</span>
</h4>
<p>男女双人全创作独立乐团</p>
</div>
</li>
<li>
<img src="./images/slider-bottom.jpg" alt="莫非定律">
<div class="lc">
<h4>
<span class=".ft-u">莫非定律MoreFeel</span>
</h4>
<p>男女双人全创作独立乐团</p>
</div>
</li>
<li>
<img src="./images/slider-bottom.jpg" alt="莫非定律">
<div class="lc">
<h4>
<span class=".ft-u">莫非定律MoreFeel</span>
</h4>
<p>男女双人全创作独立乐团</p>
</div>
</li>
<li>
<img src="./images/slider-bottom.jpg" alt="莫非定律">
<div class="lc">
<h4>
<span class=".ft-u">莫非定律MoreFeel</span>
</h4>
<p>男女双人全创作独立乐团</p>
</div>
</li>
<li>
<img src="./images/slider-bottom.jpg" alt="莫非定律">
<div class="lc">
<h4>
<span class=".ft-u">莫非定律MoreFeel</span>
</h4>
<p>男女双人全创作独立乐团</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 尾部 -->
<div class="g-ft">
<div class="g-ft-set"><div class="l-ft">
<div class="links">
<a href="javascript:;">服务条款</a>
<span class="line">|</span>
<a href="javascript:;">隐私政策</a>
<span class="line">|</span>
<a href="javascript:;">儿童隐私政策</a>
<span class="line">|</span>
<a href="javascript:;">版权投诉指引</a>
<span class="line">|</span>
<a href="javascript:;">意见反馈</a>
<span class="line">|</span>
</div>
<div class="sup-copyright">
<span>网易公司版权所有©1997-2021  </span>
<a href="javascript:;">杭州乐读科技有限公司运营：浙网文[2021] 1186-054号</a>
</div>
<div class="mid-copyright">
<span>违法和不良信息举报电话：0571-89853516  举报邮箱：</span>
<a href="javascript:;">ncm5990@163.com</a>
</div>
<div class="sub-copyright">
<a href="javascript:;">粤B2-20090191-18 工业和信息化部备案管理系统网站  </a>
<a href="javascript:;" class="police">
<span class="police-logo"> </span>
<span class="police-text">浙公网安备 33010902002564号</span>
</a>
</div>
</div>
<ul class="r-ft">
<li>
<a href="javasript:;" class="newlogo"></a>
<span>Amped Studio</span>
</li>
<li>
<a href="javasript:;" class="newlogo"></a>
<span>Amped Studio</span>
</li>
<li>
<a href="javasript:;" class="newlogo"></a>
<span>Amped Studio</span>
</li>
<li>
<a href="javasript:;" class="newlogo"></a>
<span>Amped Studio</span>
</li>
<li>
<a href="javasript:;" class="newlogo"></a>
<span>Amped Studio</span>
</li>
</ul></div>
</div>
<!--1.开发环境版本, 包含了有帮助的命令警告-->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:".parent",
data:{
message: "音乐/视频/电台/用户",
show1: true,
show2: false
},
methods:{
change:function(){
this.show1 = !this.show1;
this.show2 = !this.show2;
}
}
})
</script> -->
</body>
</html>
CSS-1(base.css):
body {
min-width: 982px;
background: #f5f5f5;
}
/* 将所有内边距清零 */
*{
margin: 0;
padding: 0;
}
/* 去掉li前面的小原点 */
li {
list-style: none;
}
div, span {
display: block;
}
em,i {
font-style: normal;
}
body, textarea, select, input, button, a, label{
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}
CSS-2(commen.css):
#g-topbar {
/* 铺满整个屏幕 */
width: 100%;
height: 105px;
}
/* 顶部样式 */
.m-top {
width: 100%;
height: 70px;
background-color: rgb(36, 36, 36);
}
.m-top .wrap {
width: 1100px;
height: 100%;
margin: 0 auto;
}
/* 顶部 网易云logo */
.m-top .logo {
float: left;
width: 176px;
height: 70px;
background-image: url("../images/topbar.png");
cursor: pointer;
}
/* 顶部 中间导航栏 */
.m-top .m-nav {
float: left;
width: 508;
height: 70px;
}
.m-nav li, .m-nav li span, .m-nav a, .m-nav a em{
float: left;
height: 70px;
font-size: 14px;
text-align:center;
line-height: 70px;
color: #fff;
cursor: pointer;
}
.m-nav li span{
padding-left: 18px;
}
.m-nav .first {
width: 94px;
}
.m-nav .first .cor{
display: block;
position: absolute;
top: 64px;
width: 12px;
height: 7px;
margin-left: 20px;
background-position: -226px 0;
background-image: url("../images/topbar.png") ;
}
.m-nav li:nth-child(2) {
width: 94px;
}
.m-nav li:nth-child(3), .m-nav li:nth-child(4) {
width: 66px;
}
.m-nav li:nth-child(5) {
width: 80px;
}
.m-nav .last{
position: relative;
width: 108px;
}
/* hot 图标 */
.m-nav .last .hot{
display: block;
position: absolute;
top: 21px;
left: 100px;
width: 28px;
height: 19px;
background-position: -190px 0;
background-image: url("../images/topbar.png") ;
}
.m-nav li:hover {
background-color: #000;
}
/* 顶端 登录按钮 */
.m-top .m-tophead {
float: right;
width: 28px;
height: 45px;
margin-top: 7px;
margin: 19px 0 0 20px;
background-position: right -47px;
}
.m-tophead .link {
display: block;
width: 28px;
margin-top: 7px;
color: #787878;
cursor: pointer;
}
/* 顶部 创作中心 模块 */
.m-top .m-create-center {
display: block;
box-sizing: border-box;
float: right;
width: 90px;
height: 32px;
margin: 19px 0 0 12px;
padding-left: 16px;
line-height: 33px;
color: #ccc;
border: 1px solid #4f4f4f;
border-radius: 20px;
}
.m-top .m-search {
position: relative;
float: right;
width: 158px;
height: 32px;
}
.m-search .searchbg {
float: right;
width: 158px;
height: 32px;
margin-top: 19px;
border-radius: 32px;
background: url("../images/topbar.png") no-repeat 0 9999px;
background-position: 0 -99px;
background-color: #fff;
}
.m-search .searchbg .parent {
position: relative;
margin: 8px 0 0 30px;
}
.m-search .searchbg .parent .txt {
width: 95%;
border: none;
outline: none;
line-height: 16px;
background: transparent;
}
.m-search .searchbg .parent .ph {
display: block;
position: absolute;
top: 0;
left: 2px;
width: 90%;
color: #9b9b9b;
cursor: text;
}
/* 顶部的第二模块 */
.m-subtop {
width: 100%;
height: 35px;
border-bottom: 1px solid #a40011;
background-color: #C20C0C;
}
.m-subtop .ms-set {
width: 1100px;
height: 34px;
margin: 0 auto;
}
.m-subtop .ms-set .navitems {
width: 582px;
height: 34px;
margin-left: 179px;
}
.m-subtop .ms-set .navitems ul li {
display: block;
float: left;
height: 34px;
line-height: 34px;
font-size: 12px;
}
.m-subtop .ms-set .navitems ul li a em{
float: left;
padding: 0 30px;
font-size: 12px;
color: #fff;
cursor: pointer;
}
.m-subtop .ms-set .navitems ul li:nth-child(2n) em{
width: 48px;
padding-left: 20px;
}
.m-subtop .ms-set .navitems ul li:nth-child(2n-1) em{
width: 24px;
padding-left: 30px;
}
/* .m-subtop .ms-set .navitems ul li a em .f-icon{
display: inline-block;
width: 8px;
height: 8px;
top: 2px;
background-image: url("../images/white-r-icon@3x.png");
background-size: cover;
} */
/* 底部模块制作 */
.g-ft {
width: 100%;
height: 164px;
border-top: 1px solid #d3d3d3;
background-color: #f2f2f2;
}
/* 设置尾部居中 */
.g-ft .g-ft-set {
width: 980px;
margin: 0 auto;
}
.g-ft .g-ft-set .l-ft {
display: block;
float: left;
width: 520px;
padding: 15px;
line-height: 24px;
}
.l-ft span{
display: block;
float: left;
color: #666;
}
.g-ft .g-ft-set .l-ft .links {
width: 100%;
height: 24px;
}
.g-ft .g-ft-set .l-ft .links a{
float: left;
color: #999;
}
.g-ft .g-ft-set .l-ft .links .line {
display: block;
float: left;
margin: 0 11px;
}
.g-ft .g-ft-set .l-ft .links a:hover {
text-decoration: underline #999;
}
.g-ft .g-ft-set .l-ft .sup-copyright, .g-ft .g-ft-set .l-ft .mid-copyright{
width: 100%;
height: 24px;
}
.g-ft .g-ft-set .l-ft .sub-copyright {
width: 100%;
height: 28px;
}
.g-ft .g-ft-set .l-ft .sub-copyright a{
float: left;
}
.g-ft .g-ft-set .l-ft .sub-copyright .police-logo {
width: 20px;
height: 20px;
background-image: url("../images/police.png");
}
.sup-copyright a,.mid-copyright a, .sub-copyright a {
color: #666;
}
.sup-copyright a:hover, .mid-copyright a:hover, .sub-copyright a:hover{
text-decoration: underline;
}
.sub-copyright .police-text:hover{
text-decoration: underline;
}
.g-ft .g-ft-set .r-ft {
float: left;
width: 420px;
height: 100%;
margin-top: 33px;
}
.g-ft .g-ft-set .r-ft li {
float: left;
margin-right: 30px;
}
.g-ft .g-ft-set .r-ft li .newlogo {
display: block;
float: left;
width: 50px;
height: 45px;
background-image: url("../images/foot_enter_new.png");
background-size: 113px 552px;
background-position: -63px -457px;
}
.g-ft .g-ft-set .r-ft li span {
float: left;
margin: 50px -59px;
}
CSS-3(main-css):
/* 主页模块 */
/* 模块w 左边轮播图 右边下载图 */
.w {
width: 100%;
height: 285px;
background-image: url("../images/pr-1-bg.jpg");
background-size: 6000px;
background-position: center center;
}
.w .subw {
position: relative;
width: 982px;
height: 100%;
margin: 0 auto;
}
.w .subw .arrow{
display: block;
position: absolute;
top: 50%;
margin-top: -31px;
width: 37px;
height: 63px;
text-indent: -9999px;
}
.w .subw .arrow-l {
left: -63px;
background: url("../images/banner.png") 0 9999px no-repeat;
background-position: 0 -360px;
}
.w .subw .arrow-r {
right: -63px;
background: url("../images/banner.png") 0 9999px no-repeat;
background-position: 0 -508px;
}
.w .subw .l-pr {
float: left;
width: 728px;
height: 100%;
cursor: pointer;
}
.w .subw .l-pr .imgs {
width: 728px;
height: 100%;
}
.w .subw .r-download {
position: relative;
display: block;
float: right;
width: 254px;
height: 283px;
background-image: url("../images/download.png");
zoom: 1;
}
.w .subw .r-download .download-p {
position: absolute;
display: block;
width: 215px;
height: 56px;
left: 19px;
top: 186px;
background-image: url("../images/download.png");
background-position: 0px -290px;
zoom: 1;
}
.w .subw .r-download p {
position: absolute;
margin: 10px 0;
top: 245px;
left: 19px;
color: #8d8d8d;;
}
.w .subw .dots {
position: absolute;
top: 259px;
left: 0;
width: 730px;
height: 20px;
text-align: center;
}
.w .subw .dots .a-red {
width: 20px;
height: 20px;
background: url("../images/banner.png") 0 9999px no-repeat;
background-position: -22px -343px;
}
.w .subw .dots a{
display: inline-block;
width: 20px;
height: 20px;
background: url("../images/banner.png") 0 9999px no-repeat;
background-position: 3px -343px;
}
/* 主体模块 */
.main {
width: 982px;
height: 1425px;
margin: 0 auto;
border: 1px solid #d3d3d3;
border-width: 0 1px;
background-color: #fff;
}
/* 主体模块的左部分*/
.main-l {
float: left;
width: 690px;
height: 1365px;
padding: 19px;
/* background-color: #ccc; */
}
.m-l-top {
width: 100%;
height: 523px;
margin-bottom: 35px;
}
.top-nav {
height: 33px;
padding-right: 10px;
border-bottom: 2px solid #C10D0C;
}
.top-nav-logo {
float: left;
width: 35px;
height: 30px;
background-image: url("../images/index.png");
background-position: -225px -158px;;
}
.top-nav-l {
float: left;
font-size: 20px;
font-weight: normal;
line-height: 28px;
}
.top-nav-m {
float: left;
width: 240px;
height: 16px;
margin: 7px 0 0 20px;
}
.top-nav-m span{
display: inline;
width: 3px;
margin: 0 5px;
}
.top-nav-r {
float: right;
width: 50px;
height: 16px;
margin-top: 10px;
}
.top-nav-r .more-logo {
display: inline-block;
width: 12px;
height: 12px;
margin-left: 4px;
margin-top: -2px;
/* 垂直对齐一幅图像 */
vertical-align: middle;
background-image: url(../images/index.png);
background-position: 0 -240px;
}
.top-main {
width: 690px;
height: 468px;
margin-top: 20px;
}
.top-main .top-main-news {
width: 690px;
height: 468px;
}
.top-main .top-main-news li {
float: left;
width: 140px;
height: 204px;
padding-right: 32px;
overflow: hidden;
/* background-color: red; */
}
.top-main .top-main-news li .news-a {
position: relative;
width: 140px;
height: 140px;
}
.top-main .top-main-news li .news-a img {
cursor: pointer;
transition: all .3s;
}
.top-main .top-main-news li .news-a img:hover{
transform: scale(1.02);
}
.top-main .top-main-news li .news-a .img-buttom {
position: absolute;
width: 100%;
height: 27px;
bottom: 0;
background-image: url("../images/coverall.png");
background-position: 0 -537px;;
}
.top-main .top-main-news li .news-a .img-buttom .img-buttom-l {
display: block;
float: left;
width: 14px;
height: 11px;
margin: 9px 5px 9px 10px;
background-image: url("../images//play-plug.png");
background-position: 0 -24px;
}
.top-main .top-main-news li .news-a .img-buttom .img-buttom-m {
display: block;
float: left;
margin-top: 7px;
color: #ccc;
}
.top-main .top-main-news li .news-a .img-buttom .img-buttom-r {
display: block;
float: right;
width: 16px;
height: 17px;
margin: 5px 10px;
background-image: url("../images/play-plug.png");
background-position: 0 0px;
}
.top-main .top-main-news li .news-a .img-buttom .img-buttom-r:hover{
background-image: url("../images/play-plug.png");
background-position: 0 -60px;
}
.top-main .top-main-news li p {
margin: 8px 0;
}
.m-l-middle {
width: 100%;
height: 244px;
margin-bottom: 37px;
}
.m-l-middle .middle-main {
width: 688px;
height: 186px;
margin-top: 20px;
border: 1px solid #d3d3d3;
background-color: #f5f5f5;
}
.m-l-middle .middle-main .m-inner {
position: relative;
width: 669px;
height: 184px;
padding-left: 16px;
border: 1px solid #fff;
}
.m-l-middle .middle-main .m-inner .click-flag-l {
position: absolute;
left: 4px;
height: 16px;
width: 16px;
top: 71px;
background-image: url("../images/index.png");
background-position: -260px -75px;
background-repeat: no-repeat;
}
.m-l-middle .middle-main .m-inner .click-flag-r {
position: absolute;
right: 4px;
height: 16px;
width: 16px;
top: 71px;
background-image: url("../images/index.png");
background-position: -300px -75px;
background-repeat: no-repeat;
}
.m-l-middle .middle-main .m-inner .roll-imgs {
width: 645px;
height: 150px;
margin-top: 28px;
}
.m-l-middle .middle-main .m-inner .roll-imgs ul li{
float: left;
width: 118px;
height: 150px;
margin-left: 11px;
}
.m-l-middle .middle-main .m-inner .roll-imgs ul li .cover-record {
position: relative;
margin-bottom: 7px;
}
.m-l-middle .middle-main .m-inner .roll-imgs ul li .cover-record img{
display: block;
height: 100px;
width: 100px;
}
.m-l-middle .middle-main .m-inner .roll-imgs ul li .cover-record .record {
position: absolute;
float: left;
top: 0;
height: 100px;
width: 118px;
background: url("../images/coverall.png") no-repeat;
background-position: 0 -570px;
}
.m-l-middle .middle-main .m-inner .roll-imgs ul li .cover-record .play-record {
position: absolute;
float: left;
bottom: 4px;
left: 73px;
width: 22px;
height: 22px;
background: url("../images/play-plug.png");
background-position: 0 -85px;
}
.song-title a{
line-height: 18px;
color: #000;
}
.songer a {
line-height: 18px;
}
/* 主体底部模块 */
.m-l-bottom {
width: 100%;
height: 527px;
}
.m-l-bottom .b-content {
width: 688px;
height: 472px;
margin-top: 20px;
padding-left: 1px;
background: url("../images/index_bill.png") no-repeat;
}
.m-l-bottom .b-content .bc {
float: left;
width: 229px;
}
.m-l-bottom .b-content .bc .bc-top {
width: 211px;
height: 100px;
padding: 20px 0 0 19px;
}
.m-l-bottom .b-content .bc .bc-top img {
float: left;
width: 80px;
height: 80px;
cursor: pointer;
}
.m-l-bottom .b-content .bc .bc-top .t-title {
float: left;
width: 116px;
margin: 6px 0 0 10px;
}
.m-l-bottom .b-content .bc .bc-top .t-title .tt-play {
display: block;
float: left;
width: 24px;
height: 22px;
margin: 10px 8px 0 0;
background: url("../images/index.png") no-repeat;
background-position: -265px -205px;
}
.m-l-bottom .b-content .bc .bc-top .t-title .tt-collect {
display: block;
float: left;
width: 24px;
height: 22px;
margin-top: 10px;
background: url("../images/index.png") no-repeat;
background-position: -300px -205px;
}
.m-l-bottom .b-content .bc dd ol {
height: 319px;
margin-left: 50px;
line-height: 32px;
}
.m-l-bottom .b-content .bc dd ol li {
height: 32px;
}
.m-l-bottom .b-content .bc dd ol li .no-top {
color: #C10D0C;
}
.m-l-bottom .b-content .bc dd ol li .no {
float: left;
width: 35px;
height: 32px;
margin-left: -35px;
text-align: center;
font-size: 16px;
}
.m-l-bottom .b-content .bc dd ol li a {
float: left;
width: 170px;
height: 32px;
}
.m-l-bottom .b-content .bc dd .b-more {
clear: both;
height: 32px;
margin-right: 32px;
text-align: right;
line-height: 32px;
}
.m-l-bottom .b-content .bc dd .b-more a {
color: #000;
}
/* 侧边栏模块 */
.main-r {
float: right;
width: 250px;
height: 1425px;
border-left: 1px solid #ccc;
}
.main-r .mr-top {
height: 126px;
background: url("../images/index.png") no-repeat 0 9999px;
background-position: 0 0;
}
.main-r .mr-top p {
width: 205px;
margin: 0 auto;
padding: 16px 0;
line-height: 22px;
}
.main-r .mr-top a {
display: block;
width: 100px;
height: 31px;
margin: 0 auto;
line-height: 31px;
text-align: center;
color: #fff;
text-shadow: 0 1px 0 #8a060b;
background: url("../images/index.png") no-repeat 0 9999px;
background-position: 0 -195px;
}
.main-r .mr-middle {
height: 455px;
width:250px;
margin-top: 15px;
}
.main-r .mr-middle h3 {
height: 23px;
margin: 0 20px;
border-bottom: 1px solid #ccc;
color: #333;
}
.main-r .mr-middle h3 span {
float: left;
}
.main-r .mr-middle h3 a {
float: right;
color: #666;
font-weight: normal;
}
.main-r .mr-middle ul {
width: 230px;
height: 380px;
margin: 6px 0 14px 20px;
}
.main-r .mr-middle ul li {
float: left;
width: 210px;
height: 62px;
margin-top: 14px;
background: #fafafa;
}
.main-r .mr-middle ul li:hover {
cursor: pointer;
background-color: #ddd;
}
.main-r .mr-middle ul li img {
float: left;
width: 62px;
height: 62px;
}
.main-r .mr-middle ul li .li-content {
float: left;
width: 133px;
height: 60px;
padding-left: 13px;
border: 1px solid #e9e9e9;
border-left: none;
}
.main-r .mr-middle ul li .li-content span {
width: 90%;
margin-top: 8px;
font-size: 14px;
}
.main-r .mr-middle ul li .li-content p {
width: 90%;
margin-top: 8px;
}
.main-r .mr-middle .ask .a-content {
margin-left: 20px;
border-radius: 4px;
background: url("../images/text-background.png") no-repeat 0 9999px;
background-position: right -100px;
}
.main-r .mr-middle .ask .a-content i {
display: inline-block;
height: 31px;
width: 170px;
padding: 0 15px 0 20px;
line-height: 31px;
text-align: center;
font-weight: bold;
background: url("../images/text-background.png") no-repeat 0 9999px;
background-position: 0 -59px;
}
.main-r .mr-bottom {
width: 250px;
height: 294px;
margin-top: 30px;
}
.main-r .mr-bottom h3 {
height: 23px;
margin: 0 20px;
border-bottom: 1px solid #ccc;
color: #333;
}
.main-r .mr-bottom ul {
margin: 20px 0 0 20px;
}
.main-r .mr-bottom ul li {
float: left;
width: 210px;
height: 50px;
cursor: pointer;
}
.main-r .mr-bottom ul li img {
float: left;
width: 40px;
height: 40px;
margin-right: 10px;
box-shadow: 0 0 1px #333 inset;
}
.main-r .mr-bottom ul li .lc {
line-height: 21px;
}
common-main.css
.ft-u:hover {
text-decoration: underline;
}
649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
