PYTHON自動化Day13-HTML,CSS
阿新 • • 發佈：2018-11-26
HTML
<!DOCTYPE html> <!--規定標準的html--> <html lang="en"> <!--一個頁面只允許出現一對html標籤， 標籤的屬性-指定英文 lang= --> <head> <!--自閉和標籤，只有一部分--> <meta charset="UTF-8">
<!--<meta http-equiv="refresh" content="1"> <!–頁面每秒重新整理一次–>--> <!--<meta http-equiv="refresh" content="2;url=https://www.baidu.com"> <!–頁面每秒重新整理一次–>--> <!--主動閉合標籤，有兩個部分--> <title>lily</title> <!--修改瀏覽器頁簽名字--> <!--tps: chrome 頁面右鍵 -檢查，然後重新整理按鈕右鍵可以選擇清空快取並硬性載入--> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> <!--修改瀏覽器頁籤圖示--> </head> <body> <h1>標題標籤</h1> <h2>標題標籤</h2> <h3>標題標籤</h3> <h4>標題標籤</h4> <h5>標題標籤</h5> <h6>標題標籤</h6> <!--塊級標籤，無論文字多少，佔滿整行整塊，可以頁面上 find element分別檢視一下效果--> <p>今天週三。今天週三。今天週三。今天週三。今天週三。今天週三。今天週三。今天週三。今天週三。</p> <!-- 這一行內容上下有間距 --> <!--行內標籤，文字多少，佔多少，span也是最基礎的標籤，白板標籤--> <span>今天週三。今天週三。今天週三。今天週三。今天週三。今天週三。今天週三。今天週三。今天週三。</span> <!-- 這一行內容上下沒有間距，這個用的多 --> <!--偽白板標籤， 因為他的styles裡 有 display:block ，她也變成了塊級標籤--> <div>今天</div> <!--如果想要在內容中加多個空格，直接敲入是不能用的，只會顯示一個空格，要用到 --> <!--如果想輸入一個<, 用<--> <span><年    輕></span> <!--輸入框 name就是傳遞給後端的key， value就是值，placeholder 框內的預設提示--> <input type="text" placeholder="請輸入使用者名稱" name="lily" value="happy"> <!--如果是password型別，自動變成***--> <input type="password" placeholder="請輸入密碼" name="lily" value="happy"> <!--勾選框，checked="checked" 預設勾選--> <span>請選擇：</span><input type="checkbox" name="xxx" checked="checked"> <!--單選框,預設勾選的新增checked="checked"--> <div>性別</div> <span>男</span><input type="radio" name="xxx" checked="checked"> <span>女</span><input type="radio" name="xxx"> <!--上傳檔案file--> <input type="file" name="file"> <!--一個button,顯示名字為提交--> <!--button是需要和js連用的，通過該js進行提交操作--> <input type="button" value="提交"> <!--action,點選登陸時跳轉到哪裡--> <form action="http://www.baidu.com" method="get"> <input type="text" value="admin" name="username"> <input type="reset"> <!--如果和form連用，直接提交form表單，現在很少直接用submit提交了，會用ajax繫結button操作，因為submit提交了，使用者輸入的東西會被清掉， ajax提交後臺靜態提交，頁面使用者輸入還是保留的--> <input type="submit" value="登陸"> <input type="button" value="button登陸"> </form> 使用label，配合for 和input中的id，可以擴充套件輸入框的範圍，點選“使用者名稱”，即可選中輸入框，而是用span就不會 <label for="i1">使用者名稱</label><input id="i1" type="text" value="admin"> <span>密碼</span><input type="password"> 多行文字 <textarea name="name">sssss</textarea> 選框， 通過name value傳給後臺,size為顯示幾個，multip多選,需要按住ctrl <select name="city" size="5" multiple="multiple"> <option value="1">北京</option> <option value="2" selected="selected">河北</option> <option value="3">江蘇</option> </select> <!--層級列出選項--> <select> <optgroup label="河北"> <option>保定</option> <option>石家莊</option> <option>唐山</option> </optgroup> </select> 不同標籤切換 <a href="http://baidu.com">百度一下</a> <a href="#i2">nana</a> <a href="#i1">lily</a> <div id="#i1">lily</div> <div id="#i2">nana</div> <!--點--> <ul> <li>大連</li> <li>企鵝</li> </ul> <!--數字--> <ol> <li>大連</li> <li>企鵝</li> </ol> <!--層級顯示--> <dl> <dt>黑龍江</dt> <dd>哈爾濱</dd> <dd>吉林</dd> </dl> <!--表格--> <table border="1"> <thead> <tr> <th>id</th> <th>name</th> <th>age</th> <th>sex</th> <th colspan="2">操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>lily</td> <td rowspan="3">12</td> <td>女</td> <td>確認</td> <td>取消</td> </tr> <tr> <td>2</td> <td>lily</td> <!--<td>12</td>--> <td>女</td> <td>確認</td> <td>取消</td> </tr> <tr> <td>3</td> <td>lily</td> <!--<td>12</td>--> <td>女</td> <td><a href='update.html'>確認</a></td> <td>取消</td> </tr> </tbody> </table> 顯示圖片 <img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="失敗時展示" title="滑鼠懸浮式顯示"> </body> </html>
CSS樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--方式三：通過link標籤引入css--> <!--<link rel="stylesheet" href="xx.css">--> <!--方式一：在head中新增style標籤--> <style> /*id選擇器*/ #i1{ height: 100px; width: 100px; background-color: red; } /*id層級選擇器*/ #i1 span{ background-color: yellow; } /*同時設定多個id選擇器的樣式, class和 標籤選擇器也可以這樣設定*/ #i3,#i4,#i5{ height: 100px; width: 100px; background-color: red; } /*class選擇器*/ .c1{ height: 100px; width: 100px; background-color: black; } /*class層級選擇器*/ .cl span{ background-color: green; } /*標籤選擇器*/ div { height:100px; width:100px; background-color: pink; } /*標籤層級選擇器，div中 的span標籤應用這個樣式*/ div span{ background-color: blue; } div[name='lily']{ /*下面這兩行不寫，會繼承div樣式中的 height:100px;width:100px;*/ /*height:50px;*/ /*width:50px;*/ background-color: blue; } </style> </head> <body> <!--第二種方式，在某個需要樣式的標籤中指定style--> <!--<div id="i1" style=""></div>--> <!--id選擇器，一個html頁面中，不可以存在相同的id,通過#來定位，id是不可以重複的！！--> <!--<div id="i1"></div>--> <!--class選擇器，通過.來定位，class是可以重複的！！--> <div class="c1"></div> <!--標籤選擇器，所有沒有樣式的div都會自動帶入這個樣式--> <div></div> <!--標籤層級選擇器--> <div> <span>lily</span> </div> <!--class層級選擇器--> <div class="c1"><span>haha</span></div> <!--id層級選擇器，當行內標籤沒有輸入內容時，樣式不會顯示出來--> <div id="i1"><span>id層級</span></div> <!--多個id選擇器使用相同樣式，但是可以使用相同的class，因為class是可以重複使用的--> <div id="i3"></div><br> <div id="i4"></div><br> <div id="i5"></div><br> <div class="c1"></div><br> <div class="c1"></div><br> <div class="c1"></div><br> <!--屬性選擇器，通過name等屬性來定位元素賦予樣式， 會先選擇div樣式，然後根據name定位到指定樣式覆蓋--> <div name="lily">haha</div> </body> </html>
三種配置樣式的方法的優先順序：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--當同時使用三種方式設定樣式 ，標籤內的優先顯示，然後是style，最後是 link，也就是從標籤開始從下到上依次查詢--> <link rel="stylesheet" href="s3.css"> <style> .c1{ background-color: pink; height:100px; width:100px; } </style> </head> <body> <div class="c1" style="background-color: blue;height: 100px;width: 100px;"></div> </body> </html>
CSS樣式2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*:hover 滑鼠放上去顯示*/ .c2:hover{ background-color: red; color:black; } /*background-position: 0 0 調整背景圖的上下左右的位置*/ #id{ width:1000px; height:1000px; border:1px red solid; background-image:url('http://ui.imdsx.cn/static/image/dsx.jpg'); background-repeat: repeat; background-position: 0 0; } </style> </head> <body> <!--新增紅色邊框, 1px red solid 一畫素的紅色實線邊框，font-size 字型大小，font-weight 字型加粗--> <div style="font-size: larger; border: 1px red solid; font-weight: bolder;">1</div> <!--居中.text-align:center 水平居中,line-height:100px 垂直居中，實際上是幫我們做了一個/2的操作顯示出來--> <div style="font-size: larger; border: 1px red solid; font-weight: bolder; text-align:center;line-height:100px">1</div> <!--float 調整位置--> <div style="height: 50px;width:50px;background-color: red;float: right;">1</div> <div style="height: 50px;width:50px;background-color: green;float: left;">1</div> display:inline 把塊級標籤變成行內標籤，因為行內標籤不能使用寬高邊距等，所以可以使用display:inline-block 把他變成行內塊級標籤 <div style="width: 100px;height:100px;background-color:red ;display:inline-block">1</div> 行內變行內塊級標籤 <span style="height:100px;width:100px;background-color: green;display: inline-block">1</span> <!--內邊距外邊距--> <!--外邊距 margin-top:--> <div style="width:100%;height:100px;border: 1px red solid"> <div style="width:100%;height:20px;background-color:yellow;margin-top: 10px"></div> </div> <!--內邊距padding-top: 10px,擴充自身--> <div style="width:100%;height:100px;border: 1px red solid"> <div style="width:100%;height:20px;background-color:blue;padding-top: 10px"></div> </div> <!--style="cursor:pointer 滑鼠放上去顯示小手圖示，還有很多，自己百度一下--> <input type="button" value="提交" style="cursor:pointer"> 用css樣式新增懸浮效果 <div class="c2" style="height: 100px;width:100px;border:1px red solid;color:white">a</div> </body> <!--<!–margin:0 auto 去掉邊距,不然上線會有白色的邊距–>--> <body style="margin:0 auto"> <!--不新增position: fixed" 這一行會隨著滑鼠滑動頁面而滑動，加上後固定在頂部，導航欄 都是這麼固定的--> <div style="background-color: aquamarine;position: fixed;top:0;left:0;right: 0;height:48px"></div> <!--margin-top:48px 家這一行，不然紅色邊框被遮擋--> <!--<div style="height: 10000px;width: 100%;border: 1px red solid;margin-top:48px">111</div>--> <!--一個大方塊每個角放一個小方塊, z-index 設定顯示優先順序，後面跟數字--> <!--Left 靠左距離多少--> <!--Right 靠右邊距離多少--> <!--Top 距離頂部距離多少--> <!--Bottom距離下邊距離多少--> <div style="width:200px;height:200px;border: 1px red solid;position: relative;"> <div style="width:20px;height:20px;background-color: yellow;position: absolute;left:0"></div> <div style="width:20px;height:20px;background-color: blue;position: absolute;right:0"></div> <div style="width:20px;height:20px;background-color: darkslategray;position: absolute;top:180px"></div> <div style="width:20px;height:20px;background-color: greenyellow;position: absolute;top:180px;left:180px"></div> </div> <!--overflow:auto 如果實際圖片大於指定的寬高，出現滾動條；--> <div style="width:800px;height:800px;border:1px red solid;overflow:auto"> <img src="http://ui.imdsx.cn/static/image/dsx.jpg"> </div> background-repeat: no-repeat 背景圖不重複填充， repeat-x 和橫向填充，repeat-y縱向填充，repeat橫向加縱向填充 <div style="width:1000px;height:1000px;border:1px red solid;background-image:url('http://ui.imdsx.cn/static/image/dsx.jpg');background-repeat: repeat"></div> 調整背景圖的位置 <div id="id"></div> </body> </html>