酷狗页面浮动
做一个页面首先要做布局,布局订好,剩下的内容填充时不会太乱!
前几天老师讲的一个页面布局用浮动来展示,
酷狗官网部分页面如图
鼠标上去时有阴影遮盖,下方的播放键也有一些hover效果。
截图无法展现,稍后将自己做的页面展示一下。
首先做布局。
我首先一个大div框住5个小div,后四个大小一下,命名相同,(注意:命名相同之后只需要给相同的css样式就可以,这就是代码简写,我之前做的一个项目,24个相同的东西,我写了24个不同命名和几乎相同的样式,很浪费,所有代码要简写。省时省力!)
后四个css代码
.mu{
width: 160px; //宽高
height: 160px;
background-color: red; //背景色
float: left;
margin-left: 7px; //左边距
margin-bottom: 6px; //下边距
position: relative;
}
布局做出来后看酷狗官网就知道样式差不多
所以 主写第一个
<div class="left">
<img src=&