周报：静态页面（酷狗首页）的制作-下
本周呢还是主要进行了酷狗剩余页面的完成，后半部分的网页结构非常相似，吸取了上次的教训之后，我添加了许多通用样式，再对特殊的样式进行修改，写代码的速度真的快了许多，而且心理上也没有任何压力。
在这里我就说说其中一个样式的制作吧！
样式效果如下：
这里利用了固定定位和绝对定位以及字体图标的应用对于下方宽度不占满的边框，我是使用一个新的元素，设置其宽高，背景颜色以及居中设置的，当然，这只是我的想法，肯定也有很多更简便更好的方法实现。
整体代码如下：
HTML代码：
酷狗音乐
新歌首发
华语
欧美
韩国
日本
<
1/3
>
推荐内容
华语
欧美
韩国
日本
<
1/3
>
- 白眉大侠
- 茅山捉鬼人
- 夜听FM
- 贝瓦故事
- 文物贝流行钢琴（1）
- 郭德纲
- 原创静心舒眠
- 黑水公园
- 舒烟电台
- 晚安故事盒子
- 哄睡故事
- 隋唐演义
- 程一电台
- 宝宝巴士儿歌
- 这首歌，等你来听
- 斗罗大陆
- 水浒传
- 星空下的钢琴曲
- 盗墓笔记
- 抬棺匠
- 晚安故事盒子
合作链接
- 白眉大侠
- 茅山捉鬼人
- 夜听FM
- 贝瓦故事
- 文物贝流行钢琴（1）
- 郭德纲
- 原创静心舒眠
- 黑水公园
- 舒烟电台
- 晚安故事盒子
- 哄睡故事
- 隋唐演义
css代码如下：
index.css:
/*index.css*/
@import"./common.css";
@import"./reset.css";
/* @import"//at.alicdn.com/t/c/font_4360201_ifl8rhmxkx.css"; */
/* 首页通用样式开始 */
.aside-left{
width: 640px;
float: left;
}
.aside-right{
width: 320px;
float: right;
}
.shead .title{
line-height: 50px;
font-size: 26px;
font-weight: 500;
color: #000;
}
.shead{
height: 50px;
}
.shead .gengduo{
display: inline-block;
line-height: 50px;
font-size: 14px;
color:#858585 ;
background: url(../img/更多.箭头.png) no-repeat;
background-size: 16px;
background-position: right 2px bottom 17px;
padding-right: 19px;
}
.shead .gengduo:hover{
color: #00a9ff;
}
.yinbob::before{
display: none;
content: url(../img/播放.png);
text-align: center;
background:rgba(0,0,0,.3);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
line-height:389px ;
}
.yinbos::before{
display: none;
content: url(../img/播放\ \(1\).png);
text-align: center;
background:rgba(0,0,0,.3);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
line-height:150px;
border-radius: 15px;
}
.header{
font-size: 26px;
font-weight: 500px;
display: inline-block;
}
.it{
text-align: center;
padding-left: 10px;
width: 64px;
height: 24px;
line-height: 24px;
margin: auto 10px;
display: inline-block;
}
.it{
position: relative;
}
.it .xuan{
left: 10px;
}
.it .xuan{
display: none;
width: 64px;
height: 24px;
position: absolute;
right: 1px;
top: 0;
background:rgba(0, 169, 255, 0.1) ;
border-radius: 15px;
}
.it:hover .xuan{
display: block;
}
.music{
margin:30px 0;
}
.music li{
width: 330px;
/* display: inline-block; */
float: left;
margin-top: 15px;
position: relative;
cursor: pointer;
}
.music li::after{
display: none;
position: absolute;
top: 0;
right: 0;
content: "";
width: 100%;
height: 100%;
background: rgba(0, 169, 255, 0.02);
}
.music li:hover::after{
display: block;
}
.music a{
width: 320px;
position: relative;
display: inline-block;
}
.music .img{
margin-right: 20px;
}
.music img{
width: 62px;
height: 62px;
border-radius: 15px;
}
.music .word{
display: inline-block;
width:163px ;
height:62px ;
line-height: 27px;
}
p{
font-weight: 400;
margin: 5px 0;
height: 20px;
}
p:hover{
color: #00A9FF;
}
.m{
font-size: 14px;
}
.g{
font-size: 12px;
color: rgba(0,0,0,.7);
}
.timg .item:last-child{
margin-right: 0;
}
.timg .item{
margin-right: 20px;
margin-top: 10px;
}
.timg .item img{
margin-top: 20px;
width: 150px;
height: 150px;
border-radius: 15px;
display: inline-block;
}
.timg .item .word{
margin: 10px 0;
display: block;
}
.timg .item .yinbos{
height: 150px;
display: inline-block;
position: relative;
}
.timg .item .yinbos:hover::before{
display: block;
}
.timg .item .yinbos::before{
height: 150px;
line-height: 160px;
top: 19px;
}
.first{
margin-left: 50px;
}
.change{
line-height: 24px;
display: inline-block;
width: 70px;
height: 24px;
}
.ch{
color: #ccc;
}
.ch:hover{
color: #00a9ff;
cursor: pointer;
}
.list-word{
margin-top: 20px;
}
.list-word .item:hover{
color: #00A9FF;
}
.list-word .item{
font-size: 12px;
width: 140px;
height: 50px;
background:rgba(234, 228, 228, 0.2);
text-align: center;
line-height: 50px;
margin: 0px 1.4px;
float: left;
cursor: pointer;
}
.list-word .item:nth-child(n+8)
{
margin-top: 16px;
}
/* 首页通用样式结束 */
/* 头部区域开始 */
.main-header{
margin: 0;
}
.main-header{
width: 100%;
background:#00A9FF ;
height: 80px;
}
.main-header .container{
height: 80px;
}
.main-header .container .header1{
width:466px ;
height: 38px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
.main-header .container .header1 img{
width: 146px;
height: 38px;
margin-right: 40px;
cursor: pointer;
}
.main-header .container .header1 .input{
width: 280px;
height: 30px;
right: 0;
position: absolute;
}
.main-header .container .header1 .input .vsou{
width: 100%;
height: 100%;
border-radius: 31px;
position: absolute;
top: 0;
left: 0;
background: rgb(77,194,255);
}
.main-header .container .header1 .img,.header .container .header1 .input{
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
.main-header .container .header1 .input .searchimg{
width: 50px;
height: 30px;
position: relative;
}
.main-header .container .header1 .input .searchimg img{
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 20px;
bottom: 0;
margin: auto 0;
}
.main-header .container .header1 .input .inputmain input{
width: 200px;
height: 20px;
position: absolute;
right: 0;
top: 0;
right: 20px;
bottom: 0;
margin: auto 0;
background:rgba(77,194,255, 0) ;
}
.header2{
position: absolute;
width: 405px;
height: 30px;
top: 0;
bottom: 0;
margin: auto 0;
right: 0;
}
.main-header a{
font-size: 14px;
color: #eee;
margin-right: 30px;
line-height: 30px;
}
.main-header a:hover{
color: #fff;
}
.main-header .header2 .shu{
display: inline-block;
width: 1px;
height: 20px;
background:rgb(255, 255, 255 , 0.5) ;
vertical-align: middle;
}
.main-header .header2 .word{
display: inline-block;
width: 90px;
height: 30px;
line-height: 30px;
background: #fff;
text-align: center;
color: #00A9FF;
cursor: pointer;
border-radius: 15px;
margin-left: 50px;
}
/* 头部区域结束 */
/* 导航样式开始 */
.guide{
width: 100%;
height: 60px;
background:rgb(168, 228, 168);
}
.guide ul li{
display: inline-block;
width: 110px;
text-align: center;
line-height: 60px;
cursor: pointer;
}
.guide a:hover{
color: #00a9ff;
}
.guide ul li.selected a,.guide ul li:last-child{
display: inline-block;
background:#00a9ff ;
font-weight: bold;
width: 94px;
height: 34px;
color: #fff;
border-radius: 30px;
line-height: 34px;
}
.guide ul li:last-child{
margin-left: 40px;
}
.guide .container .jiantou{
display: inline-block;
background: url(../img/icon_arrow_down_black.png) no-repeat;
width: 18px;
height: 18px;
background-size: 100%;
}
.guide .daohang{
position: relative;
}
.guide ul li:last-child:hover>.daohang .hover{
display: block;
}
.guide .daohang .hover{
display: none;
position: absolute;
width: 100px;
height: 200px;
background:#fff;
border-radius: 14px;
bottom: -201px;
right: -4px;
z-index: 1;
color: #000;
}
.guide .daohang div{
margin-top: 5px;
text-align: center;
height: 35px;
line-height: 35px;
}
/* 导航样式结束 */
/* 横幅区域开始 */
.banner .img a{
display: inline-block;
width: 100%;
}
.banner .img a .java{
height: 560px;
width: 100%;
background: url(../img/声声.jpg) no-repeat center top;
position: relative;
}
.banner .img a .java img{
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.banner .java .qianjin,.banner .java .houtui{
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
border-radius: 50%;
background: rgba(0,0,0,.1);
}
.banner .img a .java:hover>.qianjin,.banner .img a .java:hover>.houtui{
display: block;
}
.banner .java .qianjin{
left: 20px;
}
.banner .java .houtui{
right: 20px;
}
.banner .img{
position: relative;
}
.banner .img .show{
width: 150px;
height: 30px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 100px;
}
.banner .img .show .dian{
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,.5);
margin-right: 20px;
}
.banner .img .show .dian:hover{
background: #fff;
}
.banner .img .show .dian.selected{
width: 30px;
height: 10px;
border-radius: 30px;
}
.banner .img .download{
bottom: 0px;
position: absolute;
width: 100%;
height: 60px;
background: rgb(168, 228, 168);
left: 0;
}
.banner .img .download .dh{
width: 780px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
}
.banner .img .download .dh .item{
display: inline-block;
width:200px ;
height: 46px;
line-height: 60px;
text-align: center;
margin-left: 44px;
color: #aaa;
}
.banner .img .download .dh .item:hover{
color: #000;
}
.banner .img .download img{
display: inline-block;
margin-right: -61px;
position: absolute;
bottom: -44.4px;
left: 10px;
}
.banner .img .download .dh .item .win,
.banner .img .download .dh .item .apple,
.banner .img .download .dh .item .an{
width: 100%;
height: 40px;
}
.banner .img .download .line{
display: inline-block;
width: 0.8px;
height: 14px;
background: #eee;
}
.banner .img .download .co{
position: relative;
}
.banner .img .download .co .word{
position: absolute;
right: 10px;
top: 0;
bottom: 0;
margin: auto 0;
}
/* 横幅区域结束 */
/* 精选歌单开始 */
.special-music-list .container{
margin-top: 50px;
}
.special-music-list .aside-left .mainp{
width: 320px;
}
.special-music-list .aside-left .mainp .img .bo{
display: inline-block;
width: 22px;
height: 20px;
background-size: 103%;
background: url(../img/bofang.png) no-repeat 6px 1px/cover;
}
.special-music-list .aside-left .mainp .img{
margin-top: 10px;
text-align: center;
}
.special-music-list .aside-left .mainp .img .show{
width: 72px;
height: 24px;
position: absolute;
right: 0;
bottom: 0;
font-size: 12px;
font-weight: 500;
color: #fff;
background: rgba(0,0,0,.3);
border-radius: 15px;
padding-right: 10px;
}
.special-music-list .aside-left .mainp .img .show .word{
line-height: 24px;
}
.special-music-list .aside-left .mainp .img .words{
margin-top: 10px;
}
.special-music-list .aside-left .mainp .img img{
width: 100%;
}
.special-music-list .aside-left .mainp .img a{
position: relative;
z-index: 1;
display: block;
overflow: hidden;
border-radius: 8px;
}
.special-music-list .aside-left .mainp:hover .yinbob::before{
display: block;
}
.special-music-list .fu{
width: 290px;
height:362px;
}
.special-music-list .fu img{
width: 130px;
height: 130px;
border-radius: 15px;
}
.special-music-list .fu .img{
position: relative;
}
.special-music-list .fu .item{
float: left;
width: 130px;
height: 176px;
margin-left: 15px;
margin-top: 7px;
}
.special-music-list .fu .item .img{
display: inline-block;
}
.special-music-list .fu .item .word{
display: inline-block;
margin-top: 10px;
line-height: 1.3;
}
.special-music-list .fu .item:hover .yinbos::before{
display: block;
}
.special-music-list .item .img .bo{
display: inline-block;
width: 22px;
height: 20px;
background-size: 103%;
background: url(../img/bofang.png) no-repeat 3px 0px/cover;
}
.special-music-list .item .img .show{
height: 20px;
position: absolute;
right: 0;
bottom: 0;
font-size: 12px;
font-weight: 500;
color: #fff;
background: rgba(0,0,0,.3);
border-radius: 15px;
padding-right: 10px;
}
.special-music-list .item .show .word{
line-height: 1px;
}
.special-music-list .aside-right .rank img{
/* margin-left: 10px; */
width: 110px;
height: 110px;
}
.special-music-list .aside-right .rank .item{
height: 110px;
margin-top: 10px;
}
.special-music-list .aside-right .rank .item .img{
position: relative;
}
.special-music-list .aside-right .rank .item .img img{
border-radius: 15px;
}
.special-music-list .aside-right .rank .item .img:hover.yinbos::before{
display: block;
}
.special-music-list .aside-right .rank .item .yinbos::before{
line-height: 127px;
}
.special-music-list .aside-right .rank ul{
margin-right: 20px;
}
.special-music-list .aside-right .rank li{
margin-top: 10px;
height:20px ;
}
.special-music-list .aside-right .rank li:first-child{
margin-top: 15px;
height:20px ;
}
/* 精选歌单结束 */
/* 新歌首发开始 */
.newmusic-first{
margin-top: 40px;
}
.newmusic-first .aside-left{
width: 660px;
}
.newmusic-first .it::after{
display: none;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 5px;
margin: auto 0;
background: url(../img/bofang.png) no-repeat -3px 3px/cover;
}
.newmusic-first .aside-left .music{
margin:40px 0;
}
.newmusic-first .aside-left .music li{
width: 330px;
/* display: inline-block; */
float: left;
margin-top: 10px;
position: relative;
cursor: pointer;
}
.newmusic-first .aside-left .music li::after{
display: none;
position: absolute;
top: 0;
right: 0;
content: "";
width: 100%;
height: 100%;
background: rgba(0, 169, 255, 0.02);
}
.newmusic-first .aside-left .music li:hover::after{
display: block;
}
.newmusic-first .aside-left .music a{
width: 320px;
position: relative;
display: inline-block;
}
.newmusic-first .aside-left .music .img{
margin-right: 20px;
}
.newmusic-first .aside-left .music img{
width: 62px;
height: 62px;
border-radius: 15px;
}
.newmusic-first .aside-left .music .word{
display: inline-block;
width:163px ;
height:62px ;
line-height: 27px;
}
.newmusic-first p{
font-weight: 400;
margin: 5px 0;
height: 20px;
}
.newmusic-first p:hover{
color: #00A9FF;
}
.newmusic-first .m{
font-size: 14px;
}
.newmusic-first .g{
font-size: 12px;
color: rgba(0,0,0,.7);
}
.newmusic-first .aside-left .music .bd{
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
width: 100px;
height: 62px;
right: 0;
}
.newmusic-first .aside-left .music .bd .b{
position: absolute;
right: 30px;
top: 0;
bottom: 0;
margin: auto 0;
line-height: 62px;
width: 50px;
height:24px;
display: inline-block;
background: url(../img/sb.png) no-repeat 0 0/30px 30px;
}
.newmusic-first .aside-left .music .bd .d{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto 0;
line-height: 62px;
width: 50px;
height:24px;
display: inline-block;
background: url(../img/sd.png) no-repeat 0 0/30px 30px;
}
.newmusic-first .aside-right .mv .big img{
width: 320px;
height: 180px;
border-radius: 15px;
}
.newmusic-first .aside-right .mv .big a{
display: inline-block;
}
.newmusic-first .aside-right .mv .img{
position: relative;
display: inline-block;
}
.newmusic-first .aside-right .mv .img:hover::before{
display: block;
}
.newmusic-first .aside-right .mv .big .yinbos::before{
line-height: 202px;
}
.newmusic-first .aside-right .mv .small .mv1{
width: 150px;
margin-right: 15px;
}
.newmusic-first .aside-right .mv .small img{
width: 150px;
height: 130px;
border-radius: 15px;
}
/* 新歌首发结束 */
/* 听书精选开始 */
.special-reading .rhead{
line-height: 78px;
}
.special-reading .rhead .shead{
display: inline-block;
}
.special-reading .music{
margin-top: 0px;
}
.special-reading .music ul{
display: block;
}
.special-reading .music .bd{
font-size: 12px;
line-height: 62px;
}
.special-reading .music .bd .b{
display: inline-block;
width: 12px;
height: 12px;
background: url(../img/听书播放.png) no-repeat 0 0/16px 15px;
}
.special-reading .music .word p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 听书精选结束 */
/* 热门频道开始 */
.hot-channel .shead{
height: 28px;
}
/* 热门频道结束 */
/* 热门歌手开始 */
.hot-singer{
margin-top: 30px;
}
.hot-singer .item{
width:140px ;
margin:0 30px;
}
.hot-singer .item img{
border-radius: 50%;
}
.hot-singer .item .word{
text-align: center;
}
.hot-singer .shead{
height: 28px;
}
/* 热门歌手结束 */
/* 热门歌手开始 */
.hot-singer{
margin: 60px 0;
}
/* 热门歌手结束 */
/* 推荐内容开始 */
.recommond{
margin: 60px 0;
}
/* 推荐内容结束 */
/* 合作链接开始 */
.coperation{
margin: 60px 0;
}
/* 合作链接结束 */
/* 页尾开始 */
.main-footer{
background:#2C323B ;
color: #B1B3B9;
padding-bottom: 60px;
padding-top: 40px;
font-size: 12px;
}
/* .container1{
width: 700px;
margin: 0 auto;
} */
.main-footer ul{
display: inline-block;
text-align: center;
box-sizing: border-box;
}
.main-footer .iconimg{
text-align: center;
padding-top: 40px;
padding-bottom: 60px;
box-sizing: border-box;
}
.main-footer .item{
text-align: center;
width: 96px;
height: 89px;
display: inline-block;
}
.main-footer .item:hover{
color: #fff;
}
.main-footer .icon1{
width: 70px;
height: 70px;
display: inline-block;
background: url(../img/i1.png) no-repeat 0 0/65px 65px;
}
.icon2{
width: 70px;
height: 70px;
display: inline-block;
background: url(../img/i2.png) no-repeat 0 0/65px 65px;
}
.icon3{
width: 70px;
height: 70px;
display: inline-block;
background: url(../img/i3.png) no-repeat 0 0/65px 65px;
}
.icon4{
width: 70px;
height: 70px;
display: inline-block;
background: url(../img/i4.png) no-repeat 0 0/65px 65px;
}
.icon5{
width: 70px;
height: 70px;
display: inline-block;
background: url(../img/i5.png) no-repeat 0 0/65px 65px;
}
.icon6{
width: 70px;
height: 70px;
display: inline-block;
background: url(../img/i6.png) no-repeat 0 0/65px 65px;
}
.icon7{
width: 70px;
height: 70px;
display: inline-block;
background: url(../img/i7.png) no-repeat 0 0/65px 65px;
}
.word1{
text-align: center;
margin: 5px auto;
height: 18px;
width: 100%;
}
.word1 ul{
display: inline-block;
}
.witem{
float: left;
text-align: center;
/* width: 60px; */
height: 12px;
padding: 0 6px;
border-right: 1px solid #B1B3B9;
padding: 0 8px;
cursor: pointer;
}
.witem:hover{
color: #fff;
}
.witem:last-child{
border-right: none;
}
.word2{
text-align: center;
margin: 10px 0;
}
/* 页尾结束 */
.fix{
text-align: center;
position: fixed;
right: 20px;
bottom: 100px;
width: 69.6px;
height:208px ;
background: #fff;
border-radius: 15px;
border: 1px solid #ccc;
color: #556677;
font-size: 12px;
}
.fix .down{
text-align: center;
}
.fix .item1 .icon{
width: 100%;
height: 40px;
background: url(../img/f1.png) no-repeat 16px 7px/32px 32px;
}
.fix .item2 .icon{
width: 100%;
height: 40px;
background: url(../img/f2.png) no-repeat 16px 7px/32px 32px;
}
.fix .item3 .icon{
width: 100%;
height: 40px;
background: url(../img/f3.png) no-repeat 16px 7px/32px 32px;
}
.fix .item1{
position: relative;
}
.fix .item1 .erweima{
display: none;
width: 100px;
height: 110px;
border: 1px solid #ccc;
border-radius: 15px;
position: absolute;
right: 80px;
top: 0;
background: #fff;
}
.fix .item1:hover .erweima{
display: block;
}
.fix .item1 .erweima p{
position: absolute;
left: 12px;
bottom: -2px;
}
.fix .item1 img{
width: 80px;
border-radius: 15px;
position: absolute;
right: 10px;
top: 7px;
}
.fix a{
display: block;
cursor: pointer;
}
.item1 .xian{
position: absolute;
display: inline-block;
width: 45px;
height: 1px;
background: #ccc;
top: 70px;
left: 13px;
}
.item2 .xian{
position: absolute;
display: inline-block;
width: 45px;
height: 1px;
background: #ccc;
top: 140px;
left: 13px;
}
common.css:
.clearfix::after{
content: "";
display: block;
clear: both;
}
.container{
width: 1000px;
margin:0px auto;
position: relative;
}
.left{
float: left;
}
.right{
float: right;
}
整体效果如下：
最后我就来谈谈自己独立做完一个页面的感受吧，俗话说的好：“万事开头难”，这不仅是开始行动很难，而且是开始行动之后的初步行动难，我对这句话深有体会，酷狗页面的导航，横幅标题等在我刚开始做时真的是状况百出，层出不穷的问题令我一度怀疑自己的能力，不过好在最后通过不断地查看代码中的错误以及调试网页中各项指标，成功的实现了自己想要的效果，在后期制作网页的主要内容时，由于前期心态的磨练和通用样式的应用，完成的速度快了许多，我由此感受到练习自己制作网页的重要性，这对于自己独立完成一个页面的心态有很大的帮助，我对于自己制作网页已经没有初时的惶恐了，强烈建议大家有时间就自己做做喜欢的网页，而且一定要坚持完成喔！一定会有不小的收获！
