Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 成人打一炮免费视频,最近中文字幕免费mv视频动漫 ,天天干天天草天天 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          《CSS筆記》-W3C進(jìn)階樣式(三)
          
        
           
          
	
	
          
		
                        
          置表單的樣式
          屬性選擇器在為不帶有 class 或 id 的表單設(shè)置樣式時特別有用：
          input[type="text"]
          {
          width:150px;
          display:block;
          margin-bottom:10px;
          background-color:yellow;
          font-family: Verdana, Arial;
          }
          input[type="button"]
          {
          width:120px;
          margin-left:35px;
          display:block;
          font-family: Verdana, Arial;
          }
          如何插入樣式表
          當(dāng)讀到一個樣式表時，瀏覽器會根據(jù)它來格式化 HTML 文檔。插入樣式表的方法有三種：
          外部樣式表
          當(dāng)樣式需要應(yīng)用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標(biāo)簽鏈接到樣式表。<link> 標(biāo)簽在（文檔的）頭部：
          <head>
          <link rel="stylesheet" type="text/css" href="mystyle.css" />
          </head>
          瀏覽器會從文件 mystyle.css 中讀到樣式聲明，并根據(jù)它來格式文檔。
          外部樣式表可以在任何文本編輯器中進(jìn)行編輯。文件不能包含任何的 html 標(biāo)簽。樣式表應(yīng)該以 .css 擴(kuò)展名進(jìn)行保存。下面是一個樣式表文件的例子：
          hr {color: sienna;}
          p {margin-left: 20px;}
          body {background-image: url("images/back40.gif");}
          內(nèi)部樣式表
          當(dāng)單個文檔需要特殊的樣式時，就應(yīng)該使用內(nèi)部樣式表。你可以使用 <style> 標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣:
          <head><style type="text/css">
          hr {color: sienna;}
          p {margin-left: 20px;}
          body {background-image: url("images/back40.gif");}</style></head>
          多重樣式
          如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。
          例如，外部樣式表擁有針對 h3 選擇器的三個屬性：
          h3 {
          color: red;
          text-align: left;
          font-size: 8pt;
          }
          而內(nèi)部樣式表擁有針對 h3 選擇器的兩個屬性：
          h3 {
          text-align: right;
          font-size: 20pt;
          }
          假如擁有內(nèi)部樣式表的這個頁面同時與外部樣式表鏈接，那么 h3 得到的樣式是：
          color: red;
          text-align: right;
          font-size: 20pt;
          即顏色屬性將被繼承于外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內(nèi)部樣式表中的規(guī)則取代。
          背景色
          可以使用 background-color 屬性為元素設(shè)置背景色。這個屬性接受任何合法的顏色值。
          這條規(guī)則把元素的背景設(shè)置為灰色：
          p {background-color: gray;}
          如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內(nèi)邊距：
          p {background-color: gray; padding: 20px;}
          背景圖像
          要把圖像放入背景，需要使用 background-image 屬性。background-image 屬性的默認(rèn)值是 none，表示背景上沒有放置任何圖像。
          如果需要設(shè)置一個背景圖像，必須為這個屬性設(shè)置一個 URL 值：
          body {background-image: url(/i/eg_bg_04.gif);}
          背景關(guān)聯(lián)
          如果文檔比較長，那么當(dāng)文檔向下滾動時，背景圖像也會隨之滾動。當(dāng)文檔滾動到超過圖像的位置時，圖像就會消失。
          您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對于可視區(qū)是固定的（fixed），因此不會受到滾動的影響：
          body
          {
          background-image:url(/i/eg_bg_02.gif);
          background-repeat:no-repeat; background-attachment:fixed
          }
          background-attachment 屬性的默認(rèn)值是 scroll，也就是說，在默認(rèn)的情況下，背景會隨文檔滾動。
          縮進(jìn)文本
          把 Web 頁面上的段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果。
          CSS 提供了 text-indent 屬性，該屬性可以方便地實現(xiàn)文本縮進(jìn)。
          通過使用 text-indent 屬性，所有元素的第一行都可以縮進(jìn)一個給定的長度，甚至該長度可以是負(fù)值。
          這個屬性最常見的用途是將段落的首行縮進(jìn)，下面的規(guī)則會使所有段落的首行縮進(jìn) 5 em：
          p {text-indent: 5em;}
          水平對齊
          text-align 是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。它的前 3 個值相當(dāng)直接，不過第 4 個和第 5 個則略有些復(fù)雜
          text-align:center 與 <CENTER>
          您可能會認(rèn)為 text-align:center 與 <CENTER> 元素的作用一樣，但實際上二者大不相同。
          <CENTER> 不僅影響文本，還會把整個元素居中。text-align 不會控制元素的對齊，而只影響內(nèi)部內(nèi)容。元素本身不會從一段移到另一端，只是其中的文本受影響。
          字間隔
          word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。
          字符轉(zhuǎn)換
          text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：
          • none
          • uppercase
          • lowercase
          • capitalize
          默認(rèn)值 none 對文本不做任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫和全小寫字符。最后，capitalize 只對每個單詞的首字母大寫。
          作為一個屬性，text-transform 可能無關(guān)緊要，不過如果您突然決定把所有 h1 元素變?yōu)榇髮懀@個屬性就很有用。不必單獨地修改所有 h1 元素的內(nèi)容，只需使用 text-transform 為你完成這個修改：
          h1 {text-transform: uppercase}
          處理空白符
          white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。
          使用 em 來設(shè)置字體大小
          如果要避免在 Internet Explorer 中無法調(diào)整文本的問題，許多開發(fā)者使用 em 單位代替 pixels。
          W3C 推薦使用 em 尺寸單位。
          1em 等于當(dāng)前的字體尺寸。如果一個元素的 font-size 為 16 像素，那么對于該元素，1em 就等于 16 像素。在設(shè)置字體大小時，em 的值會相對于父元素的字體大小改變。
          瀏覽器中默認(rèn)的文本大小是 16 像素。因此 1em 的默認(rèn)尺寸是 16 像素。
          可以使用下面這個公式將像素轉(zhuǎn)換為 em：pixels/16=em
          （注：16 等于父元素的默認(rèn)字體大小，假設(shè)父元素的 font-size 為 20px，那么公式需改為：pixels/20=em）
          實例
          h1 {font-size:3.75em;} /* 60px/16=3.75em */h2 {font-size:2.5em;} /* 40px/16=2.5em */p {font-size:0.875em;} /* 14px/16=0.875em */
          設(shè)置鏈接的樣式
          能夠設(shè)置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。
          鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來設(shè)置它們的樣式。
          鏈接的四種狀態(tài)：
          • a:link - 普通的、未被訪問的鏈接
          • a:visited - 用戶已訪問的鏈接
          • a:hover - 鼠標(biāo)指針位于鏈接的上方
          • a:active - 鏈接被點擊的時刻
          實例
          a:link {color:#FF0000;}/* 未被訪問的鏈接 */a:visited {color:#00FF00;}/* 已被訪問的鏈接 */a:hover {color:#FF00FF;}/* 鼠標(biāo)指針移動到鏈接上 */a:active {color:#0000FF;}/* 正在被點擊的鏈接 */
          當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時，請按照以下次序規(guī)則：
          • a:hover 必須位于 a:link 和 a:visited 之后
          • a:active 必須位于 a:hover 之后
          文本修飾
          text-decoration 屬性大多用于去掉鏈接中的下劃線：
          實例
          a:link {text-decoration:none;}
          a:visited {text-decoration:none;}
          a:hover {text-decoration:underline;}
          a:active {text-decoration:underline;}
          CSS 列表屬性允許你放置、改變列表項標(biāo)志，或者將圖像作為列表項標(biāo)志。
          要修改用于列表項的標(biāo)志類型，可以使用屬性 list-style-type：
          ul {list-style-type : square}
          上面的聲明把無序列表中的列表項標(biāo)志設(shè)置為方塊。
          列表項圖像
          有時，常規(guī)的標(biāo)志是不夠的。你可能想對各標(biāo)志使用一個圖像，這可以利用 list-style-image 屬性做到：
          ul li {list-style-image : url(xxx.gif)}
          只需要簡單地使用一個 url() 值，就可以使用圖像作為標(biāo)志。
          列表標(biāo)志位置
          CSS2.1 可以確定標(biāo)志出現(xiàn)在列表項內(nèi)容之外還是內(nèi)容內(nèi)部。這是利用 list-style-position 完成的。
          簡寫列表樣式
          為簡單起見，可以將以上 3 個列表樣式屬性合并為一個方便的屬性：list-style，就像這樣：
          li {list-style : url(example.gif) square inside}
          list-style 的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其它的就會填入其默認(rèn)值。
          CSS 表格屬性可以幫助您極大地改善表格的外觀
          表格邊框
          如需在 CSS 中設(shè)置表格邊框，請使用 border 屬性。
          下面的例子為 table、th 以及 td 設(shè)置了藍(lán)色邊框：
          table, th, td
          {
          border: 1px solid blue;
          }
          表格寬度和高度
          通過 width 和 height 屬性定義表格的寬度和高度。
          表格文本對齊
          text-align 和 vertical-align 屬性設(shè)置表格中文本的對齊方式。
          vertical-align 屬性設(shè)置垂直對齊方式，比如頂部對齊、底部對齊或居中對齊：
          表格內(nèi)邊距
          如需控制表格中內(nèi)容與邊框的距離，請為 td 和 th 元素設(shè)置 padding 屬性：
          td
          {
          padding:15px;
          }
          CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式。
          CSS 框模型概述
          元素框的最內(nèi)部分是實際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會遮擋其后的任何元素。
          提示：背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域。
          在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的總尺寸。
          假設(shè)框的每個邊上有 10 個像素的外邊距和 5 個像素的內(nèi)邊距。如果希望這個元素框達(dá)到 100 個像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素，請看下圖：
          #box {
          width: 70px;
          margin: 10px;
          padding: 5px;
          }
          術(shù)語翻譯
          • element : 元素。
          • padding : 內(nèi)邊距，也有資料將其翻譯為填充。
          • border : 邊框。
          • margin : 外邊距，也有資料將其翻譯為空白或空白邊。
          CSS padding 屬性
          CSS padding 屬性定義元素的內(nèi)邊距。padding 屬性接受長度值或百分比值，但不允許使用負(fù)值。
          單邊內(nèi)邊距屬性
          也通過使用下面四個單獨的屬性，分別設(shè)置上、右、下、左內(nèi)邊距：
          • padding-top
          • padding-right
          • padding-bottom
          • padding-left
          定義單邊樣式
          如果您希望為元素框的某一個邊設(shè)置邊框樣式，而不是設(shè)置所有 4 個邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：
          • border-top-style
          • border-right-style
          • border-bottom-style
          • border-left-style
          因此這兩種方法是等價的：
          p {border-style: solid solid solid none;}
          p {border-style: solid; border-left-style: none;}
          CSS margin 屬性
          設(shè)置外邊距的最簡單的方法就是使用 margin 屬性。
          一切皆為框
          div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內(nèi)容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內(nèi)元素”，這是因為它們的內(nèi)容顯示在行中，即“行內(nèi)框”。
          CSS 定位機(jī)制
          CSS 有三種基本的定位機(jī)制：普通流、浮動和絕對定位。
          CSS position 屬性
          通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。
          position 屬性值的含義：
          • static
          • 元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。
          • relative
          • 元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
          • absolute
          • 元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
          • fixed
          • 元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身
          歡迎關(guān)注公眾號（hongji8410）和加入QQ群一起交流（522342554）
          CSS3，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計程序，如Photoshop。
          在這里邊您將了解以下的邊框?qū)傩裕?/p>
          • border-radius
          • box-shadow
          • border-image
          CSS3 圓角
          在CSS2中添加圓角棘手。我們不得不在每個角落使用不同的圖像。
          在CSS3中，很容易創(chuàng)建圓角。
          在CSS3中border-radius屬性被用于創(chuàng)建圓角：
          這是圓角邊框！
          實例
          在div中添加圓角元素：
          div
          {
          border:2px solid;
          border-radius:25px;
          }
          CSS3盒陰影
          CSS3中的box-shadow屬性被用來添加陰影:
          實例
          在div中添加box-shadow屬性
          div
          {
          box-shadow: 10px 10px 5px #888888;
          }
          CSS3邊界圖片
          有了CSS3的border-image屬性，你可以使用圖像創(chuàng)建一個邊框：
          border-image屬性允許你指定一個圖片作為邊框！ 用于創(chuàng)建上文邊框的原始圖像：
          在div中使用圖片創(chuàng)建邊框:
          實例
          在div中使用圖片創(chuàng)建邊框
          div
          {
          border-image:url(border.png) 30 30 round;
          -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
          -o-border-image:url(border.png) 30 30 round; /* Opera */
          }
          新邊框?qū)傩?/p>
          屬性說明CSS
          border-image設(shè)置所有邊框圖像的速記屬性。3
          border-radius一個用于設(shè)置所有四個邊框- *-半徑屬性的速記屬性3
          box-shadow附加一個或多個下拉框的陰影3
          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

          個網(wǎng)頁前端是由HTML DOM與嵌套組合形成視圖結(jié)加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請求，以事件機(jī)制來響應(yīng)用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分，它負(fù)責(zé)控制DOM元素的頁面布局和顏色、大小的屬性。
          在CSS中有一著名的盒子模型理論，可以用它來控制DOM的位置。基于div+css技術(shù)的“盒子模型”的出現(xiàn)大大代替了傳統(tǒng)的table表格嵌套。
          雖然其十分好用，但是對于很多新手來說，卻很難搞清楚它幾個屬性和內(nèi)容之間的聯(lián)系個區(qū)別。
          盒子模型概念
          所有頁面的元素都可以看做一個盒子，占據(jù)著一定的頁面空間。一般來說這些被占據(jù)的空間往往會比單純的內(nèi)容要大。因此，可以通過盒子的邊框和距離等參數(shù)來控制內(nèi)容的位置。
          Div+CSS 盒子模型
          說明：
          1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區(qū)域，外邊距是透明的。
          2、Border：中文叫邊框，是圍繞在內(nèi)邊距（Padding）和內(nèi)容外的邊框。注意，它不是透明的。
          3、Padding：中文叫內(nèi)邊距，控制內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
          4、Content：內(nèi)容，盒子的內(nèi)容，顯示文本和圖像。
          5、在Css文件中設(shè)置的Div的Css.width和Css. height就是內(nèi)容的寬和高。
          6、盒子實際尺寸有可能大于內(nèi)容尺寸：
          盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;
          盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;
          實例演示--原始樣式
          接下來通過實例演示的方式來一一講解Margin、Border、Padding的作用和區(qū)別。
          頁面如圖所示：

          原始樣式
          代碼：
          HTML:
<body>
    <div class="TsetUpper"></div>
    <div class="TsetMiddle"></div>
    <div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}
.TsetMiddle{
	width: 600px;
	height: 200px;
	background-color: red;
	position: relative;
	margin: auto;
}
.TsetDown{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}
          Border
          元素邊框：我們可以在CSS邊框?qū)傩灾性O(shè)置元素邊框的樣式和顏色。
          按如下代碼設(shè)置Div(TsetMiddle)的Border（邊框）：
          border-style:solid;
border-width: 10px;
border-color: aqua;
          刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經(jīng)變成200+30+30了，而且可以設(shè)置其底色和線條樣式。
          Border
          Margin
          margin 控制周圍的元素區(qū)域。margin 沒有背景顏色，是完全透明的。通過margin可以控制元素與四周元素的空隙距離；
          按如下代碼設(shè)置Div(TsetMiddle)的margin（外邊距）：
          margin: 30px auto;
          刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經(jīng)變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。
          Margin
          Padding
          Padding：當(dāng)元素的 padding（填充）內(nèi)邊距被清除時，所釋放的區(qū)域?qū)艿皆乇尘邦伾奶畛洹?/p>
          按如下代碼設(shè)置Div(TsetMiddle)的margin（外邊距）：
          padding: 30px;
          刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經(jīng)變成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。
          Padding
          總結(jié)
          1、各屬性的值可以用px為單位，也可以用em，百分比等。
          2、可以利用盒子的各種屬性，調(diào)整其內(nèi)容在父容器中的位置。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲av综合av一区二区三区|
在线观看亚洲一区二区|
激情一区二区三区|
国产乱码精品一区二区三区香蕉|
国产一区二区三区在线视頻
|
一本大道东京热无码一区
|
韩国福利一区二区三区高清视频|
日本v片免费一区二区三区
|
成人无码精品一区二区三区|
韩国一区二区三区|
国产精品一区二区三区免费|
黑人大战亚洲人精品一区|
高清一区二区三区免费视频|
精品一区狼人国产在线|
无码人妻AⅤ一区二区三区水密桃
无码欧精品亚洲日韩一区夜夜嗨
无码毛片一区二区三区中文字幕
无码毛片一区二区三区视频免费播放
|
日本一区二区三区在线观看视频
|
日韩精品免费一区二区三区
|
久久久久人妻精品一区三寸|
天码av无码一区二区三区四区
|
国产精品一区12p|
日韩人妻一区二区三区蜜桃视频|
精品人妻一区二区三区四区在线|
一级特黄性色生活片一区二区|
免费av一区二区三区|
国产一区二区三区亚洲综合|
亚洲国产日韩在线一区|
国产综合无码一区二区三区|
免费观看日本污污ww网站一区|
亚洲一区二区三区夜色|
久久精品一区二区三区四区|
黄桃AV无码免费一区二区三区
|
免费一区二区三区|
亚洲色精品vr一区二区三区|
人妻无码一区二区三区|
无码人妻精品一区二|
亚洲毛片不卡av在线播放一区|
无码视频免费一区二三区|
中文字幕无线码一区2020青青|
日韩人妻一区二区三区免费|
中文字幕一区二区三区在线观看|
一区二区三区在线观看免费|