日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時間：2023/12/10 HTML 35 豆豆
生活随笔 收集整理的這篇文章主要介紹了 HTML5CSS3网页设计仿微信通讯录页 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

上次發(fā)了首頁，想了一下，還是打算把通訊錄頁也發(fā)一下//

僅供學習參考，大多用到div的各種設置，側(cè)邊導航欄設置，css對盒模型的浮動、彈性、固定定位等設置，還有底部小細節(jié)//

效果圖如下所示

?核心代碼如下

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="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="p2">B</div><div class="a2_b"><div class="a2_b1"><img src="image/006.jpg" 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/0004.png" width="150px"/></div><div class="a2_b2"><div class="a2_c1"><div class="a2_d1">&nbsp;B2</div></div></div></div><div class="qq" id="p3">C</div><div class="a2_b"><div class="a2_b1"><img src="image/0004.png" width="150px"/></div><div class="a2_b2"><div class="a2_c1"><div class="a2_d1">&nbsp;C1</div></div></div></div><div class="qq" id="p4">D</div><div class="a2_b"><div class="a2_b1"><img src="image/0004.png" width="150px"/></div><div class="a2_b2"><div class="a2_c1"><div class="a2_d1">&nbsp;D1</div></div></div></div><div class="a2_b"><div class="a2_b1"><img src="image/0004.png" width="150px"/></div><div class="a2_b2"><div class="a2_c1"><div class="a2_d1">&nbsp;D2</div></div></div></div><div class="a2_b"><div class="a2_b1"><img src="image/0004.png" width="150px"/></div><div class="a2_b2"><div class="a2_c1"><div class="a2_d1">&nbsp;D3</div></div></div></div><div class="a2_b"><div class="a2_b1"><img src="image/0004.png" width="150px"/></div><div class="a2_b2"><div class="a2_c1"><div class="a2_d1">&nbsp;D4</div></div></div></div><div class="a2_b"><div class="a2_b1"><img src="image/0004.png" width="150px"/></div><div class="a2_b2"><div class="a2_c1"><div class="a2_d1">&nbsp;D5</div></div></div></div><div class="a2_b"><div class="a2_b1"><img src="image/0004.png" width="150px"/></div><div class="a2_b2"><div class="a2_c1"><div class="a2_d1">&nbsp;D6</div></div></div></div><div class="a2_b"><div class="a2_b1"><img src="image/0004.png" width="150px"/></div><div class="a2_b2"><div class="a2_c1"><div class="a2_d1">&nbsp;D7</div></div></div></div><div class="a2_b"><div class="a2_b1"><img src="image/0004.png" width="150px"/></div><div class="a2_b2"><div class="a2_c1"><div class="a2_d1">&nbsp;D8</div></div></div></div><div class="a2_b"><div class="a2_b1"><img src="image/0004.png" width="150px"/></div><div class="a2_b2"><div class="a2_c1"><div class="a2_d1">&nbsp;D9</div></div></div></div><div class="a2_b az"><div class="az1">12個朋友</div></div><div class="kb"></div><!-- 底部 --><div class="a3"><div class="a3_b1 ff"><a href="信息.html" class="kl"><img src="image/消息（1）.png" width="90px"/><div class="nn">微信</div></a></div><div class="a3_b2 ff"><img src="image/通訊錄 (1).png" width="90px"/><div class="nn nn1">通訊錄</div></div><div class="a3_b3 ff"><img src="image/發(fā)現(xiàn).png" width="90px"/><div class="nn">發(fā)現(xiàn)</div></div><div class="a3_b4 ff"><img src="image/我.png" width="90px"/><div class="nn">我</div></div></div><div class="q1"><div><a href="#p1">A</a></div><div><a href="#p2">B</a></div><div><a href="#p3">C</a></div><div><a href="#p4">D</a></div><div><a href="#">E</a></div><div><a href="#">F</a></div><div><a href="#">G</a></div><div><a href="#">H</a></div><div><a href="#">I</a></div><div><a href="#">J</a></div><div><a href="#">K</a></div><div><a href="#">L</a></div><div><a href="#">M</a></div><div><a href="#">N</a></div><div><a href="#">O</a></div><div><a href="#">P</a></div><div><a href="#">Q</a></div><div><a href="#">R</a></div><div><a href="#">S</a></div><div><a href="#">T</a></div><div><a href="#">U</a></div><div><a href="#">V</a></div><div><a href="#">W</a></div><div><a href="#">X</a></div><div><a href="#">Y</a></div><div><a href="#">Z</a></div></div></body>

?css設置：

<style>*{margin: 0;padding: 0;font-size: 40px;}/* 首部 */.a1{width: 100%;height: 150px;border: 1px solid lightgrey;display: flex;/* 設置為彈性盒子 */}.a1_b1{width: 100px;height: 150px;flex-grow: 6;/* 放大比例 */text-align: right;line-height: 150px;font-size: 62px;}.a1_b2{width: 100px;height: 150px;flex-grow: 4;/* 放大比例 */display: flex;flex-direction: row-reverse;/* 設置主軸方向 從右向左 */align-items: center;/* 副軸對齊方式 居中 */}.a1_b2>div{width: 100px;height: 70px;}/* 尾部 */.a3{width: 100%;height: 150px;border: 1px solid lightgray;display: flex;position: fixed;/* 定位 固定定位 */bottom: 0;left: 0;}.a3>div{width: 25%;height: 150px;text-align: center;/* line-height: 150px; */background-color: #ececec;}.a3_b1{background-color: #337d32;}.kb{width: 100%;height: 150px;}.ee{background-color: #cecece;}.ff{height: 150px;}.ff>img{height: 90px;}.nn{height: 60px;font-size: 38px;text-align: center;}.nn1{color: #06a721;}/* 中部 */.a2{width: 100%;/* height: 800px; */border: 0px;}.a2_b{width: 100%;height: 150px;display: flex;/* 彈性盒子 */}.a2_b1{width: 150px;height: 150px;}.a2_b2{width: 500px;height: 150px;border-top: 1px solid lightgrey;border-bottom: 1px solid lightgrey;flex-grow: 1;}.a2_c1{width: 100%;height: 150px;background-color: #fff;/* display: flex;justify-content: space-between; */}.a2_d1{width: 400px;height: 150px;font-size: 40px;line-height: 150px;}/* 側(cè)邊 */.qq{width: 100%;height: 75px;background-color: #cecece;text-indent: 2em;/* 文本首行縮進 1em==1個文本 */line-height: 75px;}.q1{width: 30px;position: fixed;/* 固定定位 */right: 0;top: 20%;}.q1>div>a{color: #323232;text-decoration: none;/* 文本效果 */font-size: 30px;}.az{width: 100%;height: 150px;}.az1{width: 100%;height: 150px;line-height: 150px;text-align: center;font-size: 32px;color: #a1a1a1;}.kl{text-decoration: none;}.kl:hover{color: black;}.kl:visited{color: black;}.kl:link{color: black;}</style>

使用瀏覽器打開后 鼠標右鍵 檢查 即可查看手機版

補充一下，圖標可在阿里巴巴矢量圖標庫官網(wǎng)下載~

總結(jié)

以上是生活随笔為你收集整理的HTML5CSS3网页设计仿微信通讯录页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。