简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS常用选择器、双飞翼布局、绝对定位实现窗口遮罩功能、固定定位制作广告位（1月15日）
Blogger Information
Blog 7
fans 1
comment 3
visits 6711
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS常用选择器、双飞翼布局、绝对定位实现窗口遮罩功能、固定定位制作广告位（1月15日）
熊哥的博客
Original
678 people have browsed it

一、常用选择器的使用

标签选择器

ul{  }

 

层级选择器

ul li{  }

 

ID选择器

#idName{  }

 

类选择器

.className{  }

 

属性选择器

li[id="xxx"]{  }

 

群组选择器（逗号分隔）

#idName,.className{}

 

兄弟选择器（ ~ * ）

#idName ~ * {  }

 

相连选择器（ + * ）

#idName + * {  }

 

伪类：子元素选择器

ul:first-child{  }   第一个子元素

ul:last-child{  }   最后一个子元素

ul:nth-child(6) {  }  所有子元素中第6个

ul:nth-last-child(3){  }  所有子元素中倒数第3个

 

伪类：类型选择器

ul:first-of-type{  }

ul:last-of-type{  }

ul:nth-of-type(3){  }

 

选中每个div中的第二个子元素

div :nth-child(2) {  }

 

选择只有一个子元素且子元素为p

p:only-of-type{  }

 

伪类: 表单控件

form :enabled {  }

 

单选按钮中的相邻选择器

form :checked + * {  }

 

控件中输入无效值

form :invalid {  }

 

控件获取到焦点时

form :focus {  }

 

鼠标悬停时

button:hover {  }

 

 知识点总结：以上是常用选择器，应该要多加练习，才能灵活设置样式。

 

二、双飞翼布局

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        .header{
    width: 100%;
    background-color: beige;
}

.header .content{
    width: 1000px;
    height: 60px;
    background-color: aquamarine;
    margin: 0 auto;
}

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

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

.header .content .nav .item a{
    padding: 0 30px;
    float: left;
    min-width: 80px;
    min-height: 60px;
    color: blue;
    text-decoration: none;
    line-height: 60px;
}

.header .content .nav .item a:hover{
    background-color:gray;
    color: white;
}




/* 中间主体 */
.container{
    width: 1000px;
    min-height: 600px;
    background-color: darkgray;
    margin: 10px auto;
}

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

.main{
    padding: 50px 250px;  /* 撑开显示主体内容 */
}

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

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



/* 底部 */
.footer{
    width: 100%;
    background-color: beige;
}

.footer .content{
    width: 1000px;
    height: 60px;
    background-color: steelblue;
    margin: 0 auto;
}

.footer .content p{
    line-height: 60px;
    text-align: center;
}

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

.footer .content a:hover{
    text-decoration: underline;
    color:white;
}
    </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>
                <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="">友情链接</a>
                <a href="">友情链接</a>
                <a href="">友情链接</a>
                <a href="">友情链接</a>
            </p>
        </div>
    </div>
</body>
</html>

运行实例 »

知识点总结：

双飞翼布局对于本人更易理解，css代码相对简洁。

中间主体区块main应该创建在left和right前面，保证优先渲染。

中间主体区块main外面应该用一个wrap区块div包裹。

<div class="container">

       <div class="wrap">

           <div class="main">主体内容区</div>

       </div>

       <div class="left">左侧</div>

       <div class="right">右侧</div>

</div>

 

三、绝对定位实现窗口遮罩功能

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位实现窗口遮罩功能</title>
    <style>
        .shade{
            background-color: black;
            opacity: 0.7;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        .box1{
            background-color: aqua;
            width: 400px;
            height: 300px;
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -200px;
            margin-top: -150px;
        }
    </style>
</head>
<body>
    <div class="shade"></div>
    <div class="box1">主体内容</div>
</body>
</html>

运行实例 »

 

知识点总结：

①遮罩层div设置绝对定位position: absolute;

②显示窗口div也设置绝对定位position: absolute;

窗口居中应设置：left: 50%;   top: 50%;    margin-left: -190px;     margin-top: -230px;

 

四、固定定位制作广告位

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位制作广告位</title>
    <style>
        body{
            background-color: bisque;
        }
        .box1{
            background-color:lightpink;
            width: 300px;
            height: 250px;
            position:fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box1"><p>广告位内容</p></div>
</body>
</html>

运行实例 »

 

知识点总结：给广告位div设置样式固定定位 position:fixed;

  

 0115-1.jpg

0115-2.jpg

0115-3.jpg

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
1 comments
熊哥 2019-01-17 18:01:32
同志还需努力~
1 floor
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！