web 前端2 html css一些小问题技巧

html css一些小问题技巧

1 对于儿子块float后，父亲块如果没内容就不见了，如何让父亲块依然跟随飘起了的儿子块撑起来呢？？

用到的属性after方法  公共方法作为继承即可。

1.1  方法1 clear + visibility + height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{
            content: '111';
            display: block;
            clear: both;
            visibility: hidden; /* 将块内的内容隐藏*/
            height: 0;
        }
        .c{
            background-color:red;
        }
        .c .item{
            float:left;
            width:30px;
            height: 70px;
            background-color: green;
        }

        .test{
            background-color: red;
        }
        .test:after{
            content: "后";
        }
        .test:before{
            content: '前';
        }
    </style>
</head>
<body>
    <div class='c clearfix'>
        <div class='item'>123</div>
        <div class='item'>456</div>
    </div>

    <!--<div class="test">内容</div>-->
</body>
</html>
clear visibility height

1.2 方法2 overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .c{
            background-color:cadetblue;
        }

        .clearfix{
            overflow: hidden;
        }
        .c .item{
            float:left;
            width:30px;
            height: 30px;
            background-color: green;
            /*margin-top: 40px;*/
        }

        .test{
            background-color: cadetblue;
        }
        .test:after{
            content: "后";
        }
        .test:before{
            content: '前';
        }
    </style>
</head>
<body>
    <div class='c clearfix'>
        <div class='item'>123</div>
        <div class='item'>456</div>

    </div>

    <!--<div class="test">内容</div>-->
</body>
</html>
overflow方法

 

2 hover控制 其后代 儿子 兄弟变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ele{
            background-color: #dddddd;
            border: 2px solid transparent;
        }
        .ele:hover{
            border: 2px solid red;
        }
        .ele:hover .ele-item{
            color: red;
        }
    </style>
</head>
<body>
    <div class="ele">
        <div>123</div>
        <div class="ele-item">123</div>
    </div>
</body>
</html>
hover控制 其后代 儿子 兄弟变化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ele{
            height: 200px;
            width: 200px;
            overflow: hidden; /* 规定宽度高度后，如果内容超过大小就会隐藏非常重要*/
            position: relative; /* 如果子块要用absolute父亲如果不用relative 则会导致 儿子会一直往上 找 一直找到html*/
        }
        .ele .content{
            background: rgba(0,0,0,.6); /*透明度 的表示 a  还可以用opacity*/
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            visibility: hidden;  /*隐藏该标签的内容不显示*/
            color: white;
            text-align: center;
        }
        .ele:hover .content{  /* 悬浮控制其内部元素 这里一定要是*/
            visibility: visible;
        }
        .ele .content .c1{
            font-size: 32px;
            padding: 30px 0;
        }
        .ele .content .c2{
            font-size: 18px;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="ele">
        <div class="img"><img src="1.jpg"></div>
        <div class="content">
            dsfsa
            <div class="c1">Alex</div>
            <div class="c2">1000-2000</div>
        </div>
    </div>
</body>
</html>
View Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        /*.ss{*/

        /*}*/
        .bottom{
            height: 40px;
            width: 500px;
            background-color: brown;
            border: 1px solid black;
            position: relative;
            /*z-index: 1;*/
        }
        .wrapper{
            background-color: black;
            height: 100px;
            width: 100px;
            opacity: 0.6;
            position: absolute;
            bottom: 0;
            top: 400px;;
            right: 0;
            left: 0;
            visibility: hidden;
            /*display: none;*/
            /*z-index: 2;*/
        }
        .content{
            background-color: chartreuse;
            width: 200px;
            height: 200px;
            position: fixed;
            top:50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            visibility: hidden;
            /*display: none;*/
            /*z-index: 3;*/
        }
        .ss:hover .content{
            visibility: visible;
            /*display: block;*/
        }
        .bottom{
            cursor: pointer;
        }

        .bottom:hover+.wrapper{
            /*display: block;*/
            visibility: visible;
        }
    </style>
</head>
<body>
    <div class="ss">
        <div class="bottom">
            <span>asddddd</span>
        </div>
        <div class="wrapper">水电费</div>
        <div class="content">范德萨</div>
    </div>


</body>
</html>
hover控制 其后代 儿子 兄弟变化

 

3  fixed 区别 与 relative absolute

位置只有两种情况

　　fixed 固定在漂浮 以浏览器为边界

　　absolute一般结合relative 以relative为边界，如果某个定义了absolute的块的父亲没有relative就会向上找，一直找到html，如果遇不到relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position 区别  fixed 和 relative absolute</title>
    <style>
        .boddd{
            height: 2000px;
            min-width: 1000px;
            width: 100%;
            background-color: #9c9c9c;
        }
        .c1{
            width: 600px;
            height: 50px;
            background-color: #3a1638;
            margin: 0 auto;
        }
        .c2{
            width: 50px;
            height: 30px;
            background-color: goldenrod;
        }
    </style>
</head>
<body>
<div class="boddd">
    <div class="c1" style="position: relative">
        <div class="c2" style="position: absolute;bottom: 3px;left: 70px"></div>
    </div>

    <div style="position: fixed;width: 90px;height: 90px;background-color: #1a66b3;bottom: 30px;right: 30px"></div>
</div>

</body>
</html>
position_fixed_relative_absolute区别
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 2000px;background-color: red;">
        <div style="position:relative;background-color: green;width: 500px;height:130px;margin: 0 auto;">

            <div style="position: absolute;left: 0;bottom: 0;width: 40px;height: 40px;background-color: pink;"> </div>
        </div>

    </div>
    <div style="position: absolute;right:10px;bottom:10px;width: 40px;height: 40px;background-color: violet"></div>
</body>
</html>
View Code

4 block 和inline-block区别

　　对于margin来说 margin-top 值为负值则向上飘，加入某个div在浏览器顶部，使用了margin-top为负值：

　　　　　block 则会往上飘 会消失一部分

　　　　　inline-block 则不会动，前提是对body没有做margin操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div style="margin-top: -30px; display: inline-block">123</div>
    <div style="margin-top: -13px; display: block">123</div>
</body>
</html>
block 和inline-block区别

5 引用字体映射文件 font awesomes 文件 作为图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.css" />
</head>
<body>
    <span class="fa fa-cut"></span>
</body>
</html>
引用字体映射文件 font awesomes 文件 作为图标

 

6 选项的正三角 倒三角变化显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .up{
            border-top: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid green;
            border-left: 30px solid transparent;
            display: inline-block;
        }
        .down{
            border-top: 30px solid green;
            border-right: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-left: 30px solid transparent;
            display: inline-block;
        }
        .c1{
            border: 30px solid transparent;
            border-top: 30px solid blue;
            margin-top: 0px;
            display: inline-block;
        }
        .c1:hover{
            border: 30px solid transparent;
            border-bottom: 30px solid green;
            margin-top: -200px;
        }
    </style>
</head>
<body>
    <div style="background-color: red">
        <span class="c1"></span>
        <span style="display: inline-block;margin-top: 10px;">1</span>
        <span>2</span>
        <span style="display: inline-block;">3</span>
    </div>
    <!--<span style="margin-top: 20px;">1111111</span>-->
    <!--<div style="margin-top: -20px;">123</div>-->
    <!--<div style="margin-top: -20px;">456</div>-->
    <style>

    </style>
    <div>
        <div class="menu">
            <span>内容</span>
            <span class="icon"></span>
            <div class="content">
                <div>11</div>
                <div>22</div>
                <div>33</div>
            </div>
        </div>

    </div>
</body>
</html>
选项的正三角 倒三角变化显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            border: 30px solid transparent;
            border-top:30px solid green;
            display: inline-block;
            margin-top: 40px;
        }
        .c1:hover{
            border: 30px solid transparent;
            border-bottom: 30px solid green;
            display: inline-block;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div style="height: 100px;background-color: #1a66b3">
        <div class="c1">

        </div>
    </div>
</body>
</html>
选项的正三角 倒三角变化显示

7 对于img标签 放在a标签内部 在ie浏览器内显示是有个蓝色的边框的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            border: 0;
        }
    </style>
</head>
<body>
    <a href="http://www.etiantian.org">asdf</a>
    <a href="http://www.etiantian.org">
        <img style="height: 300px;width: 400px;"  src="1.jpg">
    </a>
</body>
</html>
对于img标签 放在a标签内部 在ie浏览器内显示是有个蓝色的边框的

 

8 页面布局 后台管理通用 跟html课程简介差不多。重要

　　除了标题顶部之外

　　　　左侧的 菜单选项 利用absolute并设置 一定固定宽度，

　　　　右侧利用absolute并设置left距离左侧的宽度，而右侧则为0即可沾满了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 ;
        }
        .pg-header{
            height: 48px;
            background-color: #dddddd;
        }
        .pg-body .body-menu{
            position: absolute;
            width: 180px;
            background-color: antiquewhite;
            left: 0;
        }
        .pg-body .body-content{
            position: absolute;
            left: 182px;
            right: 0;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="pg-header">

    </div>
    <div class="pg-body">
        <div class="body-menu">
            <ul>
                <li>11</li>
                <li>11</li>
                <li>11</li>
                <li>11</li>
            </ul>
        </div>
        <div class="body-content">
            ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
            <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
            <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
            <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
            <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
            <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
        </div>
    </div>
</body>
</html>
页面布局 后台管理通用 跟html课程简介差不多。重要

 

9 visibility 的hidden 隐藏内部元素不会使其块高度发生变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 20px;visibility: hidden;">123</div>
    <div style="height: 20px;">345</div>

    <div style="height: 100px;background-color: red;overflow: auto;">
        <h1>sdf</h1>
    </div>
</body>
</html>
View Code

 

10 承接第8个点， 后台管理右侧添加滚动条

overflow 为scroll 或者auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 ;
        }
        .pg-header{
            height: 48px;
            background-color: #dddddd;
        }
        .pg-body .body-menu{
            position: absolute;
            width: 180px;
            background-color: antiquewhite;
            left: 0;
        }
        .pg-body .body-content{
            position: absolute;
            top: 48px;
            left: 182px;
            right: 0;
            bottom: 0;
            background-color: blueviolet;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header">

    </div>
    <div class="pg-body">
        <div class="body-menu">
            <ul>
                <li>11</li>
                <li>11</li>
                <li>11</li>
                <li>11</li>
            </ul>
        </div>
        <div class="body-content">
            <h1>

            </h1>
            <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
            <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
            <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
            <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
            <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
            <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
        </div>
    </div>
</body>
</html>
承接第8个点， 后台管理右侧添加滚动条

 

11 提示按钮显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>
                <div style="position: relative;">
                    <a>删除</a>
                    <div style="position: absolute;left: 38px;top: -2px;">
                        <input type="button" value="确定" /> <input type="button" value="取消" />
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>
                <div style="position: relative;">
                    <a>删除</a>
                    <div style="position: absolute;left: 38px;top: -2px;">
                        <input type="button" value="确定" /> <input type="button" value="取消" />
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>
                <div style="position: relative;">
                    <a>删除</a>
                    <div style="position: absolute;left: 38px;top: -2px;">
                        <input type="button" value="确定" /> <input type="button" value="取消" />
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
View Code

 

12 弹出的遮罩层的对话框

z-index 和 遮罩层透明度

两种透明表示 opacity 和 rgba

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .model{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.5);
            z-index: 2;
        }
        .content{
            height: 300px;
            width: 400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left:50%;
            z-index: 3;
            margin-left: -200px;
            margin-top: -200px;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;background-color: red">
        <h1>sdf</h1><h1>sdf</h1><h1>sdf</h1><h1>sdf</h1><h1>sdf</h1><h1>sdf</h1>
    </div>
    <div class="model"></div>
    <div class="content"></div>

</body>
</html>
弹框

 

13 网页的搜索框内的小人或者小锁或者图片在input最右侧，而且输入不被其遮盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .user{
            position: relative;
            width: 250px;
        }
        .user input{
            height: 30px;
            width: 170px;
            padding-right: 30px;
        }
        .user .ren{
            position: absolute;
            top: 8px;
            left: 180px;
        }
    </style>
</head>
<body>
    <div class="user">
        <input type="text">
        <span class="ren">R</span>
    </div>
</body>
</html>
搜索框的锁在框右侧

 

14 实现事件绑定使得input值加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .up{
            border-top: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid green;
            border-left: 30px solid transparent;
            display: inline-block;
        }
        .down{
            border-top: 30px solid green;
            border-right: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-left: 30px solid transparent;
            display: inline-block;
        }
        .c1{
            border: 30px solid transparent;
            border-top: 30px solid blue;
            margin-top: 0px;
            display: inline-block;
        }
        .c1:hover{
            border: 30px solid transparent;
            border-bottom: 30px solid green;
            margin-top: -200px;
        }
    </style>
</head>
<body>
    <div style="background-color: red">
        <span class="c1"></span>
        <span style="display: inline-block;margin-top: 10px;">1</span>
        <span>2</span>
        <span style="display: inline-block;">3</span>
    </div>
    <!--<span style="margin-top: 20px;">1111111</span>-->
    <!--<div style="margin-top: -20px;">123</div>-->
    <!--<div style="margin-top: -20px;">456</div>-->
    <style>

    </style>
    <div>
        <div class="menu">
            <span>内容</span>
            <span class="icon"></span>
            <div class="content">
                <div>11</div>
                <div>22</div>
                <div>33</div>
            </div>
        </div>

    </div>
</body>
</html>
View Code

 

随记

一、知识点的补充
	1、 
		a. 一般情况
			.c1 .item{}
			.c2 .item{}
			<div class='c1'>
				<div class='item'></div>
				<div class='item'></div>
				<div class='item'></div>
			</div>
			<div class='c2'>
				<div class='item'></div>
				<div class='item'></div>
				<div class='item'></div>
			</div>
		b. 公共插件
			.box1{}
			
			
			<div>
				<div class='box1'>
				
	2、clear:both
		现象：
			div  clear:both;
		问题：不可能每次都在最后添加一个标签
		？？？：某个东西，帮助自动在最后添加标签
			
	3、hover的应用
		a. hover后加选择器
		b. hover（oh）
		
	4、position
			fixed   固定在屏幕的某个位置：top  left ...
			
			relative
			absolute
			
	5、小尖角
		
	6、图标
		图片(PS自己)
		css
		自己画font（fontawsome）
		
	7、a标签中嵌套图片(默认样式)
		
	8、目录
		
		day8
			- app
				- s1.html
				- s2.hmtl
			- css
				- commons.css
			- script
				- commons.js
				
			- plugin
				- bootstrap
				- bxslider
				- ...
	9、important
	
二、实例讲解
	1、后台页面布局
		overflow:auto;
		position: absolute;
	2、提示框
		边缘标签：relative，absolute
	3、Tab
		display:none
	4、登录
		relative，absolute
		padding
	
	5、html+css
	
	6、bxslider
	
	7、加减（JS）
	
三、答疑

　　

　　

 

 

 

 

posted @ 2016-07-05 11:18  众里寻，阑珊处  阅读(233)  评论(0)  编辑  收藏  举报
返回顶部