CSS常用的选择器、网站布局、遮罩及固定广告2019-01-15日20点 - 我的作业

Home > List of blog posts > CSS常用的选择器、网站布局、遮罩及固定广告2019-01-15日20点

Blogger Information

Blog 5

fans 0

comment 0

visits 4035

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html>

<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>CSS常用的选择器</title>
    <style>
        ul {
    border:1px dashed red;
    margin-top:0;
    margin-bottom:0;
    padding-left:0;
    padding:10px;
    overflow:hidden; 
    
}

ul li {
    float:left;
    background-color:lightblue;
    width:60px;
    height:60px;
    list-style-type:none;
    line-height:60px;
    text-align:center;
    margin-left:10px;
    border-radius:50%;
    box-shadow:4px 4px 6px #888888;
}

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

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

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

/* 群组选择器 */
#bg-red,.bg-yellow {
    background-color:lightseagreen;
}

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

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

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

/* 优先级问题，需要把兄弟选择器注释 */
ul li:last-child {
    background-color:#ccc;
}

ul li:nth-child(8) {
    background-color:#000;
    color:#fff;
}

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

/* 伪类：类型选择器 */
ul li:first-of-type {
    background-color:crimson;
}

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

ul li:nth-of-type(2) {
    background-color:crimson;
}

div :nth-child(2) {
    background-color: lightgreen;
}

div:first-of-type :nth-child(3){
    background-color: lightblue;
}

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

p:only-of-type {
    background-color:linen;
}

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

/* form input:enabled{
    background-color:#ffff00;
} */

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

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

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

/* 设置鼠标悬停时的样式 */
button:hover {
    background-color:coral;
}
    </style>
</head>

<body>
    <!-- 演示基本选择器 -->
    <ul>
        <li class="bg-yellow">1</li>
        <li>2</li>
        <li id="bg-red">3</li>
        <li>4</li>
        <li class="bg-yellow">5</li>
        <li class="bg-yellow">6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <!-- 演示伪类选择器中的子元素与类型选择器之间的区别与联系 -->
    <div>
        <p>电脑</p>
        <li>手机</li>
        <p>电视</p>
    </div>
    <hr>
    <div>
        <p>游戏</p>
        <li>美国</li>
    </div>
    <hr>
    <!-- 演示表单选择器 -->
    <form action="">
        <div>
            <label for="email">邮箱:</label>
            <input type="email" id="email">
        </div>
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password">
        </div>
        <div>
            <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>
        </div>
        <div>
            <button>登录</button>
        </div>
    </form>
</body>

</html>

运行实例 »

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

二、网站布局-双飞翼布局

实例

<!DOCTYPE html>
<html>

<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>
    <style>
        /* 顶部导航样式 */
        .header {
            width: 100%;
            height: 60px;
            background-color: #000;

        }

        .header .content {
            width: 1200px;
            height: 60px;
            background-color: #000;
            margin: 0 auto;
        }

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

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

        .header .content .nav .item a {
            float: left;
            width: 130px;
            height: 54px;
            line-height: 60px;
            text-decoration: none;
            color: #fff;
            padding: 0 10px;
            font-size: 16px;
            text-align: center;
        }

        .header .content .nav .item a:hover {
            color: #fff;
            border-bottom: 6px solid lightgreen;
        }

        /* 中间部分央视 */
        .container {
            width: 1200px;
            min-height: 600px;
            margin: 10px auto;
            background-color: #ccc;
        }

        .wrap {
            float: left;
            width: inherit;
            min-height: inherit;
            background-color: lightcoral;
        }

        .left {
            float: left;
            width: 200px;
            min-height: 600px;
            background-color: lightblue;
            margin-left: -100%;
        }

        .right {
            float: left;
            width: 200px;
            min-height: 600px;
            background-color: lightgreen;
            margin-left: -200px;
        }

        .main {
            padding-left: 200px;
            padding-right: 200px;
        }

        /* 底部版权样式 */
        .footer {
            width: 100%;
            height: 100px;
            background-color: #000;
        }

        .footer .content {
            width: 1200px;
            height: 100px;
            margin: 0 auto;
            background-color: #000;
            line-height: 100px;
        }

        .footer .content .p1 {
            margin: 0;
            padding-top: 24px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            color: #fff;
            font-size: 14px;
        }

        .footer .content .p2 {
            margin: 0;
            padding-top: 10px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            color: #fff;
            font-size: 14px;
        }
    </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>
                <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 class="wrap">
            <div class="main">主体内容区</div>
        </div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>

    <!-- 底部版权 -->
    <div class="footer">
        <div class="content">
            <p class="p1">PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
            <p class="p2">Copyright 2014-2018 http://www.php.cn All Rights Reserved | 皖B2-20150071-9<p>
        </div>
    </div>
</body>

</html>

运行实例 »

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

三、网站布局-圣杯布局

实例

<!DOCTYPE html>
<html>

<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>
    <style>
        body {
            margin: 0;
        }
        /* 顶部导航样式 */
        .header {
            width: 100%;
            height: 60px;
            background-color: #000;

        }

        .header .content {
            width: 1200px;
            height: 60px;
            background-color: #000;
            margin: 0 auto;
        }

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

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

        .header .content .nav .item a {
            float: left;
            width: 130px;
            height: 54px;
            line-height: 60px;
            text-decoration: none;
            color: #fff;
            padding: 0 10px;
            font-size: 16px;
            text-align: center;
        }

        .header .content .nav .item a:hover {
            color: #fff;
            border-bottom: 6px solid lightgreen;
        }

        /* 中间部分央视 */
        .container {
            width: 600px;
            min-height: 600px;
            margin: 10px auto;
            background-color: #ccc;
        }

        .main {
            float: left;
            width: inherit;
            min-height: 600px;
            background-color: lightcoral;
        }

        .left {
            float: left;
            width: 300px;
            min-height: 600px;
            background-color: lightblue;
            margin-left: -100%;
            position: relative;
            left: -300px;
        }

        .right {
            float: left;
            width: 300px;
            min-height: 600px;
            background-color: lightgreen;
            margin-left: -300px;
            position: relative;
            left: 300px;
        }

        /* 底部版权样式 */
        .footer {
            width: 100%;
            height: 100px;
            background-color: #000;
        }

        .footer .content {
            width: 1200px;
            height: 100px;
            margin: 0 auto;
            background-color: #000;
            line-height: 100px;
        }

        .footer .content .p1 {
            margin: 0;
            padding-top: 24px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            color: #fff;
            font-size: 14px;
        }

        .footer .content .p2 {
            margin: 0;
            padding-top: 10px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            color: #fff;
            font-size: 14px;
        }
    </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>
                <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 class="main">主体内容区</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>

    <!-- 底部版权 -->
    <div class="footer">
        <div class="content">
            <p class="p1">PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
            <p class="p2">Copyright 2014-2018 http://www.php.cn All Rights Reserved | 皖B2-20150071-9<p>
        </div>
    </div>
</body>

</html>

运行实例 »

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

四、圣杯布局基础上做绝对定位--遮罩及滚顶广告

实例

<!DOCTYPE html>
<html>

<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>
    <style>
        /* 顶部导航样式 */
        body {
            margin: 0;
        }
        .header {
            width: 100%;
            height: 60px;
            background-color: #000;

        }

        .header .content {
            width: 1200px;
            height: 60px;
            background-color: #000;
            margin: 0 auto;
        }

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

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

        .header .content .nav .item a {
            float: left;
            width: 130px;
            height: 54px;
            line-height: 60px;
            text-decoration: none;
            color: #fff;
            padding: 0 10px;
            font-size: 16px;
            text-align: center;
        }

        .header .content .nav .item a:hover {
            color: #fff;
            border-bottom: 6px solid lightgreen;
        }

        /* 中间部分央视 */
        .container {
            width: 600px;
            min-height: 600px;
            margin: 10px auto;
            background-color: #ccc;
        }

        .main {
            float: left;
            width: inherit;
            min-height: 600px;
            background-color: lightcoral;
        }

        .left {
            float: left;
            width: 300px;
            min-height: 600px;
            background-color: lightblue;
            margin-left: -100%;
            position: relative;
            left: -300px;
        }

        .right {
            float: left;
            width: 300px;
            min-height: 600px;
            background-color: lightgreen;
            margin-left: -300px;
            position: relative;
            left: 300px;
        }

        /* 底部版权样式 */
        .footer {
            width: 100%;
            height: 100px;
            background-color: #000;
        }

        .footer .content {
            width: 1200px;
            height: 100px;
            margin: 0 auto;
            background-color: #000;
            line-height: 100px;
        }

        .footer .content .p1 {
            margin: 0;
            padding-top: 24px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            color: #fff;
            font-size: 14px;
        }

        .footer .content .p2 {
            margin: 0;
            padding-top: 10px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            color: #fff;
            font-size: 14px;
        }

        .login-color {
            width: 200px;
            height: 200px;
            background-color: lawngreen;
            z-index: 999;
        }

        .shade {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.5;
        }

        .login {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            text-align: center;
            line-height: 200px;
            color: #fff;
        }
        .ads{
            width:200px;
            height: 150px;
            position: fixed;
            right: 0px;
            bottom: 0;
            background-color:red;
        }

        .ads button {
            float: right;
        }
    </style>
</head>

<body>
    <!-- 遮罩 -->
    <div class="shade"></div>
    <div class="login">
        <div class="login-color">登录框</div>
    </div>
    <!-- 顶部导航 -->
    <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>
                <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 class="main">主体内容区</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>

    <!-- 底部版权 -->
    <div class="footer">
        <div class="content">
            <p class="p1">PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
            <p class="p2">Copyright 2014-2018 http://www.php.cn All Rights Reserved | 皖B2-20150071-9<p>
        </div>
    </div>

    <!-- 固定广告 -->
    <div class="ads">
            <button onclick="this.parentNode.style.display = 'none'">关闭</button> 
            <h2>广告标题</h2>
            <h1>广告展示中....</h1>
        </div>
</body>

</html>

运行实例 »

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

五、学习心得

经过学习，对网站布局有了一定的认识。

Correction status：qualified

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日20点

2019-01-17 11:08:24