軟件
DW
編譯代碼的軟件
PS
切圖 修圖
瀏覽器
chrome 谷歌
firefox 火狐 FF
IE
設(shè)計(jì)
出設(shè)計(jì)圖的
前端
還原設(shè)計(jì)圖
后臺(tái)
內(nèi)容 數(shù)據(jù)
DW的操作
新建 ctrl + n
保存 ctrl + s
查看 F12/Fn + F12
瀏覽器的操作
刷新
F5/Fn + F5
在頁(yè)面中 多個(gè)換行或者空格都當(dāng)做一個(gè)空格來(lái)處理
標(biāo)簽
標(biāo)題標(biāo)簽
h1
段落標(biāo)簽
P 有默認(rèn)間距
換行標(biāo)簽
br
鏈接標(biāo)簽
a
<a href="網(wǎng)址"></a>
<a href="#"></a>
提示文字
title="我想提示的文字"
圖片標(biāo)簽
img
當(dāng)寬高給一個(gè)值的時(shí)候 等比縮放
title
無(wú)論圖片是否路徑正確 都會(huì)顯示
alt
只有當(dāng)圖片路徑錯(cuò)誤的時(shí)候才會(huì)顯示
width
寬度
height
高度
border
邊框
空標(biāo)簽
div
雙標(biāo)簽
<h1></h1>
<p></p>
<a href="#"></a>
單標(biāo)簽
<br />
屬性
公有屬性
title
私有屬性
border alt width height src
href
css
使樣式更豐富
style="樣式名：樣式值;"
; 代表結(jié)束
px 單位
color 顏色
英文
yellow
十六進(jìn)制
#ccff34(推薦使用)
簡(jiǎn)寫
#00 99 cc 09c
#32bf5p
#ff0000 f00 紅色
#666666 666
#000000 000 黑色
#ffffff fff 白色
rgb
rgb(0-255,0-255,0-255)
邊框
border
width style color
2px solid(實(shí)線) red
dashed（虛線）
dotted（點(diǎn)劃線）
border-left 左邊框
border-right 右邊框
border-top 上邊框
border-bottom 下邊框
文本水平對(duì)齊方式
text-align
left 左
right 右
center 中
line-height
當(dāng)它的值等于高度的值得時(shí)候 垂直居中
ps的操作
放大 ctrl +++++
縮小 ctrl —————
放大/縮小 alt + 滾輪
拖動(dòng)圖片 空格+鼠標(biāo)
修改選區(qū) 空格+鼠標(biāo)
選區(qū)快捷鍵 m
查看信息 F8
復(fù)制 ctrl + c
新建 ctrl + n
粘貼 ctrl + v
保存成jpg
ctrl+t 把圖片上面的東西抹掉
用移動(dòng)工具選擇圖 用選框工具選中在復(fù)制；
透明的圖{新建的時(shí)候背景選透明} PNG 不透明的 JPG
ctrl+h 把所有的線去掉
路徑
相對(duì)路徑
background-image:url(images/xue.jpg)；
絕對(duì)路徑
background-image:url(file:///E|/2016-9-26%20%E5%85%A8%E6%97%A5%E5%88%B6%20css/2016-9-27/images/xue.jpg);
windows
/\
linux
/
都要用/
background-color 背景顏色
background-image 背景圖片
background-repeat 背景重復(fù)
background-position 背景定位
background-position:
數(shù)字(x y)
英文
只給一個(gè)值的時(shí)候 第二個(gè)值默認(rèn)居中
標(biāo)簽
span空標(biāo)簽 沒有樣式
i，em 傾斜標(biāo)簽
i
傾斜標(biāo)簽
em
傾斜標(biāo)簽
b
加粗標(biāo)簽
strong
加粗標(biāo)簽
span
正常標(biāo)簽
xhtml規(guī)范
必須有文檔頭
img標(biāo)簽必須有alt
雙標(biāo)簽必須閉合
單標(biāo)簽必須合理閉合
標(biāo)簽名和標(biāo)簽屬性必須小寫
標(biāo)點(diǎn)符號(hào)必須用英文 引號(hào)必須用雙引號(hào)
charset
字符集
utf-8 國(guó)際編碼
gb2312/gbk 中國(guó)編碼
author 作者
copyright 版權(quán)
keywords 關(guān)鍵詞
description 介紹
font-style:normal;
取消斜體
italic
斜體
font-weight:normal;
取消加粗
bold
加粗
font-size
字體大小
font-family
字體
中文
英文
unicode
background：url() repeat left center #00;
font:italic bold 24px '楷體';
font:italic bold 24px/200px '楷體';
塊元素
div p h1-h6 ul li ol dl dt dd
支持寬高
獨(dú)占一行
不受換行和空格的影響
當(dāng)不給寬度的時(shí)候?qū)挾葏⒄崭讣?jí)
行內(nèi)元素
span a i em strong b
不支持寬高
合并到一行
受換行和空格的影響
寬高由內(nèi)容撐開
行內(nèi)塊
img
支持寬高
合并到一行
受換行和空格的影響
查看元素
F12
去除下劃線
text-decoration:none;
增加下劃線
text-decoration:underline;
增加上劃線
text-decoration:overline;
增加中劃線
text-decoration:line-through;
選擇器
標(biāo)簽選擇器
div{}
類選擇器 class="baidu"
.baidu{}
id選擇器 id="baidu"
#baidu{}
同樣的ID在頁(yè)面中只允許出現(xiàn)一次
群組選擇器
div,p,span{}
嵌套選擇器
div p span{}
通配符
*
給所有標(biāo)簽加樣式
html注釋
css注釋
/* */
js注釋
//
省略號(hào)
white-space:nowrap; 強(qiáng)制不換行
overflow:hidden; 溢出隱藏
text-overflow:ellipsis; 省略號(hào)
font-family:'微軟雅黑'
必須給寬度
轉(zhuǎn)化
display:block 把當(dāng)前元素轉(zhuǎn)化成塊元素
display:inline 把當(dāng)前元素轉(zhuǎn)化成行內(nèi)元素
display:inline-block 把當(dāng)前元素轉(zhuǎn)化成行內(nèi)塊元素
行內(nèi)元素即使轉(zhuǎn)化成塊 也不能包塊
嵌套規(guī)則
塊元素能包所有標(biāo)簽
p標(biāo)簽只能包行內(nèi) 不允許包塊
行內(nèi)元素只能包行內(nèi) 不能包塊
行內(nèi)元素不能包自己
a能包所有的標(biāo)簽 但是不能包自己
img可以被所有標(biāo)簽包
（偽類）別的標(biāo)簽也能用；
a:link 未訪問
a:visited 訪問過后
a:hover 當(dāng)鼠標(biāo)放上去的時(shí)候
a:active 點(diǎn)鼠標(biāo)點(diǎn)擊的時(shí)候
順序 l v h a
繼承
只有和文字相關(guān)的樣式才能繼承
b strong h1-h6不能繼承加粗
i em不能繼承傾斜
a不能繼承顏色
margin 外邊距/外補(bǔ)白
四個(gè)方向
left 左邊距
right 右邊距
top 上邊距
bottom 下邊距
margin拖拽
.div1{margin-top:20px;}
<div class="box">
<div class="div1"></div>
</div>
解決
給父級(jí)box一個(gè)border
給父級(jí)box一個(gè)overflow:hidden
給父級(jí)用padding 同時(shí)父級(jí)減去高度的值
margin合并
上下取最大值 左右不合并，相加。
塊元素支持四個(gè)方向
行內(nèi)元素支持左右
給一個(gè)值的時(shí)候 上 右 下 左
兩個(gè)值 上下 左右
三個(gè)值 上 左右 下
四個(gè)值 上 右 下 左
無(wú)序列表
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
定義列表
<dl>
<dt></dt> 標(biāo)題
<dd></dd> 內(nèi)容
</dl>
語(yǔ)義化
h1-h6 標(biāo)題
p 段落
a 鏈接
img 圖片
ul 無(wú)序列表
ol 有序列表
dl 定義列表
strong 強(qiáng)調(diào)
em 強(qiáng)調(diào)
無(wú)語(yǔ)義化
div span i b
字體英文
宋體：SimSun
微軟雅黑體：Microsoft YaHei
楷體：KaiTi
黑體：SimHei
padding
內(nèi)邊距/內(nèi)補(bǔ)白
padding-top 上內(nèi)邊距
padding-left 左內(nèi)邊距
padding-right 右內(nèi)邊距
padding-bottom 下內(nèi)邊距
給一個(gè)值的時(shí)候 上 右 下 左
兩個(gè)值 上下 左右
三個(gè)值 上 左右 下
四個(gè)值 上 右 下 左
塊元素支持四個(gè)方向的padding
行內(nèi)只支持左右 不支持上下
優(yōu)先級(jí)/權(quán)重
id class 標(biāo)簽
1000 100 10
行間樣式>id>class>標(biāo)簽>*
浮動(dòng)
合并到一行 同級(jí)元素最好都浮動(dòng)
脫離文檔流
寬度盡可能的窄 窄到內(nèi)容的寬度（不給寬度）
行內(nèi)會(huì)變成塊
文本環(huán)繞
寬度不夠掉下來(lái)
盡可能的往上飄（高度和位置是根據(jù)前一個(gè)判定）
浮動(dòng)有方向
float
left; 左浮動(dòng)
right; 右浮動(dòng)
none
清除浮動(dòng) overflow:hidden;
清浮動(dòng)
overflow:hidden 加給父級(jí)
在同級(jí)元素下面加一個(gè)空的div 給div clear:both;
終極版清浮動(dòng)：（必須都用這個(gè)）
.clearFix:after{ display:block; content:''; clear:both;}
.clearFix{ zoom:1;}
必須寫的默認(rèn)樣式
*{ margin:0; padding:0;}
li{ list-style:none;}
a{ text-decoration:none;}
img{ display:block;}
.clearFix:after{ content:''; display:block; clear:both;}
.clearFix{ zoom:1;}
.fl{ float:left;}
.fr{ float:right;}
<link type=" text/css" href="" rel="stylesheet" />
index 首頁(yè)
base 里面寫清除默認(rèn)樣式的
text-indent 首行縮進(jìn)
em 1em等于一個(gè)字符
px 正常的像素值
可以為負(fù)值
最好不要給超過7位數(shù)
a不回頭部 a href="javascript:;"
cursor:pointer; 小手
定位
position:
relative; 相對(duì)定位
1.相對(duì)于自己定位
2.不脫離文檔流
3.不改變?cè)氐谋举|(zhì)
absolute; 絕對(duì)定位
1.脫離文檔流
2.如果說父級(jí)有定位 它參照父級(jí) 否則參照body
（逐層往上找）也就是（一層一層往上找）
3.寬度盡可能盡可能的窄 窄到內(nèi)容的寬度
4.行內(nèi)變成塊
層級(jí)
z-index：2的32次方
z-index必須在有定位的時(shí)候才好使
后寫的層級(jí)比先寫高
子級(jí)在父級(jí)上面
局對(duì)居中
div{ width:200px; height:200px; background:#f00;
position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px;}
position:absolut; left:50%; top:50%;
margin-left:-width/2; margin-top:-height/2;
display:none; 隱藏
display:block; 顯示
透明度
opacity:(0-1)
filter:alpha(opacity:0-100)
固定定位
position:fixed;
脫離文檔流
行內(nèi)變成塊
寬度盡可能的窄 窄到內(nèi)容的寬度
根據(jù)可視區(qū)域定位
雪碧圖
記得給負(fù)值
減少請(qǐng)求
表單提交
form
action="網(wǎng)址"
method
get 不安全
post 相對(duì)安全
如果說你想提交 那么你就要加name
value 提示
input
type
text 文本框
password 密碼
submit 提交（一般提交/保存 用）
button 按鈕（一般 取消/等 用）
radio 單選框 label
name（需要一樣） for=“id”
id
value
checkbox
{checked="false" 不選中
"true" 選中
"checked" 默認(rèn)選中}
多選框 label
name for=“id”
id
value
hidden 悄悄話
image 圖片
file 上傳
value 提示
placeholder 提示
select
option 加value 兼容
input
outline:none; 取消焦點(diǎn)
textarea
resize:none; 不可拖拉
表格
table
thead 表頭
tr
th
tbody 表身
tr
td
tfoot 表尾
tr
td
cellspacing="0" cellpadding="0" 清除間距
border-collapse:collapse; 合并單元格
colspan 橫向合并
rowspan 縱向合并
valign垂直對(duì)齊
middle 居中
top 上
bottom 下
align水平對(duì)齊
center 中
left 左
right 右
默認(rèn)左右居左 上下居中
框架
iframe
src="網(wǎng)址"
width
height
frameborder="0" 取消邊框
scrolling="no" 取消滾動(dòng)條
框架集
frameset
frame
src=""
有frameset就沒body 他倆不能共存
frameborder加在frameset身上 取消邊框
scrolling加在frame身上 取消滾動(dòng)條
src后面的東西src="網(wǎng)址/本地"
src里面所引用的東西 必須是存在的
事件：
onclick 當(dāng)點(diǎn)擊的時(shí)候
on 當(dāng)
click 點(diǎn)擊
onmouseover 當(dāng)鼠標(biāo)移入的時(shí)候
onmouseout 當(dāng)鼠標(biāo)移出的時(shí)候
alert
彈警示框
.
的
document 文檔
get Element By Id ('div1') 通過id來(lái)獲取元素
獲取 一個(gè)元素 通過 Id div1
document. get Elements By Tag Name
獲取 一組元素 通過 標(biāo)簽 名字
function(){} 匿名函數(shù)
var 變量
var 隔壁老王 = 王明陽(yáng)
=
賦值
window.onload
頁(yè)面加載完成再加載
if(我有錢){
我就吃兩個(gè)饅頭
}
else{
不吃
}
循環(huán)
var
while(){
}
length 長(zhǎng)度
this 當(dāng)前的
sass
預(yù)解析處理器
用程序的寫法來(lái)寫css
變量
$r:red;
$w:200px;
$h:400px;
$ta:center;
嵌套
.box
{ width:$w;
p{ height:$h;
span{ color:$r;}
}
}
繼承 @extend
.div1{ width:300px; height:$h; color:$r;}
.div2{ @extend .div1;}
混合宏
@mixin aaa($a,$b){
width:$a;
height:$b;
}
.nav{ @include aaa((20 - 6)px,500px);}
@media screen and (max-width:900px){}
媒體 屏幕 最大
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.js"></script>
<script src="js/bootstrap.min.js"></script>
盒子模型
width height border padding
width:200px;
height:200px;
border:7px solid #f00;
padding:11px
