php

php

php相关问题
html+css

html+css

JavaScript

JavaScript

js,jquery,vue.js等
Linux

Linux

Linux操作系统
Mysql

Mysql

各种资源

各种资源

开发工具,手册等
就业指导

就业指导

UI设计

UI设计

教学视频分享

教学视频分享

css的4种引入方式5种选择器

赵老师 发表了文章 • 0 个评论 • 61 次浏览 • 2018-04-28 11:38 • 来自相关话题

 1内联  <p  style="position:absolute;"></p>

2内嵌 <style></style>

3外部链接<link rel=”stylesheet” type=”text/css”  href=”x..css”

4导入方式<style> @import url(test.css)</style>

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

选择器


1 类型选择器 p body input

2类选择器 .mybody

3id选择器  #what

4后代选择器 #what p

5伪类选择器




       a:link{ color:red;}

       a:visited{ color:blue;}

       a:hover{ color:black;}

       a:active{ color:#6600CC;}

       注意:设置的顺序不能变,遵循爱恨(love/hate)原则。 ——此原则自己在网上看别人说的,便于记忆就写在这了

:root   ------------------------------ 文档的根

       :nth-child(n)  --------------------- 作为其父元素的第n个孩子的一个元素             

       :nth-last-child(n) ---------------- 作为其父元素的第n个孩子的一个元素,从最后一个数起 

       :nth-of-type(n)  ------------------ 作为其类型的第n个兄弟的一个元素

       : nth-last-of-type(n)  -----------  作为其类型的第n个兄弟的一个元素,从最后一个数起

       :first-child   ----------------------   作为其父元素的第1个孩子的一个元素      

       :last-child  -----------------------   作为其父元素的最后1个孩子的一个元素

       :first-of-type  --------------------   作为其类型的第1个兄弟的一个元素

       :last-of-type   -------------------    作为其类型的第1个兄弟的一个元素,从最后一个数起

       :only-child     --------------------   作为其父元素的唯一1个孩子的一个元素

       :only-of-type  -------------------   作为其类型的唯一1个兄弟的一个元素

       :empty  --------------------------  没有孩子或文本的一个元素

 :first-letter    第一个字母

       :after       选择元素的后面,允许在这些位置插入内容

       :before    选择元素的前面,允许在这些位置插入内容 查看全部
 1内联  <p  style="position:absolute;"></p>

2内嵌 <style></style>

3外部链接<link rel=”stylesheet” type=”text/css”  href=”x..css”

4导入方式<style> @import url(test.css)</style>

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

选择器


1 类型选择器 p body input

2类选择器 .mybody

3id选择器  #what

4后代选择器 #what p

5伪类选择器




       a:link{ color:red;}

       a:visited{ color:blue;}

       a:hover{ color:black;}

       a:active{ color:#6600CC;}

       注意:设置的顺序不能变,遵循爱恨(love/hate)原则。 ——此原则自己在网上看别人说的,便于记忆就写在这了

:root   ------------------------------ 文档的根

       :nth-child(n)  --------------------- 作为其父元素的第n个孩子的一个元素             

       :nth-last-child(n) ---------------- 作为其父元素的第n个孩子的一个元素,从最后一个数起 

       :nth-of-type(n)  ------------------ 作为其类型的第n个兄弟的一个元素

       : nth-last-of-type(n)  -----------  作为其类型的第n个兄弟的一个元素,从最后一个数起

       :first-child   ----------------------   作为其父元素的第1个孩子的一个元素      

       :last-child  -----------------------   作为其父元素的最后1个孩子的一个元素

       :first-of-type  --------------------   作为其类型的第1个兄弟的一个元素

       :last-of-type   -------------------    作为其类型的第1个兄弟的一个元素,从最后一个数起

       :only-child     --------------------   作为其父元素的唯一1个孩子的一个元素

       :only-of-type  -------------------   作为其类型的唯一1个兄弟的一个元素

       :empty  --------------------------  没有孩子或文本的一个元素

 :first-letter    第一个字母

       :after       选择元素的后面,允许在这些位置插入内容

       :before    选择元素的前面,允许在这些位置插入内容

css美化复选框

刘老师 发表了文章 • 0 个评论 • 98 次浏览 • 2018-01-27 18:03 • 来自相关话题

在页面布局中经常用到复选按钮和单选按钮,而浏览器自带的checkbox样式单一,而且不同浏览器呈现出来的效果也不尽相同,为了实现样式统一和美化,我们提供一种可以利用纯css美化checkbox的方法,以供参考
 
纯css实现的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的input元素,即使这个input本身不可被用户可见,有个与它对应的label后,用户可以直接通过和label标签交互来替代原生的input——而这给我们的样式模拟留下了空间。简而言之就是隐藏原生input,样式定义的过程留给label 
 
以下是实现代码
 

<html>
        <head>
                <title></title>
                <style>
                        .box{
                                width:500px;
                                margin: 0 auto;
                                background-color: white;
                        }
                        input[type="checkbox"]{
                                display: none;
                        }
                        input[type="checkbox"]+label {
                                position:relative;
                                display: inline-block;
                                width: 20px;
                                height: 20px;
                                background: #eee;
                                vertical-align: bottom;
                                -webkit-border-radius: 50%;
                                margin-right: 5px;
                                -webkit-box-sizing:border-box;
                                margin-top: 10px;
                        }
                        input[type="checkbox"]+label:before{
                                position: absolute; 
                                content: ""; 
                                width: 8px; 
                                height: 4px; 
                                border: 2px solid #f78642; 
                                border-top: none; 
                                border-right: none; 
                                transform: rotate(-45deg); 
                                top: 5px; 
                                left: 5px;
                                display:none;
                        }
                        input[type="checkbox"]:checked+label::before{
                                display:block;
                        }
                </style>
        </head>
        <body>
                <div class="box">
                        <input type="checkbox" value="guangpan" name="choose" id="tian">
                        <label for="tian"></label>
                        <label for="tian">天龙八部</label>
                        <input type="checkbox" value="kaiche" name="choose" id="shen">
                        <label for="shen"></label>
                        <label for="shen">神雕侠侣</label>
                        <input type="checkbox" value="laiji" name="choose" id="xiao">
                        <label for="xiao"></label>
                        <label for="xiao">笑傲江湖</label>
                </div>
        </body>
</html>

  查看全部
在页面布局中经常用到复选按钮和单选按钮,而浏览器自带的checkbox样式单一,而且不同浏览器呈现出来的效果也不尽相同,为了实现样式统一和美化,我们提供一种可以利用纯css美化checkbox的方法,以供参考
 
纯css实现的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的input元素,即使这个input本身不可被用户可见,有个与它对应的label后,用户可以直接通过和label标签交互来替代原生的input——而这给我们的样式模拟留下了空间。简而言之就是隐藏原生input,样式定义的过程留给label 
 
以下是实现代码
 


<html>
        <head>
                <title></title>
                <style>
                        .box{
                                width:500px;
                                margin: 0 auto;
                                background-color: white;
                        }
                        input[type="checkbox"]{
                                display: none;
                        }
                        input[type="checkbox"]+label {
                                position:relative;
                                display: inline-block;
                                width: 20px;
                                height: 20px;
                                background: #eee;
                                vertical-align: bottom;
                                -webkit-border-radius: 50%;
                                margin-right: 5px;
                                -webkit-box-sizing:border-box;
                                margin-top: 10px;
                        }
                        input[type="checkbox"]+label:before{
                                position: absolute; 
                                content: ""; 
                                width: 8px; 
                                height: 4px; 
                                border: 2px solid #f78642; 
                                border-top: none; 
                                border-right: none; 
                                transform: rotate(-45deg); 
                                top: 5px; 
                                left: 5px;
                                display:none;
                        }
                        input[type="checkbox"]:checked+label::before{
                                display:block;
                        }
                </style>
        </head>
        <body>
                <div class="box">
                        <input type="checkbox" value="guangpan" name="choose" id="tian">
                        <label for="tian"></label>
                        <label for="tian">天龙八部</label>
                        <input type="checkbox" value="kaiche" name="choose" id="shen">
                        <label for="shen"></label>
                        <label for="shen">神雕侠侣</label>
                        <input type="checkbox" value="laiji" name="choose" id="xiao">
                        <label for="xiao"></label>
                        <label for="xiao">笑傲江湖</label>
                </div>
        </body>
</html>


 

html定位详解

刘老师 发表了文章 • 0 个评论 • 156 次浏览 • 2018-01-27 10:51 • 来自相关话题

在页面布局中,定位是应用极广的一种布局方法,然而很多人对定位只是停留在会用的阶段,实际上是一知半解的状态,下面就各种定位的特点一一讲述。
1.static(静态)定位,默认值,没有定位,元素出现在正常的流中(忽略left,right,top,bottom和z-index声明)
 
2.relative(相对)定位,可以通过设置left,right,top,bottom来设定其相对原来位置的偏移量,但元素本身并没有脱离普通流,也就是说元素原本所在位置依然被其占着,其余元素并不能移到他原本所在位置,相当于原来位置没有东西了但还是被占着,如下代码:
 

<html>
        <head>
                <title></title>
                <style>
                        *{
                                margin:0;
                                padding:0;
                        }
                        .red{
                                background:red;
                                width:100px;
                                height:100px;
                                position:relative;
                                left:20px;
                                top:20px;
                        }
                        .blue{
                                background:blue;
                                width:100px;
                                height:100px;
                        }
                </style>
        </head>
        <body>
                <div class='red'></div>
                <div class='blue'></div>
        </body>
</html>

在页面中显示为:




 
3.absolute(绝对)定位,元素会脱离普通流,使用left,right,top,bottom等属性相对其最接近的一个并有定位设置(并不一定是relative定位,只要是非static定位即可)的父元素进行绝对定位,如果不存在这样的父对象,则相对于body元素定位。如下代码:
 

<html>
        <head>
                <title></title>
                <style>
                        *{
                                margin:0;
                                padding:0;
                        }
                        .black{
                                margin-top:200px;
                                background:black;
                                width:200px;
                                height:200px;
                        }
                        .red{
                                background:red;
                                width:100px;
                                height:100px;
                                position:absolute;
                                left:20px;
                                top:20px;
                        }
                        .blue{
                                background:blue;
                                width:100px;
                                height:100px;
                                position:absolute;
                                left:20px;
                                top:20px;
                         }
                </style>
        </head>
        <body>
                <div class='black'>
                        <div class='red'>
                                <div class='blue'></div>
                        </div>
                </div>
        </body>
</html>

在页面中显示为:




 
4.fixed(固定)定位,元素会脱离普通流,可以通过设置left,right,top,bottom来相对于窗口定位。
 
我们可以通过设置定位元素的z-index值来规定其在页面中的显示层级,注意,z-index属性仅对非static定位元素有效 查看全部
在页面布局中,定位是应用极广的一种布局方法,然而很多人对定位只是停留在会用的阶段,实际上是一知半解的状态,下面就各种定位的特点一一讲述。
1.static(静态)定位,默认值,没有定位,元素出现在正常的流中(忽略left,right,top,bottom和z-index声明)
 
2.relative(相对)定位,可以通过设置left,right,top,bottom来设定其相对原来位置的偏移量,但元素本身并没有脱离普通流,也就是说元素原本所在位置依然被其占着,其余元素并不能移到他原本所在位置,相当于原来位置没有东西了但还是被占着,如下代码:
 


<html>
        <head>
                <title></title>
                <style>
                        *{
                                margin:0;
                                padding:0;
                        }
                        .red{
                                background:red;
                                width:100px;
                                height:100px;
                                position:relative;
                                left:20px;
                                top:20px;
                        }
                        .blue{
                                background:blue;
                                width:100px;
                                height:100px;
                        }
                </style>
        </head>
        <body>
                <div class='red'></div>
                <div class='blue'></div>
        </body>
</html>


在页面中显示为:
relative.png

 
3.absolute(绝对)定位,元素会脱离普通流,使用left,right,top,bottom等属性相对其最接近的一个并有定位设置(并不一定是relative定位,只要是非static定位即可)的父元素进行绝对定位,如果不存在这样的父对象,则相对于body元素定位。如下代码:
 


<html>
        <head>
                <title></title>
                <style>
                        *{
                                margin:0;
                                padding:0;
                        }
                        .black{
                                margin-top:200px;
                                background:black;
                                width:200px;
                                height:200px;
                        }
                        .red{
                                background:red;
                                width:100px;
                                height:100px;
                                position:absolute;
                                left:20px;
                                top:20px;
                        }
                        .blue{
                                background:blue;
                                width:100px;
                                height:100px;
                                position:absolute;
                                left:20px;
                                top:20px;
                         }
                </style>
        </head>
        <body>
                <div class='black'>
                        <div class='red'>
                                <div class='blue'></div>
                        </div>
                </div>
        </body>
</html>


在页面中显示为:
1517020367.png

 
4.fixed(固定)定位,元素会脱离普通流,可以通过设置left,right,top,bottom来相对于窗口定位。
 
我们可以通过设置定位元素的z-index值来规定其在页面中的显示层级,注意,z-index属性仅对非static定位元素有效

清除浮动常用的三种方法

刘老师 发表了文章 • 0 个评论 • 74 次浏览 • 2018-01-19 18:08 • 来自相关话题

1、什么是浮动
浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素
2、浮动会带来什么负面效果
a)会造成父元素塌陷,如果父元素有背景色,则不会显示
b)会使紧随其后的行内元素围绕排列
c)会使紧随其后的块状元素被覆盖
所以,只要有浮动产生,我们就必须清除浮动
3、清除浮动常用的三种方法
(1)添加一个空标签,这也是初学者最常用的方式
<div style='clear:both;'></div>
我们在父级标签结束之前加入此div引入clear:both;样式,这种清除浮动的方式优点是通俗易懂,适合初学者,缺点是会给页面添加很多无意义的空标签,影响代码的结构和语义化
(2)给父元素添加overflow:hidden样式(不推荐使用)
(3)使用伪元素:after
 

<div class="box">
        <div class="left-box" style='float:left'>左边</div>
        <div class="right-box" style='float:right'>右边</div>
</div>

.box:after{
        display: "block"; 
        clear:both; 
        height:0; 
        content: ""; 
        visibility: hidden; 
        overflow:hidden; 
}

推荐使用第三种方法清除浮动
  查看全部
1、什么是浮动
浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素
2、浮动会带来什么负面效果
a)会造成父元素塌陷,如果父元素有背景色,则不会显示
b)会使紧随其后的行内元素围绕排列
c)会使紧随其后的块状元素被覆盖
所以,只要有浮动产生,我们就必须清除浮动
3、清除浮动常用的三种方法
(1)添加一个空标签,这也是初学者最常用的方式
<div style='clear:both;'></div>
我们在父级标签结束之前加入此div引入clear:both;样式,这种清除浮动的方式优点是通俗易懂,适合初学者,缺点是会给页面添加很多无意义的空标签,影响代码的结构和语义化
(2)给父元素添加overflow:hidden样式(不推荐使用)
(3)使用伪元素:after
 


<div class="box">
        <div class="left-box" style='float:left'>左边</div>
        <div class="right-box" style='float:right'>右边</div>
</div>

.box:after{
        display: "block"; 
        clear:both; 
        height:0; 
        content: ""; 
        visibility: hidden; 
        overflow:hidden; 
}


推荐使用第三种方法清除浮动
 

关于浮动列表项绝对居中的方法

刘老师 发表了文章 • 0 个评论 • 72 次浏览 • 2018-01-19 11:38 • 来自相关话题

    在页面布局中,我们常需要将列表项浮动在一行显示,如下图所示,




那么我们是如何调整让列表项水平局中呢,通常做法是通过调整列表项li的margin和padding使其水平居中显示,但是这样做有一个弊端,一旦屏幕大小发生变化,则列表项将不再居中,这里提供一种水平方向绝对居中的方法,

<div class='list-box'>
        <ul class='list'>
                <li>天龙八部</li>
                <li>神雕侠侣</li>
                <li>笑傲江湖</li>
                <li>雪山飞狐</li>
        </ul>
</div>
 
.list-box{
        text-align:center;
}
.list{
        display:inline-block;
}
.list li{
        float:left;
}

此时列表项li在水平方向将绝对居中 查看全部
    在页面布局中,我们常需要将列表项浮动在一行显示,如下图所示,
1516329698(1).png

那么我们是如何调整让列表项水平局中呢,通常做法是通过调整列表项li的margin和padding使其水平居中显示,但是这样做有一个弊端,一旦屏幕大小发生变化,则列表项将不再居中,这里提供一种水平方向绝对居中的方法,


<div class='list-box'>
        <ul class='list'>
                <li>天龙八部</li>
                <li>神雕侠侣</li>
                <li>笑傲江湖</li>
                <li>雪山飞狐</li>
        </ul>
</div>
 
.list-box{
        text-align:center;
}
.list{
        display:inline-block;
}
.list li{
        float:left;
}


此时列表项li在水平方向将绝对居中