css基础

（一）背景图片

用外链式往div元素中引入一张背景图

background:url(相对路径) no-repeat;

url()括号中写的是相对路径
no-repeat 不平铺

background-size:20px 20px;

第一个值:水平方向,第二个值竖直方向
自动匹配背景图片大小 cover
背景图片不占位置

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             div{
 8                 width: 800px;
 9                 height: 800px;
10                 /*background:red;*/
11                 background:url(img/balloon.png) no-repeat;
12                 /*url()括号中写的是相对路径 
13                 no-repeat  不平铺*/
14                 background-size:cover;
15                 /*第一个值:水平方向,第二个值竖直方向*/
16                 /*自动匹配背景图片大小 cover */
17                 /*背景图片不占位置*/
18                 padding:50px;
19                 border:1px solid black;
20             }
21         </style>
22     </head>
23     <body>
24         <!--背景颜色：盒子模型的内容区域（宽，高）、内边距-->
25         <div>这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV这是一个IDV</div>
26         <!--用外链式往div元素中引入一张背景图-->
27     </body>
28 </html>

test1

（二）选择器

通配符选择器：选中页面中所有的标签。
后代选择器:选择ul标签里面的所有li标签。
标签名选择器eg：ul li{}
类名选择器:
id名选择器

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             *{
 8                 margin: 0px;
 9                 padding: 0px;
10             }
11             /*通配符选择器：选中页面中所有的标签*/
12             /*body{
13                 margin: 0px;
14             }
15             p{
16                 margin: 0px;
17             }*/
18             /*后代选择器:选择ul标签里面的所有li标签*/
19             ul li{
20                 float: left;
21                 list-style: none;
22                 margin-left: 30px;
23                 /*font-size:10px;*/
24             }
25             /*标签名选择器*/
26             .text{
27                 font-size:10px;
28             }
29             /*类名选择器*/
30             
31             #one{
32                 color:red;
33             }
34             /*id名选择器*/
35             div p span{
36                 
37             }
38             ul #one{
39                 font-size:48px;
40             }
41             div{
42                 width: 200px;
43                 height: 200px;
44                 background: red;
45             }
46             /*练习:给div元素 通过四种选择器分别写一个不一样的背景颜色*/
47         </style>
48     </head>
49     <body>
50         <div>
51             <p>
52                 <span></span>
53             </p>
54         </div>
55         <span></span>
56         <span class="text"></span>
57         <ul>
58             <li>淘宝</li>
59             <li class="text">秒杀</li>
60             <li class="text" id="one">|</li>
61             <!--给元素设置一个class类名
62                 不能以数字开头，不能有中文   不能用关键字
63             -->
64             <!--id是唯一-->
65             <li>团购</li>
66             <li>海购</li>
67             <li>个人中心</li>
68         </ul>
69     </body>
70 </html>

选择器

（三）项目符号

列表默认下有会项目符合，一般都会去除。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             li{
 8                 list-style: none;
 9             }
10             ul{
11                 list-style: none;
12             }
13             *{
14                 margin: 0px;
15                 padding: 0px;
16             }
17             /**效率低*/
18         </style>
19     </head>
20     <body>
21         <ul>
22             <li>1</li>
23             <li>2</li>
24             <li>43</li>
25             <li>4</li>
26             <li>5</li>
27             <li>6</li>
28         </ul>
29     </body>
30 </html>

选择器

问题：在通配符选择器、父类选择器和子类选择器中哪里去除项目符号好，为什么。

答：在父类中去除好，代码见上。

原因：当选择通配符选择器里去除项目符号的时候，往后所有的列表中都要去除项目符号这是其一；将代码写入通配符选择器中意味着，往后所有添加的元素标签都会自动的加入去除项目符号的代码，即使此元素没有项目符号，这样一来代码执行的效率就降低了。

当选择子类选择器里去除项目符号的时候，会对ul里面的所有li都执行次list-style:none;，同样降低了效率。

而选择在父类选择器里去除项目符号，list-style:none;只用执行一次，一步到位。

（四）块级元素居中

块级元素的居中方式:前提是有一个固定的宽度,margin左和右auto

margin:0px auto;
自动: 取最大值
两个值:第一个值上下、第二个值左右

margin:10px auto 0px;
三个值:上、左和、下
四个值:上、右、下、左

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             ul{
 8                 background-color:#ff7800 ;
 9                 width: 950px;
10                 overflow: hidden;
11                 /*margin-left: auto;
12                 margin-right: auto;*/
13                 /*margin:10px auto 0px;*/
14                 margin:0px auto;
15                 /*自动: 取最大值*/
16                 /*两个值:第一个值上下  第二个值左右*/
17                 /*三个值:上    左和右       下*/
18                 /*四个值:上   右    下    左*/
19                 /*margin和padding也有这样的写法*/
20                 /*块级元素的居中方式:*/
21                 /*前提是有一个固定的宽度,margin左和右auto*/
22                 padding-left:20px ;
23             }
24             li{
25                 list-style: none;
26                 text-align: center;
27                 float: left;
28                 color: white;
29                 margin: 10px;
30                 font-weight: bold;
31             }
32             a{
33                 text-decoration: none;
34                 color: white;
35                 font-weight:bold ;
36                 
37             }
38         </style>
39     </head>
40     <body>
41         <ul>
42             <li><a href="">天猫</a></li>
43             <li><a href="">聚划算</a></li>
44             <li><a href="">天猫超市</a></li>
45             <li>|</li>
46             <li><a href="">淘抢购</a></li>
47             <li><a href="">电器城</a></li>
48             <li><a href="">司法拍卖</a></li>
49             <li><a href="">淘宝心选</a></li>
50             <li><a href="">兴农扶贫</a></li>
51             <li>|</li>
52             <li><a href="">飞猪旅行</a></li>
53             <li><a href="">智能生活</a></li>
54             <li><a href="">苏宁易购</a></li>
55         </ul>
56     </body>
57 </html>

块级元素居中

（五）固定定位

固定定位：不会随着页面滚动而滚动的效果，就用固定定位

position:fixed;
定位以后，top bottom left right
参照物：浏览器窗口
固定定以后，脱离文档流，变成行内块元素、元素不占位置

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             *{
 8                 padding: 0px;
 9                 margin:0px;
10             }
11             body{
12                 height: 5000px;
13             }
14             span{
15                 position: fixed;
16                 height: 100px;
17                 width:500px;
18                 background: red;
19                 /*bottom:0px;
20                 right:10%;*/
21                 /*%10  代表当前浏览器窗口的长度的%10*/
22             }
23         </style>
24         <!--定位：元素在页面中的排版位置
25         1，固定定位    不会随着页面滚动而滚动的效果，就用固定定位
26             position：fixed;
27             固定定以后，脱离文档流，变成行内块元素
28             定位以后，top bottom left  right
29             参照物：浏览器窗口
30             固定定位后，元素不占位置
31             练习：页面中有一个正方形div，如何通过固定定位让它显示在屏幕的正中间？
32         2，相对定位
33         3，绝对定位
34         4，静态定位
35         -->
36     </head>
37     <body>
38         <span></span>
39         <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
40     </body>
41 </html>

fixed

（六）相对定位

相对定位：用于微调位置

postion:relative;
定位后top left bottom right
参照物：元素原本的位置
相对定位后，元素还占有原来的位置
相对定位不脱离文档流，不改变元素性质

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             span{
 8                 width: 200px;
 9                 height: 200px;
10                 /*background: red;*/
11                 margin-top: 100px;
12                 position: relative;
13                 top:0px;
14             }
15             img{
16                 /*margin-top: 10px;*/
17                 top:5px;
18                 position: relative;
19                 width: 20px;
20                 height: 20px;
21             }
22         </style>
23         <!--相对定位：用于微调位置
24             top left bottom right  
25             相对定位后，元素还占有原来的位置
26             参照物：元素原本的位置
27             相对定位不脱离文档流，不改变元素性质
28         -->
29     </head>
30     <body>
31         <span></span>
32         <p><span><img src="img/balloon.png/" alt="" /></span>相对定位：用于定位：用于微调位置相对定位：用：</p>
33     </body>
34 </html>

relative

（七）绝对定位

postion:absolute;
定位后 top left right bottom
参照物：往父级找到有定位方式的标签，然后以它为参照物，若父级都无定位方式，则以body为参照物
脱离文档流，变成行内块元素、设置宽高有效、不占位置
一般来说，子集绝对定位，父级给相对定位。因为父级给相对定位，对整个页面的影响较小

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             *{
 8                 margin: 0px;
 9                 padding: 0px;
10             }
11             div{
12                 position:relative;
13                 width: 500px;
14                 height: 500px;
15                 background: blue;
16             }
17             p{
18                 width: 300px;
19                 height: 300px;
20                 background: red;
21                 top:0px;
22             }
23             span{
24                 width: 100px;
25                 height: 100px;
26                 background: lime;
27                 position: absolute;
28                 top:0px;
29                 right:0px;
30             }
31             ol li{
32                 background: yellow;
33             }
34         </style>
35         <!--绝对定位
36             定位后 top left right bottom
37             参照物：往父级找到有定位方式的标签，然后以它为参照物，若父级都无定位方式，则以body为参照物
38             脱离文档流，变成行内块元素   设置宽高有效果
39             不占位置
40             一般来说，子集绝对定位，父级给相对定位     
41             因为父级给相对定位，对整个页面的影响较小
42         -->
43     </head>
44     <body>
45         <div>
46             div
47             <p>
48                 ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp    ppp
49                 <span></span>
50             </p>
51         </div>
52         <ol>
53             <li></li>
54             <li></li>
55             <li></li>
56             <li></li>
57             <li></li>
58             <li></li>
59             <li></li>
60             <li></li>
61             <li></li>
62             <li></li>
63             <li></li>
64             <li></li>
65             <li></li>
66             <li></li>
67             <li></li>
68             <li></li>
69             <li></li>
70             <li></li>
71             <li></li>
72             <li></li>
73         </ol>
74     </body>
75 </html>

absolute

（八）定位居中

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             div{
 8                 width: 200px;
 9                 height: 200px;
10                 background: red;
11                 position: fixed;
12                 top:50%;
13                 left:50%;
14                 margin-top:-100px;
15                 margin-left: -100px;
16             }
17         </style>
18     </head>
19     <body>
20         <div></div>
21     </body>
22 </html>

定位居中

要点：1、竖直选择（距离参照物上边50%或距离参照物下边50%）和水平选择（距离参照物右边50%或距离参造物左边50%）

　　　2、外边距竖直选择（margin-top或margin-bottom）和外边距水平选择（margin-left或margin-right），值为定位元素宽高的一般像素。

（九）定位练习

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             body{
 8                 height:5000px;
 9             }
10             div{
11                 width: 300px;
12                 height: 300px;
13                 border:3px solid black;
14                 position: fixed;
15                 left:0px;
16                 top: 0px;
17             }
18             img{
19                 width: 300px;
20                 height: 300px;
21             }
22             span{
23                 width: 30px;
24                 height: 30px;
25                 background: #ccc;
26                 position: absolute;
27                 right: 0px;
28                 top:33px;
29                 text-align: center;
30                 line-height: 30px;
31                 color:white;
32             }
33         </style>
34     </head>
35     <body>
36         <div>
37             <img src="img/balloon.png" alt="" />
38             <span>X</span>
39         </div>
40     </body>
41 </html>

定位练习

（十）显示层级

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <!--由于定位后，元素不占位置，可能出现重叠的现象，所以，就要有显示层级来设置元素的显示顺序-->
 7         <!--显示层级属性，是定位后才具有的-->
 8         <style>
 9             .one{
10                 width: 200px;
11                 height: 200px;
12                 background: red;
13                 position: absolute;
14                 left:100px;
15                 z-index:-1;
16                 /*显示层级,默认的显示层级为0;*/
17             }
18             .two{
19                 width: 200px;
20                 height: 200px;
21                 background: blue;
22                 position: relative;
23                 z-index: -2;
24             }
25         </style>
26     </head>
27     <body>
28         <div class="one"></div>
29         <div class="two"></div>
30     </body>
31 </html>

显示层级

z-index:;
默认为0

（十一）hover（伪类选择器）

div:hover{}
选择同级用+，选择后代用空格

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .text{
 8                 cursor: pointer;
 9                 /*改变鼠标的显示状态*/
10                 background: greenyellow;
11             }
12             /*p:hover{
13                 background: salmon;
14                 color: #f60;
15             }*/
16             div{
17                 height: 200px;
18                 background: sienna;
19             }
20             div:hover+p{
21                 background: salmon;
22             }
23             /*选择同级用+链接    选择后代用空格*/
24         </style>
25     </head>
26     <body>
27         <div></div>
28         <p class="text">文字文字</p>
29         <a href="">这是一个超链接</a>
30     </body>
31 </html>

hover伪类选择器

posted @ 2019-07-12 22:02 xiaochen-cmd 阅读(198) 评论(0) 编辑收藏举报

刷新页面返回顶部

xiaochen-cmd

css基础

公告