你的位置:首页 > 网页设计

[网页设计]web前端基础知识

#HTML

    什么是HTML,和他ML...

    网页可以比作一个装修好了的,可以娶媳妇的房子.


    房子分为:毛坯房,精装修

    毛坯房的修建: 砖,瓦,水泥,石头,石子....

    精装修的房子:在毛坯房的基础上进行粉刷,覆盖,雕琢,修饰等操作....
    

    HTML标签 相当于盖毛坯房用的石子,砖瓦....:房子成功,但是不会很好看.

    CSS属性  相当于装修时候使用的刷子,涂料,扣板...: 可以让毛坯房变得更加美观


    
HTML

    超文本标记语言. HyperText Markup Language


HTML标签的格式:

    格式:

        <标签名 属性名="属性值" 属性名="属性值"....>内容</标签名>


    注意: 标签可以嵌套使用.嵌套包含时必须被另外一个标签完全包含.





HTML常用标签:

    全局架构标签: 网页中必不可少的部分.

        <!DOCTYPE html>
        <html>
            <head>
                书写内容不可见的部分;
            </head>
            <body>
                书写内容可见;
            </body>
        </html>


#BODY体
---
    body标签

        属性:

        bgcolor   backgroundcolor  背景颜色
    
---
    标题标签

        h1  表示当前页面的最主要内容,一个h1标签在一个页面中军允许使用一次.

        h2  表示当前页面的次要内容,允许使用多个.

        h3  表示其他信息内容标题,比次要内容等级还要低..

        h4  .... 不推荐使用

        h5  .... 不推荐使用

        h6  .... 不推荐使用

        标题标签的作用:
        
            用于书写标题.

        标题的标签的特征:

            所有标签内容都是粗体,
            字体大小从h1-h6逐渐减小
            自带回车换行效果


----

    样式标签:

        b  粗体标签,仅用于表示样式  bold

        i  斜体标签  italic

        u  下划线标签  underline


        strong  粗体标签 ,还在页面中起到一个强调的作用,对搜索引擎而言

        em   斜体标签,,还在页面中起到一个强调的作用,对搜索引擎而言,更强烈一点

        city 斜体标签,还在页面中起到一个强调的作用,对搜索引擎而言

        font 字体样式标签

            属性:
    
                color 颜色

                size 大小 1-7

                face 字体类型,都是在用户的电脑中获取字体类型


----

    格式标签:

        p  段落标签    

        hr  水平线标签

        br  强制换行标签


        注意:hr和br标签比较特殊,这类标签只有开始没有结束,单标签或者自封闭标签

        成对标签: <body></body>

        单标签:  <hr />

----

    列表标签:

        ul  无序列表  unorder list
            
            格式:  常用与制作导航

                <ul>
                    <li>锄禾日当午</li>
                    <li>清明上河图</li>
                    <li>造血干细胞</li>
                    <li>班长兼学位</li>
                </ul>

        ol  有序列表  order list

            格式:

                <ol>
                    <li>英雄联盟</li>
                    <li>地下城与勇士</li>
                    <li>穿越火线</li>
                    <li>御龙在天</li>
                </ol>


        注意:有顺序关系的并列内容使用ol,没有顺序关系的列表使用ul.

        dl  定义列表  defined list

        dt  定义列表的标题

        dd  定义列表的属性

            定义列表仅用于定义一个事物.

            格式:

                <dl>
                    <dt>杜子腾</dt>
                    <dd>身高:170cm</dd>
                    <dd>体重:50kg</dd>
                    <dd>胸围:C-cup</dd>
                    <dd>性别:女</dd>
                </dl>
            

---

    表格标签:

        
        table  用于定义表格的范围

            属性:

                border: 设置边框的粗细

                width: 设置表格的表格的总宽度

                height: 设置表格的总高度

                align : 设置表格水平方向的对其方式

                    值: left 左对齐 center 居中对其  right 右对齐

                bgcolor: 设置背景颜色

        tr  定义表格的行

            bgcolor 设置行的背景颜色

        td  定义表格的单元格

            bgcolor 设置单元格的背景颜色

            rowspan  设置单元格的跨行数量

            colspan  设置单元格的跨列数量



        就近原则概念:

            如果具有嵌套关系的标签设置了同一种属性,那么离标签越近的属性优先级别越高.


        表格的书写格式:

            <table border="1">
                <tr>
                    <td>曹操</td>
                    <td>张苞</td>
                    <td>张郎</td>
                </tr>
                <tr>
                    <td>曹操</td>
                    <td>张苞</td>
                    <td>张郎</td>
                </tr>
                .....
            </table>

        th  单元格标签的一种,用法和td是一样的

            th标签专门用于制作表格的表头部分,字体默认粗体,水平居中对其
    
        caption  表格描述标签,用于为表格添加一个标题


----
    超链接

        在网页中,通过点击操作能够打开新的页面的结构就是超级链接,简称超链接.

        a 标签

            target属性  设置目标地址的打开方式

                _self  在当前页面打开  默认值

                _blank 在新页面打开

            href属性  设置连接的目标地址

            在web中的地址问题:
            
                绝对连接:  带有协议的连接就是绝对连接

                    http://www.itxdl.cn  他的协议是http://   超文本传输协议

                    https://www.taobao.com 他的协议是 https:// 带有安全'套接字'的超文本传输协议

                    ftp://  ftp协议  文件传输协议

                    ftps://....

                    file://  本地文件协议


                相对连接:  没有协议的连接就是相对连接

                    ./a/bcd/1.html

                    ../a/bcd/2.html

                    a/bcd/1.html

                    . 表示在当前页面所在的文件夹中查找

                    .. 表示在当前页面所在文件夹的上层文件夹查找


            

                

----
    图片标签

        img标签

            src  设置图片来源,图片地址

            width 设置图片的宽度

            height 设置图片的高度

            border 设置图片边框粗细

            alt 设置图片描述信息

            title 设置图片的描述信息

----

    表单标签:

        在页面中用于和用户交互的空间都是表单标签.主要作用是向服务器端发送数据.

    

    form  定义表单的范围及表单的提交方式标签

        属性:
    
        action 设置当前表单内容的提交地址

        method  设置当前表单提交内容的方式,get 和post 方式

            get方式: 信息明文传送,可以直接观察到,get方式传输数据量有限.(明信片)

            post方式:信息非明文传输,不可以直接观测到,post传输方式数据量非常大.(写信)

        enctype 设置传输信息的加密方式  

            multipart/form-data  上传文件专用

---

    input 输入标签


        该标签通过改变type属性,可以获取9中不同风格的表单

        type="text"  文本输入框

        type="password" 密码输入框

        type="radio" 单选表单

        type="checkbox"  复选表单

        type="file" 文件选取表单

        type="hidden"  隐藏表单

        type="submit" 提交按钮

        type="reset" 重置按钮

        type="image"  图片提交按钮


        input标签常用属性:

            type 设置表单类型
        
            name 设置表单名称

            value 设置表单值

----


    select 下拉列表或者多选列表标签

        name 设置表单的名称,value在option中设置

        multiple 设置是否为多选列表

        下拉列表

            <select name="city1">
                <option value="北京">北京</option>
                <option value="南京">南京</option>
                <option value="东京">东京</option>
                <option value="西京">西京</option>
            </select>

        多选列表

            <select name="city2" multiple>
                <option value="北京">北京</option>
                <option value="南京">南京</option>
                <option value="东京">东京</option>
                <option value="西京">西京</option>
            </select>

    option  多选列表的列表标签

    textarea  文本域标签/多行文本标签

        name 设置表单的名称

        cols 设置表单的列数(宽度)

        rows 设置表单的行数(高度)

    button 自定义按钮标签

        type 设置按钮的类型  submit提交按钮  reset 重置按钮  button 普通按钮


----
    页面布局标签:

        div  用于页面布局操作,没有特殊意义


        span  内容标签
        

        块状元素:div

            块状元素独占一行

            块状元素可以设置宽度高度



        内联元素:span

            内联元素可以在一行共存

            内联元素高度和宽度无效

----

#head头信息


    title  设置网站的标题,显示在标签栏中

    meta  设置浏览器信息或者设置搜索引擎相关信息

        为浏览器设置信息
        
            字符集设置

            <meta charset="utf-8" />  H5
            <meta http-equiv="content-type" content="text/html;charset=utf-8">   H4

        为搜索引擎设置信息

            关键字

            <meta name="keywords" content="关键字,关键字....." />

            描述

            <meta name="description" content="写人话,对战网的简洁描述" />



    base  基准连接标签

        href  为页面中所有相对连接设置一个基础的绝对地址.对绝对连接无效

        target 为页面中没有设置target属性的连接,强制设置为当前设定值








        









##表示颜色的方式

    HTML中表示颜色的方式有三种:

        英文单词  : red,green,blue....

        RGB格式  : R red G green B blue  

            仅IE支持,不推荐在HTML中使用RGB格式

            RGB(红色值,绿色值,蓝色值);
            
            每种颜色的取值  0-255

        HEX模式 :

            #红色值绿色值蓝色值
            
            #FF9900  红色 FF 绿色99 蓝色00
    


##SEO和SEM

    SEO: 搜索引擎优化,长期的规程要有耐心,不花钱就可以提升自然排名

    SEM: 搜索引擎影响,投入金钱,短期见效.
    


##关于字符集

    可以认为字符集就是语言种类

    页面字符集:文件本身的字符集类型就是页面字符集.

    声明字符集:通知浏览器文件中字符的字符集类型.

    保证页面不乱码: 保证页面字符集和声明字符集一致即可.


    中文字符集:

        utf-8  国际统一字符集,能够表示世界上绝大多数的语言.

        gbK    国家标准的扩展版本,包含所有中文文字

        gb2312  国家2312标准字符集,包含5000个常用汉字

        big5  繁体中文字符集
    


#HTML和XHTML

    XHTML也是超文本标记语言的一种,是严格语法的HTML语种.

    HTML规范比较松散:

        单标签可以不封闭

        属性值 可以使用单双引号也可以不用....


    XHTML 8大语法要求:

        1.所有标签名和属性名必须小写

        2.所有标签必须封闭,单标签需要自封闭

        3.所有标签嵌套必须合法

        4.所有属性必须有值,multiple值为本身  multiple ="multiple"

        5.所有属性必须使用双引号

        6.所有图片标签必须使用alt属性

        7.所有注释内容中不可以出现-,可以使用=代替横线

        8.所有特殊字符必须使用实体字符表示


##HTML中的注释


    作用:仅仅用于页面中的内容描述 不会影响显示和效果

    格式:

        <!--注释内容-->
        

##实体字符

    用于在页面中输出特殊字符的字符格式就是实体字符;

    常用实体字符

        &nbsp;  空格

        &lt;  小于号

        &gt;  大于号





#关于HTML5

    故事讲完了!~


html5标准的改变

    html5依旧是松散语法的HTML版本,继承HTML4而来的.

    Xhtml5也是被官方默认的一个版本.

    1.DTD声明的改变

        <!DOCTYPE html>

    2.标签的改变

        不可以写结束标签的表

            br ,hr ,img,....

        可以省略结束标签的标签

            li,option,tr,td...

        可以完全省略的标签

            html,head,body,....



##针对搜索引擎的优化

    
    为了让搜索引擎更好的识别和收录页面内容.HTML5为搜索引擎新增了一系列的结构标签


        header   用于表示网站结构顶部的标签
    
        footer   用于表示网站底部结构都而标签
    
        aside   用于 表示网站侧边栏的标签
    
        section  用于表示网站主体区域的标签
    
        nav   用于表示网站导航区域的标签
    
        article  用于表示页面文章的标签
    
        figure  用于信息描述的标签
    
        figcaption 用于信息描述的配合标签
    
        hgroup  网站标题组标签
    
        details 信息详解标签
    
        time  时间标签
    
        address  地址标签
    
        mark  标注标签



    总结:不要害怕,以上标签都是div标签


##多媒体标签

    audio   音频标签

        属性:

            src 引入音乐文件地址

            controls 设置是否具有控制面板属性

            loop 设置是否循环播放属性

            autoplay 设置是否自动播放属性

        <!--音频标签-->
        <audio src="./_WStyle.mp3" controls></audio>


        <!--兼容性的音频标签写法-->
        <audio controls loop>
            您的破浏览器不支持该标签
            <source src="_WStyle.mp3" type="audio/mp3">
            <source src="_WStyle.ogg" type="audio/ogg">
        </audio>

    video  视频标签

        src 引入视频地址

        controls  设置是否具有控制面板

        poster  设置视频的预览图

        width  设置视频的宽度

        height 设置视频的高度

        autoplay 自动播放视频


        <!--简单写法-->
        <video src="movie.webm" controls></video>
        <!--完整写法-->
        <video controls poster="2.jpg" width="1000" height="500">
            您的破浏览器不支持视频标签.
            <source src="./movie.webm" type="video/webm" />
            <source src="./movie.webm" type="video/webm" />
            <source src="./movie.webm" type="video/webm" />
        </video>

    canvas  画布标签

        可以用于绘画操作,制作画图板,
        可以用于游戏制作....

    embed  媒体标签

        用于在在页面中引入flash文件

        <embed src="旋转的文字.swf" width="500" height="300"></embed>



##智能表单

    对HTML4中的表单用法和标签类型进行了扩展.


        URL表单   type="url"
    
        邮箱表单  type="email"    
    
        电话表单  type="tel"    
    
        颜色表单  type="color"
    
        滑块表单  type="range"
    
        搜索表单  type="search"
    
        数字表单  type ="number"
    
        日期表单  type="date"
    
        时间表单  type="time"
    
        周选取表单  type="week"
    
        月选取表单  type="month"
    
        日期时间表单  type="datetime"  仅Opera浏览器识别
    
        日期时间表单  type="datetime-local"
        

    注意:以上所有新增表单都是HTML5为input 标签新增的表单类型


新增的智能表单用法:

    在HTML4中 表单标签必须放在Form标签之中才可以被提交到服务器,

    如果页面中存在多个form表单并且在页面布局时比较分散,不适合排版很难处理


    HTML5中允许将表单标签和form标签进行分离操作:

        1.为form标签添加一个id属性

        2.为制定的需要提交的属性当前form的表单标签添加form属性,值为form的id值

    #CSS

    css是什么?

    CSS的作用用于修饰页面中的HTML标签.

    层叠样式表!


##浏览器

    浏览器一共有五大厂商:

        IE浏览器           微软公司     
        
        chrome浏览器       谷歌

        firefox浏览器       MOZ组织

        Opera浏览器        欧朋/360

        safari浏览器     apple公司


    浏览器前缀:

        如果CSS属性没有最终实现而是出于实验阶段,使用属性的时候需要对当前CSS进行私有属性标注才可以生效.   标注的部分称之为浏览器私有属性前缀:


        IE浏览器           -ms-  
        
        chrome浏览器       -webkit-

        firefox浏览器       -moz-

        Opera浏览器        -o-/-webkit-   早期/后期

        safari浏览器     -webkit-



#取值和单位

    颜色:

        英文单词模式

        RGB模式

        HEX模式

    新增颜色模式

        RGBA模式

            在RGB模式基础上增加了透明度设置的颜色方式

            RGBA(红色值,绿色值,蓝色值,透明度)

            透明度的取值  0-1之间的小数  0 完全透明 1 完全不透明

        HSL模式

            H 色相(颜色的类型)  S 饱和度  L  亮度

            格式:

                HSL(色相,饱和度,亮度);   


            色相:  0-360的正数

            饱和度: 0% -100%

            亮度: 0% -100%

        HSLA模式

            格式:

                HSLA(色相,饱和度,亮度,透明度);

            透明度的取值  0-1之间的小数  0 完全透明 1 完全不透明



----

    长度单位:

        px  像素    用于表示一个颜色的点就是像素

            像素是一个相对单位,可以有系统进行调整.相对单位

        mm  毫米   不允许使用,绝对单位

        cm  厘米   不允许使用,绝对单位

        em  一个汉字的大小

        ex  一个小写x的大小



##CSS的使用方式

    分为四种使用方式:


    外链式CSS

        <link href="one.css" type="text/css" rel="stylesheet" />

    导入式CSS

        <style>
            @import url(./two.css);
        </style>

    嵌入式CSS

        <style>
            .three{
                width:100px;
                height:100px;
                background:cyan;
            }
        </style>

    内联式CSS

        <div ></div>


##CSS的格式

    CSS的具体格式:


    CSS选择器{

            CSS属性名:属性值;
            CSS属性名:属性值;

            ...
    }


CSS的选择器:

    用于选中页面中制定的标签添加样式,这种选择的语法就是选择器.

    
    HTML选择器

        直接使用HTML标签的名称进行选择,选中所有的同名的HTML标签

        标签名{css样式}

    CLASS选择器

        为需要选取的标签添加class属性,并且定义值,
        在CSS中使用.class属性值就可以选取具有class值的标签,可以添加多个元素

        .class名{css样式}

    
    
    ID选择器

        为需要选择的页面添加id属性,并且自定义一个值

        在CSS中使用#id值就可以选中这个标签,一个页面中禁止出现两个以上的同名ID

        #id名{CSS样式}


    关系选择器

        选中制定标签内部的所有指定标签.

        选择器1 选择器2{css样式}


    组合选择器

        同时使用多个选择器,中间使用逗号分隔,可以选中所有的符合选择器的元素添加样式

        选择器1,选择器2{css样式}

    通用选择器

        * 用于选中页面中的所有标签.使用时需要慎重,并且一般配合组合选择器使用

----
    
    属性选择器
    
        选择器[属性]  

            选中具有执行属性名称的标签

        选择器[属性="值"]  

            选中具有执行属性且名称和指定名称相同的标签

        选择器[属性^="字符"]

            选中具有执行属性,且属性以制定字符开头的标签

        选择器[属性$="字符"]

            选中具有执行属性,且属性以制定字符结尾的标签

        选择器[属性*="字符"]

            选中具有执行属性,且属性包含制定字符的标签

---

    结构选择器

        child系列

            first-child

                格式: 选择器:first-child{CSS样式}

            last-child

                格式: 选择器:last-child{CSS样式}

            nth-child

                格式: 选择器:nth-child(位置){CSS样式}

                位置可以使用数字,奇偶单词或者带有n的表达式

            nth-last-child

                格式: 选择器:nth-last-child(位置){CSS样式}

                位置可以使用数字,奇偶单词或者带有n的表达式

        注意:child系列的选取方式规则:

            1.选择符合选择器(:前面的部分)的元素

            2.选择所有选中元素的所有父元素

            3.找到所有父元素中制定位置的子元素

            4.验证第三步中找到的子元素是否符合第一步中用于选中元素的选择器(:前面的部分),如果符合则选中,如果不符合则抛弃

            


        of-type系列

            first-of-type

                格式: 选择器:first-of-type{CSS样式}

            last-of-type

                格式: 选择器:last-of-type{CSS样式}

            nth-of-type

                格式: 选择器:nth-of-type(位置){CSS样式}

                位置可以使用数字,奇偶单词或者带有n的表达式

            nth-last-child

                格式: 选择器:nth-last-of-type(位置){CSS样式}

                位置可以使用数字,奇偶单词或者带有n的表达式


            注意:of-type系列的选取方式规则:

                1.选中页面中所有符合选择器(:前面的部分)的元素

                2.选中所有符合选择器元素(:前面的部分)的所有父元素.

                3.将所有父元素中所有有符合选择器(:前面的部分)的元素组成一个新的集合

                4.在新的集合中选择指定位置的元素


    伪类选择器
            
        选择器:link
    
            选中符合选择器的元素的正常连接状态,仅适合于A标签

        选择器:hover

            选中符合选择器的元素的鼠标经过状态,适用于所有元素

        选择器:active

            选中符合选择器的元素的点击状态,仅适合于A标签

        选择器:visited
        
            选中符合选择器的元素的访问过后的连接状态,仅适合于A标签

        

    伪对象选择器

        选择器::first-letter

            选中符合选择器的内容中第一个字符,添加样式

        选择器::first-line

            选中符合选择器的内容中的第一行文字,添加样式

        选择器::before

            选中符合选择器的内容中的前半部分

        选择器::after

            选中符合选择器的内容的后半部分



##字体属性

    font-size :

        设置字体的大小

    font-weight:

        设置字体的粗细

    color :

        设置字体的颜色

    font-style :

        设置是否为斜体

    font-family:

        设置字体的累心,需要注意依然需要使用本地系统的字体库


##背景属性

    background

    background-color  设置元素的背景颜色

    background-image  设置元素的背景图片

        格式:
    
        background-image:url(图片地址);

    background-repeat: 设置背景图片的重复方式

        重复方式:

            repeat  横向和纵向重复
    
            no-repeat 不重复

            repeat-x  横向重复

            repeat-y 纵向重复

    background-position-x: 设置背景图片的横向位置

    background-position-y: 设置背景图片的纵向位置


        所有位置都可以使用长度单位或者百分比

        除此之外,横向位置可以使用left center  right 纵向位置 top  center  bottom

    background-size: 设置背景图片的大小



##透明度设置

    opacity  设置整个元素的透明度

        取值范围 0 -1   0 透明 1不透明


##盒子模型

    任何元素在浏览器中都会被以盒子模型的方式进行解析,解析只有具有盒子模型的属性.


    margin  外间距

        margin: 设置四个方向的外间距

        margin-left:  设置元素左侧的外间距

        margin-right  设置元素右侧的外间距

        margin-bottom  设置元素底部的外间距

        margin-top   设置元素顶部的外间距
        

    border  边框

        border: 设置边框的综合属性

        按照方向划分四个属性

        border-top:  设置顶部边框的颜色风格和宽度

        border-bottom 设置底部边框的颜色风格和宽度

        border-left  设置左侧边框的颜色风格和宽度

        border-right  设置右侧边框的颜色风格和宽度

        按照值划分三个属性

        border-width  设置四个边的宽度

        border-style  设置四个边的样式

        border-color  设置四个边的颜色
            
        按照值和方向划分12个属性

        border-top-width:  设置顶部边框的宽度

        border-top-style  设置顶部边框的风格

        border-top-color  设置顶部边框的颜色

        
        border-bottom-width:  设置底部边框的宽度

        border-bottom-style  设置底部边框的风格

        border-bottom-color   设置底部边框的颜色
 

        border-left-width:  设置左侧边框的宽度

        border-left-style  设置左侧边框的风格

        border-left-color  设置左侧边框的颜色



        border-right-width:  设置右侧边框的宽度

        border-right-style   设置右侧边框的风格

        border-right-color    设置右侧边框的颜色


        边框圆角属性

        border-radius:边框圆角综合属性,设置四个角

            水平和垂直半径相同:
    
            border-radius: 半径;

            水平和垂直半径不同:
            
            border-radius: 水平半径/垂直半径;


        border-top-left-radius: 设置左上角的圆角

            水平和垂直半径相同:
    
            border-top-left-radius: 半径;

            水平和垂直半径不同:
            
            border-top-left-radius: 水平半径  垂直半径;

        border-top-right-radius: 设置右上角圆角

            水平和垂直半径相同:
    
            border-top-right-radius: 半径;

            水平和垂直半径不同:
            
            border-top-right-radius: 水平半径  垂直半径;

        border-bottom-left-radius: 设置左下角圆角

            水平和垂直半径相同:
    
            border-bottom-left-radius: 半径;

            水平和垂直半径不同:
            
            border-bottom-left-radius: 水平半径  垂直半径;

        border-bottom-right-radius : 设置右下角圆角

            水平和垂直半径相同:
    
            border-bottom-right-radius: 半径;

            水平和垂直半径不同:
            
            border-bottom-right-radius: 水平半径  垂直半径;

        

    padding  内补白
        
        padding  同时设置四个方向的内间距

        padding-left   设置元素左侧的内间距

        padding-right  设置元素右侧的内间距

        padding-top   设置元素顶部的内间距

        padding-bottom  设置元素底部的内间距

    

    注意:  border和padding会增加元素的整体大小,margin不会


##布局属性

    布局属性的作用就是为了设计页面而存在的CSS属性.

    display : 设置元素的显示方式

        none  不显示元素

        block  显示为块状元素

        inline  显示为内联元素
        
        inline-block 显示为行内块状元素

        ...

    float: 设置元素的浮动属性

        方式:

            left: 左浮动

            right: 右浮动

            none:不浮动


        注意:浮动元素和正常的非浮动元素不在同一个层面,所元素浮动之后,当前元素下面的区域可以存放其他元素,为了防止其他元素在浮动元素之下摆放需要使用clear属性进行设置

    clear : 清除浮动元素对当前元素的影响

        值:
    
            left  清除左浮动

            right  清除右浮动

            both 清除左右浮动

    visibility: 设置元素是否可见

        hidden 设置元素不可见

        visible 设置元素可见


    注意: visibility设置为hidden时元素不可见但是依旧占用物理空间,而display设置为none时元素不可见,并且不占用物理空间.

    overflow: 设置元素中内容溢出的处理方案

        值:

            visible  超出元素依旧显示内容

            hidden  超出元素部分隐藏

            scroll 超出元素时添加滚动条

 

#渐变效果

渐变效果分为两大类:

    线型渐变: 单线型渐变和重复的线型渐变

    径向渐变: 单径向渐变和重复的径向渐变



单线型渐变

    简单渐变:

    linear-gradient(颜色,颜色,颜色....)

    带有方向的渐变

    linear-gradient(方向,颜色,颜色,颜色....)

        方向取值:  

            to top  自下而上进行渐变

            to bottom  自上而下进行渐变
 
            to left  从右向左渐变

            to right 从左到右渐变

            角度取值

    带有颜色起始位置的渐变

    linear-gradient(方向,颜色 位置,颜色 位置,颜色 位置...);


    注意: 在颜色后面进行设置的不是颜色占有的比例而是当前颜色纯色出现的位置,纯色之外采取渐变或者完全纯色填充的原则.


单径向渐变

    简单的径向渐变

    radial-gradient(颜色,颜色....)

    设定形状的径向渐变

    radial-gradient(形状,颜色,颜色...);

        形状取值:  circle  圆形  ellipse椭圆形

    设定圆心的径向渐变

    radial-gradient(at 圆心坐标    ,颜色,颜色....);

        圆心坐标可以使用长度单位,也可以使用位置单词

            水平 left  center  right

            垂直 top  center  bottom

    设置渐变终点的径向渐变

    radial-gradient(渐变终点,颜色,颜色...);

        渐变终点:

            closest-side  从圆心渐变到最近的边

            closest-corner  丛圆心渐变到最近的角

            farthest-side  从圆心渐变到最远的边

            farthest-corner  丛圆心渐变到最远的角

            长度值


    设置颜色位置的径向渐变

    radial-gradient(颜色 位置,颜色 位置....);



    最完整的径向渐变设置

    radial-gradient(形状 渐变终点 at 圆心位置,颜色 位置,颜色 位置...);
    


重复的线型渐变

    repeating-linear-gradient(方向,颜色 位置,颜色 位置...)


    一般情况下重复线型渐变仅最后一个颜色设置位置,而且最后一个颜色位置点决定重复的次数

    重复次数计算方式 = 100%  /  最后一个颜色点的位置百分比


重复的径向渐变


    repeating-radial-gradient(形状 渐变终止点 at 圆心坐标 , 颜色 位置,颜色 位置....)


    一般情况下重复线型渐变仅最后一个颜色设置位置,而且最后一个颜色位置点决定重复的次数

    重复次数计算方式 = 100%  /  最后一个颜色点的位置百分比


    注意:一般情况下我们设置最开始的颜色和结束颜色一致,保证重复渐变式颜色不会太突兀.



##角度单位


    度  deg  一个圆划分为360度

    周  turn  一个圆就是一个turn

    弧度 rad  一个圆就是2π弧度

    梯度  grad  一个圆划分为400梯度