HTML
- 標(biāo)簽
<html> <img/> - 單標(biāo)簽
<meta/>
換行符 - 標(biāo)簽對(duì)
<html></html> - 常用標(biāo)簽對(duì)
<head></head> 頭部
<body></body> 內(nèi)容
<title>標(biāo)題<title> 標(biāo)題
<div></div> 塊狀
<!doctype html> 開頭聲明類型
<meta charset="UTF-8"/> 字符集(寫在headn內(nèi))
- 注釋
<!-- HTML 注釋-->
CSS 層疊樣式表
- 標(biāo)準(zhǔn) 屬性+冒號(hào)+值+分號(hào)
<div style="width : 200px;
height:200px;
background:red;
boder : 8px solid red;
backgroud : url(http://xxxx);
transition:1s;
">
</div>
-注釋
/*xxxx*/
JavaScript 腳本語(yǔ)言
- 行為+=+""+屬性+=+' '+值
<div onclick="this.style.width = '800px'; "></div>
id選擇符 樣式表位置
id選擇符
//標(biāo)簽名字
<div id="div1">aa</div>
樣式表
//行間樣式表，只適用于單個(gè)塊級(jí)元素
<div style="width:100px; height:200px; font-size:30px;">aaa<br/>bbbbbbbbb</div>
//內(nèi)部樣式表,寫于</head>前面,#代表取出名字為div1的樣式的元素
<style>
#div1{
width:300px
}
</style>
//外部樣式表
<link rel="stylesheet" href="123.css"/>
常見樣式
顏色值模式
//顏色單詞
#div1{
width:200px;
height:200px
background-color:red
}
//16進(jìn)制
#div1{
width:200px;
height:200px
background-color:#222
}
//rgb模式
#div1{
width:200px;
height:200px
background-color:rgb(140,164,234)
}
背景圖片
#div1{
width:200px;
height:200px
/*默認(rèn)狀態(tài)下平鋪*/
background - image:url(img/1.jpg)
/*
no-repeat 不重復(fù)
repeat-x 水平平鋪
repeat-y 垂直平鋪
*/
backgroud-repeat:no-repeat;
/*
背景定位:x y 坐標(biāo)
: 50% 30% 父控件的百分比
: right top 靠右邊 靠上邊(默認(rèn)為center )
*/
backgroud-position:100px 30px;
/*
scroll 滾動(dòng)(默認(rèn))
fixed 固定
*/
backgroud-attachment:scroll
}
/*背景圖片超出部分默認(rèn)裁剪*/
/*單一樣式*/
/*backgroud-attachment:scroll */
/*復(fù)合樣式*/
/*backgroud:scroll red no-repeat */
邊框
#div1{
width:200px;
height:200px
/*
10px 粗細(xì)
solid 實(shí)現(xiàn) dotted 點(diǎn)劃線 dashed 虛線
red 顏色
boder-top: 只有上邊有邊框
*/
boder:1px dashed #033;
}
