• h5-14


    1、css3初识

     1     <style>
     2 /*
     3         CSS3 是最新的 CSS 标准。
     4         为了提高开发速度,也为了方便各主流浏览器根据需要渐进式支持,css3按模块化进行了全新设计,这些模块可以独立发布和这实现,也为日后css的扩展奠定了基础。
     5 
     6         其中最重要的 CSS3 模块包括:
     7             选择器
     8             框模型
     9             背景和边框
    10             文本效果
    11             2D/3D 转换
    12             动画
    13             多列布局
    14             用户界面
    15 
    16        浏览器私有前缀,是浏览器对于新CSS属性的一个提前支持;加前缀是兼容老版本的写法,比较新版本的浏览器都支持直接写
    17         浏览器的私有前缀:
    18             Gecko内核   CSS前缀为"-moz-"     如火狐浏览器
    19             WebKit内核  CSS前缀为"-webkit-"    如Chrome、Safari
    20             Presto内核   CSS前缀为"-o-"        如 Opera(欧朋)
    21             Trident内核  CSS前缀为"-ms-"     如IE
    22 */
    23         .box{
    24             width: 200px;
    25             height: 200px;
    26             border: 2px solid;
    27             -moz-border-radius: 50px;
    28             -webkit-border-radius: 50px;
    29             border-radius: 50px;
    30         }
    31 
    32     </style>
    <div class="box"></div>

     2、css3新增选择器    (属性选择器)

    1     <style>
    2         /* div[class^="box"]{ background:red;} */
    3         /* div[class$="box"]{background:pink;} */
    4         /* div[class*="box"]{ background:yellow;} */
    5         div[class="box"] {
    6             border: 1px solid red;
    7         }
    8     </style>
    <!--
    旧:
            E[attr]             只要拥有attr属性
            E[attr="val"]       必须等于var
    
     新增的属性选择器
          E[attr^="val"]  选择拥有attr属性且属性值为val开头的E元素
          E[attr$="val"]  选择拥有attr属性且属性值以val结束的E元素
         E[attr*="val"]   选择拥有attr属性且属性值中包含val的E元素
    -->
    
    <div class="box">box</div>
    <div class="abox">abox</div>
    <div class="boxa">boxa</div>
    <div class="aboxa">aboxa</div>
    <div class>last</div>

    1     <style>
    2         /* div[class^="box"]{ background:red;} */
    3         /* div[class$="box"]{background:pink;} */
    4         div[class*="box"]{ background:yellow;}
    5         /* div[class="box"] {
    6             border: 1px solid red;
    7         } */
    8     </style>

    1     <style>
    2         /* div[class^="box"]{ background:red;} */
    3         div[class$="box"]{background:pink;}
    4         /* div[class*="box"]{ background:yellow;} */
    5         /* div[class="box"] {
    6             border: 1px solid red;
    7         } */
    8     </style>

    1     <style>
    2         div[class^="box"]{ background:red;}
    3         /* div[class$="box"]{background:pink;} */
    4         /* div[class*="box"]{ background:yellow;} */
    5         /* div[class="box"] {
    6             border: 1px solid red;
    7         } */
    8     </style>

     3、css3新增结构类型伪类选择器

     1     <style>
     2         /* li:first-child{background:red;} */  
     3          /*li当第一个儿子时*/
     4 
     5         /*ie8及以下不支持*/
     6         /* li:last-child{background:pink;} */
     7         /* li当最后一个儿子时 */
     8 
     9         /* li:nth-child(2){background:blue;} */
    10         /* li当第二个儿子时 */
    11 
    12         /* li:nth-child(even){background:green;} */
    13         /* 偶数时 */                                    /*even和odd可以用来做隔行变色*/
    14         /*li:nth-child(odd){background:#ccc;}*/
    15         /* 奇数时 */
    16 
    17 
    18         /*n取值0 1 2 3  2n>=1  a*n+b*/ 
    19         /* li:nth-child(3n-2){background:yellow;} */
    20 
    21         /* li:nth-last-child(1){background:orange;} */
    22         /* li:nth-last-child(odd){background:orange;}
    23         li:nth-last-child(even){background:red;} */
    24         li:nth-last-child(3n){background:red;}
    25 
    26     </style>
    <!--
    强调结构:
            E:first-child{}  选择父元素中的第一个子元素E
            E:last-child{}  选择父元素中的最后一个子元素E
            E:nth-child(n){} 选择父元素中的第n个子元素E,n的取值:
                数字
                表达式  2n  2n+1  3n
                关键词 even(偶数)  odd(奇数)
            E:nth-last-child(n){} 选择父元素中倒数第n个子元素E
    -->
    
    
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

     1     <style>
     2        /* .wrap h2:nth-of-type(2){
     3             background: red;
     4         } */
     5 
     6         /* .wrap p:nth-of-type(odd){
     7             background: red;
     8         } */
     9         /*
    10         .wrap p:nth-of-type(even){
    11             background: pink;
    12         }*/
    13         .wrap p:nth-of-type(3n+0){
    14             background: yellow;
    15         }
    16     </style>
    <!--
    先强调类型:
        E:nth-of-type(n){} 选择父元素中类型为E的【正数第n个】子元素
            数字
            表达式  2n  2n+1  3n
            关键词 even(偶数)  odd(奇数)
    
        E:nth-last-of-type(n){} 选择父元素中【倒数第n个】子元素E
    -->
    
    
    <div class="wrap">
        <h2>标题1</h2>
        <p>段落文本1</p>
        <p>段落文本2</p>
        <p>段落文本3</p>
        <h2>标题2</h2>
        <p>段落文本4</p>
        <p>段落文本5</p>
        <p>段落文本6</p>
    </div>

     1     <style>
     2         input[type=text]:enabled{
     3             color: #f00;
     4         }
     5         input[type=text]:disabled{
     6             color: #ff0;
     7         }
     8         input[type=radio]:checked{
     9             background: #f0f;
    10         }
    11     </style>
    <form action="#">
        <input type="text" value="请输入用户名" enabled/>
        <!-- enabled    默认 -->
        <input type="text" value="请输入别名" disabled/>
        <!-- disabled作用:此文本框禁用,无法输入 -->
    
        <input type="radio" checked name="sex"/>
        <input type="radio" name="sex"/>
    </form>

     4、边框属性

     1     <style>
     2         div{float:left;width:200px;height:200px;background:red;margin: 0 0 30px 30px; font: 25px/200px Arial; text-align: center;
     3             color: #fff; }
     4         div:nth-child(2){ border-radius: 20px 40px  60px 80px;}
     5         div:nth-child(3){ border-radius: 20px 40px  60px;}
     6         div:nth-child(4){ border-radius: 20px 60px;}
     7         div:nth-child(5){ border-radius: 50px;}
     8         div:nth-child(6){ border-radius: 50%;}
     9 
    10         div:nth-child(7){ box-shadow: 5px 5px 10px #000;}
    11         div:nth-child(8){ box-shadow:0 0 10px #000; }
    12         div:nth-child(9){ box-shadow:10px 0 10px #000;}
    13         div:nth-child(10){ box-shadow:-10px 0 10px #000,0 0 10px #f00}
    14         div:nth-child(11){ box-shadow:0 10px 10px #000;}
    15 
    16         div:nth-child(12){ box-shadow:0 0 10px 10px #000;}
    17 
    18         div:nth-child(13){ box-shadow:0 0 10px 5px #000 inset;}
    19 
    20     </style>
    <!--
    border-radius: 【空格隔开】         圆角边框
       一个值: 四个角的水平和垂直半径
       两个值: 对角(左上右下  右上左下 水平和垂直)
       三个值: 左上  右上左下  右下
       四个值: 左上   右上    右下   左下
    -->
    <div>box1</div>
    <div>box2</div>
    <div>box3</div>
    <div>box4</div>
    <div>box5</div>
    <div>box6</div>
    <!--
    box-shadow:             盒子阴影
        x轴偏移  y轴偏移  模糊值 颜色;
        正值:向右 向下
    
       x轴偏移  y轴偏移  模糊值  增强值 颜色;
    
        x轴偏移  y轴偏移  模糊值  增强值 颜色  inset(内阴影);
    -->
    
    <div>box7</div>
    <div>box8</div>
    <div>box9</div>
    <div>box10</div>
    <div>box11</div>
    <div>box12</div>
    <div>box13</div>

     1     <style>
     2         .wrap{
     3             width: 1000px;
     4             height: 500px;
     5             background-image: url(images/pic1.jpeg), url(images/pic2.jpeg);
     6             background-repeat: no-repeat;
     7             background-position: left top, right bottom;    /*让第一个图在左上角,第二个图在右下角*/
     8             border: 1px solid;
     9             margin-bottom: 20px;
    10         }
    11 
    12         .box{
    13             float: left;
    14             width: 200px;
    15             height: 200px;
    16             background: url(images/pic2.jpeg) no-repeat left top;
    17             border: 2px solid red;
    18             margin: 0 20px 20px 0;
    19         }
    20         .box2{
    21             background-size: 100px 100px;
    22         }
    23         .box3{
    24             background-size: 100% 50%;
    25         }
    26         .box4{
    27             background-size: cover;
    28         }
    29         .box5{
    30             background-size: contain;       /*包含*/
    31         }
    32 
    33         .box6  {
    34             width: 460px;
    35             height: 258px;
    36             background-image: url(./images/pic2.jpeg);
    37             position: absolute;
    38             top: 800px;
    39         }
    40 
    41     </style>
    <!--多背景-->
    <div class="wrap"></div>
    
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
    <div class="box6"></div>

  • 相关阅读:
    基本排序
    mysql安装
    函数和方法
    COOKIE 与 SESSION
    django---入门
    django模板继承
    2017-11-14
    Django---模板层(template)
    Dajngo---model基础
    Django--基础篇
  • 原文地址:https://www.cnblogs.com/qianfur/p/12488736.html
Copyright © 2020-2023  润新知