• python16_day12【html、css】

    一、HTML

    　　所有HTML标签操作

      1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <!--编码-->
  5     <meta charset="UTF-8">
  6     <!--title-->
  7     <title>EEOEDU</title>
  8     <!--5秒后跳转百度-->
  9     <!--<meta http-equiv="refresh" content="5; url=http://www.baidu.com"; >-->
 10     <!--网站关键字搜索-->
 11     <meta name="keywords" content="开发者,教育" />
 12     <!--网站描述-->
 13     <meta name="description" content="....xxxxx....." />
 14     <!--IE最新的引擎去渲染HTML,兼容IE-->
 15     <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" />
 16     <!--头部图标-->
 17     <link rel="shortcut icon" href="favicon.ico" />
 18 
 19 </head>
 20 <body>
 21     <!--块级标签-->
 22     <h1>h1</h1>
 23     <div></div>
 24 
 25     <!--内联标签-->
 26     <a>a&nbspb</a>
 27     <span>span</span>
 28 
 29     <!--p标签-->
 30     <p>this is a p <br> ....</p>
 31     <p>this is a p</p>
 32 
 33     <!--a标签 跳转,重定向,锚-->
 34     <a href="http://www.eeo.cn" target="_blank">eeo.cn</a>
 35 
 36     <!--锚
 37     <a href="#c1">第一章</a>
 38     <a href="#c2">第二章</a>
 39     <a href="#c3">第三章</a>
 40 
 41     <div id="c1" style="height: 700px; background-color: gray">
 42         content one
 43     </div>
 44 
 45     <div id="c2" style="height: 700px; background-color: palevioletred">
 46         content two
 47     </div>
 48 
 49     <div id="c3" style="height: 700px; background-color: green">
 50         content three
 51     </div> -->
 52 
 53     <!--h1~6
 54     <h1>h1</h1>
 55     <h2>h2</h2>
 56     <h3>h3</h3>
 57     <h4>h4</h4>
 58     <h5>h5</h5>
 59     <h6>h6</h6> -->
 60 
 61 
 62     <!--列表
 63     <ul>
 64         <li>1</li>
 65         <li>2</li>
 66         <li>3</li>
 67     </ul>
 68 
 69     <ol>
 70         <li>...</li>
 71         <li>...</li>
 72         <li>...</li>
 73     </ol>
 74 
 75 
 76     <dl>
 77         <dt>标题一:</dt>
 78         <dd>1</dd>
 79         <dd>1</dd>
 80         <dd>1</dd>
 81         <dt>标题二:</dt>
 82         <dd>1</dd>
 83         <dd>1</dd>
 84         <dd>1</dd>
 85     </dl>       -->
 86 
 87 
 88     <!--表格
 89     <table border="1">
 90         <thead>
 91             <tr>
 92                 <th>序号</th>
 93                 <th colspan="2">主机名</th>
 94             </tr>
 95         </thead>
 96         <tbody>
 97             <tr>
 98                 <td>1</td>
 99                 <td>c1.com</td>
100                 <td>80</td>
101             </tr>
102             <tr>
103                 <td>2</td>
104                 <td>c2.com</td>
105                 <td>80</td>
106             </tr>
107             <tr>
108                 <td>3</td>
109                 <td rowspan="2">c3.com</td>
110                 <td>80</td>
111             </tr>
112             <tr>
113                 <td>4</td>
114                 <td>81</td>
115             </tr>
116         </tbody>
117     </table> -->
118 
119     <!--label点击文件,自动选中input-->
120     <div>
121         <label for="user">用户名:<input id="user" type="text" /></label>
122         密码:<input type="text" />
123     </div>
124 
125     <!--框-->
126     <fieldset>
127         <legend>login:</legend>
128         username:<input type="text">
129         password:<input type="password">
130     </fieldset>
131 
132     <!--A标签和img-->
133     <a href="http://www.eeo.cn">
134         <img src="2.jpg" alt="tom" title="i am tom ,choice me...">
135     </a>
136 
137     <!--表单-->
138     <form action="http://192.168.12.120:8000/index/" method="POST" enctype="multipart/form-data">
139         username:<input type="text" name="username" placeholder="请输入内容"/>
140         <br>
141         email:<input type="email" name="email">
142         <br>
143         password:<input type="password" name="password">
144         <!--单选框 name一样才会相排斥-->
145         <div>
146             <input type="radio" name="gender" value="1" checked="checked">男
147             <input type="radio" name="gender" value="2">女
148         </div>
149 
150         <!--多选框-->
151         <div>
152             <input type="checkbox" name="hobby" value="11" checked="checked"/>学习
153             <input type="checkbox" name="hobby" value="12" />运动
154             <input type="checkbox" name="hobby" value="12" />户外
155         </div>
156 
157         <!--文件上传-->
158         <div>
159             <input name="tofile" type="file">
160         </div>
161 
162         <!--select选择-->
163         <div>
164             <select name="city">
165                 <option vlaue="bj">北京</option>
166                 <option vlaue="sh" selected="selected">上海</option>
167                 <option vlaue="ss">沙河</option>
168             </select>
169             <br>
170             <select name="city2" multiple>
171                 <option value="bj">bj</option>
172                 <option value="sh" selected="selected">sh</option>
173                 <option value="ss" selected="selected">ss</option>
174             </select>
175         </div>
176 
177         <!--文字块-->
178         <div>
179             <textarea name="memo">默认值</textarea>
180         </div>
181 
182         <input type="submit" value="submit提交">
183         <input type="button" value="button提交">
184         <input type="reset" value="重置">
185     </form>
186 </body>
187 </html>

    二、CSS

    　　1.普通CSS例子

     1         /*普通CSS*/
 2         .sb{
 3             color: white;
 4             background-color: green;
 5             font-size: 16px;
 6             height: 20px;
 7              auto;
 8             /*background: url(2.jpg) no-repeat 0 0;*/
 9         }
10 
11    
12     <div class="sb">sb want say</div>

    　　2.大图中选图标

    1         /*背景选择,挖洞*/
2         .c1{
3             background: url(5.png) no-repeat -110px -106px;
4             height: 30px;
5              30px;
6         }
7     </style>
8 
9     <div class="c1"></div>

    　　3.选择器

     1     <style>
 2         /*ID选择器*/
 3         #wc{
 4 
 5         }
 6         /*属于选择器*/
 7         input[type=text]{
 8 
 9         }
10         /*类选择器*/
11         .c1{
12 
13         }
14         /*标签选择器*/
15         a{
16 
17         }
18 
19         /*组合选择器, div下面p标签*/
20         div p{
21             
22         }
23         /*组合选择器, 找一层,儿子层*/
24         .c1 > p span{
25             
26         }
27         /*鼠标放上面的变化*/
28         .c1:hover{
29             
30         }
31 
32         /*相排斥时,优先生效*/
33         .c1{
34             color: gray !important;
35         }
36         
37     </style>

    　　4.display

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .show{
 8             color: red;
 9             font-size: 30px;
10         }
11 
12         .hide{
13             display: none;
14         }
15 
16     </style>
17 </head>
18 <body>
19     <input type="button" value="showme" onclick="showdiv();">
20     <input type="button" value="hideme" onclick="hidediv();">
21     <div id="i1" class="show hide">this test</div>
22 
23     <script>
24         function showdiv(){
25             document.getElementById('i1').classList.remove('hide')
26         }
27 
28         function hidediv() {
29             document.getElementById('i1').classList.add('hide')
30         }
31     </script>
32 </body>
33 </html>

     　　5.边框

     1     <style>
 2         .c2{
 3             background-color: #dddddd;
 4             border-left: 3px solid transparent;
 5         }
 6         .c2:hover{
 7             border-left: 3px solid red;
 8         }
 9     </style>
10 
11     <!--边框一-->
12     <div style="height: 100px; border: 1px solid red"></div>
13     <!--边框二-->
14     <div style="background-color: #dddddd; border-left: 3px solid red">搜索数据</div>
15     <!--边框三-->
16     <div class="c2">搜索数据</div>

    　　6.边距padding and margin

     1     <style>
 2     #i1{
 3         /*外边距*/
 4         margin: 50px;
 5         background-color: rebeccapurple;
 6         color: white;
 7     }
 8 
 9     #i2{
10        /*内边距*/
11         padding: 50px;
12         background-color: rebeccapurple;
13         color: white;
14         }
15     </style>
16 
17     <div id="i1">bizi</div>
18     <div id="i2">bizi</div>

     　　7.位置position

     1     <style>
 2         .tip{
 3             position: fixed;
 4             bottom: 300px;
 5             right: 0;
 6         }
 7         .ab{
 8             position: absolute;
 9             bottom: 10px;
10             right: 0;
11         }
12         .rel{
13             position: relative;
14             height: 300px;
15             width: 300px;
16             background-color: rebeccapurple;
17         }
18         .abs{
19             position: absolute;
20             top: 0;
21             right: 0;
22         }
23     </style>
24 
25     <div class="rel">
26         <div>
27             <!--absolute碰到relative就生效,定位在上一级相对位置-->
28             <div class="abs">ttttt</div>
29         </div>
30     </div>
31 
32     <div style="background-color: #dddddd; height: 2000px;"></div>
33 
34     <!--fixed永远固定在那个位置,通常用在广告挂件-->
35     <div class="tip">返回顶部fixed</div>
36     <!--如果没有遇到relative则根据滚屏变动-->
37     <div class="ab">返回顶部absolute</div>

    　　8.模态对话框

     1     <style>
 2         .hide{
 3             display: none;
 4         }
 5 
 6         .mid{
 7             position: fixed;
 8             background-color: black;
 9             top:0;
10             left: 0;
11             right: 0;
12             bottom: 0;
13             z-index: 98;
14             opacity: 0.5;
15         }
16         .modal{
17             height: 300px;
18             width: 400px;
19             background-color: green;
20             position: fixed;
21             left: 50%;
22             margin-left: -200px;
23             top: 50%;
24             margin-top: -150px;
25             z-index: 99;
26         }
27     </style>
28 
29     <div>
30         <input type="button" value="display" onclick="showDiv();" />
31         <div>aaaaaaaaaaaaaa</div>
32     </div>
33 
34     <div id="i2" class="mid hide"></div>
35     <div id="i1" class="modal hide">
36         <input type="button" value="cacel" onclick="hideDiv();"/>
37     </div>
38 
39     <script>
40         function showDiv(){
41             document.getElementById('i1').classList.remove('hide')
42             document.getElementById('i2').classList.remove('hide')
43         }
44 
45         function hideDiv(){
46             document.getElementById('i1').classList.add('hide')
47             document.getElementById('i2').classList.add('hide')
48         }
49     </script>

     　　9.行高line-height

     1         body{
 2             margin: 0;
 3         }
 4 
 5         .menu{
 6             background-color: #396bb3;
 7             color: white;
 8             height: 44px;
 9             /*行高,行间的距离*/
10             line-height: 44px;
11         }
12 
13 
14 <body>
15 
16     <div class="menu">
17         <a>菜单一</a>
18         <a>菜单二</a>
19         <a>菜单三</a>
20     </div>　
    1     <div class="menu" style="background-color: blue;height: 44px;line-height: 44px;">
2         老男人
3     </div>

    　　10.float漂浮

    1     <div class="menu" style="background-color: #dddddd">
2         <div style="float: left">内容一</div>
3         <div style="float: right">内容二</div>
4         <!--没有这句就漂没了,需要拉回来-->
5         <div style="clear: both"></div>
6     </div>
    1     <div class="menu" style="background-color: blue; height: 30px">
2         <div style="float: left">内容一</div>
3         <div style="float: right">内容二</div>
4         <!--没有这句就漂没了,需要拉回来; 或者为父DIV设置height-->
5         <!--<div style="clear: both"></div>-->
6     </div>

    　　11.居中

    1     <div class="menu" style="background-color: blue;height: 44px;line-height: 44px;text-align: center">
2         老男人
3     </div>

     　 12.综合布局 

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10         .w{
11             /*background-color: gray;*/
12             color: red;
13             width: 980px;
14             margin:auto;
15 
16         }
17         .pg-header{
18             height: 44px;
19             background-color: #396bb3;
20             color: white;
21             line-height: 44px;
22         }
23 
24         .pg-header .w a{
25             display: inline-block;
26             text-decoration: none;
27             padding: 0 10px;
28         }
29         .pg-header .w a:hover{
30             background-color: #8eb030;
31 
32         }
33         .left{
34             float: left;
35         }
36         .right{
37             float: right;
38         }
39     </style>
40 </head>
41 <body>
42     <div class="pg-header">
43         <div class="w">test
44             <div class="menus left">
45                 <a href="#">menu1</a>
46                 <a href="#">menu2</a>
47                 <a href="#">menu3</a>
48             </div>
49             <div class="menus right">
50                 <a href="#">login</a>
51                 <a href="#">register</a>
52             </div>
53         </div>
54     </div>
55 
56 
57     <!--body-->
58     <div class="pg-body">
59             <div class="w">
60                 内容
61             </div>
62     </div>
63 </body>
64 </html>
    布局

    　　
  • 相关阅读:
    vue引用js报错Uncaught SyntaxError: Unexpected token <
    VS Code离线安装扩展方法
    zTree、jsTree排序和简单的js数字字符串混合排序方法
    C# 如何读取匿名类型Anonymous Type的属性
    ajax使用jsonp请求方式
    VS2015 Bad Request解决方法
    C# json对象中包含数组对象时，如何存入数据库
    js 最短代码生成随机数(字符串、id)
    HDU 6395 Sequence 杜教板子题
    hdu GuGuFishtion 6390 数论 欧拉函数
  • 原文地址：https://www.cnblogs.com/weibiao/p/6699403.html
Copyright © 2020-2023  润新知