abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style > &nb
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style > /******************* 頭部樣式開始 ******************/ .header { /* 參考色塊,上線時應(yīng)該刪除或替換 */ /*background-color: lightgray;*/ background-color: black; } /*頭部內(nèi)容區(qū)*/ .header .content { /* 頭部內(nèi)容區(qū),應(yīng)該居中顯示,所有要有寬度 */ width: 1000px; height: 60px; /* 參考色塊 */ background-color: black; /* 上下外邊距為0,左右自動居中 */ /* 因為上下相等,左右也相等,所以可以簡寫為: margin: 0 auto; */ margin: 0 auto; } /*頭部內(nèi)容區(qū)中的導航*/ .header .content .nav { /* 清空導航UL元素的默認樣式 */ margin-top: 0; margin-bottom: 0; padding-left: 0; /*如果記不住究竟要清空哪些,可以粗暴點:margin:0;padding:0;*/ } /*頭部導航中的列表項樣式*/ .header .content .nav .item { list-style-type: none; } /*頭部導航中的鏈接樣式: 重點*/ .header .content .nav .item a { /* 一定要將浮動設(shè)置到鏈接標簽<a>上面,否則無法實現(xiàn)導航區(qū)的點擊與高亮 */ float: left; /* 設(shè)置最小寬度與最小高寬,以適應(yīng)導航文本的變化 */ min-width: 80px; min-height: 60px; /* 設(shè)置行高與頭部區(qū)塊等高,使導航文本可以垂直居中顯示 */ line-height: 60px; color: white; /* 設(shè)置民航文本的左右內(nèi)邊距,使導航文本不要挨的太緊 */ padding: 0 15px; /* 去掉鏈接標簽?zāi)J的下劃線 */ text-decoration: none; /* 讓導航文本在每一個小區(qū)塊中居中顯示 */ text-align: center; } .header .content .nav .item a:hover { /* 當鼠標移入到導航鏈接上時改變背景色與文本前景色,實現(xiàn)當前導航高亮功能 */ background-color: red; /* 將導航文本設(shè)置為系統(tǒng)根字體大小的1.2倍 */ font-size: 1.1rem; } /******************* 頭部樣式結(jié)束 ******************/ /*右側(cè)內(nèi)容區(qū)*/ .container { width: 1000px; margin: 5px auto; /* 參考色塊: 整個主體容器是灰色背景 */ /*background-color: lightgray;*/ /*包住浮動的子元素*/ overflow: hidden; } .wrap { width: inherit; min-height: 800px; /*參考背景色*/ /*background-color: cyan;*/ } /* 左邊欄樣式 */ .left { width: 280px; min-height: 800px; /*background-color: lightcoral;*/ } .wrap, .left { float: left; } .left { margin-left: -100%; } .main { padding-left: 300px; /*padding-right: 280px;*/ /*添加主體邊框*/ /*border: 1px solid #444444;*/ } .main h3 { margin: 10px auto; text-align: center; border-bottom: 1px solid; } .about_me{ line-height: 50px; padding-left:200px; color: springgreen; font-size:26px; } .main .about_me dt{ /*讓dt和dd在同一行*/ float: left; } /*左側(cè)樣式*/ .left h3 { margin: 10px auto; text-align: center; border-bottom: 1px solid; } .left ul { margin: 0; padding: 0; list-style: none; } .left li a { display: inline-block; width: 100%; height: 50px; background-color: black; color: white; text-decoration-line: none; line-height: 50px; text-align: center; } .left li a:hover { background-color: red; font-size: 1.1em; } /******************* 底部樣式開始 ******************/ /* 底部與頭部的基本樣式類似 */ .footer { /*background-color: lightgray;*/ } .footer .content { width: 1000px; height: 60px; background-color: #444; margin: 0 auto; } .footer .content p { text-align: center; line-height: 60px; } .footer .content a { text-decoration: none; color: lightgrey; } /* 鼠標移入時顯示下劃線并加深字體前景色 */ .footer .content a:hover { color: white; } /******************* 底部樣式結(jié)束 ******************/ </style> <title>聯(lián)系我們</title> </head> <body> <!-- 頭部 --> <div class="header"> <div class="content"> <ul class="nav"> <li class="item"><a href="index.html">首頁</a></li> <li class="item"><a href="news.html">公司新聞</a></li> <li class="item"><a href="products.html">最新產(chǎn)品</a></li> <li class="item"><a href="about.html">關(guān)于我們</a></li> <li class="item"><a href="contact.html">聯(lián)系我們</a></li> </ul> </div> </div> <!-- 中間主體 --> <div class="container"> <!-- banner圖--> <div class="banner"> <img src="static/images/banner.jpg" alt=""> </div> <!-- 1. 中間內(nèi)容區(qū)塊 --> <div class="wrap"> <div class="main"> <h3>聯(lián)系我們</h3> <div class="about_me"> <dl> <dt>電話：</dt> <dd>+86-010-56778899</dd> <dt>手機：</dt> <dd>+86-13801090876321</dd> <dt>地址：</dt> <dd>北京市通州區(qū)京沈高速旁</dd> <dt>微信：</dt> <dd>與手機號相同</dd> </dl> </div> </div> </div> <!-- 2. 左側(cè)分為上下二 --> <div class="left"> <h3>欄目</h3> <div class="category"> <ul> <li><a href="">公司新聞</a></li> <li><a href="">最新產(chǎn)品</a></li> <li><a href="">關(guān)于我們</a></li> <li><a href="">聯(lián)系我們</a></li> </ul> </div> </div> </div> <!-- 底部 --> <div class="footer"> <div class="content"> <p> <a href="">? PHP中文網(wǎng)版權(quán)所有</a> | <a href="">0551-88889999</a> | <a href="">皖I(lǐng)CP2016098801-1</a> </p> </div> </div> </body> </html>
Correcting teacher：查無此人Correction time：2019-07-09 14:54:26
Teacher's summary：完成的不錯。代碼下次復制過來不正常，可以上傳圖片。繼續(xù)加油。