整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          網站建設:CSS3新增特性

          網站建設:CSS3新增特性

          站建設CSS3中引入的新特性和功能。這些新特性極大地增加了web程序的表現能力,同時簡化了web UI的編程模型。下面成都網站建設蜀風科技將詳細介紹這些CSS3的新增特性。

          1、強大的選擇器

          網站建設CSS3的選擇器在CSS2.1的基礎上進行了增強,它允許設計師在標簽中指定特定的HTML元素而不必使用多余的類、ID或者JavaScript腳本。

          如果希望設計出簡潔、輕量級的網頁標簽,希望結構與表現更好地分離,高級選擇器是非常有用的。它可以大大簡化我們的工作,提供編寫代碼效率,并讓我們很方便地制作出可維護性的頁面。

          2、半透明度效果的實現

          網站建設中RGBA不僅可以設定色彩,還能設定元素的透明度。無論是文本、背景還是邊框均可使用該屬性。該屬性的語法在其支持的瀏覽器中形同。

          3、多欄布局

          網站建設新的CSS3選擇器可以讓用戶不必使用多個DIV標簽就能實現多欄布局。瀏覽器解釋這個屬性并生成多欄,讓文本實現一個仿報紙的多欄結構。

          4、多背景圖

          CSS3允許背景屬性設置多個屬性值,這樣就可以在一個元素上添加多層背景圖片。

          5、塊陰影和文字陰影

          盡管box-shadow和text-shadow再CSS2中就已經存在,但是它們未被廣泛應用,它們將在CSS3中被廣泛采用。塊陰影和文字陰影可以不用圖片就能對HTML元素添加陰影,增加顯示的立體感增強設計的細節。塊陰影使用box-shadow屬性,文字陰影使用text-shadow屬性,該屬性目前在Safari和Chorme中可用。

          6、圓角

          網站建設CSS3新功能中最常用的一項就是圓角效果,Border-radius無須背景圖片就能給HTML元素添加圓角。不同于添加JavaScript或多余的HTML標簽,僅僅需要添加一些CSS屬性并從好的方面考慮。這個方案是清晰的和比較有效的,而且可以讓你免于花費幾小時來尋找精巧的瀏覽器方案和基于JavaScript圓角。

          7、邊框圖片

          網站建設中Border-image屬性允許在元素的邊框上設置圖片,這使得原本單調的邊框樣式變得很豐富。讓你從通常的solid、dotted和其他邊框樣式中解放出來。改屬性給設計師一個更好的工具,用它可以方便地定義設計元素的邊框樣式,比background-imag屬性或枯燥的默認邊框樣式更好用。也可以明確的定義一個邊框可以被如何縮放或平鋪。

          8、形變效果

          網站建設通常使用CSS和HTML我們是不可能使用HTML元素旋轉或傾斜一定角度的。為了使元素看起來更具有立體感,我們不得不把這種效果做成一個圖片,這樣就限制了很多動態的使用應用場景。Transform數學的引入使我們以前通常要借助SVG等矢量繪圖手段才能實現的功能,只需要一個簡單的CSS屬性就能實現。

          9、媒體查詢

          媒體查詢可以讓你為不同設備基于它們的能力定義不同的樣式。如在可視區域小于400像素的時候,想讓網站側欄顯示在主內容的下邊,這樣它就不應該浮動并顯示在右側了。

          10、CSS3線性漸變

          漸變色是網頁設計中很常用的一項元素,它可以增強網頁元素的立體感,同事使單一顏色的頁面看起來不是那么突兀。過去為了實現漸變色,通常需要先制作一個漸變的圖片,將它切割成很細的一小片,然后使用背景重復是整個HTML元素擁有漸變的背景色。這樣做有兩個弊端:為了使用圖片背景,很多時候使得本身簡單的HTML結果變得復雜;另外,受制于背景圖片的長度火寬度,HTML元素不能靈活的冬天調整大小。CSS3中Webkit和Mozilla對漸變都有強大的支持。

          成都蜀風科技打造與企業品牌相匹配的網站及微信開發,對每一個網站建設和微信開發項目,都以策略先行,再將創意與技術完美結合。 為企業打造出與企業品牌氣質相匹配的網絡品牌形象。 我們始終保持行業領先開發水平,不斷掌握領先的網絡技術。

          入門到精通:掌握 CSS 的全程指南

          Cascading Style Sheets(層疊樣式表),簡稱 CSS,是前端開發中不可或缺的一部分。它為網頁提供了美觀和一致的外觀,同時也為用戶提供了更好的用戶體驗。本文將引導你從 CSS 的基礎入門到精通,幫助你成為一名優秀的前端開發者。

          CSS 基礎入門

          1. 什么是 CSS?
          • 1. 先創建一個div
          • 2. 然后給div設定邊框。
          • 3. 給div的四個邊框都設置不同的顏色
          • 4. 把寬度和高度都變成0
          • 5. 其余角為透明
          • 6. 兼容IE6瀏覽器
          • 造成這樣的原因是:
          • 最簡單的解決辦法:(后面添加)
          • 其他的解決辦法:
          • 7. 解決內聯元素的三角顯示問題
          • 為什么會有這個問題
          • 解決辦法
          • 1. 去掉固定的內容高度
          • 2. 將內聯元素轉化為塊級元素或者行內塊元素
          • 3. 將元素脫標(如果涉及特殊的布局可以直接使用)
          • 最終代碼
          • 擴展
          • 有角度的三角
          • 有一個角是直角的三角
          • 箭頭
          • 對話框
          • 兼容IE8的小圓角矩形
          • 利用css3旋轉來制作三角形

          簡介

          三角的做法有好幾種:

          • 圖片、精靈圖(網易)
          • 字體圖標(京東)
          • 純代碼寫(亞馬遜)

          這里主要介紹的純代碼寫的。

          優點

          1. 代碼寫的三角,不管大小是多少,是不失真的。
          2. 代碼運行比圖片更快。
          3. 如果項目中沒有引用字體圖標,代碼寫是比較可靠的。

          原理

          原理就是使用css的盒模型中的border屬性

          使用border屬性就可以實現一個兼容性很好的三角圖形效果,其底層受到border-style的inseet/outset影響,邊框3D效果在互聯網早期還是很流行的,。

          1. 先創建一個div

          <div></div>
          

          2. 然后給div設定邊框。

          div{
           width:200px;
           height:100px;
           border:10px solid red; 
          }
          

          可以看到效果:

          3. 給div的四個邊框都設置不同的顏色

          div{
           width:200px;
           height:100px;
           border-left:10px solid red;
           border-top:10px solid green; 
           border-right:10px solid blue; 
           border-bottom:10px solid yellow; 
          }
          

          可以看到以下效果:

          可以看到兩個border交叉的地方,有斜邊存在。

          4. 把寬度和高度都變成0

          div{
           width:0px;
           height:0px;
           border-left:10px solid red;
           border-top:10px solid green; 
           border-right:10px solid blue; 
           border-bottom:10px solid yellow; 
          }
          /*也可以這么寫*/
          div{
           width:0px; 
           height:0px;
           border:10px solid; 
           border-color:red green blue yellow;
          }
          

          可以看到以下效果:

          這個時候就看得很明顯了,出現了四個三角。那如果要出現一個,那么就將其他的三個弄成透明色就可以了。

          這個就是三角形的由來。

          5. 其余角為透明

          這里的設置也遵循 上右下左 的順序,把不需要的角弄成透明色。

          div{
           width:0px; 
           height:0px;
           border-width:10px; 
           border-color:#f00 transparent transparent transparent;
           border-style:solid;
          }
          /*也可以再進行合并*/
          div{
           width:0px; 
           height:0px;
           border:10px solid; 
           border-color:#f00 transparent transparent transparent;
          }
          

          這樣一個三角就完成了。 那么問題來了,那就是兼容問題,IE6的兼容問題,如果不要求兼容IE6可以忽略下一步。

          6. 兼容IE6瀏覽器

          同樣的一個三角,在IE6的顯示是什么呢?

          造成這樣的原因是:

          • IE6不支持border的transparent
          • IE6的高度最小為19px,不支持高度為0

          在IE6下面,如果想把元素例如div設置成19像素以下的高度就設置不了了。這是因為IE6瀏覽器里面有個默認的高度,IE6下這個問題是因為默認的行高造成的。

          最簡單的解決辦法:(后面添加)

          div{
           /*不支持transparent*/
           border-style:solid dashed dashed dashed;
           /*高度最小不為0*/
           overflow:hidden;
          }
          
          1. 查了查網上的,如果是IE6不支持transparent, 可以這么做:
          div{
           border:solid 1px transparent; 
           _border-color:tomato; 
           _filter:chroma(color=tomato); 
          }
          

          所以我覺得用在這里也可以, BUT沒有親測過,如果哪位小可愛測過可以請告知我^ ^。

          div{
           width:0px;
           height:0px;
           margin:100px auto;
           border-width:10px;
           border-style:solid;
           border-color:#f00 transparent transparent transparent;
           _border-color:#f00 tomato tomato tomato; 
           _filter:chroma(color=tomato);
          }
          
          1. 如果是解決IE6的高度問題(也可以前面加下劃線,表示兼容的IE6)
          div{
           height:0;
           font-size:0;
           line-height:0;
           overflow:hidden;
          }
          

          7. 解決內聯元素的三角顯示問題

          為什么會有這個問題

          因為我們剛才用 <div> 去制作三角,當然我們經常會使用 <em><i> 或者偽元素去做一些小圖標。那么在顯示上面,可能會有問題。 下面的代碼:

          <style>
          em{
          	width: 0;
          	height: 0;
          	border-width: 50px;
          	border-color: transparent transparent transparent #f40;
          	border-style: solid;
          }
          </style>
          <em></em>
          

          可以看到頁面是這個樣子的:

          為什么是這個樣子的,那么我們再看的仔細一點。 它實際是這個樣子的。

          造成這樣的原因

          1. 是因為行內元素自己有固定的高度,不能設置寬高為0,所以上面下面都是50px沒有問題,但是中間撐開了距離,也就有了梯形的效果。
          2. 而且如果上面沒有塊元素的時候,是從內聯元素的內容開始算起的,所以上面的border就會到瀏覽器可視區域的上面。

          解決辦法

          這個有很多的辦法:

          1. 去掉固定的內容高度

          使用font-size:0;可以去掉內容的固定高度。

          em{
          	border-width: 50px;
          	border-color: transparent transparent transparent #f40;
          	border-style: solid;
          	font-size: 0;
          }
          

          2. 將內聯元素轉化為塊級元素或者行內塊元素

          em{
          	border-width: 50px;
          	border-color: transparent transparent transparent #f40;
          	border-style: solid;
          	display: block; /*也可以是inline-block*/
          }
          

          3. 將元素脫標(如果涉及特殊的布局可以直接使用)

          /*脫標*/
          em{
          	border-width: 50px;
          	border-color: transparent transparent transparent #f40;
          	border-style: solid;
          	position: absolute;
          	top:0;
          	left:0;
          }
          /*or 浮動*/
          em{
          	border-width: 50px;
          	border-color: transparent transparent transparent #f40;
          	border-style: solid;
          	float:left;
          }
          

          最終代碼

          下面就是兼容了IE6版本的三角代碼。

          div{
           width:0px; /*設置寬高為0*/
           height:0px;/*可不寫*/
           border-width:10px; /*數值控制三角的大小,垂直的位置*/
           border-color:#f00 transparent transparent transparent;/*上右下左,transparent是透明的*/
           border-style:solid dashed dashed dashed;/*設置邊框樣式,dashed是兼容IE6寫的*/
           overflow:hidden;/*兼容IE6最小高度不為0寫的*/
          }
          

          改變border-width,三角變大,是不失真的。很清晰。

          ==三角制作完成 。==

          擴展

          有角度的三角

          上面制作的都是45度的三角,三角可以通過border的高度寬度確定角度。

          比如這樣一個三角,只需要確定上下的和左右的寬度不一樣即可。

          div{
          	width: 0px;
          	height: 0px;
          	margin: 100px auto;
          	border-width:10px 30px;
          	border-color:transparent transparent transparent red;
          	border-style:solid;
          }
          

          有一個角是直角的三角

          觀察可以看到,是上面和右面的三角同時設置成一個顏色。就會出現直角的三角。

          div{
          	width: 0;
          	border-width: 20px 10px;
          	border-style: solid;
          	border-color: red red transparent transparent;
          }
          

          箭頭

          其實原理也簡單,就是兩個三角重疊在一起。上面的三角就是背景的顏色

          <style type="text/css">
          .san {
          	border-width: 50px;
          	border-color: transparent transparent transparent #f40;
          	border-style: solid; 
          	position: relative;
          	}
          .si {
          	border-width: 30px;
          	border-color: transparent transparent transparent #fff;
          	border-style: solid; 
          	position: absolute;
          	left: -50px;
          	top: -30px;
          }
          </style>
          <!--html結構-->
          <div class="san">
          	<div class="si"></div>
          </div>
          

          對話框

          這個使用偽元素去做就很方便。


          主站蜘蛛池模板: 亚洲国产成人久久一区久久| 久久成人国产精品一区二区| 国产在线精品一区免费香蕉| 国产精品视频一区二区三区无码| 国产成人精品一区二区A片带套| 久99精品视频在线观看婷亚洲片国产一区一级在线 | 亚洲一区二区免费视频| 视频一区二区精品的福利| 亚洲福利电影一区二区?| 国产日韩一区二区三免费高清 | 国产激情一区二区三区 | 毛片一区二区三区无码| 日韩高清国产一区在线| 成人国产一区二区三区| 视频一区视频二区日韩专区| 亚洲av无码一区二区三区在线播放| 久久精品国产免费一区| 红杏亚洲影院一区二区三区| 国产一区二区三区日韩精品| 无码成人一区二区| 国产成人无码一区二区三区在线| 日本精品一区二区久久久| 无码一区二区三区在线| 亚洲熟女www一区二区三区 | 无码人妻精品一区二区三18禁| 日韩美女视频一区| 国产乱码精品一区二区三区四川人| 久久久国产精品亚洲一区 | 国产一区二区三区韩国女主播| 日韩精品一区二区三区大桥未久 | 国产午夜精品免费一区二区三区| 男人的天堂亚洲一区二区三区| 久久久无码精品人妻一区| 国产成人精品日本亚洲专一区| 99精品一区二区免费视频| 人妻无码一区二区不卡无码av| 一区二区三区观看免费中文视频在线播放 | 爆乳熟妇一区二区三区| 一区二区三区免费精品视频| 国产精品免费大片一区二区| 狠狠色婷婷久久一区二区三区|