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 欧美激情一区免费视频,欧美成成人免费视频,x8国产精品视频 

      

        

          



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

          


          
	

          

 

          
  
          
    
          
      
          
        
          HTML DOM Style 對象
          
        
           
          
	
	
          
		
                        
           Style 對象
          Style 對象表示一個個別的樣式聲明。
            訪問 Style 對象
          Style 對象可以從文檔的頭部區(qū)域訪問，或者從指定的 HTML 元素訪問。
          從文檔的頭部區(qū)域訪問 style 對象：
          var x = document.getElementsByTagName("STYLE");嘗試一下
           訪問一個指定元素的 style 對象：
          var x = document.getElementById("myH1").style;
            創(chuàng)建 Style 對象
          您可以使用 document.createElement() 方法來創(chuàng)建 <style> 元素：
          var x = document.createElement("STYLE");嘗試一下
          您也可以設(shè)置一個已有元素的 style 屬性：
          document.getElementById("myH1").style.color = "red";
            Style 對象屬性 
          "CSS" 列表示該屬性是在哪一個 CSS 版本中定義的（CSS1、CSS2 或 CSS3）。
          屬性描述CSS
          alignContent設(shè)置或返回當(dāng)靈活容器內(nèi)的各項沒有占用所有可用的空間時各項之間的對齊方式（水平）。3
          alignItems設(shè)置或返回靈活容器內(nèi)的各項的對齊方式。3
          alignSelf設(shè)置或返回靈活容器內(nèi)被選中項目的對齊方式。3
          animation是下面除了 animationPlayState 屬性之外的其他屬性的速記屬性。3
          animationDelay設(shè)置或返回動畫何時開始。3
          animationDirection設(shè)置或返回是否循環(huán)交替反向播放動畫。3
          animationDuration設(shè)置或返回動畫完成需花費的秒數(shù)或毫秒數(shù)。3
          animationFillMode設(shè)置或返回當(dāng)動畫不播放時（當(dāng)動畫完成時，或當(dāng)動畫有一個延遲未開始播放時），要應(yīng)用到元素的樣式。3
          animationIterationCount設(shè)置或返回動畫的播放次數(shù)。3
          animationName設(shè)置或返回關(guān)鍵幀 @keyframes 動畫的名稱。3
          animationTimingFunction設(shè)置或返回動畫的速度曲線。3
          animationPlayState設(shè)置或返回動畫是運行的還是暫停的。3
          background設(shè)置或返回在一個聲明中的所有背景屬性。1
          backgroundAttachment設(shè)置或返回背景圖像是否固定或隨頁面滾動。1
          backgroundColor設(shè)置或返回元素的背景色。1
          backgroundImage設(shè)置或返回元素的背景圖像。1
          backgroundPosition設(shè)置或返回的背景圖像的起始位置。1
          backgroundRepeat設(shè)置或返回如何重復(fù)背景圖像。1
          backgroundClip設(shè)置或返回背景的繪制區(qū)域。3
          backgroundOrigin設(shè)置或返回背景圖像的定位區(qū)域。3
          backgroundSize設(shè)置或返回背景圖像的大小。3
          backfaceVisibility設(shè)置或返回當(dāng)一個元素背對屏幕時是否可見。3
          border設(shè)置或返回在一個聲明中的 borderWidth、borderStyle 和 borderColor。1
          borderBottom設(shè)置或返回在一個聲明中的所有 borderBottom* 屬性。1
          borderBottomColor設(shè)置或返回下邊框的顏色。1 
          borderBottomLeftRadius設(shè)置或返回左下角邊框的形狀。3
          borderBottomRightRadius設(shè)置或返回右下角邊框的形狀。3
          borderBottomStyle設(shè)置或返回下邊框的樣式。1
          borderBottomWidth設(shè)置或返回下邊框的寬度。1
          borderCollapse設(shè)置或返回表格的邊框是否被折疊為一個單一的邊框。2
          borderColor設(shè)置或返回元素邊框的顏色（最多可以有四個值）。1
          borderImage一個用于設(shè)置或返回所有的 borderImage* 屬性的速記屬性。3
          borderImageOutset設(shè)置或返回邊框圖像區(qū)域超出邊界框的量。3
          borderImageRepeat設(shè)置或返回圖像邊框是重復(fù)拼接圖塊還是延伸圖塊。3
          borderImageSlice設(shè)置或返回圖像邊框的向內(nèi)偏移。3
          borderImageSource設(shè)置或返回要作為邊框使用的圖像。3
          borderImageWidth設(shè)置或返回圖像邊框的寬度。3
          borderLeft設(shè)置或返回在一個聲明中的所有 borderLeft* 屬性。1
          borderLeftColor設(shè)置或返回左邊框的顏色。1
          borderLeftStyle設(shè)置或返回左邊框的樣式。1
          borderLeftWidth設(shè)置或返回左邊框的寬度。1
          borderRadius一個用于設(shè)置或返回四個 border*Radius 屬性的速記屬性。3
          borderRight設(shè)置或返回在一個聲明中的所有 borderRight* 屬性。1
          borderRightColor設(shè)置或返回右邊框的顏色。1
          borderRightStyle設(shè)置或返回右邊框的樣式。1
          borderRightWidth設(shè)置或返回右邊框的寬度。1
          borderSpacing設(shè)置或返回表格中單元格之間的距離。2
          borderStyle設(shè)置或返回元素邊框的樣式（最多可以有四個值）。1
          borderTop設(shè)置或返回在一個聲明中的所有 borderTop* 屬性。1
          borderTopColor設(shè)置或返回上邊框的顏色。1
          borderTopLeftRadius設(shè)置或返回左上角邊框的形狀。3
          borderTopRightRadius設(shè)置或返回右上角邊框的形狀。3
          borderTopStyle設(shè)置或返回上邊框的樣式。1
          borderTopWidth設(shè)置或返回上邊框的寬度。1
          borderWidth設(shè)置或返回元素邊框的寬度（最多可以有四個值）。1
          bottom設(shè)置或返回定位元素的底部位置。2
          boxDecorationBreak設(shè)置或返回分頁處元素的背景和邊框行為，或者換行處內(nèi)聯(lián)元素的背景和邊框行為。3
          boxShadow設(shè)置或返回元素的下拉陰影。3
          boxSizing允許您以特定的方式定義匹配某個區(qū)域的特定元素。3
          captionSide設(shè)置或返回表格標(biāo)題的位置。2
          clear設(shè)置或返回元素相對浮動對象的位置。1
          clip設(shè)置或返回定位元素的可見部分。2
          color設(shè)置或返回文本的顏色。1
          columnCount設(shè)置或返回元素應(yīng)該被劃分的列數(shù)。3
          columnFill設(shè)置或返回如何填充列。3
          columnGap設(shè)置或返回列之間的間隔。3
          columnRule一個用于設(shè)置或返回所有的 columnRule* 屬性的速記屬性。3
          columnRuleColor設(shè)置或返回列之間的顏色規(guī)則。3
          columnRuleStyle設(shè)置或返回列之間的樣式規(guī)則。3
          columnRuleWidth設(shè)置或返回列之間的寬度規(guī)則。3
          columns一個用于設(shè)置或返回 columnWidth 和 columnCount 的速記屬性。3
          columnSpan設(shè)置或返回一個元素應(yīng)橫跨多少列。3
          columnWidth設(shè)置或返回列的寬度。3
          content與 :before 和 :after 偽元素一起使用，來插入生成的內(nèi)容。2
          counterIncrement增加一個或多個計數(shù)器。2
          counterReset創(chuàng)建或重置一個或多個計數(shù)器。2
          cursor設(shè)置或返回鼠標(biāo)指針顯示的光標(biāo)類型。2
          direction設(shè)置或返回文本的方向。2
          display設(shè)置或返回元素的顯示類型。1
          emptyCells設(shè)置或返回是否顯示表格中的空單元格的邊框和背景。2
          filter設(shè)置或返回圖片濾鏡(可視效果，如：高斯模糊與飽和度)3
          flex相對于同一容器其他靈活的項目，設(shè)置或返回項目的長度。3
          flexBasis設(shè)置或靈活項目的初始長度。3
          flexDirection設(shè)置或返回靈活項目的方向。3
          flexFlow是 flexDirection 和 flexWrap 屬性的速記屬性。3
          flexGrow設(shè)置或返回項目將相對于同一容器內(nèi)其他靈活的項目進(jìn)行擴(kuò)展的量。3
          flexShrink設(shè)置或返回項目將相對于同一容器內(nèi)其他靈活的項目進(jìn)行收縮的量。3
          flexWrap設(shè)置或返回靈活項目是否拆行或拆列。3
          cssFloat設(shè)置或返回元素的水平對齊方式。1
          font設(shè)置或返回一個聲明中的 fontStyle、fontVariant、fontWeight、fontSize、lineHeight 和 fontFamily。1
          fontFamily設(shè)置或返回文本的字體。1
          fontSize設(shè)置或返回文本的字體尺寸。1
          fontStyle設(shè)置或返回字體樣式是否是 normal（正常的）、italic（斜體）或 oblique（傾斜的）。1
          fontVariant設(shè)置或返回是否以小型大寫字母顯示字體。1
          fontWeight設(shè)置或返回字體的粗細(xì)。1
          fontSizeAdjust當(dāng)使用備用字體時，確保文本的可讀性。3
          fontStretch從字體庫中選擇一種正常的、濃縮的或擴(kuò)大的字體。3
          hangingPunctuation規(guī)定一個標(biāo)點符號是否可以放置在線框外。3
          height設(shè)置或返回元素的高度。1
          hyphens設(shè)置如何拆分單詞來提高段落布局。3
          icon向作者提供為一個帶有等價于圖標(biāo)的元素定義樣式的功能。3
          imageOrientation規(guī)定一個用戶代理應(yīng)用到圖像上的順時針方向的旋轉(zhuǎn)。3
          justifyContent設(shè)置或返回當(dāng)靈活容器內(nèi)的各項沒有占用所有可用的空間時各項之間的對齊方式（垂直）。3
          left設(shè)置或返回定位元素的左部位置。2
          letterSpacing設(shè)置或返回文本中字符之間的空間。1
          lineHeight設(shè)置或返回在文本中行之間的距離。1
          listStyle設(shè)置或返回一個聲明中的 listStyleImage、listStylePosition 和 listStyleType。1
          listStyleImage設(shè)置或返回作為列表項標(biāo)記的圖像。1
          listStylePosition設(shè)置或返回列表項標(biāo)記的位置。1
          listStyleType設(shè)置或返回列表項標(biāo)記的類型。1
          margin設(shè)置或返回元素的外邊距（最多可以有四個值）。1
          marginBottom設(shè)置或返回元素的的下外邊距。1
          marginLeft設(shè)置或返回元素的左外邊距。1
          marginRight設(shè)置或返回元素的右外邊距。1
          marginTop設(shè)置或返回元素的上外邊距。1
          maxHeight設(shè)置或返回元素的最大高度。2
          maxWidth設(shè)置或返回元素的最大寬度。2
          minHeight設(shè)置或返回元素的最小高度。2
          minWidth設(shè)置或返回元素的最小寬度。2
          navDown設(shè)置或返回當(dāng)使用向下箭頭導(dǎo)航鍵時要導(dǎo)航到哪里。3
          navIndex設(shè)置或返回元素的顯示順序。3
          navLeft設(shè)置或返回當(dāng)使用向左箭頭導(dǎo)航鍵時要導(dǎo)航到哪里。3
          navRight設(shè)置或返回當(dāng)使用向右箭頭導(dǎo)航鍵時要導(dǎo)航到哪里。3
          navUp設(shè)置或返回當(dāng)使用向上箭頭導(dǎo)航鍵時要導(dǎo)航到哪里。3
          opacity設(shè)置或返回元素的不透明度。3
          order設(shè)置或返回一個靈活的項目相對于同一容器內(nèi)其他靈活項目的順序。3
          orphans設(shè)置或返回當(dāng)元素內(nèi)有分頁時，必須在頁面底部預(yù)留的最小行數(shù)。2
          outline設(shè)置或返回在一個聲明中的所有 outline 屬性。2
          outlineColor設(shè)置或返回一個元素周圍的輪廓顏色。2
          outlineOffset對輪廓進(jìn)行偏移，并在邊框邊緣進(jìn)行繪制。3
          outlineStyle設(shè)置或返回一個元素周圍的輪廓樣式。2
          outlineWidth設(shè)置或返回一個元素周圍的輪廓寬度。2
          overflow設(shè)置或返回如何處理呈現(xiàn)在元素框外面的內(nèi)容。2
          overflowX規(guī)定如果內(nèi)容溢出元素的內(nèi)容區(qū)域，是否對內(nèi)容的左/右邊緣進(jìn)行裁剪。3
          overflowY規(guī)定如果內(nèi)容溢出元素的內(nèi)容區(qū)域，是否對內(nèi)容的上/下邊緣進(jìn)行裁剪。3
          padding設(shè)置或返回元素的內(nèi)邊距（最多可以有四個值）。1
          paddingBottom設(shè)置或返回元素的下內(nèi)邊距。1
          paddingLeft設(shè)置或返回元素的左內(nèi)邊距。1
          paddingRight設(shè)置或返回元素的右內(nèi)邊距。1
          paddingTop設(shè)置或返回元素的上內(nèi)邊距。1
          pageBreakAfter設(shè)置或返回元素后的分頁行為。2
          pageBreakBefore設(shè)置或返回元素前的分頁行為。2
          pageBreakInside設(shè)置或返回元素內(nèi)的分頁行為。2
          perspective設(shè)置或返回 3D 元素被查看的視角。3
          perspectiveOrigin設(shè)置或返回 3D 元素的底部位置。3
          position設(shè)置或返回用于元素定位方法的類型（static、relative、absolute 或 fixed）。2
          quotes設(shè)置或返回嵌入引用的引號類型。2
          resize設(shè)置或返回是否可由用戶調(diào)整元素的尺寸大小。3
          right設(shè)置或返回定位元素的右部位置。2
          tableLayout設(shè)置或返回表格單元格、行、列的布局方式。2
          tabSize設(shè)置或返回制表符（tab）字符的長度。3
          textAlign設(shè)置或返回文本的水平對齊方式。1
          textAlignLast設(shè)置或返回當(dāng) text-align 屬性設(shè)置為 "justify" 時，如何對齊一個強制換行符前的最后一行。3
          textDecoration設(shè)置或返回文本的修飾。1
          textDecorationColor設(shè)置或返回文本修飾的顏色。3
          textDecorationLine設(shè)置或返回文本修飾要使用的線條類型。3
          textDecorationStyle設(shè)置或返回文本修飾中的線條樣式。3
          textIndent設(shè)置或返回文本第一行的縮進(jìn)。1
          textJustify設(shè)置或返回當(dāng) text-align 屬性設(shè)置為 "justify" 時，要使用的對齊方法。3
          textOverflow設(shè)置或返回當(dāng)文本溢出包含它的元素，應(yīng)該發(fā)生什么。3
          textShadow設(shè)置或返回文本的陰影效果。3
          textTransform設(shè)置或返回文本的大小寫。1
          top設(shè)置或返回定位元素的頂部位置。2
          transform向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。3
          transformOrigin設(shè)置或返回被轉(zhuǎn)換元素的位置。3
          transformStyle設(shè)置或返回被嵌套的元素如何呈現(xiàn)在 3D 空間中。3
          transition一個用于設(shè)置或返回四個過渡屬性的速記屬性。3
          transitionProperty應(yīng)用過渡效果的 CSS 屬性的名稱。3
          transitionDuration設(shè)置或返回完成過渡效果需要花費的時間（以秒或毫秒計）。3
          transitionTimingFunction設(shè)置或返回過渡效果的速度曲線。3
          transitionDelay設(shè)置或返回過渡效果何時開始。3
          unicodeBidi設(shè)置或返回文本是否被重寫，以便在同一文檔中支持多種語言。2
          verticalAlign設(shè)置或返回元素中內(nèi)容的垂直對齊方式。1
          visibility設(shè)置或返回元素是否應(yīng)該是可見的。2
          whiteSpace設(shè)置或返回如何處理文本中的制表符、換行符和空格符。1
          width設(shè)置或返回元素的寬度。1
          wordBreak設(shè)置或返回非 CJK 語言的換行規(guī)則。3
          wordSpacing設(shè)置或返回文本中單詞之間的空間。1
          wordWrap允許長單詞或 URL 地址換行到下一行。3
          widows設(shè)置或返回一個元素必須在頁面頂部的可見行的最小數(shù)量。2
          zIndex設(shè)置或返回定位元素的堆疊順序。2
           如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
          三部分 附錄（因為暫時不支持插入超鏈接所以部分內(nèi)容無法顯示）
          附錄一 DIV命名規(guī)范
          • 企業(yè)DIV使用頻率高的命名方法
          • 網(wǎng)頁內(nèi)容類
          • 標(biāo)題: title
          • 摘要: summary
          • 箭頭： arrow
          • 商標(biāo)： label
          • 網(wǎng)站標(biāo)志： logo
          • 轉(zhuǎn)角/圓角：corner
          • 橫幅廣告： banner
          • 子菜單： subMenu
          • 搜索： search
          • 搜索框： searchBox
          • 登錄： login
          • 登錄條：loginbar
          • 工具條： toolbar
          • 下拉： drop
          • 標(biāo)簽頁： tab
          • 當(dāng)前的： current
          • 列表： list
          • 滾動： scroll
          • 服務(wù)： service
          • 提示信息： msg
          • 熱點：hot
          • 新聞： news
          • 小技巧： tips
          • 下載： download
          • 欄目標(biāo)題： title
          • 熱點： hot
          • 加入：joinus
          • 注冊： regsiter
          • 指南： guide
          • 友情鏈接： friendlink
          • 狀態(tài)： status
          • 版權(quán)： copyright
          • 按鈕： btn
          • 合作伙伴： partner
          • 投票： vote
          • 左右中：left right center

          • 注釋的寫法: /* Footer */ 內(nèi)容區(qū)/* End Footer */
          • id的命名:
          • 頁面結(jié)構(gòu)
          • 容器: container
          • 頁頭：header
          • 內(nèi)容：content/container
          • 頁面主體：main
          • 頁尾：footer
          • 導(dǎo)航：nav
          • 側(cè)欄：sidebar
          • 欄目：column
          • 頁面外圍控制整體布局寬度：wrapper
          • 左右中：left right center
          • 導(dǎo)航
          • 導(dǎo)航：nav
          • 主導(dǎo)航：mainbav
          • 子導(dǎo)航：subnav
          • 頂導(dǎo)航：topnav
          • 邊導(dǎo)航：sidebar
          • 左導(dǎo)航：leftsidebar
          • 右導(dǎo)航：rightsidebar
          • 菜單：menu
          • 子菜單：submenu
          • 標(biāo)題: title
          • 摘要: summary
          • 功能
          • 標(biāo)志：logo
          • 廣告：banner
          • 登陸：login
          • 登錄條：loginbar
          • 注冊：regsiter
          • 搜索：search
          • 功能區(qū)：shop
          • 標(biāo)題：title
          • 加入：joinus
          • 狀態(tài)：status
          • 按鈕：btn
          • 滾動：scroll
          • 標(biāo)簽頁：tab
          • 文章列表：list
          • 提示信息：msg
          • 當(dāng)前的:current
          • 小技巧：tips
          • 圖標(biāo): icon
          • 注釋：note
          • 指南：guild
          • 服務(wù)：service
          • 熱點：hot
          • 新聞：news
          • 下載：download
          • 投票：vote
          • 合作伙伴：partner
          • 友情鏈接：link
          • 版權(quán)：copyright
          • class的命名:
          • 顏色:使用顏色的名稱或者16進(jìn)制代碼,如
          • .red { color: red; }
          • .f60 { color: #f60; }
          • .ff8600 { color: #ff8600; }
          • 字體大小,直接使用”font+字體大小”作為名稱,如
          • .font12px { font-size: 12px; }
          • .font9px {font-size: 9pt; }
          • 對齊樣式,使用對齊目標(biāo)的英文名稱,如
          • .left { float:left; }
          • .bottom { float:bottom; }
          • 標(biāo)題欄樣式,使用”類別+功能”的方式命名,如
          • .barnews { }
          • .barproduct { }
          • 注意事項::
          • 一律小寫;
          • 盡量用英文;
          • 不加中杠和下劃線;
          • 盡量不縮寫，除非一看就明白的單詞.

          • 推薦的 CSS 書寫順序：
          • 顯示屬性
          • display
          • list-style
          • position
          • float
          • clear
          • 自身屬性
          • width
          • height
          • margin
          • padding
          • border
          • background
          • 文本屬性
          • color
          • font
          • text-decoration
          • text-align
          • vertical-align
          • white-space
          • other text
          • content
          附錄二 CSS精靈
          • CSS精靈原理以及應(yīng)用
          • CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網(wǎng)站的HTTP請求數(shù)量。
          • 該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標(biāo)簽變得更加復(fù)雜了，圖片是在CSS中定義，而非<img>標(biāo)簽。
          • 一個簡單的例子：
          • 一張圖片作出一個按鈕的三個狀態(tài)
          • 一個鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態(tài)，a:link，a:hover，a:active <a class="button" href="#">鏈接</a>
          • 加入右側(cè)的圖片為：200px 65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、鼠標(biāo)滑過、鼠標(biāo)點擊的狀態(tài)。則可以使用CSS進(jìn)行定義。
          a {
 display:block; 
 width:200px; 
 height:65px; 
 line-height:65px; /*定義狀態(tài)*/
 text-indent:-2015px; /*隱藏文字*/
 background-image:url(button.png); /*定義背景圖片*/
 background-position:0 0;
 /*定義鏈接的普通狀態(tài)，此時圖像顯示的是頂上的部分*/
}
a:hover {
 background-position:0 -66px;
 /*定義鏈接的滑過狀態(tài)，此時顯示的為中間部分，向下取負(fù)值*/
}
a:active {
 background-position:0 -132px; 
 /*定 義鏈接的普通狀態(tài)，此時顯示的是底部的部分，向下取負(fù)值*/
}

          • 更多的CSS雪碧，圖片更復(fù)雜，背景定位更精確。可能會用到大量的數(shù)值
          • 如：background:url(nav.png) -180px 24pxno-repeat; 來達(dá)到更精確的定位
          • 優(yōu)點：
          • 減少加載網(wǎng)頁圖片時對服務(wù)器的請求次數(shù)
          • 可以合并多數(shù)背景圖片和小圖標(biāo)，方便在任何位置使用，這樣不同位置的請求只需要調(diào)用一個圖片，從而減少對服務(wù)器的請求次數(shù)，降低服務(wù)器壓力，同時提高了頁面的加載速度，節(jié)約服務(wù)器的流量。
          • 提高頁面的加載速度
          • sprite技術(shù)的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF圖片的尺寸會明顯小于所有圖片拼合前的大小。單張的 GIF只有相關(guān)的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNGsprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
          • 減少鼠標(biāo)滑過的一些bug
          • IE6不會主動預(yù)加載鼠標(biāo)滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標(biāo)滑過會出現(xiàn)閃白的現(xiàn)象。使用CSS雪碧，由于一張圖片即可，所以不會出現(xiàn)這種現(xiàn)象。
          • 不足：
          • CSS雪碧的最大問題是內(nèi)存使用
          • 影響瀏覽器的縮放功能
          • 拼圖維護(hù)比較麻煩
          • 使CSS的編寫變得困難
          • CSS 雪碧調(diào)用的圖片不能被打印
          • 錯誤得使用 Sprites 影響可訪問性
          附錄三 一些tips解決方案
          頁面優(yōu)化實踐
          • 從下面的幾個方面可以進(jìn)行頁面的優(yōu)化：
          • 減少請求數(shù)
          • 圖片合并
          • CSS文件合并
          • 減少內(nèi)聯(lián)樣式
          • 避免在 CSS中使用 import
          • 減少文件大小
          • 選擇適合的圖片格式
          • 圖片壓縮
          • CSS 值縮寫（Shorthand Property)
          • 文件壓縮
          • 頁面性能
          • 調(diào)整文件加載順序
          • 減少標(biāo)簽數(shù)量
          • 調(diào)整選擇器長度
          • 盡量使用CSS 制作顯示表現(xiàn)
          • 增強代碼可讀性與可維護(hù)性
          • 規(guī)范化
          • 語義化
          • 模塊化
          寫DIV+CSS 的一些常識
          • 不要使用過小的圖片做背景平鋪
          • 這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區(qū)域，需要 200200=40, 000 次，占用資源
          • 無邊框
          • 推薦的寫法是 border:none;，哈哈，我一直在用這個。 border:0; 只是定義邊框?qū)挾葹榱悖吙驑邮健㈩伾€是會被瀏覽器解析，占用資源
          • 慎用 通配符
          • 所謂通配符，就是將CSS 中的所有標(biāo)簽均初始化，不管用的不用的，過時的先進(jìn)的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標(biāo)簽。
          • CSS的十六進(jìn)制顏色代碼縮寫
          • 習(xí)慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時會增加文件體積。孰優(yōu)孰劣，有待仔細(xì)考證。
          • 樣式放頭上，腳本放腳下。不內(nèi)嵌，只外鏈
          • 堅決不用 CSS表達(dá)式
          • 使用 引用樣式表，而不是通過@import 導(dǎo)入。
          • 一般來說，PNG比 GIF 要小，小得多。再者，GIF 中有多少顏色是被浪費的，很值得優(yōu)化。
          • 千萬不要在 HTML中縮放圖片，一者不好看，二者占資源。
          • 正文字體最好用偶數(shù)
          • 12px、14px、16px，效果非常好。特例，15px。
          • block、ul、ol等上下留出至少一倍行距，左側(cè)至少兩倍行距，右側(cè)隨意。
          • 段落之間，至少要有一倍行距
          • 強行指定某些元素的 line-height，正文 1.6倍于文字大小，標(biāo)題1.3倍。
          • 中文標(biāo)點用全角
          • 英文夾雜在中文中，左右空格，半角。
          • 中文字體的粗體和斜體，遠(yuǎn)離較好
          常用代碼片段
          • 雅虎工程師提供的CSS初始化示例代碼【僅供參考】
          • 可以在html頭文件中直接引用，從而避免瀏覽器的不兼容帶來的錯誤。
          body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
 margin:0; padding:0; 
}
body {
 background:#fff; 
 color:#555; 
 font-size:14px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
 font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
 font-weight:normal; 
 font-size:100%; 
}
address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
 font-style:normal; 
 font-weight:normal;
}
a { 
 color:#555; 
 text-decoration:none; 
}
a:hover { 
 text-decoration:underline; 
}
img {
 border:none;
}
ol,ul,li { 
 list-style:none; 
}
input, 
textarea, 
select, 
button { 
 font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
 border-collapse:collapse; 
}
html {
 overflow-y: scroll;
} 
.clearfix:after {
 content: "."; 
 display: block; 
 height:0; 
 clear:both; 
 visibility: hidden;
}
.clearfix { 
 *zoom:1; 
}

          • mobile meta標(biāo)簽
          <meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>

          • 表格不被撐開
          table-layout: fixed; word-break: break-all;;border-collapse: collapse

          • 不設(shè)寬高居中
          <div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
 <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
 <input type=”button” value=”item1″ />
 </span>
</div>

          • 透明度的兼容代碼
          filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/

          • 文字溢出點點省略
          white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

          • 清除浮動的幾種方法
          • 方法一：投機(jī)取巧法 – 不推薦
          • 直接一個放到當(dāng)作最后一個子標(biāo)簽放到父標(biāo)簽?zāi)莾海朔椒▽以嚥凰嫒菪詮?/li>
          • 方法二：overflow + zoom方法 –不推薦
          • .fix{overflow:hidden; zoom:1;}
          • 此方法優(yōu)點在于代碼簡潔，涵蓋所有瀏覽器
          • 方法三：after + zoom方法 -推薦–此方法可以說是綜合起來最好的方法了
          • clearfix只應(yīng)用在包含浮動子元素的父級元素上
          .fix{zoom:1;}
.fix:after{
 display:block; 
 content:'clear'; 
 clear:both;
 line-height:0; 
 visibility:hidden;
}

          • 更多代碼片段詳情
          • 實用的60個CSS代碼片段
          一些總結(jié)
          • 自動繼承屬性：
          • color
          • font
          • text-align
          • list-style
          • …
          • 非繼承屬性：
          • background
          • border
          • position
          • …
          • 具有破壞性的元素：
          • float
          • display:none;
          • position:absoblute/fixed/sticky;
          • 具有包裹性的元素：
          • display:inline-block/table-cell
          • position:absolute/fixed/sticky
          • overflow:hidden/scroll
          • 消除圖片底部間隙的方法
          • 圖片塊狀化-無基線對齊
          • img{display:block;}
          • 圖片底線對齊
          • img{vertical-align:bottom;}
          • 行高足夠小 - 基線位置上移
          • .box{line-height:0;}
          一些概念
          • BFC
          • BFC全稱”Block Formatting Context” 中文為“塊級格式化上下文”
          • 記住這么一句話：BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素
          • BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此
          • 優(yōu)雅降級(graceful degradation)
          • 一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容
          • 漸進(jìn)增強 progressive enhancement：
          • 是在瀏覽器開啟JavaScript功能后，如果瀏覽器版本不支持某些 JavaScript 能力，我們解決這種問題的方式
          • 平穩(wěn)退化
          • 是在瀏覽器沒有JavaScript功能，或沒有開啟JavaScript功能情況下，我們解決這種問題的方式；
          學(xué)習(xí)從來不是一個人的事情，要有個相互監(jiān)督的伙伴，想要學(xué)習(xí)或交流前端問題的小伙伴可以私信“學(xué)習(xí)”小明加群獲取2019web前端最新入門資料，一起學(xué)習(xí)，一起成長！
          理 | 蘇宓
          出品 | CSDN（ID：CSDNnews）
          有些人玩游戲，是為了尋求刺激；有些人玩游戲，是為了休閑安靜地打發(fā)時間。二者的感受如何才能兼得，近日，蘇格蘭愛丁堡的一位開發(fā)者 Anslo 潛心開發(fā)了 16 個月，發(fā)布了一款名為 《Slow Roads》（slowroads.io）的免費、輕松的駕駛游戲，可以讓玩家在電腦上體驗《速度與激情》的感覺，還能欣賞由程序自動生成的優(yōu)美風(fēng)景。此外，這款游戲可以直接在瀏覽器中運行，無需登錄或者安裝，對于玩家而言，即開即玩。

          玩法

          《Slow Roads》一經(jīng)推出之后，便受到了不少玩家的關(guān)注和試玩。和傳統(tǒng)駕駛類游戲有所不同，這款游戲在玩法和技術(shù)實現(xiàn)上有著巨大的差異。
          首先，在游戲玩法上，它沒有撞車、沒有失敗更沒有輸贏。隨著汽車的行駛，道路會一直在延伸，風(fēng)景秀麗的景觀在身邊飛馳，最為值得關(guān)注無論是春夏秋冬，還是白天、傍晚、黑夜，亦或是森林、沙漠、環(huán)山，場景都可以一鍵“無縫切換”。
          另外，駕駛的車也可以切換為轎車、長途汽車、自行車。
          如果你的方向盤偏離了道路，也可以按一下「R」鍵將車重新定位到快速道上，甚至道路也是可以選擇的。當(dāng)然，如果你愿意，還可以駕駛越野車或者體驗一下水下行駛的感覺。
          當(dāng)然，玩累了，還可以開啟自動駕駛模式。
          同時，這款游戲的操作也非常簡單，W 鍵或向上箭頭是加速，S 鍵或向下箭頭是剎車。A 鍵和 D 鍵（或左右箭頭）控制轉(zhuǎn)向；玩家也可以通過按住 Shift 或雙擊 W 鍵來升級汽車；C 鍵可改變攝像機(jī)角度，Q 鍵和 E 鍵在可用的天氣和照明條件下循環(huán)。如果你不喜歡鍵盤控制，也可以改用基于鼠標(biāo)的轉(zhuǎn)向。
          在技術(shù)實現(xiàn)上，與使用傳統(tǒng)游戲引擎開發(fā)的游戲不同，Anslo 表示，《Slow Roads》使用了 three.js 的 3D JavaScript 庫構(gòu)建，可直接在 Chrome、Firefox、Safari 和 Edge 瀏覽器中運行。與此同時，上述的場景切換都是由程序自動生成，通過技術(shù)實現(xiàn)，可以動態(tài)生成無限地圖和處理事務(wù)。這是一個相當(dāng)復(fù)雜且有趣的技術(shù)演示。用開發(fā)者 Anslo 自己的話來形容，「該游戲的實驗正在挑戰(zhàn)瀏覽器游戲的合理邊界」。
          接下來，我們不妨一起來看一下具體的技術(shù)原理。

          技術(shù)實現(xiàn)

          事實上，這一款游戲的制作不僅需要深厚的開發(fā)功底，也需要有設(shè)計、物理學(xué)等知識儲備。在《Slow Roads》中，作者首先通過生成一個高度圖，采用了類似于 Perlin 噪聲的算法，并進(jìn)行了修改優(yōu)化，從而實現(xiàn)更真實的山丘景觀。
          繼而使用一個 npm 包 Alea（https://www.npmjs.com/package/alea）用作 PRNG（偽隨機(jī)數(shù)生成器，Preudo Random Number Generator)，用于復(fù)制和粘貼實現(xiàn)。
          當(dāng)完成第一步開發(fā)之后，第二步便是進(jìn)行車子行駛的道路規(guī)劃。Anslo 選擇采用了以下步驟：
          • 選擇地圖中一個不太陡峭、不太深的地方，作為行駛的起點。同時，這也是道路中線的第一個點。
          • 進(jìn)而選擇一個方向，并測量周圍的高度圖，以此評估橫向和縱向的坡度。
          • 然后，道路中線最好是能向坡度下滑的方向移動 10 米。點被編碼在一個雙向鏈表中，每個點都使用元數(shù)據(jù)（如坡度、道路寬度和曲率）注釋。
          • 上面這個過程是會一直重復(fù)的（以從車輛位置開始的 15 公里的地平線為界），但注意行駛的車道不要有自相交的情況，這也是游戲中道路規(guī)劃最難的地方。
          • 中線點的高度用一個 9 個點的窗口進(jìn)行追溯平滑，以避免海拔的突然急劇變化。
          • 在一個較短的地平線上，大概 10 米的中線被用二次貝塞爾曲線以 1 米的分辨率進(jìn)行平滑點的注釋。
          當(dāng)?shù)缆芬?guī)劃完成之后，第三步便是渲染環(huán)境。這里可以使用一個 5x5 的大粗網(wǎng)格（這款游戲中，作者采用的是 10 米的分辨率和 1 公里的最大視距）來渲染大型場景。這被稱之為“遠(yuǎn)網(wǎng)格”。
          在靠近道路的地方，是一個由更細(xì)的 5x5 網(wǎng)格組成的，每個網(wǎng)格拼接到一起，沿著道路中線行進(jìn)，形成一個連續(xù)的 "走廊"。這就是 "近網(wǎng)格"，從車輛的位置向前生成一個固定的水平線。
          同時，遠(yuǎn)處網(wǎng)格現(xiàn)在重疊的頂點被粗略地 "隱藏 "起來，把它們沉到幾米以下。
          然后離道路中線接近的地方，在道路的高度和底層環(huán)境的高度之間插值，以實現(xiàn)無縫過渡。
          除了以上，Anslo 還采用了一個額外的 3x3 網(wǎng)格，渲染離道路中線更近的地方，優(yōu)化細(xì)節(jié)，實現(xiàn)更精細(xì)的體驗。
          在圖形細(xì)節(jié)中，這名開發(fā)者在游戲中的地面紋理使用世界坐標(biāo)的 UV，并與 perlin 噪聲混合，以改變草的顏色。另外，在樹葉地圖下應(yīng)用了一個暗色的紋理，用來產(chǎn)生樹影的感官。
          正如上文所述，這款游戲還采用了一些物理學(xué)的基礎(chǔ)知識，如汽車每個輪子的動力學(xué)都是獨立計算的，使用圍繞重力、表面摩擦力和地面法線的常規(guī)運動學(xué)方程式。

          最后

          目前這款游戲已經(jīng)基本完成，不過，Anslo 認(rèn)為也還有不少需要優(yōu)化的地方，后續(xù)可能會改善天氣效果、更多的車輛類型和控制器支持。
          作為一款沒有使用如 Unity、UE5 等游戲引擎，而僅是使用了 JavaScript 實現(xiàn)的游戲而言，它的輕量級獲得了不少好評：
          • 火星地圖很有趣。另外，我發(fā)現(xiàn)汽車在倒擋時候可以同樣快！
          • 如果能教會自動駕駛漂移會很酷。
          • 現(xiàn)在的我沒有駕照，但是也能通過瀏覽器獲得駕駛通信證了，榮譽！
          • 期待后續(xù)可以加上背景音樂！
          也有不少網(wǎng)友感嘆似乎回到了高中時期玩《Geep Simulator》的年代。不過，目前《Slow Roads》暫時還沒有開源版本的計劃，但作者表示將來不排除有這種可能性。同時根據(jù)游戲的頁面顯示，Anslo 稱正在致力于保持《Slow Roads》免費提供且沒有廣告，「享受這作為逃離資本主義的喘息之機(jī)」。
          試玩地址：slowroads.io
          參考資料：
          https://anslo.medium.com/slow-roads-tl-dr-a664ac6bce40
          https://twitter.com/anslogen
          https://arstechnica.com/gaming/2022/10/slow-roads-offers-a-chill-endless-driving-experience-in-your-browser/
          https://twitter.com/anslogen/status/1583850492463296517
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
日韩精品无码一区二区三区|
一区二区三区久久精品|
亚洲一区二区成人|
亚洲性无码一区二区三区|
好吊视频一区二区三区|
亚洲日韩AV一区二区三区四区|
无码精品蜜桃一区二区三区WW
|
一区二区3区免费视频|
国产品无码一区二区三区在线|
99精品国产高清一区二区|
精品少妇一区二区三区视频|
国产福利电影一区二区三区，免费久久久久久久精
|
中文字幕av无码一区二区三区电影
|
亚洲AV无码一区二区乱子伦
|
日韩在线一区二区三区视频|
久久er99热精品一区二区
|
无码人妻一区二区三区免费视频|
日韩精品国产一区|
国产精品福利一区|
视频一区视频二区日韩专区|
欧洲精品码一区二区三区免费看|
精品一区精品二区|
亚洲一区无码精品色|
久久综合精品国产一区二区三区|
蜜桃视频一区二区|
国产乱码精品一区二区三|
在线视频一区二区三区三区不卡|
国精产品一区二区三区糖心|
国模吧一区二区三区|
久久精品午夜一区二区福利|
国模私拍福利一区二区|
国产成人精品一区二三区熟女|
天堂va视频一区二区|
亚洲日本中文字幕一区二区三区|
一区二区三区免费视频观看|
免费日本一区二区|
亚洲欧美一区二区三区日产
|
性无码一区二区三区在线观看|
国产精品伦一区二区三级视频|
精品不卡一区二区|
精品理论片一区二区三区|