WEB前端開發(fā)工程師
編輯器 ?DW,Sublime,記事本
瀏覽器 火狐,IE瀏覽器......
瀏覽器插件F12
Photoshop
語言:
一.HTML:超文本標記語言 ?,與瀏覽器打交道淆九,主結構。
<meta charset="UTF–8">識別各種語言
1.標記,標簽<html>
2.單標簽<meta/><img/>
3.標簽對<html></html><body></body>
注釋:doc文件
? ? ? ? type類型
? ? ? ? px像素
? ? ? ? <brl> ?換行
二.CSS:層疊樣式表 ?起裝飾作用
<div>內容</div>加格子
<div style="width:200px;">F12就可以看見格子
注釋:background:url+鏈接地址;表背景
? ? ? ? transition:1s; ? ?表過渡
三.JavaScript:腳本語言(行為)動起來
<div. onclick="this.width='800px;this.height='400px">把以前的格子改成寬800绍弟,長400的格子。
編輯器:
記事本保存時 名.html
sublime.!+Ctrl+E. 保存時 名sublime.html右鍵在瀏覽器打開著洼。Ctrl+滑動滑輪字體可變大變小晌柬。
DW
<!-- ? -->注釋html
/*? ? ? ? ? ? ? ? */注釋CSS樣式表
行間樣式表<div ? ?style=" ? ? ?">內容 ? ? ? ?</div>
內部樣式表<style>
#div{
width:100px;height:100px;
}
</head>
<body>
<div id="div1">aa</div>
</body>
外部樣式表
新建
#div1{
width:100px;
background:red;
}
之后
在<head>之前
<link rel="stylesheet" ?ref="名.css">
<body>
<div ?id="div1">內容</div>
</body>
單一樣式
background-color:顏色單詞/# ?十六進制/rgb( ? )
background-image:url()鏈接圖片
/* ? 默認狀態(tài)下姥份,背景會平鋪 ?*/
background-repeat:no-repeat/repeat-x/repeat-y;
/* ? 重復 ? ?*/
background-position:100px ? 30px;100% ?30%;
X ? left center ?right
Y ? top ?center bottom
如果left其余的那個默認居中;如果bottom其余的默認居中年碘。
background-attachment:fixed或scroll;固定背景或滑動背景 。
復合樣式
background:#ccc ?url(鏈接地址) no-repeart展鸡;
邊框
border: ?1px ?dashed虛線或solid實線或dotted點畫線 #033
/* 復合樣式 ? ? ?*/
border-right:
border-top:
brder-left:
border-bottom:
PS技術
切圖測量圖片簡單處理
印屏幕 ?prtsc sysrq
瀏覽器插件F12
快捷鍵
切入 ?Alt+Tab?
復制 Ctrl+V
粘貼 新建 Ctrl+N
放大縮小Ctrl+Ctrl-
刪除 ?Alt+delete
ctrl+z
取消邊框ctrl+D
抹掉Ctrl+t 回車或雙擊 ? ?Ctrl+D