仿写网站:学习猿地
命名必须简单易懂,不要写“a”“b”之类的,尽量使用“content_left”一类的。
先写div就像垒砖头一样。
想要div并排必须使用float。
这一图片布局采用的是定位。position:absolute;
因此,父级的div也要使用定位position:relative,否则,该图片定位参考坐标为body(0,0)!
下划线方法:
border-bottom: #0000FF 3px solid;
实现与下划线距离
padding-bottom: 5px;
去除li标签的原点
list-style:none;
每行字的间隔
padding: 10px 5px;
鼠标悬停改变字体颜色+下划线
.footer_top_center>div>ul>li:hover>a{
color: #0000FF;
text-decoration:underline;
}
主要学习了div布局的思想,先从大到小的细致划分;慢慢写div,加颜色边框用来区分;div嵌套多个div时,设置子div宽高应当留些位置,因为颜色边框占位置。后面微调就可以了。另子div可以直接width:100%/height:100%继承父div的宽高值,后面调整,较为方便。
写两个一样的div可以不单独给它们命名,直接选择路径即可(如何选择就emm多看看)
.content_bottom_right>div{
width: 100%;
height: 260px;
border: #35ff78 1px solid;
}
绿色的方块也亦如此:
.content_bottom_right>div>div{
width: 205px;
height: 100%;
background-color: #008000;
margin-left: 16px;
float: left;
}