博客列表 >css及布局深入(css选择器 背景css 内外边距 浮动 定位 布局案例)2019年1月15日22时45分

css及布局深入(css选择器 背景css 内外边距 浮动 定位 布局案例)2019年1月15日22时45分

小明的博客
小明的博客原创
2019年01月16日 19:51:48708浏览

css是在html搭建起结构后进行装饰的,css选择器就时要更准确和省力的找到我们需要改变样式的标签,css选择器需要灵活方便准确。背景css可以给出背景相应的样式,尤其在css3加入的background-size可以更加多变的改变背景。页面布局需要通过内外边距、浮动、定位作为基础来进行,通过圣杯布局  双飞翼布局进一步的加深印象,从而熟练页面布局。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css常用选择器</title>
    <link rel="stylesheet" href="static/css/style01.css">
</head>
<body>
    <ul>
        <li id="bg-red">1</li>
        <li class="bg-green">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>
        <li>朱老师</li>
        <p>西门大官人</p>
    </div>

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

     <!-- 演示表单选择器 -->
     <form action="">
        <label for="email">邮箱:</label>
        <input type="email">
        <br>
        <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>
        <br>
        <button>登录</button>
    </form>

    
</body>
</html>
/* 标签选择器 */
ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0; 
    border: 1px solid firebrick;
    padding: 20px;
    overflow: hidden;
}

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

/* id选择器 */
#bg-red{
    background-color: red;
}
/* class选择器 */
.bg-green{
    background-color: green;
}
/* 属性选择器 */
li[id="bg-red"]{
    width: 100px;
    height: 100px;
}
/* 群组选择器 */
#bg-red, .bg-green {
    font-size: 28px;
}
/* 相邻选择器 */
#bg-red + * {
    width: 100px;
}
/* 兄弟选择器 */
#bg-red ~ * {
    height: 100px;;
}

/* 伪类选择器 */
ul :first-child {
    border: 10px solid khaki;
}
ul :last-child {
    width: 100px;
}
ul :nth-child(5) {
    width: 80px;
}
ul :nth-last-child(2) {
    background-color: blueviolet;
}

/* 类型选择器 */
ul li:last-of-type {
    background-color: chartreuse;
}
ul li:first-of-type {
    color: darkturquoise;
}
ul li:nth-of-type(3) {
    color: aqua;
}
ul li:nth-last-of-type(4) {
    background-color: darkolivegreen;
}

/* 选中每个div下面的第二元素 */
div :nth-child(2) {
    background-color: gold;
}
/* 如果只想选择西门大官人 */
/* 类型选择器第二个div 下面的第三个元素 */
div:first-of-type :nth-child(3) {
    background-color: red;
}

/* 如果只想选择西门大官人 另一种思路 */
div p:nth-of-type(2) {
    background-color: blue;
}

/* 表单选择器 */
/* 表单下的控件选择可用状态 */
form :enabled {
    background-color: blueviolet;
}
/* 表单下的控件选中状态 */
form :checked {
    width: 100px;
}
/* 表单下的控件获取焦点状态 */
form :focus {
    background-color: cornflowerblue;
}
/* 鼠标悬停状态 */
button:hover {
    background-color: bisque;
}
/* 控件下输入无效控件时 */
form :invalid {
    color: orange;
}

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遮罩登录框</title>
    <link rel="stylesheet" href="static/css/style02.css">
</head>
<body>
    <div class="box">        
    </div>
    <img src="static/images/login.jpg" alt="login" class="login">
</body>
</html>


* {
    margin: 0;
    padding: 0;
}
body {
    background-image: url('../images/php.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
.box {
    width: 100%;
    height: 100%;
    background-color: black;
    /* 设置为绝对定位脱离文档流 就可以让他撑满整个屏幕 */
    position: absolute;
    top: 0;
    left: 0;
    opacity: .7;
}
.login {
    width: 380px;
    height: 460px;
    /* 设置绝对定位 让他在最中间 绝对定位后img成为块元素*/
    position: absolute;
    top: 50%;
    left: 50%;
    /* 在进行偏移 让他的中心在页面的中心 偏移这张图片宽高的一半 */
    margin-left: -190px;
    margin-top: -230px;
}

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>固定广告位</title>
    <link rel="stylesheet" href="static/css/style03.css">
</head>
<body>
    <div class="adv">
        <h3>固定广告位</h3>
        <h2>电话:11111111</h2>
        <span onclick="this.parentNode.style.display = 'none'">关闭</span>
    </div>
</body>
</html>

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 4000px;
    background-color: lightslategray;
}
.adv {
    width: 300px;
    height: 250px;
    background-color: brown;
    position: fixed;
    bottom: 5px;
    right: 5px;
}

.adv h2, .adv h3 {
    margin-top: 0;
    padding-top: 30px;
    text-align: center;
}
.adv span {
    background-color: aliceblue;
    position: absolute;
    padding: 3px;
    top: 0;
    right: 0;
}

运行实例 »

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


实例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style04.css">
    <title>双飞翼布局</title>
</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="">0551-88889999</a>  | 
                <a href="">皖ICP2016098801-1</a>
            </p>
            
        </div>
    </div>
</body>
</html>

.header {
    /* 通常宽度默认为100% */
    width: 100%;

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

.header .content {
    /* 头部内容区,应该居中显示,所有要有宽度 */
    width: 1000px;
    height: 60px;
    
    /* 上下外边距为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: 1000px;
    min-height: 600px;
    background-color: lightgoldenrodyellow;
    margin: 10px auto;
}
/* main上面的div 用来将main挤在中间 */
.wrap {
    /* 宽高继承父级 */
    width: inherit; 
    min-height: inherit;
    background-color: aqua;
}
.left {
    width: 200px;
    height: 600px;
    background-color: brown;
    /* 负的外边距移动到位置 */
    margin-left: -100%;
}
.right {
    width: 200px;
    height: 600px;
    background-color: lawngreen;
    margin-left: -200px;
}
.wrap, .left, .right {
    float: left;
}
.main {
    padding-left: 200px;
    padding-right: 200px;
}
















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

.footer .content {
    width: 1000px;
    height: 60px;
 
    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;
}

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style05.css">
    <title>圣杯布局</title>
</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="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>

.header {
    /* 通常宽度默认为100% */
    width: 100%;

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

.header .content {
    /* 头部内容区,应该居中显示,所有要有宽度 */
    width: 1000px;
    height: 60px;
    
    /* 上下外边距为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;
    background-color: lightgoldenrodyellow;
    margin: 10px auto;
    padding-left: 200px;
    padding-right: 200px;

}
/* main上面的div 用来将main挤在中间 */
.main {
    /* 宽高继承父级 */
    width: inherit; 
    min-height: inherit;
    background-color: aqua;
}
.left {
    width: 200px;
    height: 600px;
    background-color: brown;
    /* 负的外边距移动到位置 */
    margin-left: -100%;
    /* 通过绝对定位放到相应的位置 */
    position: relative;
    left: -200px;
}
.right {
    width: 200px;
    height: 600px;
    background-color: lawngreen;
    margin-left: -200px;
    position: relative;
    left: -200px;
}
.main, .left, .right {
    float: left;
}
















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

.footer .content {
    width: 1000px;
    height: 60px;
 
    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;
}

运行实例 »

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



以上内容总结:

1、css选择器基本选择器就可以适应页面需求,但是兄弟选择器  相邻选择器 伪类  类型选择器 还有专门的表单可以更加灵活的找到需要的标签;

2、内边距增加盒子的大小,可以通过改变盒子大小和宽高分离来解决

3、外边距的特点:同级塌陷  嵌套传递  自动挤压

4、浮动 绝对定位脱离文档流,脱离文档流才是布局的前提

5、圣杯布局  双飞翼布局的思路区别就是:双飞翼的main之外还嵌套一层然后浮动后通过负的外边距调整好左右区域的位置,这里需要注意到,main加左右内边距让显示区域呈现的前提就是main上面的那层嵌套div,否则格式会乱;圣杯就是cotaineri就加左右内边距然后改变宽高来达到预期的大小,通过负外边距  相对定位来吧左右调整到位;

6、这俩布局我之前有疑问即使不加嵌套或者不位移也可实现,但是经过思考,老师这样布局可以方便以后调整,可以轻松的改变一行分几栏,实现布局重用。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议