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 b</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 width: 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 width: 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>
