Bootstrap

HTML+CSS之CSS案例大全

CSS

1.体验css语法规范

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>体验css语法规范</title>
   <style>
      /* 选择器{样式} */
      /* 给谁该样式{改什么样式} */
      p {
         color:red;
         font-size:12px;
         /* 修改像素的大小 */
      }
   </style>
</head>
<body>
   <p>有点意思</p>
</body>
</html>

2.基础选择器自之标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器：写上标签名 */
        p {
            color: green;
        }
        div {
            color:pink;
        }
    </style>
</head>
<body>
    <!-- 选择器分类  -->
    <!-- 选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。 -->
    <!-- 基础选择器是由单个选择器组成的 -->
    <!-- 基础选择器又包括：标签选择器，类选择器，id选择器和通配选择器 -->
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

3.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用 */
        .red {
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <!-- 如果想要差异化选择不同的标签，单独选一个或某几个标签，可以使用类选择器。 -->
        <li class="red">冰雨</li>
        <li class="red">来生缘</li>
        <li>李香兰</li>
        <li>生僻字</li>
        <li>江南style</li>
    </ul>
    <div class="red">红色</div>
</body>
</html>

4.使用类选择器画盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
        }
        .red{
            /* 背景颜色 */
            background-color: red;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>
</html>

5.类选择器特殊使用-多类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color:red;
        }
        .font35{
            font-size: 135px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
</body>
</html>

6.ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人请勿使用
        1.类选择器（class）好比人的名字，同时一个人名字也可以被多个人使用。 */
        /* 2.id选择器好比人的身份证号码，全中国是唯一的，不得重复。 
        id选择器和类选择器最大的不同在于使用次数上。
        类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和javaScript搭配使用。 */
        #pink {
            color:pink;
        }
    </style>
</head>
<body>
    <div id="pink">迈克尔-杰克逊</div>
    <div>pink老师</div>
</body>
</html>

7.通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color:red;
        }
        /* 这里吧html body div span li 等标签都改为了红色 */
    </style>
</head>
<body>
    在css中，通配符选择器使用"*"定义，它表示选取页面中所有元素(标签)
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
    <!-- 基础选择器  作用                       特点          使用情况  用法 -->
    <!-- 标签选择器  可以选出所有相同的标签,比如p 不能差异化选择 较多 p{color:red;}
    类选择器    可以选出1个或多个标签       可以根据需求选择 非常多 .anv{color:red}
    id选择器    一次只能选择一个标签        ID属性只能在每个HTML文档中出现一次 一般和js搭配  #nav{color:red;}
    通配符选择器 选择所有的标签             选择的太多，有部分不需要   特殊情况使用 *{color:red;} -->
</body>
</html>

8.front-family字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体系列</title>
    <style>
       h2 {
        font-family: '微软雅黑';
        }
        p{
            font-family: 'Microsoft YaHei';
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清测，</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个，</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

9.front-size字体大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size:16px;
        }
        /* 标题标签比较特殊，需要单独指定文字大小 */
        h2{
            font-size:18px;
        }
    </style>
</head>
<body>
    <p font-size:20px;>
        CSS使用font-size属性定义字体大小
    </p>
    <h2>hello world!</h2>
</body>
</html>

10.font-weight字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bold{
            /* font-weight: bold; */
            /* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 */
            /* 实际开发中，我们更提倡使用数字 */
            font-weight:700;
        }
        h2{
            font-weight: 400;
            /* font-weight: normal; */
        }
    </style>
</head>
<body>
    <!-- CSS使用font-weight属性设置字体粗细
    normal 默认值(不加粗的)
    bold 定义粗体（加粗的）
    100-900 400等同于normal,而700等同于bold 注意这个数字后面不跟单位 -->
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清测，</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个，</p>
    <p class="bold">拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

11.font-style字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-style:italic;
        }
        em{
            /* 让倾斜的字体不倾斜  */
            font-style:normal;
        }
    </style>
</head>
<body>
    <!-- CSS使用font-style属性设置文本的风格
    normal 默认值，浏览器会显示标准的字体样式 font-style:normal;
    italic 浏览器会显示斜体的字体样式 -->
    <p>同学，上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

12.font复合属性写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /*
    想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑
    */
    div{
        font-style:italic;
        font-weight: 700;
        font: size 16px;
        font-family: 'Microsoft yahei';
    }
    </style>
</head>
<body>
    <div>三生三世十里桃花，一心一意百行代码</div>
</body>
</html>

13.字体属性总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    font-size  字号  我们通常用的单位是px像素，一定要跟上单位
    font-family 字体 实际工作中按照团体约定来写字体
    font-weight 字体粗细 记住加粗是700或者bold 不加粗是normal或者400 记住数字不要跟单位
    font-style 字体样式  记住倾斜是italic 不倾斜是normal 工作中我们常用normal
    font        字体连写 1.字体连写是有顺序的 不能随意换位置 2.其中字号和字体必须同时出现                                       
</body>
</html>

14.文本颜色color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color:deeppink;
            color:#266668;
            color:rgb(200, 0, 0);
        }
    </style>
</head>
<body>
    <div>听说喜欢pink色的男生，都喜欢男人</div>
</body>
</html>

15.文本对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

16.文本装饰text-decoration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 下划线 */
            text-decoration:underline;
        }
        a{
            text-decoration: none;
            color:333;
        }
    </style>
</head>
<body>
    <div>粉红色的回忆 </div>
    <a href="http://www.mi.com">粉红色的回忆</a>
    <!-- none  默认。没有装饰线（常用）
    underline  下划线。链接a自带下划线(常用)
    overline 上划线。（几乎不用）
    line-through 删除线。（不常用） -->
</body>
</html>

17. css文本缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            text-indent: 32;
            /* 首行缩进2个子的大小 */
            /* em: 一个字的大小 */
            text-indent:2em;

        }
    </style>
</head>
<body>
    <p>打开北京、上海和广州的地铁地图，你会看见三张纵横交错的线路网格，这代表了最成熟的三套城市轨道交通系统。</p>

    <p>打开北京、上海和广州的地铁地图，你会看见三张纵横交错的线路网格，这代表了最成熟的三套城市轨道交通系统。</p>

    <p>打开北京、上海和广州的地铁地图，你会看见三张纵横交错的线路网格，这代表了最成熟的三套城市轨道交通系统。</p>
</body>
</html>

18.行间距line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            line-height:50px;
        } 
    </style>
</head>
<body>
    <!-- line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的间距。 -->
    <!-- 行间距= 上间距+文本高度+下间距 -->
    <div>中国人英睿达新品T700和海盗船新品MP700都采用了群联PS5026-E26主控+美光232层3D TLC闪存，前者的闪存接口速度为更高的2000MT/s，固件也略有不同，最终实现了12.4 GB/s的连续读速和11.8GB/s的写速，可谓惊人。中国人英睿达新品T700和海盗船新品MP700都采用了群联PS5026-E26主控+美光232层3D TLC闪存，前者的闪存接口速度为更高的2000MT/s，固件也略有不同，最终实现了12.4 GB/s的连续读速和11.8GB/</div>
    <p>打开北京、上海和广州的地铁地图，你会看见三张纵横交错的线路网格，这代表了最成熟的三套城市轨道交通系统。</p>
    <p>打开北京、上海和广州的地铁地图，你会看见三张纵横交错的线路网格，这代表了最成熟的三套城市轨道交通系统。</p>
    <p>打开北京、上海和广州的地铁地图，你会看见三张纵横交错的线路网格，这代表了最成熟的三套城市轨道交通系统。</p>
</body>
</html>

19.css文本属性总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    color  文本颜色  我们通常用 十六进制 比如 而且是简写形式 #fff
    text-align  文本对齐  可以设定文字水平的对齐方式
    text-indent  文本缩进 通常我们用于段落首行缩进2个字的距离 text-indent:2em;
    text-decoration 文本缩进 记住 添加下划线 underline 取消下划线 none
    line-height 行高 控制行于行之间的距离
</body>
</html>

20.内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式表</title>
    <style>
        div{
            color:pink;
        }
    </style>
</head>
<body>
    <!-- 按照css样式书写的位置（或者引入的方式），css样式表可以分为三大类：
    1.行内样式表（行内式）
    2.内部样式表（嵌入式）
    3.外部样式表（链接式） -->
    <div>所谓内部样式表，就是在html页面内部写样式，但是单独写到标签内部。</div>
    <!-- 内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。
    <style>标签理论可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中
    通过这种方式，可以方便控制当前整个页面中的元素元素样式设置。
    代码结构清晰，但是并没有实现结构与样式完全分离。
 -->
</body>
</html>

21.行内样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于简单修改样式。
    <div style="color:red;font-size:12px;">青春不常在，抓紧谈恋爱</div>
    <p>夏天夏天悄悄过去留下小秘密</p>
    <p>压心底压心底不能告诉你</p>
</body>
</html>

22.外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 5.4外部样式表，实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
    1.新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中。
    2.在HTML页面中，使用<link>标签引入这个文件。
    <link rel="stylesheet" href="css文件路径" -->
    <div>来呀~快活呀，反正有大把时光。</div>
</body>
</html>

23.扩展标签居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color: aliceblue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 标签水平居中方法总结： margin: 0 auto
    1.如果需要让div,p,h（大盒子）水平居中？
      可以通过margin:0 auto；实现
    2.注意点：
    1.如果需要让div,p,h（大盒子）水平居中，直接给 当前元素本身 设置即可
    2.magrin:0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度。 -->
    <div></div>
</body>
</html>

24.综合案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     div{
        margin:0 auto;
    }
    .center{
        text-align:center;
    }
    h1{
        text-align: center;
    }
    .color1{
        color: #808080;
    }
    .color2{
        color: #87ceed;
        font-weight: 700;
        
    }
    a{
        text-decoration: none;
    }
    .suojin{
        text-indent: 2em;
    }
    </style>
  
</head>
<body>
    <div>
         <h1> 《自然》 评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="color1">2077年01月28日14：58</span>
            <span class="color2"> 新浪科技</span>
            <a href="#">收藏本文</a> 
        </p>
        <hr>
        <p class="suojin">这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。
            然而现在却非常之蓝，闪闪地䀹2着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。</p>
        <p class="suojin">我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩3地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来， 冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。</p>
        <p class="suojin">枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。</p>
         <p class="suojin">
            他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚4着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着
            奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。
         </p>  
    </div>
</body>
</html>

25.综合案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #f5f5f5;
        }
        .goods{
            width:238px;
            height:305px;
            background-color: rgb(255, 255,255);
            /* 标签居中 */
            margin:0 auto;
            /* 内容居中 */
            text-align: center;
        }
        img{
            width: 150px;
        }
        .title{
            font-size: 14px;
            line-height: 25px;
        }
        .info{
            color:#ccc;
            font-size: 12px;
            line-height: 30px;
        }
        .money{
font-size: 12px;
color: #ffa500;
        }
    </style>
</head>
<body>
    <div class="goods">
     <img src="./01.png">
     <div class="title">九号平衡车</div>
     <div class="info">成年人的玩具</div>
     <div class="money">1999元</div>
    </div>
</body>
</html>

26. css选择器-后代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 找到div的儿子p设置颜色红色 */
        /* 父选择器 后代选择器{} */
        div p{
            color:red;
        }
    </style>
</head>
<body>
    <!-- 儿子，孙子，重孙子 -->
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
</body>
</html>

27.选择器-子代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* div a{
        color:red;
    } */
    /* 只想选择儿子a */
    div>a{
        color:red;
    }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>
</html>

28.选择器-并集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p div span h1 文字颜色是红色 */
        /* 选择器1，选择器2{} */
        p,div,span,h1{
            color:red;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
    
    <h2>h2</h2>
</body>
</html>

29.选择器-交集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     p.box{
        color:red;
     }
    </style>
</head>
<body>
    <!-- 找到第一个p,带box类的，设置文字颜色是红色 -->
    <p class="box">这是p标签:box</p>
    <p>ppppp</p>
    <div class="box">这是div标签:box</div>
</body>
</html>

30.选择器-伪类hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
            
        }
        a:hover{
            color: red;
            background-color: green;
        }
        div:hover{
            color:green;
        }
    </style>
</head>
<body>
    <a href="#">这是一个超链接</a>
    <div>
        div
    </div>
</body>
</html>

31.背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* background-color: pink; */
            background-color:rgba(255,0,0,0.5);
            width:400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

32.背景图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: #fff;
            background-image: url("01.png");
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

33.背景平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: rgb(0, 0, 255);
            background-image: url("01.png");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <!-- 背景平铺：background-repeat(brg)
    repeat:（默认值）水平和垂直方向都平铺
    no-repeat:不平铺
    repeat-x:沿着水平方向平铺
    repeat-y:沿着垂直方向平铺 -->
    <div>

    </div>
</body>
</html>

34.背景位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: rgb(0, 0, 255);
            background-image: url("01.png");
            background-repeat: no-repeat;
            /* background-position: 0 0; */
            /* background-position: right 0; */
            /* background-position: right bottom; */
            /* background-position: center center; */
            background-position: 50px 100px;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

35.背景-复合属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
           width:400px;
           height:400px;
           /* 不分先后顺序，背景色，背景图，背景图平铺，背景图位置 */
           /* 背景图位置如果是英文单词可以颠倒位置，数字不可 */
           background: pink url(./01.png) no-repeat center bottom;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

36.显示模式-块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     div {
        width:300px;
        height:300px;
        background-color: pink;
     }
    </style>
</head>
<body>
    <div>111</div>
    <div>222</div>
</body>
</html>

37.显示模式-行内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 行内：不换行；设置宽高不生效  尺寸和内容的大小相同*/
      span{
        width:300px;
        height:300px;
        background-color: pink;
      }
    </style>
</head>
<body>
        <span>span</span>
        <span>span</span>
</body>
</html>

38.行内块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    img{
        width:100px;
        height:100px;
    }
    </style>
</head>
<body>
    <img src="./01.png" alt="">
    <img src="./01.png" alt="">
</body>
</html>

39.显示模式-转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
           width:400px;
           height:400px;
           /* 不分先后顺序，背景色，背景图，背景图平铺，背景图位置 */
           /* 背景图位置如果是英文单词可以颠倒位置，数字不可 */
           background: pink url(./01.png) no-repeat center bottom;
           /* 行内块： */
           /* display: inline-block; */
           /* 行内  宽高不能设置*/
           display: inline;
        }
    </style>
</head>
<body>
    <!-- 元素显示模式转换
    目的：改变元素默认的显示特点，让元素符合布局要求
    语法：属性：                 效果：            使用频率：
              display:block       转换成块级元素   较多
              display:inline-block 转换成行内块元素 较多
              display:inline       转换成行内元素   极少 -->
              <div>11111</div>
              <div>22222</div>
</body>
</html>

40.继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color:red;
            font-size: 30px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>
</body>
</html>

41.综合案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* a 显示模式是行内，加宽高默认不生效，转显示模式：行内块 */
        a{
            text-decoration: none;
            width:100px;
            height:50px;
            background-color: red;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- 按住alt+shift+鼠标左键单击实现同时处理5列的数据 -->
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

42.综合案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
            width: 120px;
            height:50px;
            background-color: pink;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            color:#fff;
        }
        .one{
            background-image: url("./01.png");
        }
        .one:hover{
            background-image: url("./02.jpg");
            color: orange;
        }
    </style>
</head>
<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
    <a href="#" class="five">五彩导航</a>
</body>
</html>

43.优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   !import> 行内>类名>div>body
</body>
</html>

44.盒子模型-组成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 纸箱子，填充泡沫 */
        div{
            width: 300px;
            height:300px;
            background-color: pink;
            border: 1px  solid black;
            padding:20px;
            margin: 50px;
        }
    </style>
</head>
<body>
    <!-- css中规定每个盒子由：内容区域（content）,内边距区域(padding),边框区域(border),外边框区域(margin)构成，这就是盒子模型。 -->
    <div>
        内容电脑
    </div>
    <div>
        内容电脑
    </div>
</body>
</html>

45.birder的使用方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div{
            width:200px;
            height:200px;
            background-color: pink;
            /* border: 1px solid #000; */
            /* solid实现 dashed虚线 */
            border: 5px dashed #000;
         }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>

46.新浪导航-布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 40px;
            color: #fff;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        .box a{
            /* width: 80px; */
            padding: 0 16px;
            height: 40px;
            background-color: #edeef0;
            display: inline-block;
            text-decoration: none;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
        }
        .box a:hover{
            background-color: #edeef0;
            color:#ff8400;

        }
    </style>
</head>
<body>
    <div class="box">
          <a href="#">新浪导航</a>
          <a href="#">新浪导航新浪导航</a>
          <a href="#">新浪导航</a>
          <a href="#">新浪导航</a>
    </div>
</body>
</html>

47.padding多值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           div{
            width:300px;
            height:300px;
            background-color: pink;
            padding: 50px;
            /* padding: 10px 20px 40px 80px; 分别代表上，右，下，左 */
           }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

48.盒子模型-内减模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
div{
    height: 100px;
    width: 100px;
    background-color: pink;
    border: 10px solid #000;
    padding: 20px;
    /* 变成css3的盒子模型 好处：加了border和padding 不需要手动减法 */
    box-sizing: border-box;
}
    </style>
</head>
<body>
    <div>
    hez
    </div>
    
</body>
</html>

49.清除默认样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }
    </style>
</head>
<body>  
</body>
</html>

50.盒子模型-外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color:pink;
            margin: 50px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div>
        div
    </div>
</body>
</html>

51.版心居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     div {
width: 1000px;
height: 300px;
background-color: pink;
margin: 0 auto;
     }
    </style>
</head>
<body>
    <!-- 所谓的版心就是网页的有效内容 -->
    <div>
        111
    </div>
</body>
</html>

52.新闻案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           *{
              margin:0;
              padding:0;
              box-sizing: border-box;
           }
           .news{
              width:500px;
              height:400px;
              border: 1px solid #ccc;
              margin: 50px auto;
              padding:42px 30px 0;
           }
           .news h2{
            border-bottom: 1px solid #ccc;
            font-size: 30px;
            /* line-height: 1px;
            padding-bottom: 9px; */
           }
           ul{
            list-style: none;
           }
           .news li{
            
             height: 50px;
             border-bottom: 1px dashed #ccc;
             line-height: 50px;
             padding-left: 28px;
           }
           .news a{
            text-decoration: none;
            font-size: 18px;
            color: #666;
           }
    </style>
</head>
<body>
    <div class="news">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
        </ul>
    </div>
</body>
</html>

53.外边距-问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           div{
            width:100px;
            height:100px;
            background-color: pink;
           }
           .one{
             margin-bottom: 60px;
           }
           .two{
            margin-top: 50px;
           }
    </style>
</head>
<body>
    <div class="one">11</div>
    <div class="two">22</div>
</body>
</html>

54.结构伪类-基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中第一个 */
        /* li:first-child{
            background-color: green;
        } */
          /* 选中最后一个 */
        /* li:last-child{
            background-color: green;
        } */
        /* 任意一个 */
        li:nth-child(5){
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>"1li"</li>
        <li>"2li"</li>
        <li>"3li"</li>
        <li>"4li"</li>
        <li>"5li"</li>
        <li>"6li"</li>
        <li>"7li"</li>
        <li>"8li"</li>
    </ul>
</body>
</html>

55.结构伪类-公式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:nth-child(2n){
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>"1li"</li>
        <li>"2li"</li>
        <li>"3li"</li>
        <li>"4li"</li>
        <li>"5li"</li>
        <li>"6li"</li>
        <li>"7li"</li>
        <li>"8li"</li>
    </ul>
</body>
</html>

56.伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           .father{
               width: 300px;
               height: 300px;
               background-color: pink;
           }
           .father::before{
            /* 内容 */
            content: '老鼠';
           }
           .father::after{
            /* 内容 */
            content: '大米';
           }
    </style>
</head>
<body>
    <!-- 伪元素        作用
    ::before     在父元素内容的最前面添加一个伪元素
    ::after      在父元素内容的最后添加一个伪元素
    注意点：
    1.必须设置content属性才能生效
    2.伪元素默认是行内元素 -->
    <div class="father">爱</div>
</body>
</html>

57.浮动-特点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 浮动的标签 顶对齐 */
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
            float:left;
            margin-top: 50px;
        }
        .two{
            width: 200px;
            height: 200px;
            background: skyblue;
            float:left;
            /* 因为有浮动，不能生效-盒子无法水平居中 */
            margin:0 auto;
        }
        .three{
            width: 300px;
            height: 300px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

58.综合案例-导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
           .nav{ 
            margin: 50px auto;
            width: 640px;
            height: 50px;
            background-color: pink; 
           }
           ul{
            list-style: none;
           }
           .nav li{
            float: left;
           }
           .nav li a{
            display: inline-block;
            width: 80px;
            height: 50px;
            background-color: green;
           }
           .nav1 li a:hover{
            color: blue;
           }
    </style>
</head>
<body>
    <div class="nav">
            <!-- css书写样式:
            1.浮动 / display
            2.盒子模型: margin border padding 宽度高度背景色
            3.文字样式 -->
       <ul>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
       </ul>
    </div>
</body>
</html>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
Pandoc 实用教程
C++——按位与运算
UE4 C++常用API
Linux 常用命令（1）
国外媒体发布新闻稿/海外媒体网站发稿创历史新潮流
常见的十个关于多线程和并发编程的面试题
shell中变量的命名、字符的转义、变量的声明以及变量值的传递
Pycharm debugger wsl2 timeout
且看中端手机市场近身厮杀，谁将获胜？
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
;