search

博客列表 >CSS浮动地位与布局实战-2019年1月15日 20:00

CSS浮动地位与布局实战-2019年1月15日 20:00

小淇的博客
小淇的博客原创
2019年01月21日 09:50:51669浏览

这是一段完整的HTML实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
/* 标签选择器 */
ul  {
border: 1px solid red;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
overflow: hidden;
}

/* 层级选择器 */
ul li {
list-style-type: none;
width: 40px;
height: 40px;
background-color: wheat;
float: left;
border-radius: 50%;
text-align: center;
line-height: 40px;
box-shadow: 2px 2px 1px #888;
margin-left: 10px;
}

/* id选择器 */
#bg-blue {
background-color: lightblue;
}

/* class选择器 */
.bg-green {
background-color: lightgreen;
}

/* 属性选择器 */
li[id="bg-blue"] {
border: 2px solid red;
}

/* 群组选择器 */
#bg-blue,.bg-green{
border:2px solid blue;
}

/* 相邻选择器 */
#bg-blue + *{
background-color: yellow;
}

/* 兄弟选择器 */
/* #bg-blue ~ * {
    background-color: yellow;
} */

/* 伪类：子元素选择器 */
ul :first-child  {
background-color: coral;
}

ul :last-child   {
background-color: coral;
}

ul :nth-child(6)   {
background-color: coral;
}

ul :nth-last-child(3)   {
background-color: coral;
}

ul li:last-of-type  {
background-color: darkorchid;
}

ul li:first-of-type{
background-color: darkorchid;
}

/* 选中每个div中的第二个子元素 */
div :nth-child(2){
/* background-color: lightgreen; */
}

/* 如果只想选中西门大官人 */
div:first-of-type :nth-child(3){
/* background-color: lightgreen; */
}

p:nth-of-type(2){
background-color: yellow;
}

form :enabled{
background-color:wheat;
}
/* 讲单选按钮中的文本前景色设置为红色，使用了伪类和相邻选择器 */
form :checked + * {
color: red;
}

form :focus{
background-color: lightgreen;
}

button:hover{
background-color: lightgreen;
height: 28px;
width: 56px;
background-color: black;
color: white;
}

form :invalid{
background-color: red;
}
</style>
<body>
    <!-- 基本的选择器 -->
    <ul>
        <li class="bg-green">1</li>
        <li id="bg-blue">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <div>
        <p>猪哥</p>
        <li>朱老师</li>
        <p>西门大官人</p>
    </div>

    <div>
        <p>灭绝师太</p>
        <li>韦小宝</li>
    </div>

    <!-- 演示表单选择器 -->
    <form action="">
        <label for="emali">邮箱：</label>
        <input type="email">

        <label for="password">密码：</label>
        <input type="password">
        <br>

        <input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
        <input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>

        <button>登陆</button>
    </form>
</body>
</html>

运行实例 »

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

常用的基本选择器：

实例

<form action="">
        <label for="emali">邮箱：</label>
        <input type="email">

        <label for="password">密码：</label>
        <input type="password">
        <br>

        <input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
        <input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>

        <button>登陆</button>
    </form>

    表单选择器：

        <form> 元素：每个表单都对应一个<form></form>标签    表单内所有元素都写在 <form></form>里面；

            属性：

                action属性  规定了 提交的地址 action=“网址”

                Method属性  规定了两种 提交方式 ：  

                    method=“get”   传值有长度限制   能看到传值内容

                    method=“post” 没有长度限制    不能看到传值内容

        <input> 元素：是最重要的表单元素；

            属性：

                text属性定义文本输入。

                radio属性定义安萱按钮输入。

                submit属性定义按钮（提交表单）。

        

        <fieldset> 元素组合表单中的相关数据

        <legend> 元素为 <fieldset> 元素定义标题。


实例

/* 标签选择器 */
ul    {
    border: 1px solid red;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    overflow: hidden;
}

    标签选择器：使用标签名称作为选择器选中标签设置样式


实例

/* 层级选择器 */
ul li {
    list-style-type: none;
    width: 40px;
    height: 40px;
    background-color: wheat;
    float: left;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    box-shadow: 2px 2px 1px #888;
    margin-left: 10px;
}

    层级选择器：通过html的dom元素间的层次关系获取元素，主要层次关系有 后代、父子、相邻兄弟和通用兄弟。


实例

/* id选择器 */
#bg-blue {
    background-color: lightblue;
}

    id选择器：标签中利用ID属性进行设置，在样式表中，  #ID{设置样式}

            特点：一个标签有且只有一个ID，且不能重名


实例

/* class选择器 */
.bg-green {
    background-color: lightgreen;
}

    类选择器：在标签中利用class属性设置在样式表中  .类型名{设置样式}

特点：相当于给标签起了一个别名可以重名。也可以有多个名称


    

实例

/* 属性选择器 */
li[id="bg-blue"] {
    border: 2px solid red;
}

    属性选择器：可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性


实例

/* 群组选择器 */
#bg-blue,.bg-green{
    border:2px solid blue;
}

    群组选择器：同时对几个选择器进行相同的操作


实例

/* 相邻选择器 */
#bg-blue + *{
    background-color: yellow;
}

    相邻选择器


实例

/* 兄弟选择器 */
/* #bg-blue ~ * {
    background-color: yellow;
} */

    兄弟选择器

相邻兄弟选择器： li【1】 + li【2】, 选中的仅是一个元素。同级并且li的后面。（很少用）


实例

/* 伪类：子元素选择器 */
ul :first-child  {
    background-color: coral;
}

    伪类选择器：

    兄弟伪类：

    +：获取当前元素的相邻的满足条件的元素

    -：获取当前元素的满足条件的兄弟元素

        1-a:hover/a:link/a:active/a:visited

        2-以某元素对于其父元素或兄弟元素的位置来获取元素的结构伪类

            1.1- a:first-child:查找某元素的父元素第一个子元素E

            1.2- a:lastchild：最后一个子元素

            1.3- a：nth-child（n）：第n个子元素，计算方法是a元素的全部兄弟元素

            1.4- a：nth-last-child（n）：第n个子元素，倒着计算

            1.5- a:nth-child（even）：所有偶数

            1.6- a：nth-child（odd）：所有奇数



实例

注意：图片没有上传上去

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="static/css/style02.css">
<style>
body{
height: 2000px;
}
.box{
/* 宽度300px */
width: 300px;
/* 高度300px */
height: 300px;
/* 内边距10px */
padding: 10px;
/* 边框 */
border: 5px dashed black;
/* 背景颜色 */
background-color: cyan;
/* 图片链接 */
background-image: url(../images/bg.jpg);

background-repeat: no-repeat;

background-position: left top;

background-position: 10% 20%;

background-attachment: fixed;

background: yellow url(../images/bg.jpg) no-repeat left bottom;

background-image:none;

background-image:url(../images/bg.jpg),url(../images/bg1.jpg);

background-position: left bottom,right top;
background-image: none;
background-image: url(../images/bg.jpg);

background-size: 120px 80px;

background-size: contain;
background-size: cover;

background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

运行实例 »

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

背景：

1.基本设置

    （1）.background-color：背景色

    （2）.backgorund-image：背景图片

    （3）.background-repeat：重复方向

    （4）.background-position：背景定位

    （5）.background-attachment：滚动方式

简写顺序：背景色 背景图片 重复方向 背景定位 滚动方式

2.css3背景新特征

    （1）.background-img：多背景设置

    （2）.background-size：背景图片尺寸

    （3）.background-clip：背景绘制区域


内边距实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.TP{
height: 165px;
width: 140px;
background-color: red;
text-align: center;
line-height: 140px;
}
.box1{
width: 300px;
height: 300px;
background-color: lightgreen;

padding: 50px;
}
/* 解决方案1.只需要将盒子的大小，根据padding进行调整 */
/* 现在宽/高=原宽/高-padding*2 */
.box1{
width: 200px;
height: 200px;
}
/* 解决方案2.改变dom结构，将盒子的宽高与内边距设置分离 */
/* 先将盒子大小复位，内边距清零 */
.box1{
width: 300px;
height: 300px;
padding: 0;
}
/* 宽高分离 */
.box2{
padding: 50px;
}
/* 分析
第一种方案dom结构简单，但是要修改原盒子大小
第二种方案不需要修改原盒子大小，但需要在盒子与内容之间增加一个容器
增加了一个纯属结构性的dom元素
所以，各有利弊，在开发中，根据实际情况斟酌 */
</style>
</head>
<body>
<!-- 将图片在容器中居中显示 -->
<div class="box1">
<div class="box2">
<div class="TP">图片</div>
</div>
</div>
</body>
</html>

运行实例 »

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

解决方案1：只需要将盒子的大小，根据padding进行调整 ， 现在宽/高=原宽/高-padding*2

实例

.box1{
    width: 200px;
    height: 200px;
}

解决方案2：改变dom结构，将盒子的宽高与内边距设置分离 ， 先将盒子大小复位，内边距清零 

实例

.box1{
    width: 300px;
    height: 300px;
    padding: 0;
}
.box2{
    padding: 50px;
}

外边距实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box1{
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: lightcoral;

    margin-top: 30px
}

.box1{
    margin-bottom: 50px;
}
.box2{
    margin-top: 80px;
}

.box3{
    width: 200px;
    height: 200px;
    background-color: lightblue;
}
.box4{
    width: 100px;
    height: 100px;
    background-color: lightcoral;
}
.box3{
    padding-top: 50px;
    height: 150px;
}

/* 自动挤压 */
.box5{
    width: 100px;
    height: 100px;
    background: lightcoral;
}
.box5{
    margin-left: 100px;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
}
    </style>
</head>
<body>
    <!-- 1.同级塌陷
    2.嵌套传递
    3.自动挤压 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <hr>
    <div class="box3">
            <div class="box4"></div> 
    </div>
    <hr>
    <div class="box5"></div>
</body>
</body4
</html>

运行实例 »

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

同级塌陷实例

.box1{
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: lightcoral;

    margin-top: 30px
}


嵌套传递实例

.box3{
    width: 200px;
    height: 200px;
    background-color: lightblue;
    padding-top: 50px;
    height: 150px;
}
.box4{
    width: 100px;
    height: 100px;
    background-color: lightcoral;
}

自动挤压实例

.box5{
    width: 100px;
    height: 100px;
    background: lightcoral;
}
.box5{
    margin-left: 100px;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
}


浮动实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box1{
    width: 150px;
    height: 150px;
    background-color: lightblue;
    /* 左浮动脱离文档流，后面的区块自动前移占据了它的空间 */
    float: left;
}
.box2{
    width: 180px;
    height: 180px;
    background-color: lightcoral;
    float: left;
    /* 第二个珊瑚色区块浮动后,相当于浮动元素组成的文档流中
    所以,它碰到前一个浮动元素后就停止了向左浮动,排到了前一个浮动元素的右边 */
}
.box3{
    width: 200px;
    height: 200px;
    background-color: lightgreen;
    /* 向右浮动,直到碰到浏览器窗口右边框为止,当窗口宽度缩小到不能容纳它时自动掉到第二排 */
    float: right;
}
.box4{
    height: 100px;
    background-color: lightgray;
    clear: both;
}
    </style>
</head>
<body>
<!-- 1.文档流：html元素默认按照书写的顺序在浏览器中，遵循从左到右，从上到下排列
2.布局前提：通过先将元素从文档流中脱离，这样才能随心所欲的操作
3.元素脱离文档流的手段：浮动和绝对定位   -->

<!-- 浮动地基本原理 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

运行实例 »

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

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

左浮动

float：left；

右浮动

float：right；

清除浮动

float：clear；


-----------------------------------------------------------------------------------------------------

 定位:将元素在页面中重新排列,分为四类

    1.静态定位:浏览器默认方式(文档流)
    2.相对定位:元素并未脱离文档流,只是相对于它原来的位置,做相对移动
    3.绝对定位:元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高
    4.固定定位:始终相对于浏览器的窗口做定位父级,进行定位 


相对定位实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box1{
    width: 150px;
    height: 150px;
    background-color: lightblue;
    position: relative;
    margin-left: 150px;
    /* 第一个区块向右移动150px */
}
.box2{
    width: 150px;
    height: 150px;
    background-color: lightgray;
    /* 第二个区块不需要移动 */
}
.box3{
    width: 150px;
    height: 150px;
    background-color: lightgreen;
    position: relative;
    left: 300px;
    top: -150px
    /* 第三个区块向右移动300px,向上移动150px */
}
.box4{
    width: 150px;
    height: 150px;
    background-color: lightcoral;
    position: relative;
    left: 150px;
    top: -300px;
    /* 第四个区块向右移动150px,向上移动300px */
}
.box5{
    width: 150px;
    height: 150px;
    background-color: lightseagreen;
    position: relative;
    left: 150px;
    top: -300px
    /* 第四个区块向右移动150px,向上移动300px */
}
    </style>
</head>
<body>

    <!-- 相对定位小案例:在页面中创建一个彩色的十字架 -->

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>
</html>

运行实例 »

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


绝对定位实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .parent{
    /* 定位父级一定要有定位属性 */
    position: relative;
    border: 1px solid gray;
    width: 450px;
    height: 450px;
}
.box1{
    width: 150px;
    height: 150px;
    background-color: lightblue;
    position: absolute;
    left: 150px;
}
.box2{
    width: 150px;
    height: 150px;
    background-color: lightgray;
    position: absolute;
    top: 150px;
}
.box3{
    width: 150px;
    height: 150px;
    background-color: lightgreen;
    position: absolute;
    left: 300px;
    top: 150px;

}
.box4{
    width: 150px;
    height: 150px;
    background-color: lightcoral;
    position: absolute;
    left: 150px;
    top: 150px;

}
.box5{
    width: 150px;
    height: 150px;
    background-color: lightseagreen;
    position: absolute;
    left: 150px;
    top: 300px;
}
    </style>
</head>
<body>
    <!-- 绝对定位小案例:在页面中创建一个彩色的十字架 -->
    <div class="parent">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>   
    </div>
</body>
</html>

运行实例 »

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

绝对定位实现遮罩实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
    margin: 0;
    background-image: url(../images/php.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.shade{
    /* 遮罩绝对定位,并且自动伸展到整个窗口 */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    background-color:black;
    opacity: 0.7;  
}
.login{
    background-color: white;
    /* 登陆窗口不是随窗口大小变化,说明它不是文档流中,是绝对定位 */
    position: absolute;
    /* 使登陆窗口中页面的正中间位置开始显示,注意是显示的起点在正中间 */
    left: 50%;
    top: 50%;

    margin-left: -190px;
    margin-top: -230px;
}
.login img{
    width: 380px;
    height: 460px;
}
    </style>
</head>
<body>
   <!-- 模拟php中文网的登陆页面  -->
   <div class="shade"></div>
   <div class="login"><img src="static/images/login.jpg" alt=""></div>
</body>
</html>

固定定位实现广告位实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
    background-color: lightgrey;
    height: 2000px;
}
.ads{
    width: 350px;
    height: 250px;
    background-color: lightblue;

    position: fixed;
    right: 0;
    bottom: 0;
}
.ads button{
    float: right;
    margin-right:20px; 
}
    </style>
</head>
<body>
    <h1>实现广告位</h1>
    <div class="ads">
        <button onclick="this.parentNode.style.display='none'">关闭</button>
        <h2>php中文网第四期线上班</h2>
        <h1>招生进行中</h1>
    </div>
</body>
</html>

运行实例 »

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

布局实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="static/css/style10.css">
    <style>
    .header{
    width: 100%;
    /* 参考色块,上线时应该删除或替换 */
    background-color: lightgray;
}
.header .content{
    /* 头部内容区,应该居中显示,所有要有宽度 */
    width: 1000px;
    height: 60px;
    background-color: lightgreen;
    margin:0 auto;
}

.header .content .nav{
    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: #444;
    font-size: 1.2em;
    padding: 0 15px;
    text-decoration: none;
    text-align: center;
}
.header .content .nav .item a:hover{
    /* 当鼠标移入到导航链接上时改变背景与文本前景色,实现当前导航高亮功能; */
    background-color: #444;
    color: white;
}

.container{
    width: 1000px;
    height: 600px;
    background-color: lightgrey;
    margin: 5 auto;
}

.footer{
    width: 100%;
    background-color: lightgrey;
}
.footer .content{
    width: 1000px;
    height: 60px;
    background-color: lightgreen;
    margin:0 auto;
}
.footer .content p{
    text-align: center;
    line-height: 60px;
}

.footer .content a{
    text-decoration: none;
    color: #777;
}
.footer .content a:hover{
    color: #444;
}
    </style>
</head>
<body>
    <div class="header">
        <div class="content">
            <ul class="nav">
                <li class="item"><a href="http://">首页</a></li>
                <li class="item"><a href="http://">公司新闻</a></li>
                <li class="item"><a href="http://">最新产品</a></li>
                <li class="item"><a href="http://">联系我们</a></li>
            </ul>
        </div>
    </div>
    <!-- 中间主题用一个区块模拟替代 -->
    <div class="container"></div>
    <!-- 底部 -->
    <div class="footer">
        <div class="content">
            <p>
                <a href="">©php中文网版权所有</a>  
                <a href="">0551-88888888999999</a>  
                <a href="">皖icp4545435453-1</a>
            </p>
        </div>
    </div>
</body>
</html>

运行实例 »

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

双飞翼布局实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="static/css/style11.css">
    <style>
    .header{
    width: 100%;
    /* 参考色块,上线时应该删除或替换 */
    background-color: lightgray;
}
.header .content{
    /* 头部内容区,应该居中显示,所有要有宽度 */
    width: 1000px;
    height: 60px;
    background-color: lightgreen;
    margin:0 auto;
}

.header .content .nav{
    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: #444;
    font-size: 1.2em;
    padding: 0 15px;
    text-decoration: none;
    text-align: center;
}
.header .content .nav .item a:hover{
    /* 当鼠标移入到导航链接上时改变背景与文本前景色,实现当前导航高亮功能; */
    background-color: #444;
    color: white;
}




/* 第一步:主体容器设置总宽度,并水平居中 */
.container{
    width: 1000px;
    min-height: 600px;
    background-color: lightgrey;
    margin: 5px auto;
}

/* 第二部:左,右两侧固定宽度,中间区块自适应 */
/* 中间区块宽度设置在它的容器wrap中 */
.wrap{
    width:inherit;
    min-height: inherit;
    background-color: cyan;
}
/* 设置左,右区块的宽度和高度(应为无内容,所以设置了最小高度),并设置参考色块 */
.left{
    width: 200px;
    min-height: 600px;
    background-color: lightcoral;
}
.right{
    width: 200px;
    min-height: 600px;
    background-color: lightgreen;
}
/* 第三步:将中间,左,右区块全部左浮动 */
.wrap, .left, .right{
    float: left;
}
/* 第四部:将left和right拉回到他们正确的位置上 */
/* 通过设置区块的付外边距的方式,实现向相反方向移动区块 */
.left{
    margin-left:-100%;
}
.right{
    margin-left:-200px;
}

/* 现在还有最后一个问题,中间内容去块main没有显示 */
/* 第五步:将中间内容区块main显示出来 */
.main{
    padding-left: 200px;
    padding-right: 200px;
}
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="content">
            <ul class="nav">
                <li class="item"><a href="http://">首页</a></li>
                <li class="item"><a href="http://">公司新闻</a></li>
                <li class="item"><a href="http://">最新产品</a></li>
                <li class="item"><a href="http://">联系我们</a></li>
            </ul>
        </div>
    </div>
    <!-- 双飞翼中间主题 -->
    <div class="container">
    <!-- 创建双飞翼使用的dom结构 -->
        <!-- 必须先创建中间主题区块,确保它优先被渲染出来 -->
        <!-- 中间内容区需要创建一个父级容器进行包裹 -->
        <div class="wrap">
            <div class="main">主题内容区</div>
        </div>
        <div class="left">左侧</div>
        <div class="right">右侧</div>

    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="content">
            <p>
                <a href="">©php中文网版权所有</a>  
                <a href="">0551-88888888999999</a>  
                <a href="">皖icp4545435453-1</a>
            </p>
        </div>
    </div>
</body>
</html>

运行实例 »

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


双飞翼布局能够解决的问题：

1、两边列宽度固定，中间列宽度自适应式布局；

2、中间内容区先被加载。

双飞翼布局的优点：

1、可以实现主要内容区先加载；

2、兼容主流浏览器；

3、布局灵活，改变css即可改变布局方式。


圣杯布局实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局案例3: 圣杯布局</title>
    <link rel="stylesheet" href="static/css/style12.css">
    <style>
    .header {
    /* 通常宽度默认为100% */
    width: 100%;

    /* 参考色块,上线时应该删除或替换 */
    background-color: lightgray;
}

.header .content {
    /* 头部内容区,应该居中显示,所有要有宽度 */
    width: 1000px;
    height: 60px;
    /* 参考色块 */
    background-color: lightgreen;
    /* 上下外边距为0,左右自动居中 */
    margin: 0 auto;
    /* margin: 0 auto的等价语句,注意上右下左的顺序 */
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    /* 因为上下相等,左右也相等,所以可以简写为: margin: 0 auto; */
    
}

.header .content .nav {
    /* 清空导航UL元素的默认样式 */
    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: #444;
    /* 将导航文本设置为系统根字体大小的1.2倍 */
    font-size: 1.2rem;
    /* 设置民航文本的左右内边距,使导航文本不要挨的太紧 */
    padding: 0 15px;
    /* 去掉链接标签默认的下划线 */
    text-decoration: none;
    /* 让导航文本在每一个小区块中居中显示 */
    text-align: center;
}

.header .content .nav .item a:hover {
    /* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */
    background-color: #444;
    color: white;  
}



















/* 使用圣杯布局实现主体部分 */

/* 第一步: 主体容器设置的宽度与中间区块相同,并水平居中 */
.container {
    width: 600px;
    min-height: 600px;
    margin: 5px auto;
    background-color: lightgray;   /* 参考色块 */
}

/* 第二步: 左,右二侧固定宽度,中间区块继承父级container宽度*/

.main {
    width: inherit;
    min-height: 600px;
    background-color: lightcyan;
}

/* 设置左,右区块的宽度和高度(因为无内容,所以设置了最小高度),并设置参考色块 */
.left {
    width: 200px;
    min-height: 600px;
    background-color: lightcoral;
}

.right {
    width: 200px;
    min-height: 600px;
    background-color: lightseagreen
}

/* 第三步:将中间,左,右区块全部左浮动 */ 
/* 因中间区块宽度100%,所以左右会被挤压到下面 */
.main, .left, .right {
    float: left;
}

/* 第四步: 将left和right拉回到中间区块的二边 */
/* 通过设置区块的负外边距的方式,实现向反方向移动区块 */
.left {
    margin-left: -100%;   /* -100%等价于-1000px,将左区块拉回到中间的起点处*/
}
.right {
    margin-left: -200px; /* -200px就正好将右区块上移到中间区块右侧显示 */
}
/* 现在还有最后一个问题,中间内容区块main没有显示出来 */

/* 第五步: 设置容器container内边距给左右区块预留位置 */
.container {
    padding-left: 200px;
    padding-right: 200px;
}

/* 第六步:左右区块使用相对定位,回到正确的位置上 */
.left {
    position: relative;
    left: -200px;
}
.right {
    position: relative;
    left: 200px;
}

















/* 底部与头部的基本样式类似 */
.footer {
    width: 100%;
    background-color: lightgray;
}

.footer .content {
    width: 1000px;
    height: 60px;
    background-color: lightblue;
    margin: 0 auto;
}
.footer .content p {
    text-align: center;
    line-height: 60px;
}

.footer .content  a {
    text-decoration: none;
    color: #777;
}

/* 鼠标移入时显示下划线并加深字体前景色 */
.footer .content  a:hover {
    text-decoration: underline;
    color: #444;
}

    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="content">
            <ul class="nav">
                <li class="item"><a href="">首页</a></li>
                <li class="item"><a href="">公司新闻</a></li>
                <li class="item"><a href="">最新产品</a></li>
                <li class="item"><a href="">联系我们</a></li>
            </ul>
        </div>
    </div>

    <!-- 中间主体 -->
    <div class="container">
        <!-- 创建双飞翼使用的DOM结构 -->

        <!-- 必须先创建中间主体区块,确保它优先被渲染出来 -->
        <!-- 与双飞翼相比, DOM结构更简洁, 不需要为main创建父级容器 -->
        <!-- 中间内容main区块中 -->
        <div class="main">主体内容区</div>

        <!-- 创建左侧边栏区块 -->
        <div class="left">左侧</div>

        <!-- 创建右侧边栏区块 -->
        <div class="right">右侧</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>

运行实例 »

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

圣杯布局的优点：

结构简单，无多余dom层

圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。

            

上一条：jquery三级导航下一条：绝对定位之窗口遮罩-2019年1月15日23点39分
HTML/CSS常用元素
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多