02-CSS&JS

番茄西紅柿發(fā)布于2019-04-23 13:07 / 2087人閱讀

摘要：今日目標使用完成網(wǎng)站首頁的優(yōu)化使用完成網(wǎng)站注冊頁面的優(yōu)化使用完成簡單的數(shù)據(jù)校驗使用完成圖片輪播效果教學目標了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語法，數(shù)據(jù)類型，能夠使用完成簡單的頁

今日目標

使用CSS完成網(wǎng)站首頁的優(yōu)化

使用CSS完成網(wǎng)站注冊頁面的優(yōu)化

使用JS完成簡單的數(shù)據(jù)校驗

使用JS完成圖片輪播效果

教學目標：

了解CSS的概念

了解CSS的引入方式

了解CSS的基本用法和常用的選擇器

了解CSS的盒子模型，懸浮和定位

了解JS的概念

掌握JS的基本語法，數(shù)據(jù)類型，能夠使用JS完成簡單的頁面交互

去年的內(nèi)容簡單回顧

什么HTML : 超文本標記語言

p標簽: 段落標簽

br標簽: 簡單換行

h1-h6: 標題標簽

hr標簽: 水平分割線, 華麗的分割線

font標簽: color屬性改變顏色 , size

b標簽: 加粗

i標簽: 斜體

strong標簽: 帶語義的加粗

em標簽: 斜體標簽,帶語義

img標簽: 圖片標簽顯示圖片

src: 指定圖片路徑(相對路徑)

width: 寬度

height: 高度

alt: 圖片加載失敗時的提示

相對路徑:

./ 代表當前路徑

…/ 代表的是上一級路徑

…/…/ 代表的是上上一級路徑

ul標簽: 無序列表

ol標簽: 有序列表

li標簽: 列表項

a標簽: 超鏈接標簽:

target: 打開方式

href: 指定要跳轉(zhuǎn)的鏈接地址

table標簽: table > tr > td

tr標簽: 行

td標簽: 列

合并行: rowspan

合并列: colspan

網(wǎng)站注冊案例:

form 標簽: 表單標簽,主要是用來向服務(wù)器提交數(shù)據(jù)

method: 提交方式 get post

action : 提交的路徑

input 標簽:

type:

password: 密碼框

text : 文本

submit: 提交

button: 普通的按鈕

reset: 重置按鈕

radio: 單選按鈕設(shè)置name屬性讓它們是一組

checkbox: 復選按鈕

email:

date:

tel:

frameset : 框架標簽

rows:

cols:

frame:

使用CSS完成網(wǎng)站首頁的優(yōu)化

需求分析:

由于我們昨天使用表格布局存在缺陷,那么我們要來考慮使用DIV+CSS來對頁面進行優(yōu)化

表格布局的缺陷:

1. 嵌套層級太多, 一旦出現(xiàn)嵌套順序錯亂, 整個頁面達不到預(yù)期效果

2. 采用表格布局,頁面不夠靈活, 動其中某一塊,整個表格布局的結(jié)構(gòu)全都要變

技術(shù)分析

HTML的塊標簽:

div標簽: 默認占一行,自動換行

span標簽: 內(nèi)容顯示在同一行

CSS概述:

Cascading Style Sheets : 層疊樣式表

紅磚, 抹了一層水泥, 白灰

主要用作用:

用來美化我們的HTML頁面的

HTML 決定網(wǎng)頁的骨架 ,CSS 化妝

將頁面的HTML和美化進行分離

CSS的簡單語法:

在一個style標簽中,去編寫CSS內(nèi)容,最好將style標簽寫在這個head標簽中

<style>

選擇器{

屬性名稱:屬性的值;

屬性名稱2: 屬性的值2;

}

</style>

CSS選擇器: 幫助我們找到我們要修飾的標簽或者元素

元素選擇:

元素的名稱{

屬性名稱:屬性的值;

}

ID選擇器:

以#號開頭 ID在整個頁面中必須是唯一的s

#ID的名稱{

屬性名稱:屬性的值;

}

類選擇器:

以 . 開頭

.類的名稱{

屬性名稱:屬性的值;

}

CSS的引入方式:

外部樣式: 通過link標簽引入一個外部的css文件

內(nèi)部樣式: 直接在style標簽內(nèi)編寫CSS代碼

行內(nèi)樣式: 直接在標簽中添加一個style屬性, 編寫CSS樣式

CSS浮動 : 浮動的元素會脫離正常的文檔流,在正常的文檔流中不占空間

float屬性:

left

right

clear屬性: 清除浮動

both : 兩邊都不允許浮動

left: 左邊不允許浮動

right : 右邊不允許浮動

流式布局

步驟分析:

創(chuàng)一個最外層div

第一部份: LOGO部分: 嵌套三個div

第二部分: 導航欄部分 : 放置5個超鏈接

第三部分: 輪播圖

第四部分:

第五部分: 直接放一張圖片

第六部分: 抄第四部分的

第七部分: 放置一張圖片

第八部分: 放一堆超鏈接

代碼實現(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)一個最外層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">手機數(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>

云服務(wù)器 GPU云服務(wù)器 js調(diào)用js js和js js編碼js解碼 js到j(luò)s傳值

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1460.html

發(fā)表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 847·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 4116·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3930·2021-11-30 14:52
VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區(qū)

閱讀 4027·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3922·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 4039·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3770·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6608·2021-11-29 11:00

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

02-CSS&JS

相關(guān)文章

[新手坑] 02.Vue開發(fā)環(huán)境和生產(chǎn)環(huán)境樣式不一致的問題

**JavaWEB開發(fā)02——CSS&JS**

**JavaWEB開發(fā)02——CSS&JS**

webpack-demos：全網(wǎng)最貼心webpack系列教程和配套代碼

發(fā)表評論

0條評論

番茄西紅柿

男|高級講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過多的解決方法

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

02-CSS&JS

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！