1 2 3 4

【html、CSS、javascript-5】css应用场景补充

一、CSS全局应用

父标签div下包含两个子标签div，当子标签dvi全部向左float，此时父标签设置的背景色是不显示的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            background: red;
        }
        .div_a1,.div_a2{
            float: left;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">div_a1</div>
        <div class="div_a2">div_a2</div>
    </div>
</body>
</html>
父标签包含两个左漂标签，父标签背景色不显示

如果想显示父标签的背景色，可以在子标签中再加一个div，则代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            background: red;
        }
        .div_a1,.div_a2{
            float: left;
        }
        .div_a3{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">div_a1</div>
        <div class="div_a2">div_a2</div>
        <div class="div_a3">div_a3</div>
    </div>
</body>
</html>
通过在子标签中添加div显示父级的背景色

设想下假如一个项目中有很多这样的父子div，需要显示父级的背景色，那么没个父子块都需要单独设置样式是非常繁琐的事，那么通过什么方式解决呢？

首先：div:afer{content:"abcd"}这样的方式可以在标签的后面加上内容，实质上通过after加上的内容也作为一个内联标签存在的。

所以通过after的方式可以实现上面的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a:after{
            content: "abcd";
            display: block;
            clear: both;
        }
        .div_a{
            background: red;
        }
        .div_a1,.div_a2{
            float: left;
        }
        .div_a3{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">div_a1</div>
        <div class="div_a2">div_a2</div>
    </div>
</body>
</html>
通过after加内容

现在需要把加上的内容去掉，并且可以应用的其他父子模块：

visibility: hidden 可以隐藏模块，并且不占用位置，而display:none是隐藏并占据原来的位置

visibility用在after中还要加上height:0px 才能不占用位置，否则还占据abcd那一行的位置

定义通用模块只需要在style中自定义一个名字叫clearfix的class就可以，.clearfix{}，然后如果有相同的模块想用这种格式，只需要在标签class的属性值中添加clearfix就可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{
            content: "abcd";
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        .div_a{
            background: red;
        }
        .div_a1,.div_a2{
            float: left;
        }
        .div_a3{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div_a clearfix">
        <div class="div_a1">div_a1</div>
        <div class="div_a2">div_a2</div>
    </div>
</body>
</html>
通用格式

 二、父类和子类元素hover样式设置

 当父类中包含子类，当鼠标放在父类元素上，父类元素样式变化的同时子类也变化，这个样式怎么设置呢？

首先来看一个给父类增加边框的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a:hover{
            border: solid red 2px;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">aaaaa</div>
        <div class="div_a2">vvvvv</div>
    </div>

</body>
</html>
父类鼠标悬停显示红色边框

那么鼠标放到父类上，子类样式也变化呢？

只需要：选择父类元素:hover 选择子类元素{color:red}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a:hover{
            border: solid red 2px;
        }
        .div_a:hover .div_a2{
            color: red;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">aaaaa</div>
        <div class="div_a2">vvvvv</div>
    </div>

</body>
</html>
子类颜色样式

问题又来了，当鼠标放上去的时候，因为边框增加了两个像素，整体下移造成了动画效果，如果不想显示动画效果呢？

解决方案：可以提前给div加上两个像素的边框，让边框透明不显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            border:solid 2px white;
        }
        .div_a:hover{
            border: solid red 2px;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1">aaaaa</div>
        <div class="div_a2">vvvvv</div>
    </div>

</body>
</html>
提前增加边框来消除边框动画效果

 三、鼠标悬停背景色

悬停前后对比

方案：触发条件是鼠标移动至图片，所以要用到hover

鼠标移动至图片后，显示同样大小的DIV覆盖图片，并保证图片大小改变，覆盖的DIV随着变化，父类标签设置为：position: relative

覆盖图片的div设置为：position:absolute，并且上下左右距离为0，并设置透明度。

注意父类的div是根据子类的高度变化而变化的，当父类设置的高度小于子类内容高度时，高度将不起作用；会被子类内容高度撑起，但加上overflow后就可以了，会只截取显示部分，所以为了防止界面变乱，凡是图片都建议加高度、宽度、overflow: hidden

具体见代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            height: 262px;
            width: 403px;
            /*注意父类的div是根据子类的高度变化而变化的，当父类设置的高度小于子类内容高度时，高度将不起作用*/
            /*会被子类内容高度撑起，但加上overflow后就可以了，会只截取显示部分*/
            /*所以为了防止界面变乱，凡是图片都建议加高度、宽度、overflow: hidden*/
            overflow: hidden;
            position: relative;
        }
        .div_a2{
            /*子类position: absolute会去找父类的position: relative，如果父类没有再去父类的父类找，*/
            /*如果一直找不到则是相对html的位置*/
            position: absolute;
            top:0;
            right: 0;
            bottom:0;
            left: 0;
            background: black;
            opacity: 0.5;  /*设置透明度，也可以用：background-color: rgba(0,0,0,0.5)*/
            color: white;
            visibility: hidden;
        }
        .div_a:hover .div_a2{
            visibility: visible;
        }
    </style>
</head>
<body>
    <div class="div_a">
        <div class="div_a1"><img src="shoes.png"></div>
        <div class="div_a2">你好</div>
    </div>
</body>
</html>
悬停图片阴影显示

效果见下图：

 四、CSS画方向三角图标

在网页中会经常看到一些方向小图标，小图标可以是图片，当然用CSS也可以简单的画出来的哦。

boder的上、右、下、左分别设置宽度、实线、背景色，并且设置为inlie-block样式，则会出现下图所示效果：

那么可以通过其他边设置透明色的方式来取到三角，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .up{
            border-top:30px solid red;
            border-right: 30px solid black;
            border-bottom:30px solid green;
            border-left: 30px solid blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="up"></div>
</body>
</html>
border实现画三角

例如画个向下的三角，那么只需要把其他几个边的背景色设置为透明色：transparent即可，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .down{
            border-top:30px solid red;
            border-right: 30px solid transparent;
            border-bottom:30px solid transparent;
            border-left: 30px solid transparent;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="down"></div>
</body>
</html>
向下三角

如图所示：

还可以将上图的下三角再进行平分，这样只需要将下、左boder注释掉就可以，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .down{
            border-top:30px solid red;
            border-right: 30px solid transparent;
            /*border-bottom:30px solid transparent;*/
            /*border-left: 30px solid transparent;*/
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="down"></div>
</body>
</html>
平分向下三角

如图所示：

 如果三角本来是朝下的如何让鼠标一旦指向就变为向上的呢？

解决方案：鼠标指向的时候，向下的显示出来，向上的隐藏，显示后正方形整体上移几个像素

设计：增加一个父标签，父标签中的子标签为boder倒三角，子标签的上边距为30px，鼠标移到标签上后上边距为0，子标签底部三角显示，其他隐藏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .down{
            margin:30px 0;
            border-top:30px solid red;
            border-right: 30px solid transparent;
            border-bottom:30px solid transparent;
            border-left: 30px solid transparent;
            display: inline-block;
        }
        .down:hover{
            margin: 0;
            border-top:30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom:30px solid red;
            border-left: 30px solid transparent;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>
        <div class="down"></div>
    </div>
</body>
</html>
动态变化三角方向

 五、图标的几种方式

1、前端工程师，专业画图切图，通过图片的方式插入

2、通过CSS的方式制作，如上面的三角图标

3、通过插件的方式，这种方式一般都能满足需求。Font Awesome，官方网站：http://www.fontawesome.com.cn/

1）通过官方网站下载插件，下载后解压，然后放置html所在的目录

2）通过link引入<link rel="stylesheet" href="font-awesome/css/font-awesome.css">

3) 然后可以通过calss的属性值来引用：<span class="fa fa-bicycle"></span>

 代码如下插入一个自行车图标：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
    <span class="fa fa-bicycle"></span>
</body>
</html>
插件图标

六、文件目录

1、app目录：存放html文件。如：s1.html  s2.html

2、css目录：存放css文件。如：commons.css

3、script目录：存放js文件。如：conmmons.js

4、plugin目录：存放第三方的插件。如：bootstrap bxslider等

 

 七、import改变css执行的优先级

css是从上至下执行的，所以出现相同属性被设置时，靠近离css最近的会生效，如果想前面的代码生效，则只需要在属性后面加上 !important就可以。

下面代码最终div的背景色显示为红色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 200px;
            background-color: red !important;
        }
        .div1{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">

    </div>
</body>
</html>
important

 八、后台管理布局

后台管理布局如图所示：

上图所示B区是固定大小，那么问题是C区怎么随着屏幕的大小而改变呢？

解决方案：B区固定大小后，然后设置C区position:absolute,然后C区距离左边距为B区的宽度，距离右边距为0，距离上边的距离为A区的高度，那么C区会自动拉伸大小填充满

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .pg-head{
            height: 48px;
            background-color: #396bb3;
        }
        .pg-body-left{
            width: 100px;
            height: 200px;  /*为了显示*/
            background-color: #c0cddf;
        }
        .pg-body-right{
            position: absolute;
            height: 200px; /*为了显示*/
            background-color: antiquewhite;
            top:48px;
            right: 0;
            left: 100px;


        }
    </style>
</head>
<body>
    <div class="pg-head"></div>
    <div class="pg-body">
        <div class="pg-body-left"></div>
        <div class="pg-body-right"></div>
    </div>
</body>
</html>
后台布局自动拉伸

效果如下：

 那么又有一个问题，如果要实现A区和B区不动，C区可以滚动下拉，那么应该怎么做呢？

解决方案：C区设置overflow:auto,然后position:absolute,bottom:0

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .pg-head{
            height: 48px;
            background-color: #396bb3;
        }
        .pg-body-left{
            width: 100px;
            height: 200px;  /*为了显示*/
            background-color: #c0cddf;
        }
        .pg-body-right{
            position: absolute;
            background-color: antiquewhite;
            top:48px;
            right: 0;
            left: 100px;
            bottom: 0;
            overflow: auto;  /*如果超出高度，然么此div本身会加滚动条*/
        }
    </style>
</head>
<body>
    <div class="pg-head"></div>
    <div class="pg-body">
        <div class="pg-body-left"></div>
        <div class="pg-body-right">
            <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
            <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
            <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
            <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        </div>
    </div>
</body>
</html>
A\B区不变，C区滚动

 九、边缘提示框

如下图所示，确定和取消是怎么做的呢？

思路：td内加一个父级的div,然后包含一个子集的div，子集的div包含确定和取消按钮，然后父级position:relative ,子集的position:absolute,通过left和top来定位位置

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            position: relative;
        }
        .div_a1{
            position: absolute;
            left: 107px;
            top: -4px;
        }
        .div_a1>input{
            display: block;
            float: left;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr><td>第1行</td><td>第1行</td><td>第1行</td>
            <td>
                <div class="div_a">
                    第1行，第4列
                    <div class="div_a1">
                        <input type="button" value="确定">
                        <input type="button" value="取消">
                    </div>
                </div>
            </td>
        </tr>
        <tr><td>第2行</td><td>第2行</td><td>第2行</td><td>第2行</td></tr>
        <tr><td>第3行</td><td>第3行</td><td>第3行</td><td>第3行</td></tr>
        <tr><td>第4行</td><td>第4行</td><td>第4行</td><td>第4行</td></tr>
    </table>
</body>
</html>
边缘提示框

 十、登陆页图标

如下图，登陆页的图标是怎么显示的呢 ？

解决方案：div中包含两个子类的div,子类div一个是input标签，一个是图标，然后父级position:relative ,子集的position:absolute,。

input通过margin来设置内边距，防止图片区域输入文字

 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a{
            position: relative;
        }
        .div_a2{
            position: absolute;
            left: 141px;
            top:6px ;
        }
        .div_a1>input{
            padding-right:20px ;
            width: 130px;
            height:25px;
        }
    </style>
</head>
<body>
    <form>
        <div class="div_a">
            <div class="div_a1">
                <input type="text">
            </div>
            <div class="div_a2">
                R  <!--R用来表示图标-->
            </div>
        </div>
    </form>
</body>
</html>
input图标

十一、模态对话框

如下图，模态对话框的位置是怎么设置的呢？

分析：一共分为三层，第1层：模态对话框按钮层；第2层：黑色半透明遮罩层；第3层：对话框层

解决方案：

第2层：完全遮住浏览器，父级div下面包含遮罩层的div,遮罩层的div设置为：position:fixed，然后top right bottom left都设置为0

第3层：设置div的position:fixed，然后设置top:50% left:50%，此时对话框层的左上角为中心，然后设置外边距margin-top上移对话框的高度的一半，margin-left左移对话框宽度的一半。注意：设置position:fixed，并设置了top和left之后，可以通过magin-left和magin-top来调整具左边和上边的位置

把对话框作为div，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_a1{
            position: fixed;
            top:0;
            right: 0;
            bottom: 0;
            left:0;
            background-color: rgba(0,0,0,0.6);
        }
        .div_a2{
            background-color: white;
            width: 400px;
            height: 300px;
            position: fixed;
            left:50%;
            top: 50%;
            margin-left:-200px;
            margin-top:-150px;
        }
    </style>
</head>
<body>
    <div class="div_a">
        最底层
        <div class="div_a1"></div>
        <div class="div_a2"></div>
    </div>
</body>
</html>
模态对话框

 十一、bxslider插件可以显示轮播图

 十二、商品数量加减实现方式

如下图，加减数量是怎么实现的呢？

 解决方案：父类div包含三个子类div，分别为div input div，代码如下：

cursor: pointer  当移动到该标签时鼠标变为手型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .wrap{
            background-color: #dddddd;
            height: 25px;
            width: 150px;
            border:1px solid #dddddd;
        }
        .minus{
            width: 25px;
            height: 25px;
            text-align: center;
            cursor: pointer;  /*鼠标移动到div显示手形状*/
        }
        .count input{
            padding: 0; /* 默认input有个1px的内边距*/
            border: 0;
            height: 25px;
            width: 100px;
        }

        .plus{
            width: 25px;
            height: 25px;
            text-align: center;
            cursor: pointer; /*鼠标移动到div显示手形状*/
        }
    </style>
</head>
<body>
    <div class="wrap" >
        <div class="minus left">-</div>
        <div class="count left">
            <input type="text">
        </div>
        <div class="plus left">+</div>
    </div>
</body>
</html>
商品数量加减实现方式

用JavaScript实现单击增加或减少数量，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .wrap{
            background-color: #dddddd;
            height: 25px;
            width: 150px;
            border:1px solid #dddddd;
        }
        .minus{
            width: 25px;
            height: 25px;
            text-align: center;
            cursor: pointer;  /*鼠标移动到div显示手形状*/
        }
        .count input{
            padding: 0; /* 默认input有个1px的内边距*/
            border: 0;
            height: 25px;
            width: 100px;
        }

        .plus{
            width: 25px;
            height: 25px;
            text-align: center;
            cursor: pointer; /*鼠标移动到div显示手形状*/
        }
    </style>
</head>
<body>
    <div class="wrap" >
        <div class="minus  left" onclick="Minus();">-</div>
        <div class="count left">
            <input id="count" type="text">
        </div>
        <div class="plus left" onclick="Plus()">+</div>
    </div>
    <script type="text/javascript">
        //定义函数
//        function Plus() {
//            alert('这是弹出对话框')
//        }
        function Plus() {
            var old = document.getElementById('count').value
            var newInt = parseInt(old)
            var newIntPlus = newInt + 1
            document.getElementById('count').value = newIntPlus
        }
        function Minus(){
            var old = document.getElementById('count').value
            var newInt = parseInt(old)
            var newIntMinus = newInt - 1
            document.getElementById('count').value = newIntMinus
        }
    </script>
</body>
</html>
实现单击增加减少

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2018-05-19 16:56  I我的博客I  阅读(505)  评论(0)  编辑  收藏  举报