Web前端-CSS
內容簡單回顧
什麼HTML : 超文本標記語言css
p標籤: 段落標籤html
br標籤: 簡單換行程序員
h1-h6: 標題標籤服務器
hr標籤: 水平分割線, 華麗的分割線框架
font標籤: color屬性改變顏色 , size函數
b標籤: 加粗佈局
i標籤: 斜體post
strong標籤: 帶語義的加粗字體
em標籤: 斜體標籤,帶語義優化
img標籤: 圖片標籤 顯示圖片
src: 指定圖片路徑(相對路徑)
width: 寬度
height: 高度
alt: 圖片加載失敗時的提示
相對路徑:
./ 表明當前路徑
../ 表明的是上一級路徑
../../ 表明的是上上一級路徑
ul標籤: 無序列表
ol標籤: 有序列表
li標籤: 列表項
a標籤: 超連接標籤:
target: 打開方式
href: 指定要跳轉的連接地址
table標籤: table > tr > td
tr標籤: 行
td標籤: 列
合併行: rowspan
合併列: colspan
網站註冊案例:
form 標籤: 表單標籤,主要是用來向服務器提交數據
method: 提交方式 get post
action : 提交的路徑
input 標籤:
type:
password: 密碼框
text : 文本
submit: 提交
button: 普通的按鈕
reset: 重置按鈕
radio: 單選按鈕 設置name屬性讓它們是一組
checkbox: 複選按鈕
email:
date:
tel:
frameset : 框架標籤
rows:
cols:
frame:
使用CSS完成網站首頁的優化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
<!--<style>
.logo{
float: left;
width: 33%;
/*border-width: 1px;
border-style: solid;
border-color: red;*/
height: 60px;
line-height: 60px;
/* border: 1px solid red;*/
}
.amenu{
color: white;
text-decoration: none;
height: 50px;
line-height: 50px;
}
.product{
float: left; text-align: center; width: 16%; height: 240px;
}
</style>-->
</head>
<body>
<!--
1. 創一個最外層div
2. 第一部份: LOGO部分: 嵌套三個div
3. 第二部分: 導航欄部分 : 放置5個超連接
4. 第三部分: 輪播圖
5. 第四部分:
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超連接
-->
<div>
<!--2. 第一部份: LOGO部分: 嵌套三個div-->
<div>
<div class="logo">
<img src="../img/logo2.png"/>
</div>
<div class="logo">
<img src="../img/header.png"/>
</div>
<div class="logo">
<a href="#">登陸</a>
<a href="#">註冊</a>
<a href="#">購物車</a>
</div>
</div>
<!--清除浮動-->
<div style="clear: both;"></div>
<!--3. 第二部分: 導航欄部分 : 放置5個超連接-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首頁</a>
<a href="#" class="amenu">手機數碼</a>
<a href="#" class="amenu">電腦辦公</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">香菸酒水</a>
</div>
<!--4. 第三部分: 輪播圖-->
<div>
<img src="../img/1.jpg" width="100%"/>
</div>
<!--5. 第四部分:-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左側廣告圖-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右側商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!--6. 第五部分: 直接放一張圖片-->
<div>
<img src="../products/hao/ad.jpg" width="100%"/>
</div>
<!--7. 第六部分: 抄第四部分的-->
<div>
<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
<!--左側廣告圖-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右側商品
-->
<div style="width: 84%; height: 480px;float: left;">
<div style="height: 240px; width: 50%; float: left;">
<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
<div class="product">
<img src="../products/hao/small08.jpg" />
<p>高壓鍋</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!--8. 第七部分: 放置一張圖片-->
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--9. 第八部分: 放一堆超連接-->
<div style="text-align: center;">
<a href="#">關於咱們</a>
<a href="#">聯繫咱們</a>
<a href="#">招賢納士</a>
<a href="#">法律聲明</a>
<a href="#">友情連接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務聲明</a>
<a href="#">廣告聲明</a>
<br />
Copyright © 2005-2016 傳智商城 版權全部
</div>
</div>
</body>
</html>
需求分析:
因爲咱們昨天使用表格佈局存在缺陷,那麼咱們要來考慮使用DIV+CSS來對頁面進行優化
表格佈局的缺陷:
1. 嵌套層級太多, 一旦出現嵌套順序錯亂, 整個頁面達不到預期效果 2. 採用表格佈局,頁面不夠靈活, 動其中某一塊,整個表格佈局的結構全都要變
技術分析
HTML的塊標籤:
div標籤: 默認佔一行,自動換行
span標籤: 內容顯示在同一行
CSS概述:
Cascading Style Sheets : 層疊樣式表
紅磚, 抹了一層水泥, 白灰
主要用做用:
用來美化咱們的HTML頁面的
HTML 決定網頁的骨架 ,CSS 化妝
將頁面的HTML和美化進行分離
CSS的簡單語法:
在一個style標籤中,去編寫CSS內容,最好將style標籤寫在這個head標籤中
html <style> 選擇器{ 屬性名稱:屬性的值; 屬性名稱2: 屬性的值2; } </style>
CSS選擇器: 幫助咱們找到咱們要修飾的標籤或者元素
選擇器入門：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
選擇器{
屬性名稱:屬性的值;
屬性名稱2: 屬性的值2;
}
-->
<style>
div{
color:red;
font-size: 50px;
}
</style>
</head>
<body>
<!--將內容字體顏色改爲紅色-->
<div>你們新年好,恭喜發財,紅包拿來</div>
<div>你們新年好,恭喜發財,紅包拿來</div>
<div>你們新年好,恭喜發財,紅包拿來</div>
<div>你們新年好,恭喜發財,紅包拿來</div>
<div>你們新年好,恭喜發財,紅包拿來</div>
</body>
</html>
後代選擇器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*請將H1下面的全部 em 元素 的內容顏色改爲 紅色*/
/*中間以空格隔開的是後代選擇器*/
h1 > em{
color: red;
}
</style>
</head>
<body>
<h1>
This is a
<em>兒子</em>
<strong>
<em>孫子</em>
</strong>
heading
</h1>
</body>
</html>
屬性選擇器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--修改包含title屬性的a標籤-->
<style>
/*a[title='aaa']{
color: red;
}*/
a[href][title]{
color: yellow;
}
</style>
</head>
<body>
<a href="#" title="aaa">張三</a>
<a href="#" >李四</a>
</body>
</html>
僞類選擇器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a:link {color: red} /* 未訪問的連接 */
a:visited {color: #00FF00} /* 已訪問的連接 */
a:hover {color: #FF00FF} /* 鼠標移動到連接上 */
a:active {color: #0000FF} /* 選定的連接 */
</style>
</head>
<body>
<a href="#">黑馬程序員</a>
</body>
</html>
元素選擇:經常使用
html 元素的名稱{ 屬性名稱:屬性的值; 屬性名稱:屬性的值; }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<span>講完這個內容你們就能夠下課了</span>
<span>講完這個內容你們就能夠下課了</span>
<span>講完這個內容你們就能夠下課了</span>
<span>講完這個內容你們就能夠下課了</span>
</body>
</html>
ID選擇器:經常使用
html 以#號開頭 ID在整個頁面中必須是惟一的 #ID的名稱{ 屬性名稱:屬性的值; 屬性名稱:屬性的值; }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
#ID的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
* */
#div1{
color: red;
}
</style>
</head>
<body>
<!--請將JAVAEE顏色改爲紅色-->
<div id="div1">JAVAEE</div>
<div>IOS</div>
<div>ANDROID</div>
</body>
</html>
類選擇器:經常使用
html 以 . 開頭 .類的名稱{ 屬性名稱:屬性的值; 屬性名稱:屬性的值; }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
.類的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
-->
<style>
.shuiguo{
color: yellow;
}
.shucai{
color: green;
}
</style>
</head>
<body>
<!--
請將水果類,改爲黃色
蔬菜類改爲綠色
-->
<div class="shuiguo">香蕉</div>
<div class="shucai">黃瓜</div>
<div class="shuiguo">蘋果</div>
<div class="shucai">茄子</div>
<div class="shuiguo">橘子</div>
</body>
</html>
CSS的引入方式:
外部樣式: 經過link標籤引入一個外部的css文件
style1.css
.shuiguo{
color: pink;
}
.shucai{
color: green;
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style1.css" /> </head> <body> <div class="shuiguo">香蕉</div> <div class="shucai">黃瓜</div> <div class="shuiguo">蘋果</div> <div class="shucai">茄子</div> <div class="shuiguo">橘子</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style1.css" /> </head> <body> <div class="shuiguo">甘蔗</div> <div class="shucai">青瓜</div> <div class="shuiguo">蘋果</div> <div class="shucai">茄子</div> <div class="shuiguo">橘子</div> </body> </html>
rel="stylesheet"：樣式表
內部樣式: 直接在style標籤內編寫CSS代碼
行內樣式: 直接在標籤中添加一個style屬性, 編寫CSS樣式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--經過行內樣式修改甘蔗--> <div class="shuiguo" style="color: greenyellow;">甘蔗</div> <div class="shucai">青瓜</div> <div class="shuiguo">蘋果</div> <div class="shucai">茄子</div> <div class="shuiguo">橘子</div> </body> </html>
CSS浮動 : 浮動的元素會脫離正常的文檔流,在正常的文檔流中不佔空間
float屬性:
left
right
clear屬性: 清除浮動
both : 兩邊都不容許浮動
left: 左邊不容許浮動
right : 右邊不容許浮動
流式佈局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- CSS浮動 : 浮動的元素會脫離正常的文檔流,在正常的文檔流中不佔空間 float屬性: left right clear屬性: 清除浮動 both : 兩邊都不容許浮動 left: 左邊不容許浮動 right : 右邊不容許浮動 流式佈局 --> <div style="float:left;width: 200px; height: 200px; background-color: red;"></div> <div style="clear: both;"></div> <div style="width: 250px; height: 200px; background-color: greenyellow;"></div> <div style="width: 200px; height: 200px; background-color: blue;"></div> </body> </html>
CSS塊標籤
div標籤
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div>張三</div> <div>李四</div> </body> </html>
span標籤
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span>王武</span> <span>趙六</span> </body> </html>
CSS優先級
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*元素選擇器*/
div{
color: red;
}
/*類選擇器*/
.chifan{
color: deeppink;
}
/*ID選擇器*/
#div1{
color: greenyellow;
}
/*
按照選擇器搜索精確度來編寫:
行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器
*/
.first{
color: green;
}
.second{
color: blue;
}
/*就近原則*/
</style>
</head>
<body>
<!--<div class="chifan" id="div1" style="color: goldenrod;">擴展完,就能夠去吃飯啦!</div>-->
<div class="second first ">講完這個真的能夠去吃飯啦!</div>
</body>
</html>
步驟分析:
- 創一個最外層div
- 第一部份: LOGO部分: 嵌套三個div
- 第二部分: 導航欄部分 : 放置5個超連接
- 第三部分: 輪播圖
- 第四部分:
- 第五部分: 直接放一張圖片
- 第六部分: 抄第四部分的
- 第七部分: 放置一張圖片
- 第八部分: 放一堆超連接
代碼實現:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 當頁面加載完成的時候, 動態切換圖片
1.肯定事件:
2.事件所要觸發的函數
*/
var index = 1;
//切換圖片的函數
function changeAd(){
//獲取要操做的img
var img = document.getElementById("imgAd");
img.src = "../img/"+(index%3+1)+".jpg"; //0,1,2 //1,2,3
index++;
}
function init(){
//啓動定時器
setInterval("changeAd()",3000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" id="imgAd"/>
</body>
</html>
網站註冊頁面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/main.css"/> </head> <body> <!-- 1. 總共是5部分 2. 第一部分是LOGO部分 3. 第二部分是導航菜單 4. 第三部分是註冊部分 5. 第四部分是FOOTER圖片 6. 第五部分是一堆超連接 --> <div> <!--2. 第一部分是LOGO部分--> <div> <div class="logo"> <img src="../img/logo2.png" /> </div> <div class="logo"> <img src="../img/header.png" /> </div> <div class="logo"> <a href="#">登陸</a> <a href="#">註冊</a> <a href="#">購物車</a> </div> </div> <!--清除浮動--> <div style="clear: both;"></div> <!--3. 第二部分是導航菜單--> <div style="background-color: black; height: 50px;"> <a href="#" class="amenu">首頁</a> <a href="#" class="amenu">手機數碼</a> <a href="#" class="amenu">電腦辦公</a> <a href="#" class="amenu">鞋靴箱包</a> <a href="#" class="amenu">香菸酒水</a> </div> <!--4. 第三部分是註冊部分--> <div style="background: url(../image/regist_bg.jpg);height: 500px;"> <div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;"> <table width="60%" align="center"> <tr> <td colspan="2"><font color="blue" size="6">會員註冊</font>USER REGISTER</td> </tr> <tr> <td>用戶名:</td> <td><input type="text"/></td> </tr> <tr> <td>密碼:</td> <td><input type="password"/></td> </tr> <tr> <td>確認密碼:</td> <td><input type="password"/></td> </tr> <tr> <td>email:</td> <td><input type="email"/></td> </tr> <tr> <td>姓名:</td> <td><input type="text"/></td> </tr> <tr> <td>性別:</td> <td><input type="radio" name="sex"/> 男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/> 妖 </td> </tr> <tr> <td>出生日期:</td> <td><input type="date"/></td> </tr> <tr> <td>驗證碼:</td> <td><input type="text"/></td> </tr> <tr> <td></td> <td><input type="submit" value="註冊"/></td> </tr> </table> </div> </div> <!--5. 第四部分是FOOTER圖片--> <div> <img src="../img/footer.jpg" width="100%"/> </div> <!--9. 第四部分: 放一堆超連接--> <div style="text-align: center;"> <a href="#">關於咱們</a> <a href="#">聯繫咱們</a> <a href="#">招賢納士</a> <a href="#">法律聲明</a> <a href="#">友情連接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服務聲明</a> <a href="#">廣告聲明</a> <br /> Copyright © 2005-2016 傳智商城 版權全部 </div> </div> </body> </html>
絕對定位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 5px solid red; width: 400px; height: 400px;position: absolute;top: 200px;left: 200px;"> 黑馬程序員 </div> </body> </html>
盒子模型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border:3px solid red ; width: 400px; height: 400px;" > <div style="border:1px solid gray; width: 150px; height: 150px;padding: 10px 20px 30px;">腎7plus</div> <div style="border:1px solid yellow; width: 150px; height: 150px;">華爲P9</div> </div> </body> </html>
main.css
.logo{
float: left;
width: 33%;
/*border-width: 1px;
border-style: solid;
border-color: red;*/
height: 60px;
line-height: 60px;
/* border: 1px solid red;*/
}
.amenu{
color: white;
text-decoration: none;
height: 50px;
line-height: 50px;
}
.product{
float: left; text-align: center; width: 16%; height: 240px;
}
相關文章
- 1. Web前端之CSS
- 2. Web前端-CSS篇
- 3. web前端css--position
- 4. web前端css(二)
- 5. web前端之css
- 6. 【Web前端】CSS選擇器
- 7. Web前端篇：css浮動
- 8. Bootstrap（Web前端CSS框架）
- 9. 【Web 前端】CSS樣式
- 10. web前端-CSS Position 定位
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Web前端之CSS
- 2. Web前端-CSS篇
- 3. web前端css--position
- 4. web前端css(二)
- 5. web前端之css
- 6. 【Web前端】CSS選擇器
- 7. Web前端篇：css浮動
- 8. Bootstrap（Web前端CSS框架）
- 9. 【Web 前端】CSS樣式
- 10. web前端-CSS Position 定位