【HTML+CSS】web前端工程師
web前端開發工程師
1、web前端開發工程師是做什麼的？
與網站打交道
2、成為一名web前端開發工程師具備的條件
1、興趣
2、敲程式碼
3、web前端開發工程師需要學習什麼
1、軟體（程式碼的鋪助工具）
瀏覽器：瀏覽器有非常多，（谷歌chrome、火狐、IE）
瀏覽器除錯工具
編輯器：寫程式碼的工具，hBullder、sublime、dreamwever
下載hBullder的地址為：http://www.dcloud.io/
點選下載按鈕，下載即可。
ps:photoshop
2、語言(計算機程式語言)
HTML:超文字標記語言的一個方式
標記（標籤）：<html></html>,/表示說話完成啦，用/表示。
文字：文字就是語言
語言：與瀏覽器溝通的一個方式
超：網頁中不關可以放文字，還可以放圖片，視訊、音樂
CSS層疊樣式表
width:200px;
height:300px;
background:red;
什麼是javascript？
JavaScript：指令碼語言（行為）（能控制的東西）:
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
這是我的第一個網頁
<div onclick="this.style.width='800px';this.style.height='500px;"style="with:200px;height:300px;background:
url(http://img63.nipic.com/file/20150420/17961491_183615304000_1.jpg)">
這是一個方塊
</body>
</html>
css一如方式—行間
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
css出現的位置：行間、內部、外部
行間樣式表：給單獨的標籤新增樣式
語法：<div style="width:100px"></div>
缺點：不利於修改
-->
例子如下：
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div style="with:100px;height: 100px;background:red;">div</div>
<div>div2</div>
</body>
</html>
</body>
</html>
css引入內部方式—內嵌
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
with:100px;
height: 100px;
background:black;
}
</style>
</head>
<body>
<!--
內部樣式表：樣式表寫了一個html檔案裡面
語法：把樣式寫在一對<style></style>標籤對當中，這個標籤對是放在html頁面裡面的
缺點：內部樣式表的作用範圍只存在當前的頁面
-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
css引入方式—外聯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<!--
外部樣式表：把樣式寫在一個單獨寫在一個單獨檔案裡，用到的時候用地址把它引進來就可以
div#10按一下tab鍵
-->
例子如下：
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
重新建立一個index.css
div{
width:100px;
height:100px;
background:blue;
}
設定邊框的第一種方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px;
height:300px;
border:1px dotted red;
}
</style>
</head>
<body>
<!--
border:1px dotted red;（位置可以切換，建議不進行切換）
邊框（border）的組成
1、邊框的粗細 1px代表
2、邊框的樣子
solid代表實線
dashed代表虛線
dotted代表點劃線（不同的瀏覽器顯示的是不一樣的）
3、邊框的顏色
red 顏色的英文單詞
#f00 顏色的16進製表示法
rgta（255,0,0,0.5） 顏色的rgb的表示法
-->
<div></div>
</body>
</html>
注：此方法在工作當中常用
設定邊框的第二種
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
/* border:1px solid red; */
/* 複合樣式 */
/* 單一樣式 */
border-width: 1px 2px 3px 4px;
border-style: solid dashed dotted solid;
border-color: red green blue black;
/*
*border-width: 1px 2px 3px 4px;
* 上邊 右邊 下邊 左邊（注：當有4個值的時候，第一個值代表上邊，第二個值代表右邊，第三個值代表下邊，第四個值代表左邊）
*border-style: solid dashed dotted solid;
* 上邊 右邊 下邊 左邊（注：當有4個值的時候，第一個值代表上邊，第二個值代表右邊，第三個值代表下邊，第四個值代表左邊）
*border-color: red green blue black;
* 上邊 右邊 下邊 左邊（注：當有4個值的時候，第一個值代表上邊，第二個值代表右邊，第三個值代表下邊，第四個值代表左邊）
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
設定第二個值得時間
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
/* border:1px solid red; */
/* 複合樣式 */
/* 單一樣式 */
border-width: 1px 2px ;
border-style: solid dashed ;
border-color: red green ;
/*
*border-width: 1px 2px ;
* 上邊/右邊 下邊/左邊(注：當有2個值得時候，第一個值代表上邊/右邊，第二個值代表下邊/右邊。其它的同理)
*border-style: solid dashed ;
* 上邊/右邊 下邊/左邊(注：當有2個值得時候，第一個值代表上邊/右邊，第二個值代表下邊/右邊。其它的同理)
*border-color: red green ;
* 上邊/右邊 下邊/左邊(注：當有2個值得時候，第一個值代表上邊/右邊，第二個值代表下邊/右邊。其它的同理)
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
設定3個值的時候
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
/* border:1px solid red; */
/* 複合樣式 */
/* 單一樣式 */
border-width: 1px 2px 3px;
border-style: solid dashed dotted;
border-color: red green blue;
/*
*border-width: 1px 2px 3px;
* 上邊 右邊/左邊 下邊 (注：當3個值得時候，第一個值代表上邊，第二個值代表右邊/左邊，第三個值代表下邊)
*border-style: solid dashed dotted;
* 上邊 右邊/左邊 下邊 (注：當3個值得時候，第一個值代表上邊，第二個值代表右邊/左邊，第三個值代表下邊)
*border-color: red green blue;
* 上邊 右邊/左邊 下邊 (注：當3個值得時候，第一個值代表上邊，第二個值代表右邊/左邊，第三個值代表下邊)
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
設定第三種邊框方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px;
height:300px;
border:1px solid red;
border-top:3px solid green;
border-right:1px solid yellow;
border-bottom-width: 10px;
}
</style>
</head>
<body>
<!--
邊框的方向
top代表上邊框
right代表左邊框
bottom代表下邊框
left代表左邊框
width代表粗細
border-top 上邊框
border-top-width代表上邊框的粗細
border-top-style代表上邊框的樣式
border-top-color代表上邊框的顏色
border-right 右邊框
border-right-width代表右邊框的粗細
border-right-style代表右邊框的樣式
border-right-color代表右邊框的顏色
border-bottom 下邊框
border-bottom-width代表下邊框的粗細
border-bottom-style代表下邊框的樣式
border-bottom-color代表下邊框的顏色
border-left 左邊框
border-left-width代表左邊框的粗細
border-left-style代表左邊框的樣式
border-left-color代表左邊框的顏色
注：工作中不建議使用此方法進行寫
-->
<div>
</div>
</body>
</html>
邊框的特徵
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:0px;
height:0px;
border:20px solid red;
border-top-color:blue;
}
</style>
</head>
<body>
<!--
邊框是什麼形狀？
邊框是一個非矩形
border:20px solid #fff;#fff代表白色即空白
-->
<div></div>
</body>
</html>
背景顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px;
height:300px;
border:10px solid red;
background-color:green;
background-color:rgba(255,107,35,1);
background-color:#008000;
}
</style>
</head>
<body>
<!--
background-color:#008000;#008000有簡寫法#080
background代表背景
background-color代表背景顏色
background-image代表背景圖片
background-repeat代表圖片是否重複
background-position代表背景圖片的位置
background-attachment代表背景圖片是否滾動
background-color代表背景顏色
顏色的單詞
rgba()
#008000代表顏色十六進位制表示法
transparent代表背景透明（預設值）
背景顏色會鋪滿整個容器
內容可以把容器的寬高撐開
背景不會佔用容器的寬高
-->
<div>
<這是一段文字>
<img src="images/img.jpg"/>
</div>
</body>
</html>
背景圖片與背景圖平鋪
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:300px;
height:300px;
border:10px solid red;
background-image:url(http://p1.so.qhimgs1.com/bdr/200_200_/t01a475e7630aaf7131.jpg);
background-repeat:no-repeat;
background-positon:5px top;
}
</style>
</head>
<body>
<!--
background-positon:left 100px;
background-position：x y;背景圖片的位置
傳數值：（背景圖片離左上角的距離）
x：
正值：從容器的左邊往右邊走的距離
負值：從容器的左邊往右邊走的距離
y：
正值：從容器的上邊往下邊走的距離
負值：從容器的上邊往上邊走的距離
傳關鍵字
x：left代表圖片在容器的左邊
center：代表圖片在容器x軸的中心
right代表圖片在容器的右邊
y:top代表圖片在容器的左邊
center代表圖片在容器y軸的中心
bottom代表圖片在容器的下邊
如果只傳一個值得花，那另一個值預設值為center
如果兩個值都不寫的話，那預設為0,0點，左上角
-->
<div>
</div>
</body>
</html>
背景圖片的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:1000px;
height:1000px;
border:10px solid red;
background-image: url(http://pic33.photophoto.cn/20141219/0005018343173598_b.jpg);
background-repeat:no-repeat;
background-position:0 10px;
background-position:center 10px;
}
</style>
</head>
<body>
<!--
background-position：x y背景圖片的位置
傳數值：（背景圖片離左上角的距離）
x：
正值 從容器的左邊往右邊走的距離
負值 從容器的左邊往右邊走的距離
y:
正值 從容器的上邊往下邊走的距離
負值 從容器的上邊往上邊走的距離
傳關鍵字
x：
left 圖片在容器的左邊
center圖片子啊容器x軸的中心
right圖片在容器的右邊
y:
top圖片在容器的上邊
center圖片在容器的y軸的中心
bottom圖片在容器的下邊
如果只傳一個值得話，那另一個值預設為center
如果兩個值都不寫的話，那預設為0,0點，左上角
-->
<div></div>
</body>
</html>
背景滾動與background複合屬性寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:800px;
height:800px;
border:10 px solid red;
background-image:url(http://pic33.photophoto.cn/20141219/0005018343173598_b.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<!--
background-attachment 背景圖片是否滾動
scroll 背景圖片跟隨滾動條滾動（預設）例子background-attachment:scroll;
fixed 背景圖片不會跟隨滾動條而滾動。例子background-attachment:fixed;
-->
<div></div>
</body>
</html>
複合性寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:800px;
height:800px;
border:10px solid red;
/* background-image: url(http://pic33.photophoto.cn/20141219/0005018343173598_b.jpg)
background-position:left top;
background-repeat:no-repeat;
background-attachment:scroll; */
background:green url(http://pic33.photophoto.cn/20141219/0005018343173598_b.jpg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
文字樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
font-weight:bold;
font-family:arial,"華文行楷","宋體","楷體";
}
</style>
</head>
<body>
<!--
font 文字
font-weight 文字著重
font-size文字傾斜
line-height文字行高
font-family字型（中文預設是宋體）
font-weight 文字加粗
weight 加粗
normal正常
font-style 文字傾斜
italic 傾斜
normal 正常
font-size 文字大小
50px 數字加單位
font-family 文字字型
“主要字型”，“備選字型2”表示如果使用者電腦上有“主要字型”，就顯示“主要字型”，如果使用者電腦上沒有主要字型，那就顯示“備選字型1”，如果使用者電腦沒有“備選字型1”，就顯示“備選字型2”
英文字型，“中文字型”；英文字元使用英文字型，中文字元使用中文字元；
font
-->
<div>歡迎大家來到博日公司</div>
</body>
</html>
行高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid red;
}
</style>
</head>
<body>
<!--
行高代表了一行文字在容器中所佔的高度
line-height行高
16px 值是數字加單位
如果行高的值與容器的高度相等，那文字就會垂直居中
-->
<div>歡迎大家來到博日</div>
</body>
</html>
行高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid red;
}
</style>
</head>
<body>
<!--
行高代表了一行文字在容器中所佔的高度
line-height行高
16px 值是數字加單位
如果行高的值與容器的高度相等，那文字就會垂直居中
測量多行文字行高的方法
1、首先要知道文字的大小
2、量小兩行文字之間的距離
3、拿上面量出來的距離除上2
如果行高為奇數的話，文字的上邊距會小一畫素，下邊距會多一畫素
12 13/2=7.5 6
-->
<div>歡迎大家來到博日</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid red;
font:bold italic 26px/50px "微軟雅黑";
}
</style>
</head>
<body>
<!--
font:font-weight font-style font-size(必需)/line-height font-family(必需)；
-->
<div>歡迎大家來到博日</div>
</body>
</html>
文字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
color:red;
text-align:center;
width:130px;
border:1px solid #000;
text-indent:2em;
font-size:24px;
text-decoration:line-through;
letter-spacing: 10px;
}
</style>
</head>
<body>
<!-- 文字
color 顏色
text-algin 文字的對齊方式
text-indent 首行縮排（em縮排字元）
text-decoration 文字修飾
letter-spacing 字母的間距
word-spacing 單詞的間距（以空格來解析）
white-space 強制不換行
color:red;
text-align:center;
color 代表顏色
值為顏色的幾種表示方法
text-align:center;
text-algin 文字的對齊方式
left 左對齊（預設）
center 居中對齊
right 右對齊
text-indent 首行縮排
32px 值是數字加單位
text-decoration:underline;
text-decoration 文字修飾
underline 下劃線
overline 上劃線
line-through 中劃線
none
letter-spacing 字母間距
-->
<div>歡迎大家來到李家</div>
</body>
</html>
相關文章
- 前端工程師面試題(html+css)前端工程師面試題HTMLCSS
- web前端html+css常用佈局01Web前端HTMLCSS
- web前端html+css常用佈局02Web前端HTMLCSS
- web前端html+css常用佈局03Web前端HTMLCSS
- web前端html+css常用佈局04Web前端HTMLCSS
- Web前端之HTML+CSS的知識總結Web前端HTMLCSS
- Web前端怎麼學？如何成為Web前端工程師？Web前端工程師
- web前端工程師必備技能Web前端工程師
- Web前端工程師需要會什麼？Web前端工程師
- 失業web前端工程師面試經歷Web前端工程師面試
- Web前端工程師需要什麼學歷Web前端工程師
- web前端工程師薪資待遇如何？Web前端工程師
- 帶你認識Web前端工程師Web前端工程師
- 前端面試題 -- HTML+CSS前端面試題HTMLCSS
- Web前端應該從哪裡開始學？Web前端工程師待遇如何？Web前端工程師
- web前端工程師需要具備哪些要求?Web前端工程師
- Web前端工程師發展之——路在何方？Web前端工程師
- 學好Web前端開發，必要了解的HTML+CSS的技巧有哪些Web前端HTMLCSS
- 怎麼入門web前端？轉型web前端工程師怎樣學才能拿高薪？Web前端工程師高薪
- 長沙Web前端培訓：優秀的Web前端工程師需要具備什麼？Web前端工程師
- Web前端值不值得去學？Web前端工程師面試需要注意什麼？Web前端工程師面試
- Web前端工程師職業規劃如何做?Web前端工程師
- web前端都是自學成才嗎？入行前端工程師的3種方式Web前端工程師
- 整個行業都在缺Web前端工程師，你還在問Web前端工作好找嗎？行業Web前端工程師
- Web軟體開發工程師的要求是什麼？Web前端 VS Web後端Web工程師前端後端
- 前端面試之路一(HTML+CSS面試整理)前端面試HTMLCSS
- 前端面試基礎手冊（HTML+CSS）前端面試HTMLCSS
- 轉行Web前端工程師，需要什麼程式語言？Web前端工程師
- 【北京】美餐招聘 Golang、Web 前端工程師（待遇你自己看）GolangWeb前端工程師
- 推薦一份Web 工程師的前端書單Web工程師前端
- 騰訊實習生web前端JS開發工程師面試經歷Web前端JS工程師面試
- Web前端開發工程師常用技術網站整理Web前端工程師網站
- 怎麼做優秀前端工程師 Web前端學習路線是什麼前端工程師Web
- 前端面試經典題目合集（HTML+CSS）前端面試HTMLCSS
- web前端工程師面試題10條必會筆試題Web前端工程師面試題筆試
- 招聘+web前端開發工程師+雙休+五險一金Web前端工程師
- 高年薪的Web前端工程師經常思考哪些問題？Web前端工程師
- Web前端工程師怎麼樣呢？薪資待遇如何呢？Web前端工程師