网易云音乐网站项目问题整理
Posted 邹少聪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网易云音乐网站项目问题整理相关的知识，希望对你有一定的参考价值。
排版有些麻烦，简单的方法是设div,而我却用了直接添加图片的方法
以下是代码说明：
1 <div class="xiazaiquyu"> 2 <!--第一列--> 3 <div class="first"> 4 <img class="pg" src="../../image/images/lunbotubiao_01.jpg" > 5 <img class="pg" src="../../image/images/lunbotubiao_01.jpg" > 6 <img class="pg" src="../../image/images/lunbotubiao_01.jpg" > 7 <img class="pg" src="../../image/images/lunbotubiao_01.jpg" > 8 </div> 9 <div class="li1"> 10 <ul> 11 <li>安卓版</li><span class="sp1">V4.3.2</span> 12 <li>iPad版</li><span class="sp1">V1.6.2</span> 13 <li>PC版</li><span class="sp1">V2.2.3</span> 14 <li>WP版</li><span class="sp1">V1.5.0</span> 15 </ul> 16 </div> 17 <!--第二列--> 18 <div class="second"> 19 <img class="pg" src="../../image/images/lunbotubiao_01.jpg" > 20 <img class="pg" src="../../image/images/lunbotubiao_01.jpg" > 21 <img class="pg" src="../../image/images/lunbotubiao_01.jpg" > 22 <img class="pg" src="../../image/images/lunbotubiao_01.jpg" > 23 </div> 24 <div class="li2"> 25 <ul> 26 <li>iPhone版</li><span class="sp2">V4.3.2</span> 27 <li>Mac版</li><span class="sp2">V1.6.2</span> 28 <li>UWP版</li><span class="sp2">V2.2.3</span> 29 <li>Linux版</li><span class="sp2">V1.5.0</span> 30 </ul> 31 </div> 32 </div> 33 </div>
1 .xiazaiquyu{ 2 width: 720px; 3 height: 220px; 4 position: relative; 5 left: 10px; 6 } 7 .first{ 8 width: 220px; 9 height: 200px; 10 position: relative; 11 right: -800px; 12 top: 150px; 13 line-height: 40px; 14 } 15 .second{ 16 width: 220px; 17 height: 200px; 18 position: relative; 19 right: -1020px; 20 top: -237px; 21 line-height: 40px; 22 margin-left: 10px; 23 } 24 .li1 ul li{ 25 list-style-type: none; 26 color: white; 27 position: relative; 28 left: 810px; 29 line-height: 33px; 30 } 31 .sp1{ 32 position: relative; 33 left:900px; 34 top: -25px; 35 color: #D9D1D1; 36 font-size: 13px; 37 } 38 .li2 ul li{ 39 list-style-type: none; 40 color: white; 41 position:relative; 42 left: 1035px; 43 top: -450px; 44 line-height: 33px; 45 } 46 .sp2{ 47 position: relative; 48 font-size: 13px; 49 color: #D9D1D1; 50 left: 1130px; 51 top: -478px; 52 }
注意：宽高一定要调好，其中涉及到line height行高的调整，还有浮动div的应用
opacity 透明度的应用 1是完全不透明 0是完全透明
代码演示：
1 .duopg1{ 2 width: 260px; 3 height: 160px; 4 background:url(../image/musicianimage/zhaolei.jpg); 5 background-size: 100% 100%; 6 opacity: 0.4; 7 } 8 .duopg2{ 9 width: 260px; 10 height: 160px; 11 background:url( ../image/musicianimage/luodi.jpg); 12 background-size: 100% 100%; 13 opacity: 0.4; 14 } 15 .duopg3{ 16 width: 260px; 17 height: 160px; 18 background:url( ../image/musicianimage/duli.jpg); 19 background-size: 100% 100%; 20 opacity: 0.4; 21 } 22 .duopg4{ 23 width: 260px; 24 height: 160px; 25 background:url( ../image/musicianimage/lizhi.jpg); 26 background-size: 100% 100%; 27 opacity: 0.4; 28 } 29 .duopg5{ 30 width: 260px; 31 height: 160px; 32 background:url(../image/musicianimage/zhaolei.jpg); 33 background-size: 100% 100%; 34 opacity: 0.4; 35 } 36 .duopg6{ 37 width: 260px; 38 height: 160px; 39 background:url(../image/musicianimage/zhaolei.jpg); 40 background-size: 100% 100%; 41 opacity: 0.4; 42 } 43 .duopg7{ 44 width: 260px; 45 height: 160px; 46 background:url(../image/musicianimage/zhaolei.jpg); 47 background-size: 100% 100%; 48 opacity: 0.4; 49 } 50 .duopg8{ 51 width: 260px; 52 height: 160px; 53 background:url(../image/musicianimage/zhaolei.jpg); 54 background-size: 100% 100%; 55 opacity: 0.4; 56 } 57 .duopg9{ 58 width: 260px; 59 height: 160px; 60 background:url(../image/musicianimage/zhaolei.jpg); 61 background-size: 100% 100%; 62 opacity: 0.4; 63 } 64 .duopg10{ 65 width: 260px; 66 height: 160px; 67 background:url(../image/musicianimage/zhaolei.jpg); 68 background-size: 100% 100%; 69 opacity: 0.4; 70 } 71 .duopg11{ 72 width: 260px; 73 height: 160px; 74 background:url(../image/musicianimage/zhaolei.jpg); 75 background-size: 100% 100%; 76 opacity: 0.4; 77 }
display：none 适用于轮播图多张的情况下，将后面多的隐藏
代码演示：
1 .duopg5,.duopg6,.duopg7,.duopg8,.duopg9,.duopg10,.duopg11{ 2 display:none; 3 }
text indent：2em 首行缩进 多用于段落的调整
演示
/*鼠标放置上面时显示小手*/
1 .joinnow:hover{ 2 cursor: pointer; 3 }
网站图标添加
示例：
<title>网易云音乐</title>
<link rel="shortcut icon" href="../../image/images/music_看图王.ico">
用得最多的是图片定位：
代码如下：
1 <div class="starpg1"></div> 2 <div class="starpg2"></div> 3 <div class="starpg3"></div> 4 5 .starpg1{ 6 width: 270px; 7 height: 315px; 8 background: url( ../image/musicianimage/star1.gif)no-repeat 0px 0px; 9 position: relative; 10 top: 30px; 11 left: 180px; 12 } 13 .starpg1:hover{ 14 width: 270px; 15 height: 315px; 16 background: url( ../image/musicianimage/star1.gif)no-repeat -270px 0px; 17 } 18 .starpg2{ 19 width: 270px; 20 height: 315px; 21 background: url( ../image/musicianimage/star2.gif)no-repeat 0px 0px; 22 position: relative; 23 top: -284px; 24 left: 520px; 25 } 26 .starpg2:hover{ 27 width: 270px; 28 height: 315px; 29 background: url( ../image/musicianimage/star2.gif)no-repeat -270px 0px; 30 } 31 .starpg3{ 32 width: 270px; 33 height: 315px; 34 background: url( ../image/musicianimage/star3.gif)no-repeat 0px 0px; 35 position: relative; 36 top: -598px; 37 left: 860px; 38 } 39 .starpg3:hover{ 40 width: 270px; 41 height: 315px; 42 background: url( ../image/musicianimage/star3.gif)no-repeat -270px 0px; 43 }
截图展示：
hover后的：
css中将图片放置在图形框中的代码：
-webkit-mask:url( ../image/musicianimage/hotpg1.png);
代码案例：
1 <div class="hotpg1"></div> 2 <div class="hotpg2"></div> 3 <div class="hotpg3"></div> 4 <div class="hotpg4"></div> 5 <div class="hotpg5"></div> 6 <div class="hotpg6"></div> 7 8 9 .hotpg1{ 10 width: 160px; 11 height: 184px; 12 background-image:url( ../image/musicianimage/hotpg1-1.jpg); 13 -webkit-mask:url( ../image/musicianimage/hotpg1.png); 14 } 15 .hotpg2{ 16 width: 160px; 17 height: 184px; 18 background-image:url( ../image/musicianimage/hotpg1-2.jpg); 19 -webkit-mask:url( ../image/musicianimage/hotpg1.png); 20 } 21 .hotpg3{ 22 width: 160px; 23 height: 184px; 24 background-image:url( ../image/musicianimage/hotpg1-3.jpg); 25 -webkit-mask:url( ../image/musicianimage/hotpg1.png); 26 } 27 .hotpg4{ 28 width: 160px; 29 height: 184px; 30 background-image:url( ../image/musicianimage/hotpg1-4.jpg); 31 -webkit-mask:url( ../image/musicianimage/hotpg1.png); 32 } 33 .hotpg5{ 34 width: 160px; 35 height: 184px; 36 background-image:url( ../image/musicianimage/hotpg1-5.jpg); 37 -webkit-mask:url( ../image/musicianimage/hotpg1.png); 38 } 39 .hotpg6{ 40 width: 160px; 41 height: 184px; 42 background-image:url( ../image/musicianimage/hotpg1-6.jpg); 43 -webkit-mask:url( ../image/musicianimage/hotpg1.png); 44 } 45 46 47
截图展示：
css中将彩色图片变成灰白照片的代码：
filter:grayscale(100%);
案例截图展示：
以上是关于网易云音乐网站项目问题整理的主要内容，如果未能解决你的问题，请参考以下文章