作业:下拉列表案例

原创2019-07-08 13:51:4632
摘要:<!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
老师总结:完成的不错。代码下次复制过来不正常,可以上传图片。继续加油。

发布手记

热门词条

第九期线上培训班