摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style > &nb
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style > /******************* 头部样式开始 ******************/ .header { /* 参考色块,上线时应该删除或替换 */ /*background-color: lightgray;*/ background-color: black; } /*头部内容区*/ .header .content { /* 头部内容区,应该居中显示,所有要有宽度 */ width: 1000px; height: 60px; /* 参考色块 */ background-color: black; /* 上下外边距为0,左右自动居中 */ /* 因为上下相等,左右也相等,所以可以简写为: margin: 0 auto; */ margin: 0 auto; } /*头部内容区中的导航*/ .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 { /* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */ float: left; /* 设置最小宽度与最小高宽,以适应导航文本的变化 */ min-width: 80px; min-height: 60px; /* 设置行高与头部区块等高,使导航文本可以垂直居中显示 */ line-height: 60px; color: white; /* 设置民航文本的左右内边距,使导航文本不要挨的太紧 */ padding: 0 15px; /* 去掉链接标签默认的下划线 */ text-decoration: none; /* 让导航文本在每一个小区块中居中显示 */ text-align: center; } .header .content .nav .item a:hover { /* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */ background-color: red; /* 将导航文本设置为系统根字体大小的1.2倍 */ font-size: 1.1rem; } /******************* 头部样式结束 ******************/ /*右侧内容区*/ .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; } /*左侧样式*/ .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; } /******************* 底部样式结束 ******************/ </style> <title>联系我们</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">最新产品</a></li> <li class="item"><a href="about.html">关于我们</a></li> <li class="item"><a href="contact.html">联系我们</a></li> </ul> </div> </div> <!-- 中间主体 --> <div class="container"> <!-- banner图--> <div class="banner"> <img src="static/images/banner.jpg" alt=""> </div> <!-- 1. 中间内容区块 --> <div class="wrap"> <div class="main"> <h3>联系我们</h3> <div class="about_me"> <dl> <dt>电话：</dt> <dd>+86-010-56778899</dd> <dt>手机：</dt> <dd>+86-13801090876321</dd> <dt>地址：</dt> <dd>北京市通州区京沈高速旁</dd> <dt>微信：</dt> <dd>与手机号相同</dd> </dl> </div> </div> </div> <!-- 2. 左侧分为上下二 --> <div class="left"> <h3>栏目</h3> <div class="category"> <ul> <li><a href="">公司新闻</a></li> <li><a href="">最新产品</a></li> <li><a href="">关于我们</a></li> <li><a href="">联系我们</a></li> </ul> </div> </div> </div> <!-- 底部 --> <div class="footer"> <div class="content"> <p> <a href="">© PHP中文网版权所有</a> | <a href="">0551-88889999</a> | <a href="">皖ICP2016098801-1</a> </p> </div> </div> </body> </html>
批改老师：查无此人批改时间：2019-07-09 14:54:26
老师总结：完成的不错。代码下次复制过来不正常，可以上传图片。继续加油。
