三部分 附錄(因為暫時不支持插入超鏈接所以部分內容無法顯示)
附錄一 DIV命名規范
附錄二 CSS精靈
a { display:block; width:200px; height:65px; line-height:65px; /*定義狀態*/ text-indent:-2015px; /*隱藏文字*/ background-image:url(button.png); /*定義背景圖片*/ background-position:0 0; /*定義鏈接的普通狀態,此時圖像顯示的是頂上的部分*/ } a:hover { background-position:0 -66px; /*定義鏈接的滑過狀態,此時顯示的為中間部分,向下取負值*/ } a:active { background-position:0 -132px; /*定 義鏈接的普通狀態,此時顯示的是底部的部分,向下取負值*/ }
附錄三 一些tips解決方案
頁面優化實踐
寫DIV+CSS 的一些常識
常用代碼片段
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; }
<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
<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;
.fix{zoom:1;} .fix:after{ display:block; content:'clear'; clear:both; line-height:0; visibility:hidden; }
一些總結
一些概念
學習從來不是一個人的事情,要有個相互監督的伙伴,想要學習或交流前端問題的小伙伴可以私信“學習”小明加群獲取2019web前端最新入門資料,一起學習,一起成長!
過CSS背景屬性,可以給頁面元素添加背景樣式。
背景屬性可設置背景顏色、背景圖片、背景平鋪、背景圖片位置、背景圖像固定等。
background-color:rgb值或顏色單詞;
默認背景顏色值為transparent(透明)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景屬性</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
}
/* 背景顏色 */
.bg-color {
background-color: transparent;
}
.bg-color-trans {
text-align: center;
background-color: pink;
width: 100px;
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="bg-color">背景顏色
<div class="bg-color-trans">透明背景</div>
</div>
</body>
</html>
效果:
Background-image:圖片路徑URL;
默認背景圖片值為none。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景屬性</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
}
.bg-image {
background-image: url(../images/meitizhub.jpg);
}
</style>
</head>
<body>
<div class="bg-image">背景圖片</div>
</body>
</html>
效果:
background-repeat:repeat | no-repeat | repeat-x | repeat-y
background-repeat:repeat;
默認情況下背景圖片狀態為平鋪,指的是圖片會從左向右且從上到下整個鋪滿盒子。
background-repeat:no-repeat;
關閉默認平鋪狀態,只在盒子左上角顯示一個完整的背景圖片。
background-repeat:repeat-x;
沿著x軸方向在盒子內最頂部橫向平鋪背景圖片。
background-repeat:repeat-y;
沿著y軸方向在盒子內最左側縱向平鋪背景圖片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景屬性</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
}
.bg-repeat {
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="bg-image">背景平鋪默認值</div>
<div class="bg-image bg-repeat">背景不平鋪</div>
<div class="bg-image bg-repeatx">x軸方向平鋪背景圖片</div>
<div class="bg-image bg-repeaty">y軸方向平鋪背景圖片</div>
</body>
</html>
效果:
background-position:x y;
x軸和y軸的值可以是方位名詞或者精確數值都可。
方位名詞:top、bottom、center、left、right。
當屬性值使用方位名詞時如果只寫一個值,則第二個值默認為居中狀態。
當屬性值使用精確數值時如果只寫一個值,則默認是x軸方向的值,y軸方向默認垂直居中。
如果參數是方位詞和精確單位混合使用時,默認第一個值是x值,第二個是y值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景屬性</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
}
.bg-position {
background-repeat: no-repeat;
background-position: center top;
}
.bg-position2 {
background-repeat: no-repeat;
background-position: right;
}
.bg-position3 {
background-repeat: no-repeat;
background-position: 20px 50px;
}
.bg-position4 {
background-repeat: no-repeat;
background-position: 20px ;
}
.bg-position5 {
background-repeat: no-repeat;
background-position: 80px bottom ;
}
</style>
</head>
<body>
<div class="bg-image bg-position">背景圖片存放位置1</div>
<div class="bg-image bg-position2">背景圖片存放位置,設置一個值</div>
<div class="bg-image bg-position3">背景圖片存放位置精確單位值</div>
<div class="bg-image bg-position4">背景圖片存放位置精確單位值</div>
<div class="bg-image bg-position5">背景圖片存放位置混合使用</div>
</body>
</html>
效果:
background-attachment:scroll | fixed;
背景圖像在頁面的某一處固定不動或者隨頁面的其余部分滾動。可以制作視差滾動效果。
background-attachment:scroll ;
默認值,背景圖像固定在頁面上,隨著滾動條滾動而移動。
background-attachment:fixed;
背景圖像固定在某一區域,滾動條滑動時位置不變。
body {
background-image: url(../images/43619545307190.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
background:背景顏色、背景圖片地址、背景平鋪、背景圖像滾動、背景圖片位置;
沒有特定書寫順序,按需使用屬性。
實現背景顏色半透明效果。
background:rgb(0,0,0, 0.3);
最后一個參數是alpha透明度,取值范圍在0~1之間。
總結:
屬性 | 定義 | 值 |
Background-color | 背景顏色 | Rgb值 | 十六進制 | 顏色英文單詞 |
Background-image | 背景圖片 | Url(圖片路徑) |
Background-repeat | 背景平鋪 | Repeat | no-repeat |repeat-x |repeat-y |
Background-position | 背景固定 | x軸和y軸。方向名詞或者精確數值 |
Background-attachment | 背景附著 | Scroll(固定在頁面上)| fixed(與滾動條固定) |
背景復合寫法 | 代碼簡潔 | 背景顏色、圖片地址、平鋪、 滾動、位置。 |
背景顏色半透明 | 顯示效果 | Background:rgba(0,0,0,0~1) |
<!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; //內邊框
}
/*給'注冊'賦予樣式*/
.register{
width:280px ; //寬
height: 50px; //高
background-color: skyblue; //背景顏色
border-radius: 10px; //邊框弧度
}
/*將所有邊框都改變*/
*{
border-radius: 5px; 邊框弧度
}
/*使用class選擇器,賦予number寬高和邊框*/
.number{
width: 185px; //寬
height: 27px; //高
border-width: 1px; //邊框寬度
}
/*id選擇器*/
#two{
width: 55px; //寬
border-width: 1px; 邊框寬度
}
/*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">閱讀并接受協議<br>
</div>
<input type="submit" value="注冊" class="register" >
</form>
</div>
</body>
</html>
在這里插入圖片描述
*請認真填寫需求信息,我們會在24小時內與您取得聯系。