時(shí)間：2023-05-21 22:08:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-05-21 22:08:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
【源碼共享】我花2小時(shí)寫了微信官網(wǎng)的響應(yīng)式布局HTML+CSS 換成旅行主題風(fēng)格更炫酷了：
在線咨詢
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" id="WebViewport" content="width=100%,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1" /> <!-- 此源碼由 http://www.psdhtml.cn/ 大設(shè)計(jì)師論壇獨(dú)家編寫，禁止轉(zhuǎn)售 --><title>微信官網(wǎng)首頁(yè)</title><style type="text/css">* { margin:0; padding:0;} /* 通配符 刪除瀏覽器默認(rèn)值 */ ul { list-style:none; /* 取消項(xiàng)目符號(hào)樣式 */ }body { overflow-x:hidden; background-color:rgba(250,250,250,1); font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;/* 字體集 */}@media (min-width: 601px){ /* >=601的設(shè)備*/ .top_info { width: 100%; height: 600px; position: relative; }.top_info:after { background-color: #2aae67; content: ''; width: 160%; height: 650px; position: absolute; left: -30%; top: 0; z-index: -1; border-radius: 0 0 50% 50%;}.top_info .top-text { height: 130px; width: 620px; margin-top: 40px; margin-right: auto; margin-left: auto; font-size: 0.87em; border-top-width: 1px; border-top-style: solid; border-top-color: #f2f2f2; line-height: 32px; color: #f2f2f2; padding-top: 18px; text-align: justify;}.top_info .round_div_all { height: 120px; width: 700px; margin-right: auto; margin-left: auto; padding-top: 5px; display: -webkit-flex;/* 定義內(nèi)部為彈性布局 */ display: flex; /* 定義內(nèi)部為彈性布局 */ flex-wrap: wrap; /* 讓彈性盒元素在需要的時(shí)候拆列 */ justify-content: space-around; /* （橫軸）方向上均勻排列每個(gè)元素 */}.mian01 { width: 850px; margin-top: 40px; margin-right: auto; margin-left: auto; padding-top: 40px; padding-bottom: 40px; overflow: hidden; /* 防止塌陷 */ display: -webkit-flex;/* 定義內(nèi)部為彈性布局 */ display: flex; /* 定義內(nèi)部為彈性布局 */ flex-wrap: wrap; /* 讓彈性盒元素在需要的時(shí)候拆列 */ justify-content: space-around; /* （橫軸）方向上均勻排列每個(gè)元素 */}.square_div { float: left; height: 160px; width: 180px; margin-top: 30px; border-radius: 6px; background-color: #ffffff; box-shadow: 0px 0px 5px 5px rgba(152,152,152,0.07);/* 設(shè)置一個(gè)陰影 顏色 透明度 */ cursor: pointer; /* 鼠標(biāo)在此處的效果為“小手”樣式 */ margin-right: auto; margin-left: auto;}}@media (max-width: 600px){ /*響應(yīng)式 <=600的設(shè)備使用如下css樣式表 */.top_info { width: 100%; height: 750px; background-color: #2aae67; border-bottom-left-radius: 60% 15%; border-bottom-right-radius: 60% 15%;}.top_info .top-text { height: 130px; width: 80%; margin-top: 40px; margin-right: auto; margin-left: auto; font-size: 0.87em; border-top-width: 1px; border-top-style: solid; border-top-color: #f2f2f2; line-height: 32px; color: #f2f2f2; padding-top: 18px; text-align: justify;}.top_info .round_div_all { width: 80%; margin-right: auto; margin-left: auto; padding-top: 40px; display: -webkit-flex;/* 定義內(nèi)部為彈性布局 */ display: flex; /* 定義內(nèi)部為彈性布局 */ flex-wrap: wrap; /* 讓彈性盒元素在需要的時(shí)候拆列 */ justify-content: space-around; /* （橫軸）方向上均勻排列每個(gè)元素 */}.mian01 { width: 90%; margin-right: auto; margin-left: auto; text-align:center; padding-top: 40px; padding-bottom: 40px; overflow: hidden; /* 防止塌陷 */ display: -webkit-flex;/* 定義內(nèi)部為彈性布局 */ display: flex; /* 定義內(nèi)部為彈性布局 */ flex-wrap: wrap; /* 讓彈性盒元素在需要的時(shí)候拆列 */ justify-content: space-around; /* （橫軸）方向上均勻排列每個(gè)元素 */}.square_div { float: left; height: 142px; width: 160px; margin-top: 30px; border-radius: 6px; background-color: #ffffff; box-shadow: 0px 0px 5px 5px rgba(152,152,152,0.07);/* 設(shè)置一個(gè)陰影 顏色 透明度 */ cursor: pointer; /* 鼠標(biāo)在此處的效果為“小手”樣式 */ margin-right: auto; margin-left: auto;}}.top_info .login { height: 22px; width: 45px; margin-top: 1%; float: left; margin-left: 91%; font-size: 0.9em; letter-spacing:3px;}.top_info .logo { height: 64px; width: 200px; margin-right: auto; margin-left: auto; padding-top: 120px;}.top_info .logo img:hover {opacity : 0.8;}.top_info .round_div_all .round_div { float: left; height: 110px; width: 110px; margin-top: 30px; border-radius: 50%; background-color: #39b472; cursor: pointer; /* 鼠標(biāo)在此處的效果為“小手”樣式 */ margin-left: 25px; margin-right: 25px;}.top_info .round_div_all .round_div:hover { background-color: #4aba7e; transition-duration: 0.3s;/* 縮放的過(guò)渡時(shí)間 */}.top_info .round_div_all .round_div .r-s01 { height: 40px; width: 40px; margin-top: 20px; margin-right: auto; margin-left: auto;}.top_info .round_div_all .round_div .r-s02 { height: 25px; width: 90px; margin-top: 10px; margin-right: auto; margin-left: auto; font-size: 0.8em; color: #f2f2f2; text-align: center;}.square_div:hover { -webkit-transform:scale(1.11,1.11); -moz-transform:scale(1.11,1.11); -transform:scale(1.11,1.11); transition-duration: 0.5s;/* 縮放的過(guò)渡時(shí)間 */ }.square_div .s-s01 { height: 43px; width: 43px; margin-top: 38px; margin-right: auto; margin-left: auto;}.square_div .s-s02 { height: 25px; width: 120px; margin-top: 18px; margin-right: auto; margin-left: auto; font-size: 0.9em; color: #1a1a1a; text-align: center;}.down { background-color: #ffffff; text-align: center; height: 50px; width: 100%; padding-top: 40px; padding-bottom: 40px; margin-top: 40px;}.f82 { font-size: 0.82px; color: #4c4c4c; line-height: 28px; letter-spacing:1px;}.f75 { font-size: 0.75px; color: #a0a2a0; line-height: 30px; letter-spacing:1px;}a:link { color: #ffffff; text-decoration: none;}a:visited { text-decoration: none; color: #ffffff;}a:hover { text-decoration: none; color: #ececec;}a:active { text-decoration: none;}.banquan { height: 36px; width: 1000px; margin-right: auto; margin-left: auto; border-top-width: 1px; border-top-style: solid; border-top-color: #f2f2f2; background-image: url(http://cdn.psdhtml.cn/wx_images/wx_lxidw7.svg); background-color: #FFF;}</style></head><body><!-- 此源碼由 http://www.psdhtml.cn/ 大設(shè)計(jì)師論壇獨(dú)家編寫，禁止轉(zhuǎn)售 --><div class="top_info"> <div class="login"><a href="#">登錄</a></div> <div class="logo"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/logo.png" width="200" height="64"></a></div> <div class="top-text">微信支持跨通信運(yùn)營(yíng)商、跨操作系統(tǒng)平臺(tái)通過(guò)網(wǎng)絡(luò)快速發(fā)送免費(fèi)（需消耗少量網(wǎng)絡(luò)流量）語(yǔ)音短信、視頻、圖片和文字，同時(shí)，也可以使用通過(guò)共享流媒體內(nèi)容的資料和基于位置的社交插件“搖一搖”、“朋友圈”、”公眾平臺(tái)“、”語(yǔ)音記事本“等服務(wù)插件。</div> <div class="round_div_all"> <div class="round_div"> <div class="r-s01"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/icon01.png" width="40" height="40"></a></div> <div class="r-s02">Android</div> </div> <div class="round_div"> <div class="r-s01"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/icon02.png" width="40" height="40"></a></div> <div class="r-s02">IOS</div> </div> <div class="round_div"> <div class="r-s01"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/icon03.png" width="40" height="40"></a></div> <div class="r-s02">Windows</div> </div> <div class="round_div"> <div class="r-s01"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/icon04.png" width="40" height="40"></a></div> <div class="r-s02">Harmony OS</div> </div> </div></div><div class="mian01"><div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_01.svg" width="43" height="43"></div> <div class="s-s02">微信支付</div></div><div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_02.svg" width="43" height="43"></div> <div class="s-s02">公眾號(hào)</div></div><div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_03.svg" width="43" height="43"></div> <div class="s-s02">小程序</div></div><div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_04.svg" width="43" height="43"></div> <div class="s-s02">視頻號(hào)助手</div></div><div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_05.svg" width="43" height="43"></div> <div class="s-s02">小游戲</div></div><div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_06.svg" width="43" height="43"></div> <div class="s-s02">小商店</div></div><div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_07.svg" width="43" height="43"></div> <div class="s-s02">表情開(kāi)放平臺(tái)</div></div><div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_08.svg" width="43" height="43"></div> <div class="s-s02">搜一搜開(kāi)放平臺(tái)</div></div><div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_09.svg" width="43" height="43"></div> <div class="s-s02">紅包封面</div></div><div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_10.svg" width="43" height="43"></div> <div class="s-s02">對(duì)話開(kāi)放</div></div><div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_11.svg" width="43" height="43"></div> <div class="s-s02">服務(wù)平臺(tái)</div></div><div class="square_div"> <div class="s-s01"><img src="http://cdn.psdhtml.cn/wx_images/icon_svg_12.svg" width="43" height="43"></div> <div class="s-s02">在線學(xué)堂</div></div></div><footer class="down"><span class="f82">微信安全 | 服務(wù)條款 | 使用規(guī)范 | 客服中心 | 隱私保護(hù)指引</span><br><span class="f75">Copyright ? 1998-2022 All Rights Reserved.</span></footer><div class="banquan"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/wx_lxidw7.svg" width="1000" height="36"></a></div></body><!-- 此源碼由 http://www.psdhtml.cn/ 大設(shè)計(jì)師論壇獨(dú)家編寫，禁止轉(zhuǎn)售 --></html>【更多相關(guān)可以查看下方我的網(wǎng)頁(yè)設(shè)計(jì)源碼專欄 ↓】關(guān)鍵詞：布局,響應(yīng),風(fēng)格,主題,旅行,小時(shí)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
