十五天学会css之第十一~十二天

东方淼淼
189 阅读3分钟

第十二天h5 box-shadow 渐变

十二天.png

pc端和移动端的区别?

  • 事件上:pc端有鼠标，所以有鼠标点击、鼠标滑过等相关事件，但是移动端没有鼠标，有手指相关事件，比如:左滑、右滑等手指相关事件。
  • 浏览器的兼容性:pc端需要考虑各个浏览器的兼容性问题（每个浏览器的内核不同，所以会有差异），但是移动端不需要考虑各个浏览器的兼容性问题，它的内核和谷歌是一致的，移动端需要考虑适配问题，机型不同，有时候也会出现兼容性问题。

设计稿的尺寸

  • 640x1156的宽度(单屏的页面)参照iphone5手机分辨率:320*2
  • 750x1334的宽度(单屏的页面)参照iphone6手机分辨率:375*2
  • 1242x2208的宽度(单屏的页面)参照phone6plus?手机分辨率414*3

h5

新增的标签

  • 头部: header
  • 底部 : footer
  • 主要内容区域:main
  • 导航:nav
  • 侧边栏:aside
  • 文章: article
  • 块( div ) : section
  • 配图:figure
  • 配图说明:figcaption
  • 视频: video
  • 音频: audio

新增的h5表单元素

<!--数字-->
<input type="number">
<!--搜索-->
<input type="search">
<!--电话-->
<input type="tel">
<!--颜色-->
<input type="color" >
<!--范围-->
<input type="range">
<!--上传文件-->
<input type="file">
<!--日期-->
<input type="date">
<!--邮件-->
<input type="email">

css3相关内容

css3需要增加的私有前缀

  • 谷歌:-webkit
  • 火狐:-moz
  • ie:-ms
  • 欧朋:-o

css3补充

  • border-radius 也有四个值，顺序也是按照顺时针
  • border-radius:50%;圆角或者那个值写成宽度的一半(前提:宽高一样)

box-shadow

  • 第一个值:阴影水平偏移
  • 第二个值:阴影垂直偏移
  • 第三个值:阴影的模糊度(模糊的距离)
  • 第四个值:阴影的大小
  • 第五个值:颜色
  • 第六个值:默认是outset inset外阴影，写的话就是内阴影

渐变

线性渐变（Linear Gradients）

默认是从上到下

.box{
  background:linear-gradient(red,green);
  background:-webkit-linear-gradient(red,green);
}

2、从一个方向到另一个方向（left 、right 、bottom、top）下面的例子就是从左到右

background:linear-gradient(left,red,green);
background:-webkit-linear-gradient(left,red,green);

3、对角的，两个方向可以进行组合，比如下面的就是从左上角到右下角

background:linear-gradient(left top,red,green);
background:-webkit-linear-gradient(left top,red,green);

4、还可以是角度

background:linear-gradient(90deg,red,green);
background:-webkit-linear-gradient(90deg,red,green);

径向渐变：默认的形状是椭圆，至少得有两个颜色值。

形状：ellipse 椭圆（默认），circle（圆）

.box{
        width:400px;
        height:600px;
        margin:0 auto;
        background:radial-gradient(circle,red,green);
        background:-webkit-gradient(circle,red,green);
    }

案例

小球案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background:#000;
        }
    .progress{
        width: 200px;
        height: 200px;
        background:-webkit-radial-gradient(rgb(24, 24, 237) 10%,rgb(21, 21, 218) 30%,rgb(23, 23, 153));
        border-radius: 50%;
       box-shadow: 0px 0px 50px 0px rgb(3, 3, 63) inset;
        
    }
    </style>
</head>
<body>
    <div class="progress">
       
    </div>
</body>
</html>

进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background:#000;
        }
        .progress{
            width:0px;
            height: 20px;
            margin:0 auto;
            background:-webkit-linear-gradient(left top,
                #b5e61d 0%,
                #b5e61d 25%,
                #fff200 25%,
                #fff200 50%,
                #b5e61d 50%,
                #b5e61d 75%,
                #fff200 75%,
                #fff200 100%

                );
            background-size:10px 10px;
            animation: progress 1.5s linear infinite;
            position:absolute;
        }
        
        .progressOuter{
            width:200px;
            height: 20px;
            background:#fff;
            margin:100px auto;
            position:relative;
        }
        @keyframes progress{
            0%{
                width:0;
                background-position:0 0;
            }
            100%{
                width:100%;
                background-position:0px 100px;
            }
        }
    </style>
</head>
<body>
    <div class="progressOuter">
        <div class="progress"></div>
    </div>
   
</body>
</html>

视口（viewport）

当我们不加视口的时候，模拟移动端，body的宽度默认是980px,并不是手机屏幕的宽度，如果想要把咱们的页面在手机屏幕中显示完全，就会进行缩放，这样的话，里面的文字等就会看不清楚，为了避免这种情况，通常咱们会加视口，让页面的宽度等于手机屏幕的宽度。

在写移动端的时候一定要加上下面的代码，快捷键：meta:vp + tab

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

12.png

媒体查询

@media 针对不同媒体类型可以定制不同的样式规则。

例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。

@media not|only mediatype and (expressions) { CSS 代码...; }

媒体类型

12.1.png

媒体查询案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin:0;padding:0;
    }
    .box{
        width:200px;
        height:200px;
        background:green;
    }
    /* 
       当屏幕的宽度小于600px的时候，我就让.box 这个盒子背景颜色pink

     */

     @media screen and (max-width:600px){
         .box{
             background:pink;
         }
     }
     @media screen and (min-width:700px){
         .box{
             background:gold;
         }
     }
     /* 大于等300 小于等于800 */
    @media screen and (min-width:300px) and (max-width:800){

    }

    /* 需求：小于768px的时候显示一个颜色
             大于768到1200 显示一个颜色
             大于1200的时候显示一个颜色 
             */
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

媒体查询案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
            margin:0;padding:0;
    }
    .box{
        width:200px;
        height:200px;
        background:green;
    }
    @media screen and (max-width:768px){
       .box{
           background:pink;
       }
    }
    @media screen and (min-width:769px) and (max-width:1200px){
        .box{
           background:gold;
       }
    }

    @media screen and (min-width:1201px){
        .box{
           background:darkseagreen;
       }
    }
    </style>
</head>
<body>
    <!-- 

         /* 需求：小于768px的时候显示一个颜色
             大于768到1200 显示一个颜色
             大于1200的时候显示一个颜色 
         */
     -->
     <div class="box"></div>
</body>
</html>

媒体查询案例3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,ol{
            list-style: none;
        }

        .box>li{
          width:12.5%;
          height:50px;
          text-align: center;
          line-height: 50px;
          border:1px solid lightgreen;
          float:left;
          box-sizing:border-box;
        }

        /* 大于等于1200 的时候显示8个
           大于等于900 小于1200的时候显示4个
           大于等于768px 小于900的时候显示2个
           小于768px 的时候显示一个

         */

        @media screen and (min-width:1200px){
            .box>li{
                width:12.5%;
            }
        }

        @media screen and (min-width:900px) and (max-width:1199px){
            .box>li{
                width:25%;
            }
        }

        @media screen and (min-width:768px) and (max-width:899px){
            .box>li{
                width:50%;
            }
        }

        @media screen and (max-width:767px){
            .box>li{
                width:100%;
            }
        }



    </style>
</head>
<body>
   <ul class="box">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
   </ul>
</body>
</html>
avatar
文章
阅读
粉丝