作业:双飞翼布局

原创2019-07-08 13:45:5611
摘要:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title&
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>双飞翼布局</title>     <style>         body{     width:800px;     min-height: 1000px;     margin: 0 auto;     background-color: lightblue; } .header{     width: inherit;     height: 60px;     background-color: burlywood;     /*取消header上下边的默认margin*/     margin-top: 0;     margin-bottom: 0;     /*取消header内边距左边默认宽度*/     padding-left: 0;     padding-top: 20px; } .header .content {     width: inherit;     height: 40px;     background-color: inherit;     margin: 0 auto; } /*头部内容区中的导航*/ .header .content .nav {     display: table;     margin:0 auto;     padding-left: 0; } .header .content .nav .item {     /*去掉列表前的小圆点*/     list-style-type: none;     /*设置列表为横排显示的块级元素*/     display: inline-block;     /*设置列表项目对于nav横向居中*/     padding: 0 25px;     /*列表项目的边框*/     /*border: 1px solid red;*/     /*background-color: coral;*/     border-radius: 15%;     /*盒子背景的阴影颜色,格式为: x轴  Y轴  Z轴  颜色,且Z轴不能为负数,其他的可以*/     box-shadow:3px 3px 6px blueviolet;     background-color: azure;     /*给每个列表项目一个左右外边距,上下为0,左右各15,才能保证居中显示。*/     margin: 0 15px; } .header .content .nav .item .qq {     color: #ff1473;     /* 去掉链接标签默认的下划线 */     text-decoration: none;     /*设置行高*/     line-height: 40px;     /*设置字体大小*/     /*font-size: 30px;*/     /*设置字符间距为5px*/     letter-spacing:5px; } .header .content .nav .item:hover {     /* 当鼠标移动到字体上将导航item上背景成黄绿色*/     background-color: aquamarine; } .header .content .nav .item .qq:hover {     /* 当鼠标移动到字体上将导航文本设置为系统根字体大小的1.2倍 */     font-size: 1.2rem; } /*------------以下是主体部分-------------*/ .container {     background-color: aquamarine;     width: inherit;     margin: 4px auto;     /*overflow 属性规定当内容溢出元素框时发生的事情。     hidden 内容会被修剪,并且其余内容是不可见的。     也有把float浮动效果消除的效果,把浮动动态页面变成文档流级别。     clear:是清除浮动,注意两者区别*/     overflow: hidden; } .main {     width: inherit;     background-color: blue;     margin:0 auto;     float:left; } .center {     background-color: green;     width:inherit;     min-height: 400px;     margin:0 auto;     /*左右各设置一个left和right的宽度,文本框刚好设置成显示在最中间框内。*/     /*padding-left: 200px;*/     /*padding-right: 200px;*/     padding:0 200px; } .left {     width: 200px;     background-color: yellow;     min-height: 400px;     /*统一往左浮动,浮动-100%刚好到最左边*/     float: left;     margin-left:-100%; } .right {     width: 200px;     background-color: red;     min-height: 400px;     /*统一往左浮动,浮动-200px刚好到最右边*/     float:left;     margin-left: -200px; } /*---------以下是底部------------*/ .foot {     width:inherit;     height: 60px;     background-color: yellowgreen;     /*减小上下外边距-12,按道理只要减少上边距就可以,上边主体上下各给了一个4px,按道理应该同级塌陷*/     margin: -12px auto; } .foot .content {     width:inherit;     height:60px;     margin: 0 auto; } .foot .content p{     text-align: center;     line-height: 60px; } .foot .content p a{     text-decoration: none;     color: dimgray; } .foot .content a:hover {     color: white; }     </style> </head> <body> <div class="header">     <div class="content">     <ul class="nav">         <li class="item"><a class="qq" href="">首页</a> </li>         <li class="item"><a class="qq" href="">新闻</a> </li>         <li class="item"><a class="qq" href="">下载</a> </li>         <li class="item" ><a class="qq" href="">学习</a> </li>         <li class="item"><a class="qq" href="">留言</a> </li>     </ul>     </div> </div> <div class="container">     <div class="main">         <div class="center">中间部位</div>     </div>     <div class="left">左边部分</div>     <div class="right">右边边部分</div> </div> <div class="foot">     <div class="content">         <p>             <a href="">© XXXXXXX版权所有</a>  |              <a href="">0551-88889999</a>  |              <a href="">皖ICP2016098801-1</a>         </p>     </div> </div> </body> </html>


批改老师:欧阳克批改时间:2019-07-09 14:54:01
老师总结:完成的不错。你这一行代码也太长了,需要优化展现格式。继续加油

发布手记

热门词条

第九期线上培训班