简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >固定定位，图文混排，绝对定位，双飞翼布局，圣杯布局2018/8/17日作业

固定定位，图文混排，绝对定位，双飞翼布局，圣杯布局2018/8/17日作业

cxw的博客
cxw的博客原创
2018年08月19日 16:37:381010浏览

在今日课程中,我通过学习使用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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


以下是手抄代码:

IMG_20180819_163024.jpg

总结：

1,fiexd 固定定位

2,position absouble 相对定位

3,双飞翼布局,使用容器将主体内容包起来，然后使用marging将主体内容挤出来

4,圣杯布局，使用padding将主体内容挤出来


上一条：第四课CSS中常用的选择器+3种案例手抄下一条：盒模型的基本要素及四种元素对齐方案，绝对定位和相对定位 2018-08-16
fixed position属性 margin 实现布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多