資訊專欄INFORMATION COLUMN
摘要：今日目標使用完成網站首頁的優化使用完成網站注冊頁面的優化使用完成簡單的數據校驗使用完成圖片輪播效果教學目標了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語法，數據類型，能夠使用完成簡單的頁
今日目標
使用CSS完成網站首頁的優化
使用CSS完成網站注冊頁面的優化
使用JS完成簡單的數據校驗
使用JS完成圖片輪播效果
教學目標：
了解CSS的概念
了解CSS的引入方式
了解CSS的基本用法和常用的選擇器
了解CSS的盒子模型，懸浮和定位
了解JS的概念
掌握JS的基本語法，數據類型，能夠使用JS完成簡單的頁面交互
去年的內容簡單回顧
什么HTML : 超文本標記語言
p標簽: 段落標簽
br標簽: 簡單換行
h1-h6: 標題標簽
hr標簽: 水平分割線, 華麗的分割線
font標簽: color屬性改變顏色 , size
b標簽: 加粗
i標簽: 斜體
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完成網站首頁的優化
需求分析:
由于我們昨天使用表格布局存在缺陷,那么我們要來考慮使用DIV+CSS來對頁面進行優化
表格布局的缺陷:
1. 嵌套層級太多, 一旦出現嵌套順序錯亂, 整個頁面達不到預期效果
2. 采用表格布局,頁面不夠靈活, 動其中某一塊,整個表格布局的結構全都要變
1
2
技術分析
HTML的塊標簽:
div標簽: 默認占一行,自動換行
span標簽: 內容顯示在同一行
CSS概述:
Cascading Style Sheets : 層疊樣式表
紅磚, 抹了一層水泥, 白灰
主要用作用:
用來美化我們的HTML頁面的
HTML 決定網頁的骨架 ,CSS 化妝
將頁面的HTML和美化進行分離
CSS的簡單語法:
在一個style標簽中,去編寫CSS內容,最好將style標簽寫在這個head標簽中
<style>
選擇器{
屬性名稱:屬性的值;
屬性名稱2: 屬性的值2;
}
</style>
1
2
3
4
5
6
CSS選擇器: 幫助我們找到我們要修飾的標簽或者元素
元素選擇:
元素的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
1
2
3
4
ID選擇器:
以#號開頭 ID在整個頁面中必須是唯一的s
#ID的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
1
2
3
4
5
類選擇器:
以 . 開頭
.類的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
1
2
3
4
5
CSS的引入方式:
外部樣式: 通過link標簽引入一個外部的css文件
內部樣式: 直接在style標簽內編寫CSS代碼
行內樣式: 直接在標簽中添加一個style屬性, 編寫CSS樣式
CSS浮動 : 浮動的元素會脫離正常的文檔流,在正常的文檔流中不占空間
float屬性:
left
right
clear屬性: 清除浮動
both : 兩邊都不允許浮動
left: 左邊不允許浮動
right : 右邊不允許浮動
流式布局
1
2
3
4
5
6
7
8
9
步驟分析:
創一個最外層div
第一部份: LOGO部分: 嵌套三個div
第二部分: 導航欄部分 : 放置5個超鏈接
第三部分: 輪播圖
第四部分:
第五部分: 直接放一張圖片
第六部分: 抄第四部分的
第七部分: 放置一張圖片
第八部分: 放一堆超鏈接
代碼實現:
<!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. 創一個最外層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>文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1460.html
摘要：新手坑開發環境和生產環境樣式不一致的問題上次提到作用域問題導致樣是不生效這次講的是我之前遇到的一個小坑稍不留神就完蛋前陣子做的一個小項目引入了的庫外加自己寫的很多樣式在開發環境下測試完美直接就出來上正式環境發現竟然有多處樣式未生效的問題還好 [新手坑] 02.Vue開發環境和生產環境樣式不一致的問題 上次提到作用域問題, 導致樣是不生效, 這次講的是我之前遇到的一個小坑, 稍不留神就完...
摘要：今日目標使用完成網站首頁的優化使用完成網站注冊頁面的優化使用完成簡單的數據校驗使用完成圖片輪播效果教學目標了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語法，數據類型，能夠使用完成簡單的頁 今日目標 使用CSS完成網站首頁的優化 使用CSS完成網站注冊頁面的優化 使用JS完成簡單的數據校驗 使用JS完成圖片輪播效果 教學目標： 了解...
摘要：今日目標使用完成網站首頁的優化使用完成網站注冊頁面的優化使用完成簡單的數據校驗使用完成圖片輪播效果教學目標了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語法，數據類型，能夠使用完成簡單的頁 今日目標 使用CSS完成網站首頁的優化 使用CSS完成網站注冊頁面的優化 使用JS完成簡單的數據校驗 使用JS完成圖片輪播效果 教學目標： 了解...
摘要：全網最貼心系列教程和配套代碼歡迎關注個人技術博客。所以我花費了個多月整理了這份教程，一共分成節，每節都有講解，并且準備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網最貼心 webpack 系列教程和配套代碼 歡迎關注個人技術博客：godbmw.com。每周 1 篇原創技術分享！開源教程(webpack、設計模式）、面試刷題（偏前...
閱讀 724·2023-04-25 19:43
閱讀 3921·2021-11-30 14:52
閱讀 3794·2021-11-30 14:52
閱讀 3859·2021-11-29 11:00
閱讀 3790·2021-11-29 11:00
閱讀 3882·2021-11-29 11:00
閱讀 3562·2021-11-29 11:00
閱讀 6138·2021-11-29 11:00
