收藏
批改状态：合格
老师批语：
1、固定定位制作QQ在线客-服
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0817作业--固定定位制作QQ在线客-服</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
.box{
position: fixed;
width: 200px;
bottom: 0;
right: 0;
}
.head{
width: 200px;
height: 50px;
background: blue;
color: #ffffff;
text-align: center;
}
.head span{
line-height: 50px;
}
.main{
border:1px solid black;
}
ul{
list-style: none;
margin-top: 20px;
}
ul li{
height: 50px;
margin: auto;
}
li img{
width: 30px;
height: 25px;
vertical-align: middle
}
</style>
</head>
<body>
<div class="box">
<div class="head"><span>在 线 客 服</span></div>
<div class="main">
<ul>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534674947468&di=242d7cdd8f06221a297a4ad6808c032c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb8389b504fc2d5625a7b79a6ec1190ef76c66c0e.jpg" alt=""><a href="">售前咨询</a></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534674947468&di=242d7cdd8f06221a297a4ad6808c032c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb8389b504fc2d5625a7b79a6ec1190ef76c66c0e.jpg" alt=""><a href="">售前咨询</a></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534674947468&di=242d7cdd8f06221a297a4ad6808c032c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb8389b504fc2d5625a7b79a6ec1190ef76c66c0e.jpg" alt=""><a href="">售前咨询</a></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534674947468&di=242d7cdd8f06221a297a4ad6808c032c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb8389b504fc2d5625a7b79a6ec1190ef76c66c0e.jpg" alt=""><a href="">售前咨询</a></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534674947468&di=242d7cdd8f06221a297a4ad6808c032c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb8389b504fc2d5625a7b79a6ec1190ef76c66c0e.jpg" alt=""><a href="">售前咨询</a></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534674947468&di=242d7cdd8f06221a297a4ad6808c032c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb8389b504fc2d5625a7b79a6ec1190ef76c66c0e.jpg" alt=""><a href="">售前咨询</a></li>
</ul>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、图文混排
<html>
<head>
<title>图文混排</title>
</head>
<style>
img { /* 在文本左边 */
float: left;
/* 图片边框的颜色 */
border: 1px solid #000000;
/* 上方与其他元素保持10px */
margin-top: 10px;
/* 下方与其他元素保持10px */
margin-bottom: 10px;
/* 左侧与其他元素保持10px */
margin-left: 10px;
/* 右侧与其他元素保持10px */
margin-right: 10px;
}
</style>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534772434269&di=fc8078c5089736783d881a8dceebe869&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201407%2F05%2F20140705200703_cUE5R.thumb.600_0.jpeg" width="80px;" height="80px;">
CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，CSS实现的图文混排效果可以更加美观的展现页面的结构布局效果，CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
</body>
</html>点击 "运行实例" 按钮查看在线实例
3、双飞冀三列布局
双飞翼布局是玉伯提出来的，始于淘宝UED
如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，left和right则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方.
先要将wrap放在前面，把main内容包含，优先渲染
将wrap、left、right浮动起来脱离文档流
将wrap中width100%充满container把left和right挤走
让left margin-left：-100%拉到最左边
让right margin-left：200px 拉到最右边，这里的像素和right的宽度一致
给main这个块设margin：0 200px；左右挤一挤 ，挤出左右宽的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼实现三列布局</title>
<style>
.header, .footer {
width: 100%;
height: 60px;
background: blue;
}
.content{
width: 1000px;
min-height: 100%;
background: gray;
margin: 0 auto;
text-align: center;
line-height: 60px;
}
.container{
width: 1000px;
margin: auto;
background: yellow;
overflow: hidden;
/*visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示gun动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示gun动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。*/
}
.wrap{
width: 100%;
background: blue;
float: left;
}
.main{
min-height: 600px;
background: wheat;
margin:0 200px;/*左右挤一挤*/
text-align: center;
line-height: 600px;
}
.left{
width: 200px;
min-height: 600px;
background: lightblue;
float: left;
margin-left: -100%;
text-align: center;/*左右居中*/
line-height: 600px;/*垂直居中*/
}
.right{
width: 200px;
min-height: 600px;
background: lightgreen;
float: left;
margin-left:-200px;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">头部</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">主体内容</div><!-- 优先渲染 -->
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="header">
<div class="content">尾部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、圣杯三列布局
圣杯布局是main百分百撑开，中间是自适应，在再中间栏在添加相对定位，并配合left和right属性，看起来就是一个酒杯一样
设定main的width：100%，撑开页面
设定酒杯的两边的把手，设定宽200像素，最小高度min-height
将main，left，right 向左浮动起来
让left margin-left：-100%拉到最左边
让right margin-left：200px 拉到最右边，这里的像素和right的宽度一致
设定父元素container的宽度600像素
用相对定位 position：relative 相对于main 让left向左移动200 让right向右移动200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
.header, .footer {
width: 100%;
height: 60px;
background: blue;
}
.content{
width: 1000px;
min-height: 100%;
background: gray;
margin: 0 auto;
text-align: center;
line-height: 60px;
}
.footer{
clear: both;
}
.container{
width: 600px;
margin: auto;
background: yellow;
}
.main{
width:100%;
min-height: 600px;
background: wheat;
float: left;
}
.left{
width: 200px;
min-height: 600px;
background: lightblue;
float: left;
margin-left: -100%;
position: relative;/*相对定位*/
left: -200px;
}
.right{
width: 200px;
min-height: 600px;
background: lightgreen;
float: left;
margin-left: -200px;
position: relative;/*相对定位*/
right: -200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">头部</div>
</div>
<div class="container">
<div class="main">主体内容</div><!-- 优先渲染 -->
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">
<div class="content">尾部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写：双飞翼与圣杯布局的最大区别在哪里
图片：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
