CSS样式示例

1、CSS语法和注释规则：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style type="text/css">
        <!-- css样式：选择符和声明构成。声明(span)：属性名(color)和属性值(orange)。-->
        span{
            color: orange;
            font-size: 20px;
        }
        <!-- span属性应用于网页中所有<span>标签。-->
    </style>
</head>
<body>
    <p>
        <span>路飞学城</span>帮助你实现<span>高效学习编程</span>
    </p>
</body>
</html>

2、CSS的三种引入方式：优先级：内联式>嵌入式>外部式。

优先级不是唯一，也要看在网页中的先后顺序。嵌入式在外部式的前面，则嵌入式>外部式。

<!--
    1.内联式（行内式）
    2.嵌入式
    3.外部式
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        h3{
            color: aqua;
        }
    </style>
<!--3.外部式，link链接外css文件夹中的index.css文件。href为文件路径。-->
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--1.内联式-->
    <p style="color: red">
        文本的颜色是什么颜色？
    </p>
<!--2.嵌入式，属性为head里面的style里面的h3-->
    <h3>
        路飞学城
    </h3>
<!--3.外部式-->
    <h4>
        自学编程
    </h4>
</body>
</html>

/*index.css里面的内容*/
h4{
    color: blue;
}

3、CSS常用的几种选择器

/*选择器{
    样式;
}
div{
    color:red;
    font-size:30px;
}*/
<!--
css选择器：
    一、基础选择器
        1、标签(元素)选择器
        2、类(class)选择器
        3、id(身份证号)选择器
    二、高级选择器
        1、后代选择器
        2、子代选择器
        3、组合选择器
        4、交集选择器
        5、伪类选择器
-->

　4、CSS选择器之标签选择器

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的基础选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <h3>抖音</h3>
    <p>
        女人如果真正深爱一个男人的时候，她会对这个男人充满了患得患失的情绪。也就是说，她因为特别爱这个男人，所以她非常担心某天会失去男人的爱与在乎。    </p>
    <img src="images/30-1.jpg" height="300">
    <p>
        于是，女人会忍不住想要时刻陪伴在男人的身边，甚至她会将男人的一举一动都监视起来。其实，你完全没这个必要。
    </p>
    <img src="images/30-2.jpg" height="300">
</body>
</html>

/*index.css里面的内容*/
p{
    color: blue;
    font-size: 16px;
    font-weight: bold;
}
/*对test.html里面所有<p>标签的内容进行了字体颜色设置，字体大小设置，字体加粗设置。*/

5、CSS选择器之ID选择器

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的基础选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <h3>抖音</h3>
    <p>
        女人如果真正深爱一个男人的时候，她会对这个男人充满了患得患失的情绪。也就是说，<span id="thisman">她因为特别爱这个男人，</span>所以她非常担心某天会失去男人的爱与在乎。    </p>
    <img src="images/30-1.jpg" height="300">
    <p>
        于是，女人会忍不住想要时刻陪伴在男人的身边，<span id="shenzhi">甚至她会将男人的一举一动都监视起来。</span>其实，你完全没这个必要。
    </p>
    <img src="images/30-2.jpg" height="300">
</body>
</html>

/*index.css里面的内容*/
p{
    color: blue;
    font-size: 16px;
    font-weight: bold;
}
/*对test.html里面所有的<p>标签的内容进行了字体颜色设置，字体大小设置，字体加粗设置。*/
#thisman{
    color: red;
    font-size: 16px;
    font-weight: bold;
}
/*仅仅对ID为thisman这个进行了单独的设置。*/
#shenzhi{
    color: green;
    font-size: 25px;
    font-weight: bold;
}
/*仅仅对ID为shenzhi这个进行了单独的设置。*/

6、CSS类选择器

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的基础选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--类标签：class-->
    <h3 class="active title">抖音</h3>
<!--这里class类设置了，两个属性，active和title。两个可以分别设置。-->

    <p>
        女人如果真正深爱一个男人的时候，她会对这个男人充满了<span class="active">患得患失的情绪</span>。也就是说，<span id="thisman">她因为特别爱这个男人，</span>所以她非常担心某天会失去男人的爱与在乎。    </p>
    <img src="images/30-1.jpg" height="300">
    <p>
        于是，女人会忍不住想要时刻陪伴在男人的身边，<span id="shenzhi">甚至她会将男人的一举一动都监视起来。</span>其实，你完全没这个必要。
    </p>
    <img src="images/30-2.jpg" height="300">
</body>
</html>

/*index.css里面的内容*/
p{
    color: blue;
    font-size: 16px;
    font-weight: bold;
}
/*对test.html里面所有的<p>标签的内容进行了字体颜色设置，字体大小设置，字体加粗设置。*/

#thisman{
    color: red;
    font-size: 16px;
    font-weight: bold;
}
/*仅仅对ID为thisman这个进行了单独的设置。*/
#shenzhi{
    color: green;
    font-size: 25px;
    font-weight: bold;
}
/*仅仅对ID为shenzhi这个进行了单独的设置。*/

/*下面是类：class选择器。*/
.active{
    color: aqua;
}
/*.active设置了“抖音”两个字的颜色。*/
.title{
    font-size: 30px;
}
/*.title设置了“抖音”两个字的大小。*/

7、如何正确地使用类class选择器

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS类选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <p class="color size">自学编程</p>
<!--改变字体颜色和大小-->
    <p class="color bole">自学编程</p>
<!--改变字体颜色和加粗-->
    <p class="size bole">自学编程</p>
<!--改变字体大小和加粗-->
    <p class="color size bole">自学编程</p>
<!--改变字体颜色、大小和加粗-->
</body>
</html>

/*index.css里面的内容*/
.color{
    color: green;
}
/*改变字体颜色*/

.size{
    font-size: 30px;
}
/*改变字体大小*/

.bold{
    font-weight: bold;
}
/*字体加粗*/

8、CSS后代选择器

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS后代选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--后代选择器div a{}，只改变了，div 里面a的内容，没有改变div之外a的内容-->
    <div>
        <p>
            <a href="#">自学编程</a>
        </p>
            <a href="#">web前端编程</a>

    </div>
    <a href="#">python编程</a>
</body>
</html>

/*index.css里面的内容*/
div a{
    color: orange;
}
/*后代选择器div a{}，只改变了，div 里面a的内容，没有改变div之外a的内容*/

9、CSS子代选择器

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS子代选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--后代选择器div a{}，只改变了，div 里面a的内容，没有改变div之外a的内容-->
    <div class="wrap">
        <p>
            <a href="#">自学编程</a>
        </p>
            <a href="#">web前端编程</a>
    </div>
<!--这里的第一个div/p/a是后代，中间隔了个p标签。-->

    <div>
        <a href="#">网页爬虫加app逆向爬虫</a>
    </div>
<!--这里第二个div/a是子代。-->
    <a href="#">python编程</a>
</body>
</html>

/*index.css里面的内容*/
a{
    color: orange;
}
/*后代选择器div a{}，只改变了，div 里面a的内容，没有改变div之外a的内容*/
/*这里的div可以换成id，类class，或者标签（div就是标签）。*/

.wrap a{
    color: green;
}
/*有空格的是后代选择器，这里是类wrap的后代选择器*/

div>a{
    color: purple;
}
/*有>的是子代选择器*/

10、CSS组合选择器

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS子代选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <h3>今天你都干嘛了呢？</h3>
    <div class="wrap">
        <p>
            <a href="#">自学编程</a>
        </p>
        <a href="#">web前端编程</a>
    </div>

    <div>
        <a href="#">网页爬虫加app逆向爬虫</a>
    </div>
    <a href="#">python编程</a>
    <span>现在正在下雨！</span>
    <span>明天是睛天！</span>
</body>
</html>

/*index.css里面的内容*/
a{
    color: orange;
}
/*后代选择器div a{}，只改变了，div 里面a的内容，没有改变div之外a的内容*/
/*这里的div可以换成id，类class，或者标签（div就是标签）。*/

.wrap a{
    color: green;
}
/*有空格的是后代选择器，这里是类wrap的后代选择器*/

div>a{
    color: purple;
}
/*有>的是子代选择器*/

h3,span{
    color: chartreuse;
    font-weight: bold;
}
/*h3,span这是组合选择器，这里可以有很多个标签*/

11、CSS交集选择器，不常用。

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS交集选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <h3>今天你都干嘛了呢？</h3>
    <span class="active">现在正在下雨！</span>
    <p>
        <span>明天是睛天！</span>
    </p>
</body>
</html>

/*index.css里面的内容*/
h3{
    font-size: 30px;
    /*color: green;*/
}
.active{
    font-size: 20px;
    /*color: green;*/
}
/*上面为重复的颜色*/

h3.active{
    color: green;
}
/*上面为交集选择器，把重复的颜色单独列出来。*/
/*交集选择器，可以是标签，ID，类class。*/

测试之后没有效果，待求证。

12、CSS伪类选择器

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS交集选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <a href="#">自学编程</a>
    <div>
        <span>书法练习</span>
    </div>
</body>
</html>

/*index.css里面的内容*/
/*CSS伪类选择器*/
/*爱恨准则，先爱再恨。LoVe HAte*/
/*没有被访问过a的状态*/
a:link{
    color: orange;
}

/*访问过后a的状态*/
a:visited{
    color: green;
}

/*鼠标悬浮时a的状态*/
a:hover{
    color: purple;
}

/*鼠标摁住时a的状态*/
a:active{
    color: blue;
}
/*上面这些标签，除了hover能用于网页所有标签，其它的只能用于a标签。*/

span{
    color: orange;
}
div:hover{
    background-color: aqua;
}
/*上面div标签，当鼠标放在div内的内容上时，相应的一行背景颜色显示为aqua。*/

div:hover span{
    color: red;
}
/*上面div标签，当鼠标放在div内的内容上时，相应的一行背景颜色显示为aqua。并且字体颜色显示为红色。*/

13、CSS选择器总结：

css 选择器总结：
    语法:
        选择符{
            属性:值;
        }
    作用:选中页面上的元素(标签),设置对应的样式
    -基础选择器
        +标签选择器
            *对页面中相同的元素,设置共同的属性
        + id 选择器
            *任何的元素都可以设置 id 
            * id 是唯一,并且不能重复,表示选中的是有特性的元素
        + class 选择器
            *任何的元素都可以设置类
            *一个元素中可以设置多个类
            *一定要有“归类的概念,公共类的想法”。选中的页面元素,设置相同的属性
    -高级选择器
        +后代(爸爸的儿子,孙子....)
            * div p {}
        +子代(亲儿子)
            * diV > p 
    +组合
        *选择器1,选择器2,选择器3{}
    +交集选择器(了解)
        *选择器1选择器2{}
    +伪类选择器
        * a 标签
            -爱恨准则 LoVe HAte   
                 +a:link{}
                 +a:visited{}
                 +a:hover{}
                 +a:active{}
    注意：hover可以应用于任何的元素。

14、CSS的断承性

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS继承性</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div>
        <span>书法练习</span>
    </div>
</body>
</html>

/*index.css里面的内容*/
/*CSS继承性*/
body{
    color: red;
    font-size: 30px;
    background-color:orange ;
}
/*body内所有的标签都有body的属性。其中也有不能断承的属性。*/

15、选择器权重

！important > 内联样式 > ID选择器 > class选择器 > 元素选择器 > 通配符选择器

选择器权重计算永不进位。

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器权重</title>
    <style type="text/css">
        /*003*/
        div div p{
            color: yellow;
        }
        /*001*/
        p{
            color: gray;
        }
        /*010*/
        .active{
            color: purple;
        }
        /*011*/
        div.active{
            color: black;
        }
        /*012*/
        div div .active{
            color: blue;
        }
        /*120*/
        .wrap1#box2 .active{
            color: green;
        }
        /*201*/
        #box1 #box2 p{
            color: red;
        }
        /*继承来的属性，它的权重非常低0*/
        #box1 #box2 #box3{
            color: orange;
        }
        /*这里没有选中标签p,是继承关系，上面几个都有选中标签p，不是继承关系。*/
    </style>
</head>
<body>
    <div class="wrap1" id="box1">
        <div class="wrap2" id="box2">
            <div class="wrap3" id="box3">
                <p class="active">自学编程</p>
            </div>
        </div>
    </div>
</body>
</html>

16、!important的讲解

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>!important</title>
    <style type="text/css">
        #box1{
            color: green !important;
        }
        div{
            color: orange !important;
        }
    </style>
<!--如果两个都有!important，则根据选择器的权重作用其属性。这里显示为绿色。-->
</head>
<body>
    <div class="wrap1" id="box1">
        web前端开发
    </div>
</body>
</html>

17、字体属性

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style type="text/css">
        body{
            font-family: 'impact 常规', 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono','monospace';
            /*font-family这是字体样式，第一个为首先字体，后面的都是备用字体。如果这些都没有，就默认用户电脑上的默认字体。*/

            font-style: italic;
            /*italic是倾斜的意思，这里就是设置斜体字的。另外标签<em>自带斜体效果。*/

            font-weight: 900;
            /*字体加粗，加细，可以用bold，或者100-900之间的数字表示。另外标签<strong>自带加粗效果。*/

            text-decoration: line-through;
            /*underline下划线，overline上划线，line-through中划线。值为NONE可以清除a标签的属性*/
        }
    </style>
</head>
<body>
    <em>你好</em>
    <strong>web前端开发</strong>
</body>
</html>

字体大小的属性：像素单位：px em rem。

18、字体属性之color颜色

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style type="text/css">
        body{
            font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace ;
            /*color: rgb(255,0,0);*/
            /*color: rgba(0,255,0,0.3);*/
            /*这里的a:alpha透明度的意思，取值范围：0-1*/
            color: #FF6700;
            /*这里是十六进制表示方法，相当于十进制的：255，103，0*/

            /*
            十进制：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
            十六进制：0 1 2 3 4 5 6 7 8 9 A B C D E F
            FF 67 00
            15 * 16 + 15 = 255
            6 * 16 + 7 = 103
            0 * 16 + 0 = 0
             */
        }
    </style>
</head>
<body>
    web前端开发
</body>
</html>

19、文本属性和字体属性示例

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性和字体属性示例</title>
    <style type="text/css">
        a{
          text-decoration: none;
            /*这里的none为了清除a标签里面的下划线。*/
            color: #333;
            font-size: 15px;
        }
        a:hover{
            color: #FD8308;
            text-decoration: underline;
            /*鼠标悬浮变颜色，并且加下划线。*/
        }
        .box p span{
            text-decoration: line-through;
            /*399.00中间划一道线。*/
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="http:www.baidu.com">
            web开发工程师
        </a>
        <p>￥<span>339.00</span></p>
    </div>
</body>
</html>

20、文本属性示例。自动缩进两个字。

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性示例</title>
    <style type="text/css">
        p{
            text-indent: 2em;
            font-size: 20px;
            /*indent是缩进的意思。2em的作用是，不管下面字体大小怎么变化，都自动缩进两个字。*/
            line-height: 40px;
            /*行高：行与行之间的距离。行高一定要大于字体大小。*/
            letter-spacing: 5px;
            /*文字与文字之间的距离。这个只对中文起作用，英文不起作用。*/
            word-spacing: 10px;
            /*英文单词之间的距离。*/
        }
    </style>
</head>
<body>
    <p>
        依附于概念炒作的暴富游戏，公众还是少参与为妙。hello word。
        随着元宇宙概念走热，元宇宙“房产”交易变得火爆起来。在11月22日到28日的一周内，四个最主要的元宇宙房地产交易平台的总交易额就接近1.06亿美元。据福布斯报道，有建筑公司在元宇宙中设计一个项目就可以赚近30万美元。
        这种虚拟世界里的“房产”交易在近期频频刷新价格新高，甚至超出现实世界里很多大城市的住房价格，让人大受震撼。所谓元宇宙“房产”，指的是元宇宙中的一部分虚拟空间。在拥有这部分虚拟空间后，你可以对它进行建设、装修，可以开设商场，可以用作博物馆展示虚拟藏品，也可以直接出租……拿一张元宇宙“房产证”，听上去似乎很潮流也很酷炫。
    </p>
</body>
</html>

21、总合字体

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性示例</title>
    <style type="text/css">
        p{
            text-indent: 2em;
            /*font-size: 20px;*/
            /*indent是缩进的意思。2em的作用是，不管下面字体大小怎么变化，都自动缩进两个字。*/
            /*line-height: 40px;*/
            /*行高：行与行之间的距离。行高一定要大于字体大小。*/
            letter-spacing: 5px;
            /*文字与文字之间的距离。这个只对中文起作用，英文不起作用。*/
            word-spacing: 10px;
            /*英文单词之间的距离。*/

            /*字体的样式，大小，行高，这三个可以写在一起，称为总合属性。下面为总合字体的格式。*/
            font:20px/3 "微软雅黑",'宋体','Arial';
        }
    </style>
</head>
<body>
    <p>
        依附于概念炒作的暴富游戏，公众还是少参与为妙。hello word。
        随着元宇宙概念走热，元宇宙“房产”交易变得火爆起来。在11月22日到28日的一周内，四个最主要的元宇宙房地产交易平台的总交易额就接近1.06亿美元。据福布斯报道，有建筑公司在元宇宙中设计一个项目就可以赚近30万美元。
        这种虚拟世界里的“房产”交易在近期频频刷新价格新高，甚至超出现实世界里很多大城市的住房价格，让人大受震撼。所谓元宇宙“房产”，指的是元宇宙中的一部分虚拟空间。在拥有这部分虚拟空间后，你可以对它进行建设、装修，可以开设商场，可以用作博物馆展示虚拟藏品，也可以直接出租……拿一张元宇宙“房产证”，听上去似乎很潮流也很酷炫。
    </p>
</body>
</html>

22、字体属性和文本属性总结：

字体属性和文本属性总结：
字体属性
    1.字体
        font-family: "微软雅黑","宋体",...;
    2.字体大小
        font-size: 20px;
        像素单位： px,em,rem
        px: 绝对单位。 一旦设置了值，不管网页如何变化始终如一
        em:相对单位。当前某块区域的字体大小，比如给p标签设置了字体大小20px，那么1em= 20px;
        rem：相对单位 主要应用于移动端
    3.字体颜色
        color: red
        颜色表示法：  
            - 单词表示法  red green yellow purple.
            - rgb()表示法
                + rgba()  a:alpha 表示透明度
            - 十六进制表示法
                + #ff6700
    4.字体样式
            font-style
                normal : 默认的字体
                italic:斜体
    5.字体粗细
            font-weight:
                bold:粗的字体
                100~900
                400表示默认
文本属性：
    1.文本修饰
            text-decoration
                underline 下划线
                none 无线
                overline 上划线
                line-through 删除线
    2.文本缩进
            text-indent
                单位建议使用em
    3.行高
            行与行之间的距离
                line-height
                    px，em，rem
    4.中文字间距/单词间距
            letter-spacing
            word-spacing
    5.文本对齐方式
            text-align
                left
                right
                center  使用最多

23、文本对齐方式：

            text-align: center;
            /*居中对齐*/
            text-align: left;
            /*左对齐，默认对齐方式。*/
            text-align: right;
            /*右对齐。*/

24、元素分类

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性示例</title>
    <style type="text/css">
		div{
			background-color: red;
			width: 200px;
			height: 200px;
		}
		p{
			background-color: green;
		}
		a,span{
			font-size: 30px;
			background-color: purple;
			width: 300px;
			height: 300px;
		}
		input{
			width: 300px;
			height: 50px;
		}
		img{
			width: 100px;
		}
	</style>
</head>
<body>
	<!-- 1 块级元素
			（1）独自占一行
			（2）可以设置宽度和高度，如果不设置宽，默认是父标签的100%宽
		2 行内元素
			（1）行内元素在一行内显示
			（2）不能设置宽度和高度
			3 行内块元素
				(1)在一行内显示
				（2）可以设置宽度和高度
	 -->
	 <div>MJJ</div>
	 <p>我是一个段落</p>
	 <h1>mjj</h1>
	 <ul>
	 	<li>小米商城</li>
	 </ul>
	 <ul>
	 	<li>小米商城</li>
	 </ul>
	 <a href="#">百度一下</a>
	 <span>小猿圈</span>
	 <strong></strong>
	 <em></em>
	 <input type="text" name="">
	 <input type="password" name="">
	 <img src="images/index02.jpeg">
	 <img src="images/index02.jpeg">
</body>
</html>

25、display属性讲解，通常用于行内标签转为行内块。（比较常用）

<!--test.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>display属性</title>
	<style type="text/css">
		div{
			background-color:red;
			width: 200px;
			height: 200px;
			/*元素隐藏*/
			display: none;
		}
		a,span{
			background-color: green;
			width: 100px;
			height: 40px;
			display: inline-block;
			/* text-align: center; 水平居中
			line-height= height 控制文本垂直居中
			*/
			text-align: center;
			line-height: 40px;
		}
	</style>
</head>
<body>
	<div>我是一个块</div>
	<span>自学编程</span>
	<a href="#">小朋友</a>
</body>
</html>

26、小米商城顶部栏案例

<!--test.html里面的内容-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小米顶部栏案例</title>
	<style type="text/css">
		a{
			text-decoration: none;
		}
		.top_bar{
			width: 100%;
			height: 40px;
			background-color: #333;
		}
		.top_bar a{
			color: #b0b0b0;
			display: inline-block;
            /*这里的display的作用是，当鼠标放在“小米商城”字体下面的黑色部分的时候，也有超链接。*/
			line-height: 40px;
		}
		.top_bar span{
			color: #424242;
		}
		.top_bar a:hover{
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="top_bar">
		<a href="#">小米商城</a>
		<span>|</span>
		<a href="#">MIUI</a>
		<span>|</span>
		<a href="#">IoT</a>
		<span>|</span>
		<a href="#">云服务</a>
	</div>
</body>
</html>

27、盒子模型的属性介绍

<!--test.html里面的内容-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>盒子模型的属性</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background-color: red;
			padding: 50px;
			border: 3px solid green;
			/*border是盒子的边框*/
		}
	</style>
</head>
<body>
	<!-- 内容 的宽高 内边距  外边距 边框-->
	<div>MJJ</div>
</body>
</html>

28、padding的讲解

<!--test.html里面的内容-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>padding的讲解</title>
	<style type="text/css">
		div{
			width: 180px;
			height: 180px;
			background-color: green;
			/*padding-top: 20px;
			padding-left: 20px;
			padding-bottom: 20px;
			padding-right: 50px;*/
			/* 上 下 左 右 四个方向*/
			/*padding: 20px;*/
			/* 上 左*/
			/*padding: 20px 40px;*/
			/* 上 左 下*/
			/*padding: 20px 30px 40px;*/
			/* 上  右  下 左*/
			padding: 10px 20px 30px 40px;
		}
	</style>
</head>
<body>
	<!-- 内边距： 盒子边框到内容的距离 -->
	<div>自学编程</div>
</body>
</html>

29、border边框属性

<!--test.html里面的内容-->

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>边框border</title>
	<style type="text/css">
		.border{
			width: 200px;
			height: 200px;
			/*border: 1px solid red;*/
			/*按照三要素来编写border*/
			border-width: 4px 10px;
			border-style: solid dotted double dashed;
			border-color: green red purple yellow;

			/*按照方向来编写border*/
			/*
			border-top-width: 4px;
			border-top-color: red;
			border-top-style: solid;

			border-bottom-width: 4px;
			border-bottom-color: red;
			border-bottom-style: solid;
			*/
		}
		input{
			/*清除默认样式*/
			/*border: none;*/
			/*或者*/
			/*border: 0;*/
			/*清除外线*/
			/*outline: none;*/
		}
		.username{
			/*width: 180px;*/
			/*height: 40px;*/
			/*font-size: 20px;*/
			/*padding-left: 10px;*/
			/*border: 1px solid #666;*/
		}
		/*.username:hover{*/
		/*	border: 1px solid orange;*/
		}
	</style>
</head>
<body>
	<!-- 三要素： 粗细（width）  样式 (style) 颜色 (color)-->
	<div class="border"></div>
<!--	<input type="text" name="" class="username">-->

</body>
</html>

下面是输入框样式设置：

<!--test.html里面的内容-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>边框border</title>
	<style type="text/css">
		.border{
			/*width: 200px;*/
			/*height: 200px;*/
			/*border: 1px solid red;*/
			/*按照三要素来编写border，重要*/
			/*
			border-width: 4px 10px;
			border-style: solid dotted double dashed;
			border-color: green red purple yellow;
			*/

			/*按照方向来编写border*/
			/*
			border-top-width: 4px;
			border-top-color: red;
			border-top-style: solid;

			border-bottom-width: 4px;
			border-bottom-color: blue;
			border-bottom-style: solid;
			*/
		}
		input{
			/*清除默认样式，重要*/
			/*border: none;*/
			/*或者*/
			/*border: 0;*/
			/*清除外线*/
			/*outline: none;*/
		}
		.username{
			width: 180px;
			height: 40px;
			font-size: 20px;
			padding-left: 10px;
			border: 1px solid #666;
		}
		.username:hover{
			border: 1px solid orange;
		}
	</style>
</head>
<body>
	<!-- 三要素： 粗细（width）  样式 (style) 颜色 (color)-->
	<div class="border"></div>
	<input type="text" name="" class="username">

</body>
</html>

margin属性讲解。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>外边距 margin</title>
	<style type="text/css">
		span{
			background-color: red;
		}
		.xiongda{
			margin-right: 20px;
		}
		.xionger{
			margin-left: 100px;
		}
		div{
			width: 200px;
			height: 200px;
		}
		/*margin 垂直方向上 会出现外边距合并   外边距塌陷*/
		.box1{
			background-color: red;
			margin-bottom: 30px;
		}
		.box2{
			background-color: green;
			margin-top: 100px;
		}
		/*box1和box2,100+30=100，合并数字小的。*/
	</style>
</head>
<body>
	<!-- 外边距： 一个盒子到另一个盒子的距离 -->
	<span class="xiongda">熊大</span><span class="xionger">熊二</span>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

30、清除HTML标签元素的默认样式

<!--test.html里面的内容-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除HTML标签元素的默认样式</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
	<p>我是个段落</p>
	<p>我是个段落</p>
	<ul>
		<li>mjj</li>
	</ul>
	<input type="text" name="">
</body>
</html>

/*reset.css里面的内容。*/
body,p,ul,ol,dl,dt{
	margin: 0;
	padding: 0;
}
ul,ol{
	list-style: none;
}
input{
	border: none;
	outline: none;
}
a{
	text-decoration: none;
}

31、HTML盒子居中显示

<!--test.html里面的内容-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>盒子居中</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<style type="text/css">
		.top_bar{
			width: 100%;
			height: 40px;
			background-color: #333;
		}
		.container{
			width: 1200px;
			height: 100%;
			background-color: red;
			/*margin-left:  auto;*/
			/*margin-right: auto;*/
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="top_bar">
		<div class="container">
			小米商城
		</div>
	</div>
</body>
</html>

/*reset.css里面的内容。*/
body,p,ul,ol,dl,dt{
	margin: 0;
	padding: 0;
}
ul,ol{
	list-style: none;
}
input{
	border: none;
	outline: none;
}
a{
	text-decoration: none;
}

32、浮动元素现象float

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动的现象</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			color: #fff;
            	}
            	div.left{
            		background-color: red;
            		float: left;
            	}
            	div.right{
            		width: 300px;
            		background-color: green;
            		float: left;
            	}
            	div.center{
            		background-color: orange;
            		float: left;
            	}
	</style>
</head>
<body>
	<!-- 浮动的现象：
		        0.文字环绕
			1.脱离了标准文档流
			2.浮动元素互相贴靠
			3.浮动元素有收缩现象
	 -->
	<div class="left">左边的盒子</div>
	<div class="right">右边的盒子</div>
	<div class="center">右边的盒子</div>
</body>
</html>

33、浮动元素的破坏性

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动元素的破坏性</title>
	<style type="text/css">
		.top_bar{
			border: 1px solid red;
		}
		.child1{
			width: 200px;
			height: 200px;
			background-color: green;
			float: left;
		}
		.child2{
			width: 200px;
			height: 200px;
			background-color: orange;
			float: right;
		}
		.header{
			width: 100%;
			height: 100px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="top_bar">
		<div class="child1">儿子</div>
		<div class="child2">二儿子</div>
	</div>
	<div class="header">
	</div>
</body>
</html>

34、清除浮动的方式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动的方式</title>
	<style type="text/css">
		.top_bar{
			border: 1px solid red;
		}
		.child1{
			width: 200px;
			height: 100px;
			background-color: green;
			float: left;
		}
		.child2{
			width: 200px;
			height: 100px;
			background-color: orange;
			float: right;
		}
		.header{
			width: 100%;
			height: 100px;
			background-color: purple;
		}
		/*.clear{*/
		/*	clear: both;*/
		/*}*/
		p::after{
			/*行内元素*/
			content:'大帅哥';
		}
		.clearfix::after{
			content:'';
			display: block;
			clear: both;
		}
/*这里的.clearfix是伪元素清除法。*/
	</style>
</head>
<body>
	<!-- 1.给父元素设置固定高度
			缺点： 使用不灵活 后期不易维护
			应用：网页中盒子固定高度区域，比如固定的导航栏
		2.内墙法（了解）
			规则： 在最后一个浮动元素的后面加一个空的块级元素，并且设置该属性clear: both;
			缺点： 结构冗余
		重要：
		3.伪元素（选择器）清除法（网页中应用非常多的方法）
		4.overflow:hidden;
	 -->
	<div class="top_bar clearfix">
		<div class="child1">儿子</div>
		<div class="child2">二儿子</div>
		<!-- <div class="clear"></div> -->
	</div>
	<div class="header">
	</div>
	<p>
		<a href="#">百度一下</a>
	</p>
</body>
</html>

35、清除浮动的方式之overflow法

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动的方式</title>
	<style type="text/css">
		.top_bar{
			/*BFC区域 一条规则：计算BFC（块级盒子）的高度时，浮动元素也参与计算*/
			/*形成BFC的条件： 除了overflow:visitable 的属性值*/
			/*Block Formtting Context*/
			overflow: hidden;
			border: 1px solid red;
		}
		.child1{
			width: 200px;
			height: 100px;
			background-color: green;
			float: left;
		}
		.child2{
			width: 200px;
			height: 100px;
			background-color: orange;
			float: right;
		}
		.header{
			width: 100%;
			height: 100px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="top_bar clearfix">
		<div class="child1">儿子</div>
		<div class="child2">二儿子</div>
	</div>
	<div class="header">
	</div>
</body>
</html>

36、BFC的讲解

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>BFC的讲解</title>
	<style type="text/css">
		div.xiongda{
			border: 2px solid orange;
			overflow: hidden;
		}
		div.box1{
			width: 200px;
			height: 200px;
			background-color: red;
			/*margin-bottom: 30px;*/
			float: left;
		}
		div.box2{
			width: 500px;
			height: 200px;
			background-color: green;
			/*overflow: hidden;*/
			float: left;
			/*margin-top: 100px;*/
		}
	</style>
</head>
<body>
	<div class="xiongda">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
</body>
</html>
<!-- 一：BFC是什么东东
了解BFC前先一了解一下Box和Formatting Context
（1）B: BOX即盒子，页面的基本构成元素。分为 inline 、 block 和 inline-block三种类型的BOX
（2）FC: Formatting Context是W3C的规范中的一种概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
常见的 Formatting Context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)
BFC 定义
	BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
	1.内部的Box会在垂直方向，一个接一个地放置。
	2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
	3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
	4.BFC的区域不会与float 元素重叠。
	5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
	6.计算BFC的高度时，浮动元素也参与计算
二：那些元素会生成BFC
	1.根元素
	2.float属性不为none
	3.position为absolute或fixed
	4.display为inline-block
	5.overflow不为visible -->

37、小米商城导航栏制作

<!--mi_header.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米导航</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
        .site-header{
            width: 100%;
            height: 100px;
            /*background-color: red;*/
        }
        .container{
            width: 1226px;
            /*height: 100px;*/
            margin: 0 auto;
            /*background-color: green;*/
        }
        .site-header .nav-logo{
            float:left;
            margin-top: 25px;
        }
        .nav-logo a{
            display: block;
            width: 56px;
            height: 56px;
        }
        .site-header .nav-list{
            float: left;
            width: 820px;
            height: 88px;
            padding: 12px 0 0 30px;
        }
        .nav-list li{
            float: left;
            font-size: 16px;
        }
        .nav-list li a{
            display: block;
            color: #333;
            padding: 28px 10px 38px;
        }
        .clearfix::after{
            content: '';
            clear: both;
            display: block;
        }
        .site-search{
            float: left;
            width: 296px;
            margin-top: 25px;
        }
        .site-search form{
            height: 50px;
            width: 296px;
        }
        .site-search form input.content{
            width: 223px;
            height: 48px;
            border: 1px solid #e0e0e0;
            padding: 0 10px;
            float: left;
        }
        .site-search form input.search{
            width: 49px;
            height: 50px;
            border: 1px solid #e0e0e0;
            float: left;
            margin-left: -1px;
        }
    </style>
</head>
<body>
    <div class="site-header">
        <div class="container clearfix">
            <div class="nav-logo">
                <a href="#">
                    <img width="56" src="images/logo-mi2.png">
                </a>
            </div>
            <ul class="nav-list">
                <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>
                <li>
                    <a href="#">智能硬件</a>
                </li>
                <li>
                    <a href="#">服务</a>
                </li>
                <li>
                    <a href="#">社区</a>
                </li>
            </ul>
            <div class="site-search">
                <form>
                    <input type="text" name="" class="content">
                    <input type="submit" name="" value="搜索" class="search">
                </form>
            </div>
        </div>
    </div>
</body>
</html>

/*reset.css里面的内容。*/
body,p,ul,ol,dl,dt{
	margin: 0;
	padding: 0;
}
ul,ol{
	list-style: none;
}
input{
	border: none;
	outline: none;
}
a{
	text-decoration: none;
}

小米商城搜索实战应用

<!--mi_header.html里面的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米导航</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
        .site-header{
            width: 100%;
            height: 100px;
            /*background-color: red;*/
        }
        .container{
            width: 1226px;
            /*height: 100px;*/
            margin: 0 auto;
            /*background-color: green;*/
        }
        .site-header .nav-logo{
            float:left;
            margin-top: 25px;
        }
        .nav-logo a{
            display: block;
            width: 56px;
            height: 56px;
        }
        .site-header .nav-list{
            float: left;
            width: 820px;
            height: 88px;
            padding: 12px 0 0 30px;
        }
        .nav-list li{
            float: left;
            font-size: 16px;
        }
        .nav-list li a{
            display: block;
            color: #333;
            padding: 28px 10px 38px;
        }
        .clearfix::after{
            content: '';
            clear: both;
            display: block;
        }
        .site-search{
            float: left;
            width: 296px;
            margin-top: 25px;
        }
        .site-search form{
            position: relative;
            /*这里设置相对定位，需要配合top,bottom,left,right这向个一起使用。如果不设置这四个值，不起作用。*/
            height: 50px;
            width: 296px;
        }
        .site-search form input.content{
            width: 223px;
            height: 48px;
            border: 1px solid #e0e0e0;
            padding: 0 10px;
            float: left;
        }
        .site-search form input.search{
            width: 49px;
            height: 50px;
            border: 1px solid #e0e0e0;
            float: left;
            margin-left: -1px;
        }
        .search-hot-word{
            position: absolute;
            top: 14px;
            right: 70px;
            font-size: 14px;
        }
        .search-hot-word span{
            background-color: #eee;
            padding: 0 5px;
            color: #757575;
        }
        .search-hot-word span:hover{
            cursor:pointer;
            /*cursor是指针的意思，pointer是手指的意思。*/
            background-color: #ff6700;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="site-header">
        <div class="container clearfix">
            <div class="nav-logo">
                <a href="#">
                    <img width="56" src="images/logo-mi2.png">
                </a>
            </div>
            <ul class="nav-list">
                <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>
                <li>
                    <a href="#">智能硬件</a>
                </li>
                <li>
                    <a href="#">服务</a>
                </li>
                <li>
                    <a href="#">社区</a>
                </li>
            </ul>
            <div class="site-search">
                <form>
                    <input type="text" name="" class="content">
                    <input type="submit" name="" value="搜索" class="search">
                    <div class="search-hot-word">
                        <span>小米9</span>
                        <span>小米11</span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

/*reset.css里面的内容。*/
body,p,ul,ol,dl,dt{
	margin: 0;
	padding: 0;
}
ul,ol{
	list-style: none;
}
input{
	border: none;
	outline: none;
}
a{
	text-decoration: none;
}

38、定位介绍及分类，子绝（对定位）父相（对定位）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>定位</title>
</head>
<body>
 	<!-- position:static 静态
			1.相对定位  position: relative;
				特点：不脱离标准文档流，可以调整元素。
				参考点：以原来的位置为参考点。
			2.绝对定位 position: absolute
				特点：
					1.脱离标准文档流，不在页面占位置。
					2.层级提高，压盖现象。
				参考点：
					相对于最近的非static（静止的）祖先元素定位，如果没有非static祖先元素，
					那么以页面根元素左上角进行定位。
				网站中实战应用：”子绝(对定位)父相(对定位)“
			3.固定定位 position:fixed
				特点：
					1.脱离标准文档流。
					2.一旦设置固定定位，在页面中滚动网页，固定不变。
				参考点：
					以浏览器的左上角。
				应用：
					小广告，回到顶部，固定导航栏。
 	-->
 	<div></div>
</body>
</html>

39、小米侧方固定案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米侧方固定案例</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
        .container{
            width: 1226px;
            height: 100%;
            border: 1px solid orange;
            margin: 0 auto;
        }
        .container p{
            margin-bottom: 200px;
        }
        .site-bar{
            position: fixed;
            width: 27px;
            bottom: 100px;
            right: 50%;
            margin-right: -640px;
        }
        .site-bar ul li .one{
            border-top: 1px solid #f5f5f5;
        }
        .site-bar ul li{
            width: 50px;
            height: 70px;
            border: 1px solid #f5f5f5;
            background-color: #fff;
            border-top: none;
        }
        .site-bar ul li{

        }
        .site-bar ul li a{
            display: block;
            width: 50px;
            height: 50px;
            margin-left: 10px;
            padding-top: 19px;
        }
        .site-bar ul li a img{
            width: 30px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>
            自“元宇宙”概念问世以来，热度持续居高不下。
红星资本局注意到，今日（12月13日）的A股，涨停板几乎被元宇宙概念霸屏。截至收盘，该板块有4只个股20cm涨停，6只个股10cm涨停，美盛文化（002699.SZ）更是连续4个涨停板。
从消息面上来看，一方面，百度（09888.HK；BIDU.US）宣布将于12月27日发布元宇宙产品“希壤”，互联网巨头的入局给了投资者以信心；另一方面，“炒房团”进军元宇宙的消息近期引发热议，有行业大佬豪掷3200万元买下一块虚拟土地，连歌手林俊杰都买了虚拟地块。
不仅如此，元宇宙培训也成了一门赚钱的好生意，有机构卖元宇宙网课的收入，已经超过300万元。
        </p>
        <p>
            2021年，被称为“元宇宙元年”，3月“元宇宙第一股”Roblox登陆纳斯达克，上市暴涨；10月Facebook改名为元宇宙（Metaverse）的前四个字母Meta。天眼查数据显示，截至12月9日，我国“元宇宙”商标申请注册有7882次。
        </p>
        <p>
            元宇宙不仅成了互联网大佬的“必争之地”，一股炒房热也已席卷元宇宙，虚拟世界平台Decentraland和Sandbox上的土地被天价售出。
        </p>
        <p>
            11月23日，在Decentraland上，一块约565.8平方米的数字土地以243万美元（约合人民币1552万元）的价格售出，刷新虚拟房产的价格纪录。
        </p>
        <p>
            自“元宇宙”概念问世以来，热度持续居高不下。
红星资本局注意到，今日（12月13日）的A股，涨停板几乎被元宇宙概念霸屏。截至收盘，该板块有4只个股20cm涨停，6只个股10cm涨停，美盛文化（002699.SZ）更是连续4个涨停板。
从消息面上来看，一方面，百度（09888.HK；BIDU.US）宣布将于12月27日发布元宇宙产品“希壤”，互联网巨头的入局给了投资者以信心；另一方面，“炒房团”进军元宇宙的消息近期引发热议，有行业大佬豪掷3200万元买下一块虚拟土地，连歌手林俊杰都买了虚拟地块。
不仅如此，元宇宙培训也成了一门赚钱的好生意，有机构卖元宇宙网课的收入，已经超过300万元。
        </p>
        <p>
            然而这一纪录没能保持多久，11月30日，虚拟世界平台Sandbox上的一块虚拟土地以430万美元（约2739万人民币）的价格售出。
12月9日，纪录再次刷新，香港房地产巨头、新世界发展（00017.HK）集团CEO郑志刚购入Sandbox中最大的数字地块之一。据知情人士透露，郑志刚对这块虚拟土地的投资金额约为500万美元（约3200万元人民币）。
        </p>
    </div>
    <div class="site-bar">
        <ul>
            <li>
                <a class="one">
                    <img src="images/1.png">
                </a>
            </li>
            <li>
                <a>
                    <img src="images/2.png">
                </a>
            </li>
            <li>
                <a>
                    <img src="images/3.png">
                </a>
            </li>
            <li>
                <a>
                    <img src="images/4.png">
                </a>
            </li>
            <li>
                <a>
                    <img src="images/5.png">
                </a>
            </li>
            <li>
                <a>
                    <img src="images/totop_hover.png">
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

40、z-index讲解，盒子的层叠等级。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>z-index的讲解</title>
	<style type="text/css">
		.a{
			position: relative;
			width: 200px;
			height: 40px;
			background-color: #C3FFFB;
			border: 3px solid #3962FE;
			z-index: 1;
		}
		.b{
			position: relative;
			width: 200px;
			height: 40px;
			background-color: #C3FFFB;
			border: 3px solid #3962FE;
			top: -30px;
			left: 50px;
			z-index: 10000;
		}
		.c{
			position: relative;
			width: 200px;
			height: 40px;
			background-color: #C3FFFB;
			border: 3px solid #3962FE;
			top: -50px;
			left: 100px;
			/*z-index: auto;*/
            /*z-index只对定位起作用，不写时默认值是auto。数值是正整数，数值越大，等级越高。*/
            /*另外，父级等级越大，子级也越大，比较顺序，先父后子。*/
			z-index:10;
		}
	</style>
</head>
<body>
	<div style="position: relative;z-index: 15;">
		<div class="a">A</div>
	</div>

	<div style="position: relative;z-index: 10;">
		<div class="b">B</div>
	</div>
	<div class="c">C</div>
</body>
</html>

41、背景定位属性值解讲，图片背景。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景属性</title>
	<style type="text/css">
		.bg{
			width: 1200px;
			height: 1300px;
			border: 3px solid green;
			background-color: red;
			background-image: url('images/30-1.jpg');/*图片背景属性*/
			/*平铺方式*/
			background-repeat:no-repeat;/*这个是应用最多的*/
			/*背景定位*/
			/*background-position:  50px 100px;默认position的值是0,0。*/
			/*background-position-x: 100px;*/
			/*background-position-y: 200px;*/
			/*关键字：top right bottom left center*/
			/*background-position: bottom right;*/
			background-position: top center;/*顶部中间显示*/
			/*这里position的值还可以用百分比： 0% 50% 100%*/
			/*水平百分比的值 =  容器宽度的百分比- 背景图片宽度百分比*/
			/*background-position: 30% 60%;*/
			/*background-position: 270px 600px;*/
		}
	</style>
</head>
<body>
	<div class="bg">
		<p style="color:#fff;">谁的女盆友</p>
	</div>
</body>
</html>

小米背景定位案例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小米背景定位案例</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<style type="text/css">
		.bgi{
			width: 100%;
			height: 657px;
			background: url('images/MIUI.png') no-repeat  center top ;
			/*这里是综合属性，下面是分开属性。*/
			/*
			background-image: url('images/MIUI.png');
			background-repeat: no-repeat;
			background-position: center top;
			*/
		}
	</style>
</head>
<body>
	<div class="bgi">

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

43、CSS Sprite雪碧图技术

使用雪碧图的场景：

静态图片，不随用户信息变化而变化
小图片，图片比较小（2~3kb）
加载量比较大。
大图不建议使用寻碧图。

作用：

有效的减少了HTTP请求数量，加速内容显示。
每请求一次，就会和服务器链接一次，建立链接式需要额外的时间开销的。

原理：通过css的背景属性的background-position来控制雪碧图的显示。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS Sprite雪碧图技术</title>
	<style type="text/css">
		div{
			width: 24px;
			height: 24px;
			display: inline-block;
			/*48 * 1194*/
			background: url('images/taobao_list.png') no-repeat 0 0;/*后面的0，0定位位置，表示在左上角*/
			/*控制背景图大小  */
			background-size: 24px 597px;
		}
		div.sprite{
			background-position: 0 0;
		}
		div.sprite2{
			background-position: 0 -44px;
		}
		div.sprite3{
			background-position: 0 -88px;
		}
		div.sprite4{
			background-position: 0 -132px;
		}
	</style>
</head>
<body>
	<div class="sprite"></div>
	<div class="sprite2"></div>
	<div class="sprite3"></div>
	<div class="sprite4"></div>
</body>
</html>

44、淘宝列表导航案例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>淘宝列表导航案例</title>
	<link rel="stylesheet" href="css/reset.css">
	<style type="text/css">
		.taobao_list{
			float: left;
            /*左边悬浮。*/
			border-top: 1px solid #f4f4f4;
		}
		.taobao_list ul{
			width: 292px;
            /*此处设置宽度为了让各小格列队，如果不设置，则显示在一排。*/
			overflow: hidden;
		}
		.taobao_list ul li{
			float: left;
            /*左边悬浮，如果不设置，则显示在一列。*/
			width: 71px;
			height: 75px;
			/*这里的宽和高设置的是小方格的大小。*/
			border: 1px solid #f4f4f4;
			border-top-color: transparent;
			border-left-color: transparent;
            /*transparent作用是让重合的边框变透明。*/
		}
		.taobao_list ul li a{
			text-align: center;
            /*文字居中显示。*/
			display: block;
			/*block设置块显示。*/
			font-size: 12px;
			color: #888;
		}
		.taobao_list ul li a span{
			margin-top: 12px;
			display: inline-block;
            /*转换为行内块标签。让图片显示出来*/
			width: 24px;
			height: 24px;
			background: url('images/taobao_list.png') no-repeat 0 0;
			/*no-repeat的作用，图片只显示一次。*/
			background-size: 24px 597px;
			/*这里设置背景图片的尺寸。*/
		}
		.taobao_list ul li a span.span1{
			background-position: 0 0;
		}
		.taobao_list ul li a span.span2{
			background-position: 0 -88px;
		}
		.taobao_list ul li a span.span3{
			background-position: 0  -44px;
		}
        .taobao_list ul li a span.span4{
			background-position: 0 -132px;
		}
		.taobao_list ul li a span.span5{
			background-position: 0 -176px;
		}
		.taobao_list ul li a span.span6{
			background-position: 0  -220px;
		}
        .taobao_list ul li a span.span7{
			background-position: 0 -264px;
		}
		.taobao_list ul li a span.span8{
			background-position: 0 -308px;
		}
		.taobao_list ul li a span.span9{
			background-position: 0 -352px;
		}
        .taobao_list ul li a span.span10{
			background-position: 0 -396px;
		}
		.taobao_list ul li a span.span11{
			background-position: 0 -440px;
		}
		.taobao_list ul li a span.span12{
			background-position: 0  -484px;
		}
	</style>
</head>
<body>
	<div class="taobao_list">
		<ul>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span1"></span>
					<p>充话费</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span2"></span>
					<p>旅行</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span3"></span>
					<p>车险</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span4"></span>
					<p>游戏</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span5"></span>
					<p>彩票</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span6"></span>
					<p>电影</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span7"></span>
					<p>酒店</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span8"></span>
					<p>理财</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span9"></span>
					<p>找服务</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span10"></span>
					<p>演出</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span11"></span>
					<p>水电煤</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span12"></span>
					<p>火车票</p>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>

45、边框属性，制作圆角，圆或者半圆。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>边框属性</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 100px;
			background-color:red;
			/*border-radius: 3px  10px 30px;*/
			/*border-top-left-radius: 15px 30px;*/
			/*通常不用上面的方法，因为圆角不对称。*/
			/*border-radius: 50px;*/
			/*border-radius: 50%;*/
			/*切出一个圆。*/
			border-top-left-radius: 100px;
			border-top-right-radius: 100px;
			border: 5px solid purple;
			/*切出个半圆*/
		}
	</style>
</head>
<body>
	<!-- border-radius
		box-shadow
	-->
	<div class="box"></div>
</body>
</html>

46、边框阴影，及鼠标悬浮动画。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>边框阴影</title>
	<style type="text/css">
		.shadow{
			position: relative;
			/*此处设置相对位置，为下面的鼠标悬浮准备。*/
			width: 200px;
			height: 200px;
			margin: 50px 10px auto;
			/*margin的值，调整紫色方块的位置。*/
			background-color: purple;
			box-shadow: 20px -20px 30px red;/*后面还可以加个inset，内部的意思。内部阴影。*/
			/*shadow的值，四个数字分别代表：水平，垂直，模糊度，颜色。*/
		}
		.shadow:hover{
			top: -3px;
			box-shadow: 0 15px 10px #e0e0e0;
			/*鼠标悬浮实现动画效果。*/
		}
	</style>
</head>
<body>
	<div class="shadow"></div>
</body>
</html>

47、网页常见布局方案-多列布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页常见布局方案-多列布局</title>
	<style type="text/css">
		html,body{
			margin: 0;
			height: 100%;
		}
		.header{
			width: 100%;
			height: 60px;
			line-height: 60px;
			text-align: center;
			background-color: #000;
		}
		.container{
			width: 1200px;
			margin: 0 auto;
		}
		.header .container{
			height: 60px;
			background-color: orange;
		}
		.wrap{
			width: 100%;
			height: 100%;
		}
		.wrap .container{
			height: 100%;
		}
		.wrap .left{
			width: 10%;/*这里可以设置具体的数据，也可以设置百分比。*/
			height: 100%;
			float: left;
			background-color: yellowgreen;
		}
		.wrap  .right{
			width: 10%;
			height: 100%;
			float: right;
			background-color: orchid;
		}
		.wrap .center{
			height: 100%;
			background-color: purple;
			margin: 0 130px;/*设置左右边框值。上下边框值为零。*/
		}
		.footer{
			width: 100%;
			height: 100px;
		}
		.footer .container{
			height: 100px;
			background-color: green;
		}
	</style>
</head>
<body>
	<!--头部 -->
	<div class="header">
		<div class="container">头部</div>
	</div>
	<!-- 主体内容 -->
	<div class="wrap">
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
			<div class="center">
				路飞学城
			</div>
		</div>
	</div>
	<!-- 脚部 -->
	<div class="footer">
		<div class="container"></div>
	</div>
</body>
</html>

48、行内元素水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内元素水平垂直居中</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            color: white;
            text-align: center;
            /*line-height: 200px;*/
            display: table-cell; /*转化为表格属性，才能使用下面的vertiacal-align*/
            vertical-align: middle;
        }
        td{/*td默认垂直方向居中*/
            width: 100px;
            height: 100px;
            background-color: green;
            text-align: center;
            vertical-align: center;
            /*vertical-align有三个值:top,center,bottom;*/
        }
    </style>
</head>
<body>
    <div class="box">
        <span>hello word</span>
    </div>
    <table>
        <th>
            <td>longfei</td>
        </th>
    </table>
</body>
</html>

49、块级元素水平垂直居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>块级元素水平垂直居中</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			/*position: relative;*/
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
		/*方法一：
		.child{
			width: 100px;
			height: 100px;
			background-color: green;
			position: absolute;
			margin: auto;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}*/
		.child{
			width: 100px;
			height: 100px;
			background-color: green;
			display: inline-block;
			line-height: 100px;
		}
		td{
			width: 100px;
			height: 100px;
			background: orange;
			vertical-align: middle;
			text-align: center;
		}
		/*方法二：*/
		span{
			display: inline-block;
			width: 50px;
			height: 50px;
			background-color: red;
			line-height: 50px;
		}
		.wrap{
			width: 200px;
			height: 200px;
			background-color: purple;
			position: relative;
		}
		/*方法三：*/
		.xiongda{
			width: 100px;
			height: 100px;
			background-color: blue;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -50px;
			margin-top: -50px;
		}
	</style>
</head>
<body>
	<!-- positon+margin -->
	<div class="box">
		<div class="child">我是中间</div>
	</div>
	<!-- display:table-cell; 单元格。-->
	<table>
		<th>
			<td>
				<span>MJJ</span>
			</td>
		</th>
	</table>
	<!-- 纯定位 -->
	<div class="wrap">
		<div class="xiongda"></div>
	</div>
</body>
</html>

50、html中的：下划线标签、中划线标签、斜体标记、粗体标记

    <!-- 下划线标记 -->
    <b>下划线标签：</b>
    <u>u标签是下划线标签</u>
    <br>
 
    <!-- 中划线标签 -->
    <b>中划线标题：</b>
    <s>s是中划线标签</s>
    <del>del也是中划线标签</del>
    <br>
 
    <!-- 斜体标记 -->
    <b>斜体标签：</b>
    <i>i是斜体标签</i>
    <em>em也是斜体标签</em>
    <br>
 
    <!-- 粗体标签 -->
    <b>粗体标签</b>
    <b>b是粗体标签</b>
    <strong>strong也是粗体标签</strong>

posted @ 2021-12-10 09:27 longfei825 阅读(247) 评论(0) 收藏举报

刷新页面返回顶部

CSS样式示例

1、CSS语法和注释规则：

2、CSS的三种引入方式：优先级：内联式>嵌入式>外部式。

3、CSS常用的几种选择器

4、CSS选择器之标签选择器

5、CSS选择器之ID选择器

6、CSS类选择器

7、如何正确地使用类class选择器

8、CSS后代选择器

9、CSS子代选择器

10、CSS组合选择器

11、CSS交集选择器，不常用。

12、CSS伪类选择器

13、CSS选择器总结：

14、CSS的断承性

15、选择器权重

16、!important的讲解

17、字体属性

18、字体属性之color颜色

19、文本属性和字体属性示例

20、文本属性示例。自动缩进两个字。

21、总合字体

22、字体属性和文本属性总结：

23、文本对齐方式：

24、元素分类

25、display属性讲解，通常用于行内标签转为行内块。（比较常用）

26、小米商城顶部栏案例

27、盒子模型的属性介绍

28、padding的讲解

29、border边框属性

下面是输入框样式设置：

margin属性讲解。

30、清除HTML标签元素的默认样式

31、HTML盒子居中显示

32、浮动元素现象float

33、浮动元素的破坏性

34、清除浮动的方式

35、清除浮动的方式之overflow法

36、BFC的讲解

37、小米商城导航栏制作

小米商城搜索实战应用

38、定位介绍及分类，子绝（对定位）父相（对定位）

39、小米侧方固定案例

40、z-index讲解，盒子的层叠等级。

41、背景定位属性值解讲，图片背景。

小米背景定位案例

43、CSS Sprite雪碧图技术

44、淘宝列表导航案例

45、边框属性，制作圆角，圆或者半圆。

46、边框阴影，及鼠标悬浮动画。

47、网页常见布局方案-多列布局

48、行内元素水平垂直居中

49、块级元素水平垂直居中

50、html中的：下划线标签、中划线标签、斜体标记、粗体标记

公告

　4、CSS选择器之标签选择器