CSS浮动定位与布局实战-2019年1月15日22点48分 - HTML/CSS

Home > List of blog posts > CSS浮动定位与布局实战-2019年1月15日22点48分

Blogger Information

Blog 11

fans 0

comment 0

visits 8524

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>0115-job</title>
    <link rel="stylesheet" href="static/css/job.css">

</head>
<body>
    <ul>
        <li class="bg-green">1</li>
        <li id="bg-blue">2</li>
        <li class="bg-green">3</li>
        <li class="bg-green">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

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

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

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

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

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

    <button>登录</button>
</body>
</html>

运行实例 »

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

css代码：

实例

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

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

/* id选择器 */
#bg-blue {
    /* 注意: id也可以给多个元素添加样式,但不要这样做 */
    background-color: lightblue;
}

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

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

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

/* 相邻选择器 */
/* 第2个小球相邻的是第3个小球,可以用li,也可以用* */
#bg-blue + * {
    background-color: yellow;
}

/* 兄弟选择器 */
/* 第2个小球后面的所有同级兄弟元素全部选中 */
#bg-blue ~ * {
    background-color: -yellow;  /* 值前加-,令其失效 */
}

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

ul :last-child {
    /* 因优先级问题,需要把前面的兄弟选择器注释掉 */
    background-color: coral;  /* 最后一个子元素 */
}

ul :nth-child(6) {
    background-color: coral;  /* 第6个子元素 */
}

ul :nth-last-child(3) {
    background-color: coral;  /* 倒数第3个子元素 */
}

/* 伪类: 类型选择器 */
ul li:first-of-type {
    background-color: darkorchid;  /* 第一个li类型的元素 */
}

ul li:last-of-type {
    background-color: darkorchid;  /* 最后一个li类型的元素 */
}

ul li:nth-of-type(6) {
    background-color: darkorchid;  /* 选择第6个li类型的元素 */
}

/* 我们发现, 伪类中的子元素选择器与类型选择器的功能几乎是一样的,那我们应该用哪个呢? */
/* 这二类伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置 */
/* 而类型选择器关注点在 "type" 关键字上,重点是元素的类型 */
/* 下面再通过一个案例,就可以看出区别了, html代码在 "demo02.html" 中 */

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

/* 如果只想选中"西门大官人",应该如何选择呢? */
/* 分析: "西门大官人"是第一个div中的第三个子元素,常规思维应该是这样获取 */
div:first-of-type  :nth-child(3){
    background-color: -lightblue;
}

/* 还可以进一步简化(先让前面的选择失效) */
/* 选择页面中的第二个p元素 */
p:nth-of-type(2) {
    background-color: yellow;
}
/* 思考: 为什么第二个div中的p没有选中? 因为当前div 下面只有一个p */
/* 如果我在第二个div中再添加一个:<p>aaaaa</p>,你会发现也会被选中的 */
/* 注意: 类型伪类选择器应该是我们的首选,尽可能优先使用它 */

/* 如果我要选择只有一个子元素且子元素为p,应该如何做? */
p:only-of-type {
    background-color: pink;
}

/* 伪类: 表单控件 */
form :enabled {
    background-color: wheat;
}

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

/* 当在控件中输入无效值文本自动变成红色 */
form :invalid {
    color: red;
}

/* 设置控件获取到焦点时的样式 */
form :focus {
    background-color: lightgreen;
}

/* 设置鼠标悬停时的样式 */
button:hover {
    width: 56px;
    height: 28px;
    background-color: black;
    color: white;
}

运行实例 »

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

2.双飞翼与圣杯布局任选一个完成

双飞翼造型

html代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼造型</title>
    <link rel="stylesheet" href="sfy.css">

</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">
        <!-- 中间内容 -->
        <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="">025-88880000</a>   |  
                <a href="">苏ICP2222244444-1</a>
            </p>
        </div>
    </div>

</body>
</html>

运行实例 »

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

css代码：

实例

.header {
    width: 100%;
    background-color: lightgray;
}

.header .content {
    width: 1000px;
    height: 60px;

    background-color: lightgreen;

    margin: 0 auto;

    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;


}

.header .content .nav {
    margin: 0;
    padding: 0;
}

.header .content .nav .item {
    list-style-type: none;
}

.header .content .nav .item a {
    float: left;
    min-width: 80px;
    min-height: 60px;

    line-height: 60px;

    color: #444;

    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: 1000px;
    min-height: 600px;

    margin: 5px auto;
    background-color: lightgray;
}

.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: lightseagreen
}

.wrap, .left, .right {
    float: left;
}

.left {
    margin-left: -100%;
}

.right {
    margin-left: -200px;
}

.main {
    padding-left: 200px;
    padding-right: 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;
}

运行实例 »

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

实例

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

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

/* id选择器 */
#bg-blue {
    /* 注意: id也可以给多个元素添加样式,但不要这样做 */
    background-color: lightblue;
}

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

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

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

/* 相邻选择器 */
/* 第2个小球相邻的是第3个小球,可以用li,也可以用* */
#bg-blue + * {
    background-color: yellow;
}

/* 兄弟选择器 */
/* 第2个小球后面的所有同级兄弟元素全部选中 */
#bg-blue ~ * {
    background-color: -yellow;  /* 值前加-,令其失效 */
}

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

ul :last-child {
    /* 因优先级问题,需要把前面的兄弟选择器注释掉 */
    background-color: coral;  /* 最后一个子元素 */
}

ul :nth-child(6) {
    background-color: coral;  /* 第6个子元素 */
}

ul :nth-last-child(3) {
    background-color: coral;  /* 倒数第3个子元素 */
}

/* 伪类: 类型选择器 */
ul li:first-of-type {
    background-color: darkorchid;  /* 第一个li类型的元素 */
}

ul li:last-of-type {
    background-color: darkorchid;  /* 最后一个li类型的元素 */
}

ul li:nth-of-type(6) {
    background-color: darkorchid;  /* 选择第6个li类型的元素 */
}

/* 我们发现, 伪类中的子元素选择器与类型选择器的功能几乎是一样的,那我们应该用哪个呢? */
/* 这二类伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置 */
/* 而类型选择器关注点在 "type" 关键字上,重点是元素的类型 */
/* 下面再通过一个案例,就可以看出区别了, html代码在 "demo02.html" 中 */

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

/* 如果只想选中"西门大官人",应该如何选择呢? */
/* 分析: "西门大官人"是第一个div中的第三个子元素,常规思维应该是这样获取 */
div:first-of-type  :nth-child(3){
    background-color: -lightblue;
}

/* 还可以进一步简化(先让前面的选择失效) */
/* 选择页面中的第二个p元素 */
p:nth-of-type(2) {
    background-color: yellow;
}
/* 思考: 为什么第二个div中的p没有选中? 因为当前div 下面只有一个p */
/* 如果我在第二个div中再添加一个:<p>aaaaa</p>,你会发现也会被选中的 */
/* 注意: 类型伪类选择器应该是我们的首选,尽可能优先使用它 */

/* 如果我要选择只有一个子元素且子元素为p,应该如何做? */
p:only-of-type {
    background-color: pink;
}

/* 伪类: 表单控件 */
form :enabled {
    background-color: wheat;
}

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

/* 当在控件中输入无效值文本自动变成红色 */
form :invalid {
    color: red;
}

/* 设置控件获取到焦点时的样式 */
form :focus {
    background-color: lightgreen;
}

/* 设置鼠标悬停时的样式 */
button:hover {
    width: 56px;
    height: 28px;
    background-color: black;
    color: white;
}

运行实例 »

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

3.绝对定位实现窗口遮罩功能

html代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>遮罩</title>
<link rel="stylesheet" href="zhezhao.css">
</head>
<body>
    <div class="shade"></div>
    <div class="login"><img src="../static/images/login.jpg" alt=""> </div>
</body>
</html>

运行实例 »

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

css代码：

实例

body {
    margin :0;
    background-image:url(../static/images/php.jpg);
    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;
}

运行实例 »

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

4.固定定位制作广告位

html代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>广告位</title>
    <link rel="stylesheet" href="guanggao.css">
</head>
<body>
    <h1>固定定位小案例：实现广告位</h1>
    <div class="ads">
        <button onclick="this.parentNode.style.display = 'none'">关闭</button>
        <h2>php中文网第四期线上班</h2>
        <h1>招生进行中...</h1>
    </div>
</body>
</html>

运行实例 »

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

css代码：

body {

background-color: lightgray;

height: 2000px;

}

.ads {

width: 350px;

height: 250px;

background-color: lightblue;

position: fixed;

right: 0;

bottom: 0;

}

.ads button {

float: right;

margin-right: 20px;

}

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML+CSS基础知识总结-2019年1月14日22点48分

2019-02-11 16:26:23