23-Web-表单和CSS基础
生活随笔
收集整理的這篇文章主要介紹了
23-Web-表单和CSS基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.表單標簽
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 1.表單標簽：formform--><form action="" method=""> </form></body> </html>2.input標簽
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- input標簽會因為type屬性值不同功能完全不一樣 --><!-- 1.文本輸入框: textname屬性：對輸入框輸入的數據進行說明和區分的(類似字典的key)value屬性：就是輸入框中輸入和顯示的內容(和輸入框中的內容是雙向綁定)placeholder屬性：輸入框中的提示信息maxlength屬性：最大輸入的文字的個數--><label for="tel">手機號:</label><input id="tel" type="text" name="tel" value="15300022703" placeholder="請輸入手機號碼" maxlength="11"/><br><br><label for="uname">用戶名:</label><input id="uname" type="text" name="username" value="" placeholder="請輸入用戶名"/><br><br><!-- 2.密碼輸入框：password name屬性：對輸入框輸入的數據進行說明和區分的(類似字典的key)value屬性：就是輸入框中輸入和顯示的內容(和輸入框中的內容是雙向綁定)placeholder屬性：輸入框中的提示信息maxlength屬性：最大輸入的文字的個數--><label for="pw">密碼:</label><input id="pw" type="password" name="pw" value="123456" placeholder="請輸入密碼"/><br><br><!-- 3.單選按鈕: radioname屬性：同一組選項的name屬性必須相同，才能做到單選的效果value屬性：指定按鈕選中的時候對應的值checked屬性：設置默認選中--><font>性別：</font><input checked="checked" type="radio" name="sex" value="男" id="boy"/><label for="boy">男</label><input type="radio" name="sex" value="女" id="girl"/><label for="girl">女</label><br><br><!-- 4.復選按鈕: checkboxname屬性：同一組選項的name屬性必須相同value屬性：指定按鈕選中的時候對應的值checked屬性：設置默認選中--><font size="" color="">愛好：</font><input type="checkbox" name="hobby" id="b" value="籃球" /><label for="b">籃球</label><input checked="checked" type="checkbox" name="hobby" id="p" value="乒乓球" /><label for="p">乒乓球</label><input type="checkbox" name="hobby" id="y" value="羽毛球" /><label for="y">羽毛球</label><input type="checkbox" name="hobby" id="w" value="網球" /><label for="w">網球</label><br><br><!-- 5.按鈕：button --><input type="button" name="" id="" value="確定" /><input type="button" name="" id="" value="取消" /><br><br><!-- button標簽 --><button type="button">確定</button><button type="button"><img src="./img/baidu.ico" ><br>百度</button><br><br><!-- 6.重置按鈕 和 提交按鈕重置：重置當前form標簽中所有的相關標簽的狀態提交：將<strong>當前form標簽</strong>中所有設置了name屬性的相關標簽以: name=value 形式對應數據進行提交--><input type="reset" name="" id="" value="重置1" /><br><br><br><form action="" method="get"><input type="text" name="username" placeholder="用戶名"/><br><br><input type="password" name="password" id="" value="123" placeholder="密碼"/><br><br><input type="reset" value="重置2"/><input type="submit" name="" id="" value="提交" /></form></body> </html>3.select和textarea標簽
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 1.select標簽 select - 整個下拉列表option - 下拉列表中的選項注意：name和value屬性都需要賦值--><form action="" method="get"><!-- 基本的下拉列表 --><select name="province"><option value ="四川">四川省</option><option value ="遼寧">遼寧省</option><option value ="吉林">吉林省</option><option value ="山東">山東省</option></select><select name="city"><option value="成都">成都市</option><option value="綿陽">綿陽市</option></select><br><br><!-- 內容進行分類 --><select name="city"><!-- optgroup添加分組 --><optgroup label="四川省"></optgroup><option value="成都">成都市</option><option value="綿陽">綿陽市</option><option value="德陽">德陽市</option><optgroup label="遼寧省"></optgroup><option value="大連">大連市</option><option value="沈陽">沈陽市</option><option value="鐵嶺">鐵嶺市</option></select><input type="submit" value="提交"/></form><br><br><!-- 2.textarea標簽 rows屬性：最能顯示的行數（控制高度）cols屬性：列數（控制寬度）name屬性：區分和提交數據的時候用placeholder屬性：maxlength屬性注意：textarea不需要value屬性,標簽內容就相當于value--><textarea rows="4" cols="40" name="comment" placeholder="請輸入你的建議" maxlength="200">沒有意見！</textarea><!-- div標簽無語義標簽， 一般用來對標簽進行分組和分塊而存在span標簽也是無語義的標簽--><div id=""></div></body> </html>4.CSS基礎語法
<!--1. 什么是CSSCSS又叫層疊樣式表是web標志中的表現標準,負責標簽(內容)樣式和布局2.CSS代碼寫在哪兒內聯樣式表 - 將css代碼寫在標簽的style屬性中（樣式只針對一個標簽有效）內部樣式表 - 將css代碼寫style標簽中（樣式可以針對整個html中所有的標簽）外部樣式表 - 將css代碼寫在css文件中，然后在html中用link標簽去導入（樣式可以針對所有的html中所有的標簽有效）內聯樣式表的優先級最高, 內部樣式表和外部樣式表誰后出現誰的優先級高3.CSS代碼怎么寫語法：選擇器{屬性名1:屬性值1;屬性名2:屬性值2;...}說明:選擇器 - 選中當前需要添加樣式的標簽{} - 固定寫法(注意:內聯樣式表中 選擇器{} 需要省略)屬性 - 以 屬性名:值 的形式存在，一個屬性結束后要分號；CSS中有哪些屬性，每個屬性干嘛的都是固定(CSS3中有200多個屬性)常用屬性：color(文字顏色)、background-color(背景顏色)、font-size(字體大小)、width(寬度)、height(高度)、屬性值：a.數字大小需要添加單位(px)b.顏色值有三種方法：顏色的英文單詞(red)、#6位的十六進制數(#ff0000)、rgb或者rgba值(rgb(255,0,0))rgba(255,0,0,1) -最后一個參數是透明度，取值范圍是0~1--> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><!-- 外部樣式表 --><link rel="stylesheet" type="text/css" href="css/css1.css"/><!-- 內部樣式表 --><style type="text/css">#b1{color: blue;background-color: rgba(255,0,0,0.5);}#b2{background-color: gold;width: 200px;}#p1{color: green;background-color: greenyellow;}</style></head><body><!-- 內聯樣式表 --><p id="p1" style="color: red; font-size: 20px;">我是段落1</p><h1 id="b1">我是標題1</h1><h1 id="b2">我是標題2</h1><div id="div1"></div><div id="div2"></div></body> </html>5.選擇器
<!-- 1. 常用選擇器 1)標簽選擇器(元素選擇器) - 直接將標簽名作為選擇器，選中當前頁面中所有指定的標簽 p{} - 選中當前頁面中所有的p標簽 a{} - 選中所有的a標簽2)id選擇器 - 在id屬性值前加#作為一個選擇器，選中當前頁面中id值是指定值的標簽(id一般是唯一的) #p1{} - 選中id屬性值為p1的標簽3)類選擇器(class選擇器) - 在class屬性之前加.作為一個選擇器，選中當前頁面中所有class值是指定值的標簽 .p1 - 選中class屬性值為p1的標簽 注意：不同的標簽的class值可以相同，同一個標簽可以同時擁有多個不同的class值(多個之間用空格隔開)4）后代選擇器 - 將多個獨立的選擇器用空格隔開作為一個選擇器 div #p1{} - 選中div標簽中id是p1的標簽(最終選中的是id是p1的標簽，但是這個標簽必須是div的后代)5）父子選擇器 - 將多個獨立的選擇器用>隔開作為一個選擇器 div>.c1{} - 選中div中class值是c1的子標簽6) 群組選擇器 - 將多個獨立的選擇器用逗號隔開作為一個選擇器，同時選中每個選擇器選中的標簽 p,a{} - 選中所有的p標簽和所有的a標簽 #p1,.c1,a{} - 選中id是p1的標簽和class是c1的標簽以及所有的a標簽7）通配符 - 將*作為選擇器，選中當前頁面中所有的標簽 *{}--> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">/* 1.標簽選擇器 *//* p{color: red;} *//* 2.id選擇器 *//* #p1{color: #0000FF;} *//* 3.類選擇器 *//* .p1{color: #008000;}.c1{background-color: #FFD700;} *//* 4.后代選擇器 *//* div #p1{background-color: #ADFF2F;} *//* div>.c1{background-color: #ADFF2F;color: red;} */*{color: red;}</style></head><body><!-- 1.標簽選擇器示例 --><!-- <h1>我是標題1</h1> --><!-- <p>我是段落1</p><a href="https://www.baidu.com">我是超鏈接1</a><p>我是段落2</p><div id=""><h2>我是標題2</h2><p>我是段落3</p></div> --><!-- 2.id選擇器 --><!-- <p>我是段落1</p><a href="https://www.baidu.com">我是超鏈接1</a><p id="p1">我是段落2</p><div id=""><h2>我是標題2</h2><p>我是段落3</p></div> --><!-- 3.class選擇器 --><!-- <p class="p1">我是段落1</p><a class="c1" href="https://www.baidu.com">我是超鏈接1</a><p class="c1">我是段落2</p><div id=""><h2 class="p1">我是標題2</h2><p class="c1 p1">我是段落3</p></div> --><!-- 4.后代選擇器 --><!-- <p id="p1">我是段落1</p> --><!-- <div id=""><p id="p1">我是段落1</p></div> --><!-- <div id=""><p>我是段落1<p id="p1">我是段落2</p></p></div> --><!-- 5.父子選擇器 --><h1 class="c1">我是標題1</h1><div id=""><p>我是段落1</p><p class="c1">我是段落2</p><p><font class="c1">我是文字1</font></p><div id=""><a href="" class="c1">我是超鏈接</a></div></div></body> </html>6.選擇器的優先級
<!--選擇器的優先級：選擇器的優先級看選擇器的權重值，誰的權重值大誰的優先級就高，如果權重值相同誰后執行誰的優先級就高，內聯樣式表的優先級最高。標簽選擇器：1class選擇器：2id選擇器：4可以在某個屬性后加 !important 讓當前屬性的優先級最高(內聯也比不上)--> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">.c2{color: green;}#p1{color: red;}p{color: blue;}#div2 p{background-color: #ADFF2F;}.c2 .c3 .c4 p{background-color: yellow !important;}</style></head><body><div id="div1" class="c1"><p class="c2" id="p1">我是段落1</p></div><div id="div2" class="c2"><div class="c3"><div class="c4"><p style="background-color: #FFA500;">我是段落3</p></div></div></div></body> </html>7.偽類選擇器
<!--1.什么是偽類選擇器偽類選擇器選中的是標簽的狀態，可以讓同一個標簽在不同的狀態下有不同的樣式普通選擇器:偽類選擇器2.常見的偽類選擇器link - 鏈接沒有成功訪問過對應的狀態;（只針對超鏈接有效）visited - 鏈接已經訪問過的對應的狀態；（只針對超鏈接有效）hover - 鼠標懸停在標簽上對應的狀態；（針對所有可見標簽有效）active - 鼠標按下沒有彈起來的時候對應的狀態;（針對所有可見標簽有效）focus - 成為焦點對應的狀態(正在操作某一個標簽對應的狀態)；（一般用于表單相關標簽）--> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">a{text-decoration: none;}a:link{color: #008000;}a:visited{color: darkgray;}a:hover{color: red;}a:active{color: yellow;}#div1{width: 100px;height: 100px;background-color: yellowgreen;}#div1:hover{width: 60px;height: 60px;}img:active{border: solid red 1px;}input{border: none;border-bottom: solid gray 1px;}input:focus{outline: none;border-bottom: solid blueviolet 2px;}</style></head><body><a id="a1" href="https://www.baidu.com">我是超鏈接</a><div id="div1"></div><img src="img/luffy.jpg" ><input type="password" name="" /></body> </html>8.CSS核心屬性
<!doctype html> <html> <head> <meta charset="utf-8"> <title>DAY4：CSS核心屬性</title> <style> *{ margin:0; padding:0;} body{ padding: 30px; padding-top:10px; line-height: 35px; font-family: "微軟雅黑";} h1,h2{padding: 20px 0;} h3{ background: #00AA88;color: #FFFCF4;font-size: 20px;font-weight: 700;margin: 10px 0;border-radius: 4px;padding: 5px 0px 5px 15px;} p{ line-height: 40px;} ul li{ list-style: none;line-height: 40px;} span{ color: #199475; font-weight: 700; font-size:18px; display: block; border-radius: 4px; padding: 10px; font-size: 18px; padding-left: 0px;} em{ font-style: normal; color:red;} .other{ color:#044D22;} .oo{ color:red; display:inline; font-size:18px; font-weight:normal;} .marleft{ margin-left:30px;} .marbtom{ margin:15px 0; font-weight:600;} .borderbtm{ border-bottom: solid 1px #eee;padding-bottom: 15px;margin-bottom: 15px;} .textcon{margin: 10px 0;border: solid 1px #ddd;border-left-width: 6px;padding: 10px;border-radius: 4px;border-color: #f60;} .oos{ color:#000; font-weight:800;} </style> </head><body> <div class="boxs"><h1>DAY4：CSS核心屬性</h1><h2 class="borderbtm">學習目標</h2><ul ><li>1、css浮動屬性詳解</li><li>2、css文本屬性</li><li>3、css列表屬性</li><li>4、css背景屬性</li><li>5、css邊框屬性</li></ul><h3>一、css浮動屬性詳解</h3><div class="marleft"></p><blockquote class="textcon"><strong class="oo"></strong><br>無論多么復雜的布局，<strong class="oo">其基本出發點均是：“如何在一行顯示多個div元素”。</strong><br>顯然標準流已經無法滿足需求，這就要用到浮動。<br>浮動可以理解為讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。<br></p><p>1.什么是浮動元素的脫離文檔流?</p><p>首先要知道，div是塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的標準流（網頁的正常排版順序）。</p><p>脫離文檔流: 就是脫離正常的網頁排版順序。成為浮動流（浮動后的元素就是浮動流）。</p><p>簡單來說當某一個元素浮動之后, 那么這個元素看上去就像被從標準流中刪除了一樣, 這個就是脫離文檔流。</p></blockquote><blockquote class="textcon"><p><strong class="oo">浮動規律：</strong>假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。<br>div的順序是HTML代碼中div的順序決定的。<br>靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是后。<br></p></blockquote><!-- <img src="images/pic5.png"/>--></p><p>2.浮動元素脫離文檔流之后會有什么影響？</p><p>如果前面一個元素浮動了, 而后面一個元素沒有浮動 , 那么這個時候前面一個元就會蓋住后面一個元素。元素浮動之前，也就是在標準流中，是豎向排列的，而浮動之后可以理解為橫向排列。</p><p><br>3.清除浮動是為了解決高度塌陷問題和元素重疊問題。<br></p><p>4.清除浮動的方法：</p><p>（1）添加空盒子，較流行。缺點是為清除浮動，頁面添加的空盒子較多，會造成冗余代碼，新手容易暈菜。 定義：在被浮動的元素（同級元素）后面添加一個空的div，并且定義一個類名，賦給空div。語法：.clear{clear:both;}</p><p>（2）overflow:hidden、較簡單，兼容市面上大部分瀏覽器。缺點：做開發時，有些公司會嚴格要求開發技術點，不建議使用。 定義：先定義一個類名，然后把定義好的類名賦給浮動元素的父級元素。 語法：.clear{overflow:hidden;}</p><p>（3）最流行、最常用、可兼容所有瀏覽器。稱為萬能清除法。非要說缺點就是代碼量大。開發推薦使用。 定義：定義一個類名，使用偽元素：after，并把類名賦給被浮動元素的父級元素。語法：clear：after{display:block;clear:both;content:".";visibility:hidden;height:0;} clear{zoom:1;}</p><blockquote class="textcon"> <p><strong class="oo">對于CSS的清除浮動(clear)，一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。</strong></p></blockquote></div><h3>二、css文本屬性</h3><div class="marleft"><p class="oo oos">1）文本大小：{font-size:value;}</p><blockquote class="textcon"><p>說明：<br>A） 屬性值為數值型時，必須給屬性值加單位，屬性值為0時除外。<br>B）單位還可以是pt，9pt=12px;<br>C）為了減小系統間的字體顯示差異，IE Netscape(網景通信公司) Mozilla的瀏覽器制作商于1999年召開會議，共同確定16px/ppi為標準字體大小默認值,即1em.默認情況下，1em=16px,0.75em=12px; </p><!--<p>D)使用絕對大小關鍵字<br>xx-small <br>x-small <br>small <br>medium <br>large <br>x-large<br>xx-large <br></p>--></blockquote><strong class="oo oos">2）文本顏色：{color:顏色值;}</strong><br><blockquote class="textcon">說明：<br>用十六進制(是計算機中數據的一種表示方法)表示顏色值：<br>0 1 2 3 4 5 6 7 8 9<br>0 1 2 3 4 5 6 7 8 9 A B C D E F<br>顏色模式：光色模式<br> R G B<br> FF 00 00<br> 顏色值的縮寫：<br> 當表示三原色的三組數字同時相同時，可以縮寫為三位;<br> 當用十六進制表示顏色值時，需要在顏色值前加“#”<br> # fa 00 00<br> </blockquote> <strong class="oo oos">3)文本字體：{font-family:字體1，字體2，字體3；}</strong><br> <blockquote class="textcon"> 說明：瀏覽器首先會尋找字體1、如存在就使用改字體來顯示內容，如在字體1不存在的情況下，則會尋找字體2，如字體2也不存在，按字體3顯示內容，如果字體3 也不存在；則按系統默認字體顯示； <br> 當字體是中文字體時，需加雙引號；<br> 當英文字體中有空格時，需加雙引號如（“Times New Roman”）<br> 當英文字體只有一個單詞組成是不加雙引號；如：（Arial）；<br> Windows中文版本操作系統下，中文默認字體為宋體或者新宋體，英文字體默認為Arial.<br> </blockquote> <strong class="oo oos">4)文字加粗</strong><br> <blockquote class="textcon"> font-weight:bolder(更粗的)/bold（加粗）/normal（常規）/100—900;<br> 說明：在css規范中，把字體的粗細分為9個等級，分別為100——900，其中100對應最輕的字體變形，而900對應最重的字體變形，<br> 100-400 一般<br> 500常規字體<br> 600-900加粗字體 <br> </blockquote> <strong class="oo oos">5)文字傾斜</strong><br> <blockquote class="textcon"> font-style：italic/oblique/normal（取消傾斜，常規顯示）;<br> 說明：<br> italic和oblique都是向右傾斜的文字, 但區別在于Italic是指斜體字，而Oblique是傾斜的文字，對于沒有斜體的字體應該使用Oblique屬性值來實現傾斜的文字效果.<br> </blockquote> <strong class="oo oos">6)水平對齊方式</strong><br> <blockquote class="textcon"> {text-align:left/right/center<br> </blockquote> <strong class="oo oos">7)文字行高 {line-height:normal/value;}</strong></p> <blockquote class="textcon"><p>說明：<br>A）當單行文本的行高等于容器高時，可實現單行文本在容器中垂直方向居中對齊；<br>B) 當單行文本的行高小于容器高時，可實現單行文本在容器中垂直中齊以上任意位置的定位；</p><p></p><p>C) 當單行文本的行高大于容器高時，可實現單行文本在容器中垂直中齊以下任意位置的定位。（IE6及以下版本存在瀏覽器兼容問題）</p></blockquote><blockquote class="textcon"><p><strong class="oo">*文字屬性簡寫：font:12px/24px "宋體";</strong><br>font屬性的簡寫：字號，行高，字體<br>font-size:12px; line-height:24px; font-family:”宋體”；<br>font屬性的簡寫：<br>說明:font的屬性值應按以下次序書寫(各個屬性之間用空格隔開)<br>順序: font-style font-weight font-size / line-height font-family<br>(1)簡寫時 , font-size和line-height只能通過斜杠/組成一個值，不能分開寫。<br>(2) 順序不能改變 ,這種簡寫法只有在同時指定font-size和font-family屬性時才起作用,而且,你沒有設定font-weight , font-style , 他們會使用缺省值（默認值）。<br></p></blockquote><p class="oo oos">8)文本修飾</p><blockquote class="textcon"><p>text-decoration:none/underline/overline/line-through<br>說明：<br>none:沒有修飾<br>underline:添加下劃線<br>overline:添加上劃線<br>line-through:添加刪除線</p></blockquote><p class="oo oos">9)首行縮進：{text-indent:value;}</p><blockquote class="textcon"><p>說明：首行縮進2個字 text-indent:2em;<br>A）text-indent可以取負值；<br>B）text-indent屬性只對第一行起作用。<br></p></blockquote><p class="oo oos">10)字間距{letter-spacing:value;}</p><blockquote class="textcon"><p>控制英文字母或漢字的字距。（英文字母和字母）<br></p></blockquote></div><h3>三、css列表屬性</h3><div class="marleft"><p class="oo oos">1)定義列表符號樣式</p><blockquote class="textcon"><p>list-style-type：disc(實心圓)/circle(空心圓)/square(實心方塊)/none(去掉列表符號)；list-style-type:none===list-style:none;</p></blockquote><p><strong class="oo oos">2)使用圖片作為列表符號</strong><br><blockquote class="textcon">list-style-image：url(所使用圖片的路徑及全稱)；<br></blockquote><strong class="oo oos">3)定義列表符號的位置</strong><br><blockquote class="textcon">list-style-position:outside(外邊)/inside(里邊)；</p><p>list-style:none;去掉列表符號 <br></p></blockquote></div><h3>四、css背景屬性</h3><div class="marleft"><strong class="oo oos">1)背景顏色</strong><br><blockquote class="textcon">語法：選擇符{background-color:顏色值;}<br></blockquote><strong class="oo oos"> 2)背景圖片的設置</strong><br><blockquote class="textcon"><p>語法：background-image：url(背景圖片的路徑及全稱)；</p><p>說明：<br><strong class="oo oos">網頁上有兩種圖片形式：插入圖片、背景圖；</strong><br>插入圖片：屬于網頁內容，也就是結構。<br>背景圖：屬于網頁的表現，背景圖上可以顯示文字、插入圖片、表格等。</p><p class="oo">背景圖片的顯示原則:</p><p>A）容器尺寸等于圖片尺寸，背景圖片正好顯示在容器中<br> B）容器尺寸大于圖片尺寸，背景圖片將默認平鋪，直至鋪滿元素；<br> C）容器尺寸小于圖片尺寸，只顯示元素范圍以內的背景圖。</p></blockquote><p><strong class="oo oos">3)背景圖片平鋪屬性</strong><br><blockquote class="textcon">語法：選擇符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }<br>no-repeat:不平鋪<br>repeat：平鋪<br>repeat-x：橫向平鋪<br>repeat-y ：縱向平鋪<br></blockquote><strong class="oo oos"> 4)背景圖的固定</strong><br><blockquote class="textcon">語法：<br>選擇符{background-attachment:scroll(滾動)/fixed(固定);}</p><p>說明：<br>fixed 固定，不隨內容一塊滾動；<br>scroll:隨內容一塊滾動。<br></p></blockquote><p> <strong class="oo oos"> 5)背景圖片的位置</strong><br><blockquote class="textcon">語法：選擇符<br>{background-position:left/center/right/數值 top/center/bottom/數值;}</p><p> 水平方向上的對齊方式（left/center/right）或值 <br>垂直方向上的對齊方式(top/center/bottom)或值</p><p>background-position:值1 值2;<br>兩個值 ：第一個值表示水平位置的值，第二個值：表示垂直的位置。<br>當兩個值都是center的時候寫一個值就可以代表的是水平位置和垂直位置<br>說明：向左方向，向上方向是負值<br></p></blockquote><blockquote class="textcon">背景屬性的縮寫語法：<br>background:屬性值1 屬性值2 屬性值3；<br>背景縮寫：background:url（背景圖片的路徑及全稱） no-repeat center top #f00；<br></blockquote><strong class="oo"> 網頁上常用的圖片格式（壓縮圖片）</strong><br><blockquote class="textcon">1)jpg :有損壓縮格式，靠損失圖片本身的質量來減小圖片的體積，適用于顏色豐富的圖像;(像素點組成的，像素點越多會越清晰 )。<br>2）gif：有損壓縮格式，靠損失圖片的色彩數量來減小圖片的體積，支持透明，支持動畫，適用于顏色數量較少的圖像;<br>3)png:有損壓縮格式，損失圖片的色彩數量來減小圖片的體積，支持透明，不支持動畫，是fireworks的 源文件格式，適用于顏色數量較少的圖像;<br></p></blockquote></div><h3>五、css邊框屬性</h3><div class="marleft"><p>border:邊框寬度 邊框風格 邊框顏色;<br>例如：border:5px solid #ff0000<br>邊框：border,網頁中很多修飾性線條都是由邊框來實現的。<br>邊框寬度：border-width:<br>邊框顏色：border-color:<br><strong class="oo"> 邊框樣式：border-style:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線)可單獨設置一方向邊框，</strong></p><p>border-bottom:邊框寬度 邊框風格 邊框顏色;底邊框<br>border-left:邊框寬度 邊框風格 邊框顏色;左邊框<br>border-right:邊框寬度 邊框風格 邊框顏色;右邊框<br>border-top:邊框寬度 邊框風格 邊框顏色;上邊框<br></p><p></p><p></p></div> </div><div style=" width: 130px; height: 45px; line-height: 44px; text-align: center; color: #f00; background: #000; border-radius: 4px; position: fixed; bottom: 50px; cursor:pointer; right: 10px; "><a href="#" style="color:#f00; text-decoration:none;">返回頂部</a></div> </body> </html>總結
以上是生活随笔為你收集整理的23-Web-表单和CSS基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bzoj1682
- 下一篇： 障碍物参考线交通规则融合器：Frame类