HTML5CSS3网页设计仿微信通讯录页

最新推荐文章于 2024-05-26 18:56:25 发布

lamb丫

最新推荐文章于 2024-05-26 18:56:25 发布

阅读量1.7k

点赞数 3

文章标签：前端 html5 css3 javascript html

本文链接：https://blog.csdn.net/qq_65208855/article/details/125451253

版权

本文介绍如何使用HTML5和CSS3来设计一个仿微信通讯录的网页，主要内容涉及div布局、侧边导航栏的创建、CSS盒模型的浮动、弹性及固定定位等技巧。此外，还提供了设计效果图和核心代码供学习参考。

摘要由CSDN通过智能技术生成

上次发了首页，想了一下，还是打算把通讯录页也发一下//

仅供学习参考，大多用到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">&nbsp;新的朋友</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">&nbsp;群聊</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">&nbsp;标签</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">&nbsp;公众号</div>
				</div>
			</div>
		</div>
		<!-- 导航字母 -->
		<div class="qq" id="p1">A</div>
		
		<div class="a2_b">
			<div class="a2_b1"><img src&#