整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
片
當(dāng)我們在制作頁面的時候，通常會遇到圖片的三種表現(xiàn)形式，如下：
1、內(nèi)容圖片
內(nèi)容圖片是頁面中真正的內(nèi)容，沒有內(nèi)容圖片，就無法完整的理解頁面內(nèi)容。如淘寶網(wǎng)上的商品展示圖片，這些圖片是網(wǎng)頁的一部分，它們能幫助你決定這個頁面的內(nèi)容是否是你需要的。
內(nèi)容圖片
2、布局圖片
布局圖片出現(xiàn)在頁面背景中，要想理解頁面的內(nèi)容，它們不是必須的。如蘋果官網(wǎng)的這個圖片，沒有這個圖片也能理解頁面上文字描述的內(nèi)容是什么意思。
布局圖片
3、交互圖片
圖中用紅色框起來的圖片會給你瀏覽頁面的時候帶來一些幫助，如搜索圖片，一看到就知道這里可以搜索想要的東西，購物車圖片可以看到選購的產(chǎn)品，箭頭圖片點擊可以看到更詳細(xì)的產(chǎn)品等。
交互圖片
在HTML中我們用 img 標(biāo)簽創(chuàng)建圖片，英文是image的縮寫。
<img src="" alt="">
內(nèi)容圖片
布局圖片是在CSS中被創(chuàng)建出來的，使用CSS中的background屬性，如：
1）background-color 定義背景顏色，設(shè)置背景圖片時，要始終設(shè)置背景顏色，確保背景圖片沒有成功時會顯示一個背景顏色
2）background-image 可以指向一個相對路徑或者絕對路徑來添加圖片。
3）background-repeat可以設(shè)置背景是否平鋪在容器中，包含四個關(guān)鍵字：
4）background-position 屬性可以控制背景圖片顯示在什么位置，包含兩個關(guān)鍵字，如：
background-position：top left 設(shè)置圖片顯示在容器的左上角，第一個關(guān)鍵字可以是top、center、bottom，第二個關(guān)鍵字可以是left、center、right
CSS中和背景相關(guān)的屬性可以簡寫在一行中，如：
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是圖片的顏色color，image，position，repeat，CSS屬性能用簡寫就盡量用簡寫，簡寫比分開寫性能更高。
布局圖片
Web上最常用的三種圖像格式
1）Jpeg 可以展示一張照片或者復(fù)雜圖像
2）png最適合展示網(wǎng)頁插畫、logo和網(wǎng)頁小圖標(biāo)
3）gif適合展示網(wǎng)頁插畫、logo和網(wǎng)頁小圖標(biāo)
建議：
一般情況下用戶交互圖片都是一些小圖標(biāo)，所以使用png或gif作為用戶交互圖片；使用CSS的background屬性以背景圖片的形式為網(wǎng)頁添加用戶交互圖片；推薦把用戶交互圖片放在同一個文件中，可以提高網(wǎng)絡(luò)和服務(wù)器性能，如：
交互圖片
交互圖片
具體如何操作呢？后續(xù)教頭會通過視頻給大家詳細(xì)演示，請繼續(xù)關(guān)注。
CSS中，背景樣式主要包括背景顏色和背景圖像。在傳統(tǒng)的布局中，只能使用少數(shù)的標(biāo)簽來定義背景圖像和背景顏色。但是隨著Web2.0時代的到來，設(shè)置背景樣式不再使用傳統(tǒng)HTML屬性來定義，轉(zhuǎn)而使用無限制、更靈活的CSS來定義。
目標(biāo)
在CSS中，使用background-color屬性來定義元素的背景顏色。
語法：background-color:顏色值;
說明：顏色值是一個關(guān)鍵字或一個16進制的RGB值。
HTML標(biāo)簽
背景顏色設(shè)置
效果
在CSS中，使用background-image屬性來定義元素的背景圖片。
語法：background-image:url("圖像地址");
說明：圖像地址可以是相對地址，也可以是絕對地址。
注意：給某個元素設(shè)置背景圖像，元素要有一定的寬度和高度，背景圖片才會顯示出來。如果設(shè)置的元素的寬高過小，背景圖片就無法完整地顯示出來了。
設(shè)置背景圖片
效果
在CSS中，使用background-repeat屬性可以設(shè)置背景圖像是否平鋪，并且可以設(shè)置如何平鋪。
語法：background-repeat:取值;
取值
當(dāng)值是repeat，全屏覆蓋
全屏覆蓋
當(dāng)值是repeat-x，x軸方向覆蓋
x軸方向覆蓋
當(dāng)值是repeat-y，y軸方向覆蓋
y軸方向覆蓋
當(dāng)值是no-repeat，不復(fù)制
不復(fù)制
在CSS中，使用background-position設(shè)置背景圖像的位置
語法：background-positon:像素值/關(guān)鍵字;
說明：語法中的取值包括兩種，一種是采用像素值，另一種是關(guān)鍵字描述。
1. 像素值
要設(shè)置水平方向數(shù)值（x軸）和垂直方向數(shù)值（y軸），參數(shù)如下
取值
假設(shè)設(shè)置一個距離左上角水平方向100px，垂直方向100px
背景圖片位置設(shè)置
效果如下
效果
2. 關(guān)鍵字
當(dāng)background-position取值為關(guān)鍵字時，也需要設(shè)置水平方向和垂直方向的值，只不過值不是使用px為單位的數(shù)值，而是使用關(guān)鍵字代替。
取值
假設(shè)我們要設(shè)置一個水平方向、垂直方向都居中的位置，就可以這樣設(shè)置
背景圖片位置設(shè)置
這樣他就永遠(yuǎn)都處于屏幕的正中間
效果
在CSS中，使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對象滾動還是固定不動
語法：background-attachment:scroll/fixed;
說明：background-attachment 屬性只有2個屬性值。scroll表示背景圖像隨對象滾動而滾動，是默認(rèn)選項；fixed表示背景圖像固定在頁面不動，只有其他的內(nèi)容隨滾動條滾動。
背景固定設(shè)置
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁面</title>
/*總體的樣式*/
<style>
/*盒子樣式*/
#box{
width: 350px; //寬
height: 450px; //高
border: 1px solid black; //邊框
border-radius: 10px; //邊框弧度
font-family: 黑體; //字體
letter-spacing:8px; //段間距
word-spacing: 10px; //字間距
line-height: 40px; //行高
font-size: 18px; //字大小
padding: 20px; //內(nèi)邊框
}
/*給'注冊'賦予樣式*/
.register{
width:280px ; //寬
height: 50px; //高
background-color: skyblue; //背景顏色
border-radius: 10px; //邊框弧度
}
/*將所有邊框都改變*/
*{
border-radius: 5px; 邊框弧度
}
/*使用class選擇器，賦予number寬高和邊框*/
.number{
width: 185px; //寬
height: 27px; //高
border-width: 1px; //邊框?qū)挾?
}
/*id選擇器*/
#two{
width: 55px; //寬
border-width: 1px; 邊框?qū)挾? }
/*id選擇器*/
#phone{
width: 103px; //寬
}
/*class 選擇器*/
.boxs{
zoom: 75%; //清除浮動
color: darkgray; //顏色
}
/*class選擇器*/
.box_a{
width: 50px; //寬
height: 50px; //高
background-image: url("../image/04.jpg "); //背景圖片
background-repeat: no-repeat; // 是否平鋪
background-size: 50px 25px; //背景尺寸
position: relative; //定位 相對定位
left: 310px; //定位后左移
bottom: 32px; //定位后下移
}
</style>
</head>
<body>
<div id="box">
<h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
<label for="name">用戶名</label>
<input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
<label for="phone">手機號</label>
<select name="" id="two" class="number">
<optgroup>
<option style="" class="">+86</option>
</optgroup>
</select>
<input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
<label for="mima">密?碼</label>
<input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
<label for="mima">驗證碼</label>
<input type="password" placeholder="請輸入驗證碼" id="is" class="number">
<div class="box_a"></div>
<div class="boxs">
<input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
</div>
<input type="submit" value="注冊" class="register" >
</form>
</div>
</body>
</html>
在這里插入圖片描述*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
