當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

web前端网页界面/css 仿微软官网界面

發(fā)布時(shí)間：2023/12/10 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端网页界面/css 仿微软官网界面小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Html5+css做的一款網(wǎng)頁(yè)設(shè)計(jì)界面，仿微軟官網(wǎng)，導(dǎo)航欄下拉列表，輪播圖，具體界面效果如下：

?HTML代碼如下：

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Windows | Microsoft Windows 10 家庭版和 Windows 10 專業(yè)版操作系統(tǒng)、筆記本電腦、電腦、平板電腦等內(nèi)容的官方網(wǎng)站</title><link rel="shortcut icon" href="img/19.png"/><link rel="stylesheet" href="css/ms.css" /><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /><link rel="stylesheet" href="css/Footer.css" /><script type="text/javascript" src="js/Surface Pro 6.js"></script><script type="text/javascript" src="js/ms.js" ></script><script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js" ></script></head><body><div class="page"><div class="HeaderBase"><div class="Logo"><a href="#"><img src="img/1.png" /></a></div><div class="VerticalLine">|</div><div class="Surface"><a href="#"><span>Windows</span></a></div><ul class="Choose"><li id="one" onmouseover="showUnderList1()" onmouseout="hidUnderList1()"><a href="#">Windows 10∨</a></li><li id="two" onmouseover="showUnderList2()" onmouseout="hidUnderList2()"><a href="#">設(shè)備∨</a></li><li onmouseover="showUnder3()" onmouseout="hidUnder3()"><a href="#">應(yīng)用</a></li><li onmouseover="showUnder4()" onmouseout="hidUnder4()"><a href="#">游戲</a></li><li onmouseover="showUnder5()" onmouseout="hidUnder5()"><a href="#">面向企業(yè)</a></li><li><a class="Purchase" href="#" style="border: 1px solid;border-radius: 3px;padding: 7px;">購(gòu)買WINDOWS 10</a></li></ul><ul class="Choose-"><li style="font-size: 15px;"><a class="DL">登錄</a></li><li onmouseover="showUnder8()" onmouseout="hidUnder8()"><a href="#">購(gòu)物車</a><span class="fa fa-shopping-cart fa-lg"></span></li><li onmouseover="showUnder7()" onmouseout="hidUnder7()"><a href="#">搜索</a><span class="fa fa-search fa-lg"></span></li><li id="three" onmouseover="showUnder6()" onmouseout="hidUnder6()"><a href="#">所有 Microsoft∨</a></li></ul></div><div id="Under1" onmouseover="showUnderList1()" onmouseout="hidUnderList1()"></div><div id="Under2" onmouseover="showUnderList2()" onmouseout="hidUnderList2()"></div><div id="Under3" onmouseover="showUnder3()" onmouseout="hidUnder3()"></div><div id="Under4" onmouseover="showUnder4()" onmouseout="hidUnder4()"></div><div id="Under5" onmouseover="showUnder5()" onmouseout="hidUnder5()"></div><div id="Under6" onmouseover="showUnder6()" onmouseout="hidUnder6()"></div><div id="Under7" onmouseover="showUnder7()" onmouseout="hidUnder7()"></div><div id="Under8" onmouseover="showUnder8()" onmouseout="hidUnder8()"></div><div id="UnderList1" onmouseover="showUnderList1()" onmouseout="hidUnderList1()"><ul><li id="Pro" onmouseover="changePro()" onmouseout="rechangePro()">獲取 Windows 10 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</li><li id="Laptop" onmouseover="changeLaptop()" onmouseout="rechangeLaptop()">為什么使用Windows 10 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</li><li id="Go" onmouseover="changeGo()" onmouseout="rechangeGo()">功能 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</li><li id="Book" onmouseover="changeBook()" onmouseout="rechangeBook()">Window Maxed Reality &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</li><li id="Studio" onmouseover="changeStudio()" onmouseout="rechangeStudio()">比較Windows 10 的各個(gè)版本&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</li><li><a href="#">規(guī)格</a></li></ul></div><div id="UnderList2" onmouseover="showUnderList2()" onmouseout="hidUnderList2()"><ul><li><a href="#">概述</a></li><li><a href="#">筆記本電腦</a></li><li><a href="#">二合一設(shè)備</a></li><li><a href="#">一體機(jī)</a></li><li><a href="#">游戲電腦</a></li><li><a href="#">Windows Mixed Reality 頭戴顯示設(shè)備</a></li><li><a href="#">Windows Mixed Reality Ready PC</a></li><li><a href="#">手機(jī)</a></li><li><a href="#">查看所有設(shè)備</a></li></ul></div><div id="All" onmouseover="showUnder6()" onmouseout="hidUnder6()"><div class="AllNav"><ul><li><a href="#">Office</a></li><li><a href="#">Windows</a></li><li><a href="#">Surface</a></li><li><a href="#">Xbox</a></li><li><a href="#">支持</a></li></ul></div><div class="All_Nav"><h5>Software</h5><ul><li><a href="#">游戲</a></li><li><a href="#">Onedrive</a></li><li><a href="#">Outlook</a></li><li><a href="#">Skype</a></li><li><a href="#">OneNote</a></li></ul></div><div class="All_Nav"><h5>Pcs & Devices</h5><ul><li><a href="#">Pcs & tablets</a></li><li><a href="#">配件</a></li></ul></div><div class="All_Nav"><h5>Entertainment</h5><ul><li><a href="#">Xbox 與游戲</a></li><li><a href="#">游戲</a></li></ul></div><div class="All_Nav"><h5>Business</h5><ul><li><a href="#">Miscrosoft Azure</a></li><li><a href="#">Microsoft 365</a></li><li><a href="#">Microsoft Industry</a></li><li><a href="#">數(shù)據(jù)平臺(tái)</a></li></ul></div><div class="All_Nav"><h5>Developer & IT</h5><ul><li><a href="#">NET</a></li><li><a href="#">Visual Studio</a></li><li><a href="#">Windows Server</a></li><li><a href="#">開發(fā) Windows 應(yīng)用</a></li><li><a href="#">文檔</a></li></ul></div><div class="All_Nav"><h5>Other</h5><ul><li><a href="#">Microsoft Store</a></li><li><a href="#">免費(fèi)下載與安全性</a></li><li><a href="#">教育</a></li></ul></div></div><div class="b1"></div><div><div class="b2"><div class="b3"><div class="b4"><h1 class="b5">Windows 10 2020 年 10 月更新</h1><p class="b6">為確保更佳體驗(yàn)，更新將在你的電腦做好準(zhǔn)備時(shí)自動(dòng)推送。<sup>*</sup></p><div class="dgj"><a class="b7" href="#">立即更新>     </a><a class="b8" href="#">了解詳細(xì)信息></a></div></div></div></div><div class="b9"><div><img src="img/2.jpg"width="1355"height="508"></div></div><div class="b10"></div><div class="c1"><div class="c2">需要我們幫助你找到哪些內(nèi)容？</div></div><div class="c"></div><div class="c3"><div class="c4"><div class="c5"><img src="img/3.jpg"width="296"height="166"><div class="c6">Windows 10 電腦</div><p>Windows 10 是強(qiáng)大的新一代設(shè)備的佼佼者。</p><div class="c7">購(gòu)買設(shè)備></div></div><div class="c8"><img src="img/4.jpg"width="296"height="166"><div class="c9">Windows 10 操作系統(tǒng)</div><p>總有一款Windows 10適合你-找到適合你的。</p><div class="c10">購(gòu)買WINDOWS 10家庭版></div></div><div class="c11"><img src="img/5.jpg"width="296"height="166"><div class="c12">功能</div><p>享受最新的Windows 10 功能和內(nèi)置的持續(xù)安全性。</p><div class="c13">了解最新版本></div></div><div class="c14"><img src="img/6.jpg"width="296"height="166"><div class="c15">支持</div><p>獲取Windows 10幫助、提示和常見問題解答。</p><div class="c16">WINDOWS 10支持></div></div></div><div class="C17"></div><div class="d1"></div><div><div class="d2"><div class="d3"><div class="d4"><p class="d5">您需要了解有關(guān)Windows 7的知識(shí)</p><p class="d6">在2020 年 1 月 14 日后，Microsoft將不再為運(yùn)行Windows 7 的電腦提供安全更新程序或技術(shù)支持。了解如何為下一步做好準(zhǔn)備。</p><div class="d7"><a class="d8" href="#">了解詳細(xì)信息></a></div></div></div></div><div class="d9"></div><div class="e1"></div><div class="e2"><div class="e3"><div id="myCarousel" class="carousel slide"><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li></ol> <div class="carousel-inner"><div class="item active"><img style="height: 500px;" src="img/7.jpg" alt="First slide"></div><div class="item"><img style="height: 500px;" src="img/8.jpg" alt="Second slide"></div></div><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div><div class="e4"><div class="e6">耀出眾</div><div class="e7">了解 Surface 的新功能。</div><div class="e8"><a href="#">選擇您的SURFACE ></a></div></div></div></div><div class="w1"><div class="w2">購(gòu)買 Windows 10 設(shè)備</div></div><div class="w"></div><div class="w3"><div class="w4"><div class="w5"><img src="img/9.jpg"width="296"height="166"><div class="w6">超薄、輕巧的筆記本電腦</div><p>擁有讓你心動(dòng)的一切特點(diǎn)甚至更多 – 便攜性、高性能以及最新的處理器。</p><div class="w7">購(gòu)買筆記本電腦></div></div><div class="w8"><img src="img/10.jpg"width="296"height="166"><div class="w9">多才多藝的二合一設(shè)備</div><p>二合一設(shè)備兼具強(qiáng)大性能與靈活性。觸控、鍵入、單擊或觸控筆 - 根據(jù)自己的風(fēng)格隨意選擇。</p><div class="w10">購(gòu)買二合一設(shè)備></div></div><div class="w11"><img src="img/11.jpg"width="296"height="166"><div class="w12">臺(tái)式機(jī)和一體機(jī)</div><p>獲得能夠滿足苛刻任務(wù)要求的性能而又不失時(shí)尚風(fēng)格。</p><div class="w13">購(gòu)買臺(tái)式機(jī)></div></div><div class="w14"><img src="img/12.jpg"width="296"height="166"><div class="w15">￥4,000 以下的設(shè)備</div><p>購(gòu)買價(jià)格實(shí)惠的全新 Windows 10 設(shè)備</p><div class="w16">購(gòu)買￥4,000以下設(shè)備></div></div></div><div class="w17"></div><div class="w18"></div><div class="n1"><div class="n2"><img src="img/15.PNG"><div class="n3">Windows預(yù)覽體驗(yàn)計(jì)劃</div></div><div class="n4"><img src="img/16.PNG"><div class="n5">Windows支持</div></div><div class="n6"><img src="img/17.PNG"><div class="n7">Windows博客</div></div><div class="n8"><img src="img/18.PNG"><div class="n9">訪問社區(qū)</div></div></div><div class="n10"></div><div class="n11"><p><sup>*</sup>Windows 10 2018 年 10 月更新通過 Windows 更新自動(dòng)推送。下載完成后，我們會(huì)通知你選擇正確的時(shí)間完成安裝。如果你的 Windows 10 版本已達(dá)到<a href="#">服務(wù)終止</a>，請(qǐng)立即使用<a href="#">更新助手</a>進(jìn)行更新。</p></div><div class="n12"></div><div class="BigFooter"><div class="BigFooterBase"><div class="BigFooterBaseNav"><div class="BigFooterBaseNavList"><h4>新增內(nèi)容</h4><ul><li><a href="#">全新 Surface pro 6</a></li><li><a href="#">全新 Surface Laptop 2</a></li><li><a href="#">全新 Surface Go</a></li><li><a href="#">Xbox One X</a></li><li><a href="#">Xbox One S</a></li><li><a href="#">Windows 10 應(yīng)用程序</a></li></ul></div><div class="BigFooterBaseNavList"><h4>應(yīng)用商店和支持</h4><ul><li><a href="#">帳戶個(gè)人資料</a></li><li><a href="#">下載中心</a></li><li><a href="#">訂單跟蹤</a></li><li><a href="#">支持</a></li></ul></div><div class="BigFooterBaseNavList"><h4>教育</h4><ul><li><a href="#">Microsoft 教育領(lǐng)域</a></li><li><a href="#">適合學(xué)生的 Office</a></li><li><a href="#">適用于學(xué)校的 Office 365</a></li></li><li><a href="#">Microsoft Azure 教育領(lǐng)域</a></li></ul></div><div class="BigFooterBaseNavList"><h4>企業(yè)</h4><ul><li><a href="#">企業(yè)</a></li><li><a href="#">Microsoft Industry</a></li><li><a href="#">數(shù)據(jù)平臺(tái)</a></li><li><a href="#">查找解決方案提供商</a></li><li><a href="#">Microsoft 合作伙伴資源</a></li><li><a href="#">Microsoft AppSource</a></li><li><a href="#">醫(yī)療業(yè)</a></li><li><a href="#">金融服務(wù)</a></li></ul></div><div class="BigFooterBaseNavList"><h4>開發(fā)人員</h4><ul><li><a href="#">Microsoft Visual Studio</a></li><li><a href="#">Windows 開發(fā)人員中心</a></li><li><a href="#">開發(fā)人員網(wǎng)絡(luò)</a></li><li><a href="#">TechNet</a></li><li><a href="#">Microsoft 開發(fā)人員計(jì)劃</a></li><li><a href="#">第9頻道</a></li><li><a href="#">Office 開發(fā)人員中心</a></li></ul></div><div class="BigFooterBaseNavList"><h4>公司</h4><ul><li><a href="#">招賢納士</a></li><li><a href="#">關(guān)于 Microsoft</a></li><li><a href="#">公司新聞</a></li><li><a href="#">Microsoft 隱私</a></li><li><a href="#">投資人</a></li><li><a href="#">安全性</a></li></ul></div></div></div><div class="BigFooterBaseButtom"><div class="BigFooterBaseButtom1"><div class="BigFooterBaseButtom1left"><a href="#" style="color: #616161;"><img src="img/20.PNG" width="24px" height="23px" align="center"/> 中文(中國(guó))</a></div><div class="BigFooterBaseButtom1right"><ul><li><a href="#">與 Microsoft 聯(lián)系</a></li><li><a href="#">隱私與 Cookie</a></li><li><a href="#">使用條款</a></li><li><a href="#">商標(biāo)</a></li><li><a href="#">關(guān)于我們的廣告</a></li><li><a href="#">京ICP備09042378號(hào)-6</a></li><li><a href="#">京公網(wǎng)安備 11010802023178</a></li><li> ? Microsoft 2019</li></ul></div></div></div></div></div></div></div></div></div></body> </html>

CSS代碼如下：

Foot.css

.HeaderBase{padding-left: 5%;padding-right: 0%;width: 95%;height: 54px; }.Logo{float: left;height: 54px;}.Logo a img{padding-top: 14px;height: 38.5px; }.VerticalLine{line-height: 47px;text-align: center;width: 40px;height: 54px;padding-left: 10px;float: left;font-size: 22px; }.Surface{height: 54px;float: left; }.Surface a{text-decoration: none;height: 54px; }.Surface a span{font-size: 18px;line-height: 54px;text-align: center;color: black; }.Choose{height: 54px;float: left;list-style: none; }.Choose li{height: 54px;text-align: center;line-height: 54px;font-size: 13px;padding: 0px 15px;float: left; }.Choose li a{color: #262626;text-decoration: none; }.Purchase:hover{text-decoration:underline; }.Choose-{height: 54px;float: right;list-style: none; }.Choose- li{height: 54px;text-align: center;line-height: 54px;font-size: 13px;padding: 0px 20px;float: right; }.Choose- li a{color: #262626;text-decoration: none; }.Choose- li .DL:hover{color: #0067b8;cursor:pointer; }.Choose- li a{color: #262626;text-decoration: none; }#Under1{height: 2px;width: 83px;background-color: #262626;position: absolute;top: 36px;left: 317px;display: none; }#Under2{height: 2px;width: 27px;background-color: #262626;position: absolute;top: 36px;left: 430px;display: none; }#Under3{height: 2px;width: 33px;background-color: #262626;position: absolute;top: 36px;left: 491px;display: none; }#Under4{height: 2px;width: 30px;background-color: #262626;position: absolute;top: 36px;left: 548px;display: none; }#Under5{height: 2px;width: 60px;background-color: #262626;position: absolute;top: 36px;left: 604px;display: none; }#Under6{height: 2px;width: 90px;background-color: #262626;position: absolute;top: 36px;right: 314px;display: none; }#Under7{height: 2px;width: 30px;background-color: #262626;position: absolute;top: 36px;right: 243px;display: none; }#Under8{height: 2px;width: 40px;background-color: #262626;position: absolute;top: 36px;right: 166px;display: none; }#UnderList1{height: 260px;width: 254px;background-color: #f2f2f2;position: absolute;top: 53px;left: 304px;display: none; }#UnderList2{height: 425px;width: 254px;background-color: #f2f2f2;position: absolute;top: 53px;left: 414px;display: none; }#UnderList1 ul{list-style: none; }#UnderList1 ul:hover{cursor:default; }#UnderList1 ul li a{text-decoration: none;color: #262626; }#UnderList1 ul li a:hover{text-decoration:underline; }#UnderList2 ul{list-style: none; }#UnderList1 ul li{font-size: 13px;color: #262626;padding: 10px 20px; }#one{background-color: white; }#two{background-color: white; }#UnderList2 ul li{font-size: 13px;color: #262626;padding: 14px 17px; }#UnderList2 ul li a{text-decoration: none;color: #262626; }#UnderList2 ul li a:hover{text-decoration:underline; }#UnderList1more{height: 371px;width: 254px;background-color: #e6e6e6;position: absolute;top: 53px;left: 547px;display: none; }#UnderList1more ul{list-style: none; }#UnderList1more ul li a{text-decoration: none;color: #262626; }#UnderList1more ul li a:hover{text-decoration: underline; }#All{width: 1200px;height: 350px;background-color: #f2f2f2;position: absolute;top: 53px;right: 90px;display: none; }.AllNav{width: 100%;height: 43px;border-bottom: 2px;border-style: solid;border-bottom-color: #d3d3d3; }.AllNav ul li{line-height: 43px;text-align: center;padding-left: 30px;padding-right: 40px;font-size: 13px;color: #262626;float: left; }#All a{text-decoration: none;color: #262626; }#All a:hover{text-decoration: underline; }#All ul{list-style: none; }.All_Nav{width: 200px;float: left; }.All_Nav h5{padding-top: 20px;padding-left: 20px;padding-bottom: 20px; }.All_Nav ul li{font-size: 13px;padding-top: 7px;padding-left: 20px;padding-bottom: 20px; }*{margin: 0;border: 0;padding: 0; } .BigFooter{height: 350px;width: 100%;background-color: #f2f2f2; }.BigFooterBase{height: 350px;width: 1200px;margin: 0 auto; }.BigFooterBaseNav{height: 350px;width: 1200px; }.BigFooterBaseNavList{height: 350px;width: 190px;padding-left: 10px;padding-right: 10px;float: left; }.BigFooterBaseNavList h4{font-size: 15px;color: #616161;padding-top: 20px;padding-bottom: 4px; }.BigFooterBaseNavList ul{list-style: none; }.BigFooterBaseNavList ul li{padding: 6px 0px; }.BigFooterBaseNavList ul li a{font-size: 11px;color: #616161;text-decoration: none; }.BigFooterBaseNavList ul li a:hover{text-decoration: underline; }.BigFooterBaseButtom{width: 100%;height: 50px;background-color: #f2f2f2; }.BigFooterBaseButtom1{width: 1200px;height: 50px;margin: 0 auto;color: black;font-size: 15px;line-height: 50px; }.BigFooterBaseButtom1left{width: 30%;float: left;font-size: 11px; }.BigFooterBaseButtom1right{width: 70%;float: right;text-align: left; }.BigFooterBaseButtom1right ul{list-style: none; }.BigFooterBaseButtom1right ul li a{color: #616161;padding-right: 20px;font-size: 11px;text-decoration: none; }.BigFooterBaseButtom1right ul li{color: #616161;font-size: 11px;float: left; }.BigFooterBaseButtom1right ul li a:hover {text-decoration: underline; }

ms.css:

*{margin: 0;padding: 0;border: 0; } /*整個(gè)頁(yè)面*/ .page{width: 100%;height: auto; } /*頁(yè)眉*//*主頁(yè)面*/ .b1{width: 100%;height: 48px;} .b2{width: 100%;height: 205px; } .b3{width: 100%;height: 205px; } .b4{width: 1000px;height: 205px;margin: auto; } .b5{font-size: 62px;line-height: 78px;padding: 38px 10 6px;font-weight: 100;letter-spacing: 5px;text-align: center; } .b6{text-align: center;font-size: 18px;line-height: 28px;padding: 25px 0 3px;font-weight: 200;letter-spacing: -.01em; } .dgj{width: 1000px;height: 68px; } .b7{width: 60px;height: 19px;line-height: 36px;cursor: pointer;text-decoration: none;color: #0067B8;margin-left: 380px;font-weight: 400; } .b8{width: 60px;height: 19px;line-height: 36px;cursor: pointer;text-decoration:none;color: #0067B8;font-weight: 400; } .b9{width: auto;height: 508px;margin-left: 80px; } .b10{width: auto;height: 85px;border-bottom:1px solid #ccc;margin-left: 80px;margin-right: 80px; } /*第二塊*/ .c1{width: auto;height: 143px; } .c2{width: 1000px;height: 59px;font-size: 46px;line-height: 56px;margin-left: 280px;text-align: center;font-weight: 100;padding-top: 80px; } .c{width: auto;height: 85px; } .c3{width: auto;height: 322px; } .c4{width: 1306px;height: 320px;margin-left: 120px; } /*一*/ .c5{width: 320px;height: 320px;text-align: center; float: left; } .c6{width: 296px;height: 44px;font-size: 24px;line-height: 24px; } .c7{width: 94px;height: 44px;margin-top: 20px;margin-left: 110px;cursor: pointer;color: #0067B8;} /*二*/ .c8{width: 320px;height: 320px;text-align: center; float: left; } .c9{width: 296px;height: 44px;font-size: 24px;line-height: 24px;} .c10{width: 210px;height: 44px;margin-top: 20px;margin-left: 50px;cursor: pointer;color: #0067B8; } /*三*/ .c11{width: 320px;height: 320px;text-align: center; float: left; } .c12{width: 296px;height: 44px;font-size: 24px;line-height: 24px;} .c13{width: 210px;height: 44px;margin-top: 20px;margin-left: 50px;cursor: pointer;color: #0067B8; } /*四*/ .c14{width: 320px;height: 320px;text-align: center; float: left; } .c15{width: 296px;height: 44px;font-size: 24px;line-height: 24px;} .c16{width: 210px;height: 44px;margin-top: 20px;margin-left: 50px;cursor: pointer;color: #0067B8; } .C17{width: auto;height: 49px;border-bottom:1px solid #ccc;margin-left: 80px;margin-right: 80px; } /*第三塊*/ .d1{width: 100%;height: 48px; } .d2{width: 100%;height: 205px; } .d3{width: 100%;height: 205px; } .d4{width: 1000px;height: 205px;margin: auto;} .d5{width: 587px;height: 40px;text-align: center;font-size: 36px;line-height: 54px;font-weight: 300;margin-left: 205px; } .d6{width: 587px;height: 76px;text-align: center;font-size: 18px;line-height: 28px;padding: 25px 22px 3px;font-weight: 200;letter-spacing: -.01em;margin-left: 200px; } .d7{width: 1000px;height: 68px; }.d8{margin-left: 430px;width: 90px;height: 19px;line-height: 36px;cursor: pointer;text-decoration:none;color: #0067B8; } .d9{width: auto;height: 49px;border-bottom:1px solid #ccc;margin-left: 80px;margin-right: 80px;} /*第四塊*/ .e1{width: auto;height: 84px;} .e2{width: auto;height: 650px;margin-left: 20px;} .e3{margin-left: 80px; }/*切換*/.e4{width: 1333px;height: 150px;}.e6{width: 1333px;height: 50px;text-align: center;font-size: 35px;margin-top: 20px; } .e7{width: 1333px;height: 50px;text-align: center;font-size: 20px; } .e8{width: 1333px;height: 50px;text-align: center;font-size: 20px;color: #0067B8;cursor: pointer; } /*重復(fù)*/ .w1{width: auto;height: 143px; } .w2{width: 1000px;height: 59px;font-size: 46px;line-height: 56px;margin-left: 280px;text-align: center;font-weight: 100;padding-top: 80px; } .w{width: auto;height: 85px; } .w3{width: auto;height: 322px; } .w4{width: 1306px;height: 320px;margin-left: 120px; } /*一*/ .w5{width: 320px;height: 320px;text-align: center; float: left; } .w6{width: 299px;height: 44px;font-size: 24px;} .w7{width: 110px;height: 44px;margin-top: 20px;cursor: pointer;color: #0067B8;} /*二*/ .w8{width: 320px;height: 320px;text-align: center; float: left; } .w9{width: 296px;height: 44px;font-size: 24px;line-height: 24px;} .w10{width: 210px;height: 44px;margin-top: 20px;margin-left: -37px;cursor: pointer;color: #0067B8; } /*三*/ .w11{width: 320px;height: 320px;text-align: center; float: left; } .w12{width: 296px;height: 44px;font-size: 24px;line-height: 24px;} .w13{width: 210px;height: 44px;margin-top: 20px;margin-left: -45px;cursor: pointer;color: #0067B8; } /*四*/ .w14{width: 320px;height: 320px;text-align: center; float: left; } .w15{width: 296px;height: 44px;font-size: 24px;line-height: 24px;} .w16{width: 210px;height: 44px;margin-top: 38px;margin-left: 10px;cursor: pointer;color: #0067B8; } .w17{width: auto;height: 49px;text-decoration overline:1px solid #ccc;margin-left: -37px;margin-right: 80px; } .w18{width: auto;height: 60px;border-top:1px solid #ccc;margin-left: 80px;margin-right: 80px;} /*最后塊*/ .n1{width: auto;height: 160px;border-bottom:1px solid #ccc;margin-left: 7px;margin-right: 80px; } .n2{width: 50px;height: 50px;margin-left: 200px;margin-top: 30px; } .n3{width: 155px;height: 28px;margin-left: -27px;margin-top: 30px;float: left;text-decoration:underline;color: #0067B8;cursor: pointer; } .n4{width: 50px;height: 50px;margin-left: 550px;margin-top: -50px; } .n5{width: 155px;height: 28px;margin-left: -8px;margin-top: 30px;color: #0067B8;text-decoration:underline;cursor: pointer; } .n6{width: 50px;height: 50px;margin-left: 900px;margin-top: -50px; } .n7{width: 155px;height: 28px;margin-left: 3px;margin-top: 30px;color: #0067B8;text-decoration:underline;cursor: pointer; } .n8{width: 50px;height: 50px;margin-left: 1200px;margin-top: -50px; } .n9{width: 155px;height: 28px;margin-left: 13px;margin-top: 30px;color: #0067B8;text-decoration:underline;cursor: pointer; } .n10{width: auto;height: 84px;margin-left: 80px; } .n11{width: auto;height: 64px;background-color: #333;padding-top: 20px;text-align: center;font-size: 11px;line-height: 16px;font-weight: 400;color: white; } .n12{width: auto;height: 100px; } /*結(jié)尾*/ .BigFooter{height: 350px;width: 100%;background-color: #f2f2f2; }.BigFooterBase{height: 350px;width: 1200px;margin: 0 auto; }.BigFooterBaseNav{height: 350px;width: 1200px; }.BigFooterBaseNavList{height: 350px;width: 180px;padding-left: 10px;padding-right: 10px;float: left; }.BigFooterBaseNavList h4{font-size: 15px;color: #616161;padding-top: 20px;padding-bottom: 4px; }.BigFooterBaseNavList ul{list-style: none; }.BigFooterBaseNavList ul li{padding: 6px 0px; }.BigFooterBaseNavList ul li a{font-size: 11px;color: #616161;text-decoration: none; }.BigFooterBaseNavList ul li a:hover{text-decoration: underline; }.BigFooterBaseButtom{width: 100%;height: 50px;background-color: #f2f2f2; }.BigFooterBaseButtom1{width: 1200px;height: 50px;margin: 0 auto;color: black;font-size: 15px;line-height: 50px; }.BigFooterBaseButtom1left{width: 30%;float: left;font-size: 11px; }.BigFooterBaseButtom1right{width: 70%;float: right;text-align: left; }.BigFooterBaseButtom1right ul{list-style: none; }.BigFooterBaseButtom1right ul li a{color: #616161;padding-right: 20px;font-size: 11px;text-decoration: none; }.BigFooterBaseButtom1right ul li{color: #616161;font-size: 11px;float: left; }.BigFooterBaseButtom1right ul li a:hover {text-decoration: underline; }.bg{background-color: red; }

總結(jié)

以上是生活随笔為你收集整理的web前端网页界面/css 仿微软官网界面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： IDEA切换使用的语言
下一篇：【jquery】基于 jquery 实现