資訊專(zhuān)欄INFORMATION COLUMN
摘要：今日目標(biāo)使用完成網(wǎng)站首頁(yè)的優(yōu)化使用完成網(wǎng)站注冊(cè)頁(yè)面的優(yōu)化使用完成簡(jiǎn)單的數(shù)據(jù)校驗(yàn)使用完成圖片輪播效果教學(xué)目標(biāo)了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語(yǔ)法，數(shù)據(jù)類(lèi)型，能夠使用完成簡(jiǎn)單的頁(yè)
今日目標(biāo)
使用CSS完成網(wǎng)站首頁(yè)的優(yōu)化
使用CSS完成網(wǎng)站注冊(cè)頁(yè)面的優(yōu)化
使用JS完成簡(jiǎn)單的數(shù)據(jù)校驗(yàn)
使用JS完成圖片輪播效果
教學(xué)目標(biāo)：
了解CSS的概念
了解CSS的引入方式
了解CSS的基本用法和常用的選擇器
了解CSS的盒子模型，懸浮和定位
了解JS的概念
掌握J(rèn)S的基本語(yǔ)法，數(shù)據(jù)類(lèi)型，能夠使用JS完成簡(jiǎn)單的頁(yè)面交互
去年的內(nèi)容簡(jiǎn)單回顧
什么HTML : 超文本標(biāo)記語(yǔ)言
p標(biāo)簽: 段落標(biāo)簽
br標(biāo)簽: 簡(jiǎn)單換行
h1-h6: 標(biāo)題標(biāo)簽
hr標(biāo)簽: 水平分割線(xiàn), 華麗的分割線(xiàn)
font標(biāo)簽: color屬性改變顏色 , size
b標(biāo)簽: 加粗
i標(biāo)簽: 斜體
strong標(biāo)簽: 帶語(yǔ)義的加粗
em標(biāo)簽: 斜體標(biāo)簽,帶語(yǔ)義
img標(biāo)簽: 圖片標(biāo)簽 顯示圖片
src: 指定圖片路徑(相對(duì)路徑)
width: 寬度
height: 高度
alt: 圖片加載失敗時(shí)的提示
相對(duì)路徑:
./ 代表當(dāng)前路徑
…/ 代表的是上一級(jí)路徑
…/…/ 代表的是上上一級(jí)路徑
ul標(biāo)簽: 無(wú)序列表
ol標(biāo)簽: 有序列表
li標(biāo)簽: 列表項(xiàng)
a標(biāo)簽: 超鏈接標(biāo)簽:
target: 打開(kāi)方式
href: 指定要跳轉(zhuǎn)的鏈接地址
table標(biāo)簽: table > tr > td
tr標(biāo)簽: 行
td標(biāo)簽: 列
合并行: rowspan
合并列: colspan
網(wǎng)站注冊(cè)案例:
form 標(biāo)簽: 表單標(biāo)簽,主要是用來(lái)向服務(wù)器提交數(shù)據(jù)
method: 提交方式 get post
action : 提交的路徑
input 標(biāo)簽:
type:
password: 密碼框
text : 文本
submit: 提交
button: 普通的按鈕
reset: 重置按鈕
radio: 單選按鈕 設(shè)置name屬性讓它們是一組
checkbox: 復(fù)選按鈕
email:
date:
tel:
frameset : 框架標(biāo)簽
rows:
cols:
frame:
使用CSS完成網(wǎng)站首頁(yè)的優(yōu)化
需求分析:
由于我們昨天使用表格布局存在缺陷,那么我們要來(lái)考慮使用DIV+CSS來(lái)對(duì)頁(yè)面進(jìn)行優(yōu)化
表格布局的缺陷:
1. 嵌套層級(jí)太多, 一旦出現(xiàn)嵌套順序錯(cuò)亂, 整個(gè)頁(yè)面達(dá)不到預(yù)期效果
2. 采用表格布局,頁(yè)面不夠靈活, 動(dòng)其中某一塊,整個(gè)表格布局的結(jié)構(gòu)全都要變
1
2
技術(shù)分析
HTML的塊標(biāo)簽:
div標(biāo)簽: 默認(rèn)占一行,自動(dòng)換行
span標(biāo)簽: 內(nèi)容顯示在同一行
CSS概述:
Cascading Style Sheets : 層疊樣式表
紅磚, 抹了一層水泥, 白灰
主要用作用:
用來(lái)美化我們的HTML頁(yè)面的
HTML 決定網(wǎng)頁(yè)的骨架 ,CSS 化妝
將頁(yè)面的HTML和美化進(jìn)行分離
CSS的簡(jiǎn)單語(yǔ)法:
在一個(gè)style標(biāo)簽中,去編寫(xiě)CSS內(nèi)容,最好將style標(biāo)簽寫(xiě)在這個(gè)head標(biāo)簽中
<style>
選擇器{
屬性名稱(chēng):屬性的值;
屬性名稱(chēng)2: 屬性的值2;
}
</style>
1
2
3
4
5
6
CSS選擇器: 幫助我們找到我們要修飾的標(biāo)簽或者元素
元素選擇:
元素的名稱(chēng){
屬性名稱(chēng):屬性的值;
屬性名稱(chēng):屬性的值;
}
1
2
3
4
ID選擇器:
以#號(hào)開(kāi)頭 ID在整個(gè)頁(yè)面中必須是唯一的s
#ID的名稱(chēng){
屬性名稱(chēng):屬性的值;
屬性名稱(chēng):屬性的值;
}
1
2
3
4
5
類(lèi)選擇器:
以 . 開(kāi)頭
.類(lèi)的名稱(chēng){
屬性名稱(chēng):屬性的值;
屬性名稱(chēng):屬性的值;
}
1
2
3
4
5
CSS的引入方式:
外部樣式: 通過(guò)link標(biāo)簽引入一個(gè)外部的css文件
內(nèi)部樣式: 直接在style標(biāo)簽內(nèi)編寫(xiě)CSS代碼
行內(nèi)樣式: 直接在標(biāo)簽中添加一個(gè)style屬性, 編寫(xiě)CSS樣式
CSS浮動(dòng) : 浮動(dòng)的元素會(huì)脫離正常的文檔流,在正常的文檔流中不占空間
float屬性:
left
right
clear屬性: 清除浮動(dòng)
both : 兩邊都不允許浮動(dòng)
left: 左邊不允許浮動(dòng)
right : 右邊不允許浮動(dòng)
流式布局
1
2
3
4
5
6
7
8
9
步驟分析:
創(chuàng)一個(gè)最外層div
第一部份: LOGO部分: 嵌套三個(gè)div
第二部分: 導(dǎo)航欄部分 : 放置5個(gè)超鏈接
第三部分: 輪播圖
第四部分:
第五部分: 直接放一張圖片
第六部分: 抄第四部分的
第七部分: 放置一張圖片
第八部分: 放一堆超鏈接
代碼實(shí)現(xiàn):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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. 創(chuàng)一個(gè)最外層div
2. 第一部份: LOGO部分: 嵌套三個(gè)div
3. 第二部分: 導(dǎo)航欄部分 : 放置5個(gè)超鏈接
4. 第三部分: 輪播圖
5. 第四部分:
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超鏈接
-->
<div>
<!--2. 第一部份: LOGO部分: 嵌套三個(gè)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="#">注冊(cè)</a>
<a href="#">購(gòu)物車(chē)</a>
</div>
</div>
<!--清除浮動(dòng)-->
<div style="clear: both;"></div>
<!--3. 第二部分: 導(dǎo)航欄部分 : 放置5個(gè)超鏈接-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首頁(yè)</a>
<a href="#" class="amenu">手機(jī)數(shù)碼</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>
<!--左側(cè)廣告圖-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右側(cè)商品
-->
<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>
<!--左側(cè)廣告圖-->
<div style="width: 15%; height: 480px; float: left;">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</div>
<!--
右側(cè)商品
-->
<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="#">關(guān)于我們</a>
<a href="#">聯(lián)系我們</a>
<a href="#">招賢納士</a>
<a href="#">法律聲明</a>
<a href="#">友情鏈接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務(wù)聲明</a>
<a href="#">廣告聲明</a>
<br />
Copyright ? 2005-2016 傳智商城 版權(quán)所有
</div>
</div>
</body>
</html>文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1460.html
摘要：新手坑開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境樣式不一致的問(wèn)題上次提到作用域問(wèn)題導(dǎo)致樣是不生效這次講的是我之前遇到的一個(gè)小坑稍不留神就完蛋前陣子做的一個(gè)小項(xiàng)目引入了的庫(kù)外加自己寫(xiě)的很多樣式在開(kāi)發(fā)環(huán)境下測(cè)試完美直接就出來(lái)上正式環(huán)境發(fā)現(xiàn)竟然有多處樣式未生效的問(wèn)題還好 [新手坑] 02.Vue開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境樣式不一致的問(wèn)題 上次提到作用域問(wèn)題, 導(dǎo)致樣是不生效, 這次講的是我之前遇到的一個(gè)小坑, 稍不留神就完...
摘要：今日目標(biāo)使用完成網(wǎng)站首頁(yè)的優(yōu)化使用完成網(wǎng)站注冊(cè)頁(yè)面的優(yōu)化使用完成簡(jiǎn)單的數(shù)據(jù)校驗(yàn)使用完成圖片輪播效果教學(xué)目標(biāo)了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語(yǔ)法，數(shù)據(jù)類(lèi)型，能夠使用完成簡(jiǎn)單的頁(yè) 今日目標(biāo) 使用CSS完成網(wǎng)站首頁(yè)的優(yōu)化 使用CSS完成網(wǎng)站注冊(cè)頁(yè)面的優(yōu)化 使用JS完成簡(jiǎn)單的數(shù)據(jù)校驗(yàn) 使用JS完成圖片輪播效果 教學(xué)目標(biāo)： 了解...
摘要：今日目標(biāo)使用完成網(wǎng)站首頁(yè)的優(yōu)化使用完成網(wǎng)站注冊(cè)頁(yè)面的優(yōu)化使用完成簡(jiǎn)單的數(shù)據(jù)校驗(yàn)使用完成圖片輪播效果教學(xué)目標(biāo)了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語(yǔ)法，數(shù)據(jù)類(lèi)型，能夠使用完成簡(jiǎn)單的頁(yè) 今日目標(biāo) 使用CSS完成網(wǎng)站首頁(yè)的優(yōu)化 使用CSS完成網(wǎng)站注冊(cè)頁(yè)面的優(yōu)化 使用JS完成簡(jiǎn)單的數(shù)據(jù)校驗(yàn) 使用JS完成圖片輪播效果 教學(xué)目標(biāo)： 了解...
摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開(kāi)放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開(kāi)源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前...
閱讀 735·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6182·2021-11-29 11:00
