上次发了首页,想了一下,还是打算把通讯录页也发一下//
仅供学习参考,大多用到div的各种设置,侧边导航栏设置,css对盒模型的浮动、弹性、固定定位等设置,还有底部小细节//
效果图如下所示
核心代码如下
html设置:
<body>
<!-- 顶部 -->
<div class="a1 ee">
<div class="a1_b1">通讯录</div>
<div class="a1_b2">
<div class="a1_c1"><img src="image/0001.png" width="70px"/></div>
<div class="a1_c2"><img src="image/0002.png" width="70px"/></div>
</div>
</div>
<!-- 中部 -->
<div class="a2_b">
<div class="a2_b1"><img src="image/01.png" width="150px"/></div>
<div class="a2_b2">
<div class="a2_c1">
<div class="a2_d1"> 新的朋友</div>
</div>
</div>
</div>
<div class="a2_b">
<div class="a2_b1"><img src="image/02.png" width="150px"/></div>
<div class="a2_b2">
<div class="a2_c1">
<div class="a2_d1"> 群聊</div>
</div>
</div>
</div>
<div class="a2_b">
<div class="a2_b1"><img src="image/03.png" width="150px"/></div>
<div class="a2_b2">
<div class="a2_c1">
<div class="a2_d1"> 标签</div>
</div>
</div>
</div>
<div class="a2_b">
<div class="a2_b1"><img src="image/公众号.png" width="150px"/></div>
<div class="a2_b2">
<div class="a2_c1">
<div class="a2_d1"> 公众号</div>
</div>
</div>
</div>
<!-- 导航字母 -->
<div class="qq" id="p1">A</div>
<div class="a2_b">
<div class="a2_b1"><img src&#