收藏
批改状态：合格
老师批语：
在今日课程中,我通过学习使用fiexd完成固定定位，图文混排，以及position的absouble完成绝对定位布局，并且使用双飞翼和圣杯完成简单的布局;
以下是编程代码
1，固定定位完成qq客 服
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现QQ客 服功能</title>
</head>
<style>
.box, .box1{
position: fixed; /* //固定定位*/
right: 0px;
bottom: 0px;
}
.box span{
position: absolute; /*相对父级定位*/
right: 10px;
top: 7px;
}
.box .title:hover{
color: lightcoral;
font-size: 16px;
}
.box1{
display: none;
}
</style>
<body>
<div class="box">
<a href="#">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534620501755&di=763e85715a2e4c5d5f171b75ab6fa563&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fexp%2Fw%3D500%2Fsign%3D447f28caa0014c08193b28a53a7a025b%2F0b46f21fbe096b635b7ffb3305338744ebf8ac6b.jpg" width="180px" height="150px" alt="QQ在线客 服">
</a>
<span class="title" onclick="this.parentNode.style.display='none'">关闭</span>
</div>
<div class="box1" onclick="" >
<img src="http://wpa.qq.com/pa?p=1:2607258553:10" alt="联系我" height="20px">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2，使用图文混排和双飞翼布局，两者一起结合，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
</head>
<style>
body{
margin: 0;
padding: 0;
}
/*所有a标签下划线去掉*/
a{
text-decoration: none;
list-style: none;
}
.header{
background-color: lightcyan;
width: 100%;
}
.footer
{
background-color: #393D49!important;
width: 100%;
height: 85px;
}
.content{
margin: auto;
line-height: 60px;
width: 1800px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.title_content1
{
width: 100%;
height: 40px;
background-color: #f9f9f9;
}
.title_content1 .title_left
{
position: absolute;
font-size: 12px;
left: 20%;
top: 12px;
}
.title_content1 .title_middle
{
position: relative;
margin: auto;
color: #646464;
text-align: center;
top:12px;
font-size: 13px;
}
.title_content1 .title_right
{
position: absolute;
width: 600px;
height: 40px;
right: 230px;
color: #646464;
font-size: 13px;
top:0;
text-align: left;
display: table-cell;
vertical-align: middle;
}
.title_content1 .title_right ul li{
display: inline;
list-style: none;
margin-left: 15px;
}
.title_content1 .title_right ul li a{
color: #646464;
font-size: 13px;
}
.title_content1 .title_right ul li a:hover
{
font-size: 20px;
color: lightcoral;
}
.container
{
width:1000px;
margin: auto;
overflow: hidden;
}
.container .war
{
width: 100%;
background-color: linen;
float: left;
}
.container .war .main
{
min-height: 900px;
background-color: linen;
margin: 0 200px;
}
.container .left
{
width: 200px;
min-height: 900px;
background-color: lightskyblue;
float: left;
margin-left: -100%;
}
.container .right
{
width: 200px;
min-height: 900px;
background-color: lightgrey;
float: left;
margin-left: -200px;
}
.footer
{
clear: both;
}
/*设置内容区域头部搜索框*/
.main-header{
padding-left:65px;
padding-top: 7px;
}
.main-img
{
width: 100%;
}
/*设置内容区域图片显示*/
.main-img ul
{
list-style: none;
height: 172px;
width: 600px;
padding-left:7px;
}
.main-img ul li
{
display: block;
float: left;
margin-left: 2px;
}
ul{
list-style: none!important;
}
/*左边区域显示*/
.left-list
{
width:100%;
}
.left .left-list ul
{
width: 200px;
padding-left: 7px;
}
.left .left-list h4{
margin-top: 2px;
font-weight: normal;
}
.left .left-list p{
margin-top: -16px;
color: gray;
}
.left .left-list span{
line-height: 22px;
float: right;
margin-right: 7px;
color: #35b1ff;
}
.left li
{
padding-top: 2px;
}
/*设置右边*/
.right .right-title ul
{
width: 200px;
padding-left:5px;
}
.right li[class="notic"]
{
float: right;
color: red;
font-size: 15px;
margin-right:23px;
}
.right ol a:hover
{
font-size: 12px;
color: red;
}
.right .bottom {
text-align: center;
margin-bottom: 12px;
}
.right .bottom p
{
font-size:20px ;
color: black;
}
.footer li
{
display: inline;
margin-left: 10px;
}
</style>
<body>
<!--头部-->
<div class="header">
<div class="title_content1">
<!--头部左边内容-->
<div class="title_left">
<a style="color: #646464;" href="javascript:void(0);" id="area_one" class="ddnewhead_area_a" onmouseover="show_area_list();" onmouseout="hidden_area_list();">送至：<span style="color: red" id="curent_area">北京</span></a>
</div>
<!--头部中间内容-->
<div class="title_middle">
<span id="nickname">欢迎光临程新文小窝，请<a dd_name="登录" href="javascript:PageTopLogIn();" target="_self" rel="nofollow" class="login_link">登录</a>
<a style="color: red" dd_name="成为会员" href="javascript:PageTopRegist();" target="_self" rel="nofollw">成为会员</a></span>
</div>
<!--头部右边内容-->
<div class="title_right">
<ul class="ddnewhead_gcard_list" id="__ddnav_bzzx" onmouseover="showgaoji('a_bzzxchannel','__ddnav_bzzx');" onmouseout="hideotherchannel('a_bzzxchannel','__ddnav_bzzx');">
<li><a target="_blank" href="http://help.dangdang.com/index" name="ddkf_2" dd_name="帮助中心">帮助中心</a></li>
<li><a target="_blank" href="http://return.dangdang.com/reverseapplyselect.aspx" name="ddkf_3" dd_name="自助退换货">自助退换货</a></li>
<li><a target="_blank" href="http://order.dangdang.com/InvoiceApply/InvoiceOnlineReissue.aspx" name="tsjy_2" dd_name="自助发票" rel="nofollow">自助发票</a></li>
<li><a target="_blank" href="http://help.dangdang.com/details/page206" name="ddkf_4" dd_name="联系客 服">联系客 服</a></li>
<li><a target="_blank" href="http://help.dangdang.com/details/page206" name="tsjy_1" dd_name="我要投诉" rel="nofollow">我要投诉</a></li>
</ul>
</div>
</div>
</div>
<hr>
<!--主体-->
<div class="container">
<!--主体内容,用容器包住-->
<div class="war">
<div class="main">
<div class="main-header">
<form>
<input type="text" name="sousuo" id="sousuo" placeholder="搜索" style="border: 3px solid red;width: 398px;height: 50px;text-align: center;font-size: 28px">
<label style="font-size: 27px;font-weight: bolder" for="sousuo">搜索</label>
</form>
</div>
<div class="main-img">
<ul>
<li><img src="http://img61.ddimg.cn/2018/8/17/2018081715464859881.jpg" width="192" height="170">
</li>
<li><img src="http://img63.ddimg.cn/2018/8/14/2018081416371817837.jpg" width="192" height="170"></li>
<li><img src="http://img3m7.ddimg.cn/13/26/410263537-1_l_2.jpg" width="192" height="170"></li>
<li><img src="http://img3m5.ddimg.cn/81/23/1462545495-1_l_2.jpg" width="192" height="170"></li>
<li><img src="http://img63.ddimg.cn/2018/8/16/2018081618263537615.jpg" width="192" height="170"></li>
<li><img src="http://img62.ddimg.cn/2018/8/10/201808101321205709.jpg" width="192" height="170"></li>
<li><img src="http://img62.ddimg.cn/upload_img/00629/wenjing/yytxiaotu-3-1534131517.jpg" width="192" height="170"></li>
<li><img src="http://img63.ddimg.cn/upload_img/00054/zzy/xiaohys-1532411664.jpg" width="192" height="170"></li>
<li><img src="http://img63.ddimg.cn/upload_img/00624/19900404/8702-1527240747.jpg" width="192" height="170"></li>
<li><img src="http://img63.ddimg.cn/upload_img/00629/wenjing/yytxiaotu-1-1534131504.jpg" width="192" height="170"></li>
<li><img src="http://img60.ddimg.cn/2018/8/17/2018081718315285355.jpg" width="192" height="170"></li>
<li><img src="http://img60.ddimg.cn/2018/8/17/2018081716263921812.jpg" width="192" height="170"></li>
</ul>
</div>
<hr>
<br>
<h4 style="color: lightpink;">后期我将继续添加***************</h4>
</div>
</div>
<div class="left">
<div class="left-list">
<ul style="width: 200px">
<li><img src="http://img61.ddimg.cn/2018/8/17/2018081715464859881.jpg" width="180px" height="180px" alt="加载失败！"><br>
<h4 class="a-all" id="dg-item-tl-0">Givenchy 舒适休闲长裤</h4>
<p>采用纯棉面料，令穿着干爽更舒适。</p>
<span class="tb-ifont">3人都说好</span>
</li>
<li><img src="//img.alicdn.com/imgextra/i2/1126751661/TB2bqt.EGSWBuNjSsrbXXa0mVXa_!!1126751661-0-daren.jpg_180x180xzq90.jpg_.webp" width="180px" height="180px" alt="加载失败！"><br>
<h4 class="a-all" id="dg-item-tl-0">Givenchy 舒适休闲长裤</h4>
<p>采用纯棉面料，令穿着干爽更舒适。</p>
<span class="tb-ifont">3人都说好</span>
</li>
<li><img src="http://img61.ddimg.cn/2018/8/17/2018081715464859881.jpg" width="180px" height="180px" alt="加载失败！"><br>
<h4 class="a-all" id="dg-item-tl-0">Givenchy 舒适休闲长裤</h4>
<p>采用纯棉面料，令穿着干爽更舒适。</p>
<span class="tb-ifont">3人都说好</span>
</li>
</ul>
</div>
</div>
<div class="right">
<div class="right-title">
<ul>
<li><img src="http://a.dangdang.com/api/data/cpx/img/39530001/1" width="190" height="195"></li>
<li class="notic"><span>信息公告</span></li>
<li class="notic"><span>服务公告</span></li>
<br>
<ol style="padding-left: 10px;font-size: 12px;margin-top: 6px;list-style: none">
<li><a href="http://www.php.cn"></a> 积分支付上线了，直接当钱用！</li>
<li><a href="http://www.php.cn"></a> 男 装四季清仓 跨店满199减120</li>
<li><a href="http://www.php.cn"> 话费卡兑换当当礼品卡</a></li>
<li><a href="http://www.php.cn"> 水孩儿会员日满100减50</a></li>
<li><a href="http://www.php.cn"> php中文网拉拉</a></li>
<li><a href="http://www.php.cn"> 我来自php中文网</a></li>
</ol>
</ul>
<div class="bottom" style="">
<span>联系电话</span>
<p>18357129805</p>
</div>
</div>
</div>
</div>
<!--尾部-->
<div class="footer">
<div class="content">
<div class="footer-title">
<ul>
<li>© 2018 家里蹲-物理系有限公司 版权所有</li>
<li>网站地图</li>
<li>隐私条款</li>
<li>京ICP备09046804号-2</li>
<li>法律声明</li>
<li>京公网安备 11010502035702号</li>
</ul>
</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3,圣杯布局，已掌握基本使用，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
</head>
<style>
.header,.footer{
background-color: lightgray;
width: 100%;
height: 80px;
}
.content{
background-color: gray;
width: 600px;
margin: auto;
min-height: 100%;
text-align: center;
line-height:60px;
}
.container{
width: 1000px;
background-color: lightskyblue;
margin: auto;
}
/*使用伪类清楚浮动影响*/
.container:after
{
content: '';
display: block;
clear: both;
}
.container .main
{
width: 100%;
background-color: lightpink;
min-height: 600px;
float: left;
}
/*左边样式*/
.container .left
{
width: 200px;
background-color: lightseagreen;
min-height: 600px;
float: left;
margin-left: -100%;
position: relative; /*使用相对定位*/
top: 0px;
left: -200px;
}
/*右边样式*/
.container .right
{
width: 200px;
background-color: lime;
min-height: 600px;
float: left;
margin-left: -200px;
top: 0px;
position: relative; /*使用相对定位*/
right: -200px;
}
</style>
<body>
<!--头部-->
<div class="header">
<div class="content">头部</div>
</div>
<div class="container">
<div class="main">主体内容123</div>
<div class="left">左边区域内容</div>
<div class="right">右边边区域内容</div>
</div
<!--底部-->
<div class="footer">
<div class="content">尾部内容添加区域</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以下是手抄代码:
总结：
1,fiexd 固定定位
2,position absouble 相对定位
3,双飞翼布局,使用容器将主体内容包起来，然后使用marging将主体内容挤出来
4,圣杯布局，使用padding将主体内容挤出来
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
