zoukankan      html  css  js  c++  java

  • CSS实例 display display 边距

     1 CSS学习大纲
 2     在标签上设置style属性：
 3         background-color:#2459a2  ;
 4         height:48px  ;
 5     编写CSS样式：
 6         1.标签的style属性
 7         2.写在head里面，style标签中写样式
 8             ID选择器
 9                 #i1{
10                     background-color:2459a2  ;
11                     height:48px  ;
12                      }
13             class选择器  *****
14                 .c1{
15                     background - color: 2459a2  ;
16                     height: 48px  ;
17                     }
18                 <标签 class='名字'> </标签>
19             标签选择器
20                 div{
21                     background - color: 2459a2;
22                     height: 48px ;
23                    }
24                  所有的div都使用这个样式
25             层级选择器（空格）  *****
26                 .c1 .c2 div{
27                       background - color: 2459a2;
28                       height: 48px;
29                            }
30             组合选择器（逗号）  *****
31                 #i1,.c1,div{
32                             }
33             属性选择器   *****
34                 对选择到到标签再通过属性再进行一次筛选
35                 .c1[n='alex']{100px ;height:200px;}
36             PS:
37                 优先级，标签上style优先，编写顺序，就近原则
38         2.5  css样式也可以写再单独的文件中
39             <link rel="stylesheet"  href="commons.css"/>
40 
41         3、多行注释
42             /*
43             ...内容...
44            */
45 
46 
47         4、边框
48             宽度，样式，颜色 （border: 4px dotted red）
49             border-left
50         5、
51             height,              高度 百分比
52             width,               宽度 像素，百分比
53             text-align:ceter,    水平方向居中
54             line_height,         垂直方向根据标签高度
55             color                字体颜色
56             font-size            字体大小
57             font-weight          字体加粗
58 
59         6、float  飘
60             让标签浪起来，块级标签也可以堆叠
61             老子管不住DIV最后加：
62                     <div style="clear: both;"></div>
63 
64         7、display  块级标签和行内标签属性转换
65                 display:none;让标签消失
66                 display: inline转换成行内标签
67                 display: block转换成块级标签
68                 display:inline-block  具有inline，默认自己有多少占多少，也可以block设置高度，宽度
69 
70                 <span>行内标签：无法设置高度，宽度，padding , margin
71                 <div>块级标签：可以设置高度，宽度，padding , margin
72 
73         8、padding , margin(0,aito)
74             边距
75             margin   外边距
76             padding  内边距
    CSS学习大纲3
     1 <!DOCTYPE html>
 2 <!--CSS实例1-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .pg-header{
 9             height:38px;
10             background-color: #dddddd;
11             line-height: 38px;
12                     }
13     </style>
14 
15 </head>
16 <body style="margin: 0 auto;">
17     <div class="pg-header">
18         <div style="float: left;">
19             收藏本站
20         </div>
21         <div style="float: right;">
22             <a>登录</a>
23             <a>注册</a>
24         </div>
25     </div>
26     <div style=" 300px;border: 1px solid red;">
27         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
28         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
29         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
30         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
31         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
32         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
33         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
34         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
35         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
36         <div style="clear: both;"></div>
37         </div>
38     </div>
39 
40 </body>
41 </html>
    CSS实例1
     1 <!DOCTYPE html>
 2 <!--CSS实例2-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .pg-header{
 9             height:38px;
10             background-color: #dddddd;
11             line-height: 38px;
12                     }
13     </style>
14 
15 </head>
16 <body style="margin: 0 ;">
17     <div class="pg-header">
18         <div style=" 980px;margin: 0 auto;">
19             <div style="float: left;">
20                 收藏本站
21             </div>
22             <div style="float: right;">
23                 <a>登录</a>
24                 <a>注册</a>
25             </div>
26             <div style="clear: both;"></div>
27          </div>
28     </div>
29     <div>
30         <div style=" 980px;margin: 0 auto;">
31             <div style="float: left">
32                 logo
33             </div>
34             <div style="float: right">
35                 <div style="height: 50px; 100px;background-color: #dddddd"> </div>
36             </div>
37             <div style="clear: both;"></div>
38         </div>
39     </div>
40 
41     <div style=" 300px;border: 1px solid red;">
42         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
43         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
44         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
45         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
46         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
47         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
48         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
49         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
50         <div style=" 96px;height:30px;border: 1px solid green;float: left ">        </div>
51         <div style="clear: both;"></div>
52         </div>
53     </div>
54 
55 
56 
57 </body>
58 </html>
    CSS实例2
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style=" 30%;background-color:red;float: left;">
 9         style=" 30%;background-color:red;float: left
10     </div>
11     <div style=" 50%;background-color:green;float: left;">
12         style=" 50%;background-color:red;float: left;"
13     </div>
14 </body>
15 </html>
    display
     1 <!DOCTYPE html>
 2 <!--CSS中display的应用-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <div style="background-color: red;display: inline;">display: inline转换成行内标签</div>
10     <span style="background-color: red;display: none">display:none 让标签消失</span>
11     <span style="background-color: red;display: block">display: block转换成块级标签</span>
12     <br/>
13     <br/>
14     <br/>
15     <span style="background-color: red;height: 100px; 90px">行内标签测试</span>
16     <span style="display: inline-block;background-color: red;height: 100px; 90px">行内标签双属性测试</span>
17     <br/>
18     <br/>
19     <br/>
20     <div style="background-color: red;height: 100px; 90px">块级标签测试</div>
21     <br/>
22     <br/>
23     <br/>
24     <a style="background-color: red;">A标签测试</a>
25 </body>
26 </html>
    CSS中display的应用
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <br/>
 9     <br/>
10     <br/>
11     <div style="border: 5px solid red;height: 100px;">
12         <div style="background-color: green;height: 50px;margin-top: 10px;">  margin外边距     </div>
13     </div>
14     <br/>
15     <br/>
16     <br/>
17     <div style="border: 5px solid red;height: 100px;">
18         <div style="background-color: green;height: 50px;padding-top: 10px;">  padding内边距    </div>
19     </div>
20 </body>
21 </html>
    CSS边距
  • 相关阅读:
    linux 计划任务
    linux 进程管理
    PHP中global与$GLOBALS['']的区别
    php预定义变量
    linux 强制终止进程命令
    mysql取某表中数据的随机的方法
    mysql 连接 选库 查询
    Python 的异步 IO：Asyncio 简介
    并发和并行的区别
    asyncio模块中的Future和Task
  • 原文地址：https://www.cnblogs.com/ujq3/p/7419382.html
Copyright © 2011-2022 走看看