search

博客列表 >CSS常用的选择器、网站布局、遮罩及固定广告2019-01-15日20点

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

清玉的博客
清玉的博客原创
2019年01月21日 13:48:29749浏览

一、CSS常用的选择器

实例

<!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>

运行实例 »

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

五、学习心得

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

上一条：双飞翼与圣杯之间的区别--20180115下一条：js的运动与拖拽特效
CSS常用的选择器、网站布局、遮罩及固定广告
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多