html代碼部分
成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供阜城網(wǎng)站建設、阜城做網(wǎng)站、阜城網(wǎng)站設計、阜城網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、阜城企業(yè)網(wǎng)站模板建站服務，10余年阜城做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。
!doctype html
html
head
meta charset="utf-8"
title圖標寫法/title
/head
body
div id="icon"
span class="price"#65509;89.0/span
a href="#" class="btn"去開團nbsp;gt;/a
/div
/body
/html
下面是css代碼部分,處理了瀏覽器的兼容
style
#icon{display:inline-block;}
.price{display:inline-block; background:#E60012; font-size:40px; color:#fff; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topleft:43px; -moz-border-radius-bottomleft: 43px; -webkit-border-top-left-radius:43px; -webkit-border-bottom-left-radius:43px; border-top-left-radius:43px; border-bottom-left-radius:43px;}
.btn{display:inline-block; background:#000; font-size:40px; color:#fff; text-decoration:none; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topright:43px; -moz-border-radius-bottomright: 43px; -webkit-border-top-right-radius:43px; -webkit-border-bottom-right-radius:43px; border-top-right-radius:43px; border-bottom-right-radius:43px;}
/style
效果圖
解析：前面的url是自定義鼠標圖標的路徑，可以為相對/絕對路徑。第二個參數(shù)是css標準的cursor樣式?？蓳Q成其他屬性（如pointer/crosshair/default/等）
注意：w3school推薦第二個參數(shù)必須定義一個普通的光標，以防止url定義的光標有備用選項。另外，IE下第二個參數(shù)可以省略。
自定義鼠標圖標，需要注意以下幾點:
① 圖標的格式
IE支持cur,ani,ico這三種格式，F(xiàn)F支持bmp,gif,jpg,cur,ico這幾種格式，不支持ani格式，也不支持gif動畫格式，因此一般將url引用的圖標存為ico或cur格式比較好。
② 圖標的大小
鼠標圖標的尺寸推薦32*32，否則可能出現(xiàn)大小不一致問題。
參考文章： 使用自定義的鼠標圖標
可以在阿里圖庫中下載相應的圖標，下到本地后
第一步：拷貝項目下面生成的font-face
@font-face {font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
第二步：定義使用iconfont的樣式
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
第三步：挑選相應圖標并獲取字體編碼，應用于頁面
i class="iconfont"#x33;/i
font-class引用
font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。
與unicode使用方式相比，具有如下特點：
兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。
相比于unicode語意明確，書寫更直觀?？梢院苋菀追直孢@個icon是什么。
因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。
不過因為本質上還是使用的字體，所以多色圖標還是不支持的。
使用步驟如下：
第一步：拷貝項目下面生成的fontclass代碼：
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
第二步：挑選相應圖標并獲取類名，應用于頁面：
i class="iconfont icon-xxx"/i
html5 css3樣式圖標制作方法：
1、html代碼：
div id="boxes"
div id="boxShortcode"border-radius: 40px (shortcode)/div
div id="box1"border-top-right-radius: 40px (same on both axis)/div
div id="box2"border-top-right-radius: 20px 40px (x y) /div
div id="box3"border-top-right-radius: 40px 20px (x y) /div
/div
2、css樣式代碼：
#boxes div { margin-bottom: 20px; height: 50px; padding-left: 20px }
#boxShortcode {
background: cyan;
border-radius: 40px;
}
#box1 {
background: red;
border-top-right-radius: 40px;
}
#box2? {
background: yellow;
border-top-right-radius: 20px 40px;
}
#box3 {
background: lime;
border-top-right-radius: 40px 20px;
}
3、運行結果：
盒子模型是CSS中一個很重要的概念，頁面中的所有元素都可以看成一個盒子，并占據(jù)一定的頁面空間，一個頁面由很多盒子組成，盒子之間會互相影響。只有掌握盒模型以及其中每個屬性的用法，才能真正控制好頁面元素。
盒子模型主要定義四個區(qū)域： 內容(content)、內邊距/填充(padding)、邊框(border)和外邊距(margin) 。
盒子的內容區(qū)域存放文本和圖片等頁面元素，擁有如下屬性：
邊框基本屬性：
通過一個屬性設置四個方向邊框的寬度、樣式、顏色
屬性：border
取值：width style color;
只設置某一條邊框的寬度、樣式、顏色
語法：border-方向（top/right/bottom/left）：width style color;
只設置邊框的寬度、樣式、顏色中的一種
語法：border-屬性（width/style/color）：取值;
只設置某一條邊框的寬度、樣式、顏色中的一種
語法：border-方向（top/right/bottom/left）-屬性（width/style/color）：取值;
屬性：border-radius
作用：設置倒角位置處圓的半徑，半徑越大，弧度越大。
取值：
屬性：border-image
語法：
border-image-source ：引入背景圖片
取值：
默認值：無圖片
url(圖片URL地址)
border-image-slice ：切割引入背景圖片，把邊框背景切成9份
取值：
number：默認單位px
百分比：
fill：保留邊框圖像的中間部分
border-image-width ：指定邊框圖片的寬度
border-image-repeat ：指定邊框背景圖片的排列方式，可定義2個參數(shù)，即水平和垂直方向
取值：
Stretch：默認值，拉伸
Repeat：平鋪
Round：取整平鋪
內容區(qū)域和邊框（邊緣）之間的距離
語法：padding: 值；
單邊設置：padding-方向（top/right/bottom/left）:值；
取值：
數(shù)值px
百分比
內邊距的簡寫方式：
padding:value;
四個方向內邊距的值均為value
padding:value1 value2;
Value1為上下內邊距的值，value2為左右內邊距的值
padding:value1 value2 value3;
Value1為上內邊距的值，value2為左右內邊距的值，value3為下內邊距的值
padding:value1 value2 value3 value4;
上右下左內邊距的值分別為value1， value2， value3， value4
外邊距指元素與元素之間的距離，即圍繞在元素邊框之外的空白區(qū)域，通過外邊距可以為元素創(chuàng)建額外的“空間”。默認不能被其他元素所占據(jù)，用于拉伸兩個元素間的距離。
語法：margin: 值；
單邊設置：margin-方向（top/right/bottom/left）:值；
取值：
重新制定元素尺寸計算模式
屬性：box-sizing
取值：
屬性：resize
取值：
位于元素邊框之外的一條線
屬性：
outline：width style color;
屬性：box-shadow
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
取值：由一組值構成的值列表
屬性：background-color
取值：顏色值或transparent
注意：背景顏色是從邊框位置處開始繪制
屬性：background-image
取值：url(背景圖像URL)
屬性：background-repeat
取值：
屬性：background-attchment
取值：
scroll：默認值，滾動
fixed：固定
屬性：background-position
取值：
屬性：background-size
取值：
屬性：background-origin
取值：
屬性：background-clip
取值：
CSS3多背景通過為每個背景屬性提供多個屬性值實現(xiàn)。
font 簡寫屬性語法：
將所有字體屬性合寫為一行，其中font-family是復合屬性中必不可少的屬性。
可以不設置其中的某個值，如果省略值地話，就使用屬性的默認值。
②文本屬性：
（2）CSS3文本陰影屬性：
屬性：text-shadow
作用：產(chǎn)生陰影和模糊主體
語法：
作用：定義列表的編號樣式
屬性：list-style-type
作用：用于設置列表項的圖像屬性
語法：
圖像URL地址：圖像的相對路徑或絕對路徑
none：默認值，不指定圖像
注意：圖片圖標與文字之間的距離在不同瀏覽器中是不一樣的，因此，一般情況下不采用這種方式來設置列表的圖片樣式。
通過設置li的背景圖片的方式來設置列表圖片基本步驟：
設置list-style-type屬性值為none
設置li標記的背景屬性backgruond
作用：用于聲明列表標志相對于列表項內容的位置
語法：
作用：可以同時設定列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。
語法：
注意：
可以不設置其中的某個值，未設置的屬性采用默認值
同時指定list-style-image和list-style-type時，list-style-image優(yōu)先顯示，除非list-style-image設置為none，或圖片路徑錯誤無法顯示
當列表與列表項目同時使用樣式時，列表項目的樣式優(yōu)先顯示
特點：
可以設置寬度和高度
默認情況下每個塊級元素獨占一行
作用：
塊級元素主要用于頁面布局
常用塊級元素：
div、p、h1~h6、ol、ul等
特點：
不可以設置寬度和高度，其寬度就是自身文字或圖片的寬度
默認情況下多個行內元素會在一行內顯示，遇父元素邊界時會自動換行
作用：
行內元素主要用于設置文樣式
常用行內元素：
a、span、em、b、i、strong、img、input等
作用：控制頁面元素脫離原有文檔流，實現(xiàn)向左或向右移動，直到該元素外邊緣碰到其包含框或另一個浮動框的邊緣停止，標準流中的其他盒子將頂?shù)礁雍凶拥奈恢谩８拥脑夭徽紦?jù)實際空間。
屬性： float
取值：
浮動元素不會相互重疊；
浮動元素不會上下浮動，如果一個浮動元素在另一個浮動元素之后顯示，而且會超出容納塊，則它下降到低于先前任何浮動元素的位置。
作用：規(guī)定元素的哪一側不允許出現(xiàn)其他浮動元素。
取值：
作用：控制頁面元素在頁面中的位置。
屬性：position
取值：static/relative/absolute/fiexed
默認屬性值，元素按照標準文檔流進行排列，塊級元素獨占一行， 行內元素位于一行內顯示，一行顯示不下，自動換行。
特點：
相對于自身原有位置進行偏移
仍處于標準文檔流中
隨即擁有偏移屬性和z-idex屬性
偏移屬性:
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
當元素相對定位后會產(chǎn)生Z軸上的堆疊，不設置z-index屬性時，默認該元素出現(xiàn)在X軸和Y軸構成的平面上。
特點：
建立了以包含塊為基準的定位
絕對定位的元素的位置相對于最近的已定位祖先元素（設定了絕對定位、相對定位或固定定位中的任何一種），如果元素沒有已定位的祖先元素，則該元素的位置相對于瀏覽器窗口。
完全脫離了標準文檔流
隨即擁有偏移屬性和z-idex屬性
偏移屬性：
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
絕對定位未設置偏移量的特點：
無論是否存在已經(jīng)定位的祖先元素，都保持在元素的初始位置
脫離了標準文檔流
設定固定定位的元素框的表現(xiàn)類似于將position設置為absolute，不過其包含塊是瀏覽器窗口本身。
在計算機顯示中把垂直于屏幕平面的方向稱為Z方向，CSS絕對定位容器的z-index屬性即對應該方向。
作用：用于控制元素的層疊次序，使得某個元素浮于其他元素之上。
語法：
auto：遵循其父元素的定位
number：整數(shù)，可負，值大者疊加在上層
注意：使用z-index屬性時，要求該元素的position屬性值為absolute、relative或fixed。
作用：用于定義建立布局時元素生成的顯示框類型
語法：dispaly:值;
作用：用于定義建立布局時元素生成的顯示框類型
語法：visibility:值;
CSS顯示一個大圖片中的多個小圖標，主要是用background-position這個屬性來控制的。
首先先將放置背景小圖標的元素的大小設置成圖片里圖標的實際大小，用width和height設置，然后用background-image把背景圖片放進去，比如：
.showImage{
background-image:?url(9pic2.jpg);
width:?100px;
height:?100px;
}
然后用background-position屬性調整背景圖片的位置，它有兩個值分別表示背景圖片沿著x和y軸移動的距離。
擴展資料
CSS 規(guī)則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
選擇器就是需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成，屬性是設置的樣式屬性（style attribute），每個屬性都有一個值，屬性和值用冒號分隔。CSS 聲明總是以分號 ; 結束，聲明組以大括號 {...} 括起來。為了讓 CSS 可讀性更強，可以每行只描述一個屬性。
CSS 注釋是用來解釋代碼，并且可以隨意編輯，瀏覽器會忽略它。CSS注釋以 "/*" 開始，以 "*/" 結束。
當讀到一個樣式表時，瀏覽器會根據(jù)它來格式化 HTML 文檔。CSS 創(chuàng)建樣式表有三種方法：內聯(lián)樣式、內部樣式、外部樣式。
重慶分公司
重慶分公司
