資訊專欄INFORMATION COLUMN
摘要：今日目標(biāo)使用完成網(wǎng)站首頁的優(yōu)化使用完成網(wǎng)站注冊頁面的優(yōu)化使用完成簡單的數(shù)據(jù)校驗使用完成圖片輪播效果教學(xué)目標(biāo)了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語法，數(shù)據(jù)類型，能夠使用完成簡單的頁
今日目標(biāo) 使用CSS完成網(wǎng)站首頁的優(yōu)化 使用CSS完成網(wǎng)站注冊頁面的優(yōu)化 使用JS完成簡單的數(shù)據(jù)校驗 使用JS完成圖片輪播效果 教學(xué)目標(biāo)：
了解CSS的概念
了解CSS的引入方式
了解CSS的基本用法和常用的選擇器
了解CSS的盒子模型，懸浮和定位
了解JS的概念
掌握J(rèn)S的基本語法，數(shù)據(jù)類型，能夠使用JS完成簡單的頁面交互
去年的內(nèi)容簡單回顧
什么HTML : 超文本標(biāo)記語言
p標(biāo)簽: 段落標(biāo)簽
br標(biāo)簽: 簡單換行
h1-h6: 標(biāo)題標(biāo)簽
hr標(biāo)簽: 水平分割線, 華麗的分割線
font標(biāo)簽: color屬性改變顏色 , size
b標(biāo)簽: 加粗
i標(biāo)簽: 斜體
strong標(biāo)簽: 帶語義的加粗
em標(biāo)簽: 斜體標(biāo)簽,帶語義
img標(biāo)簽: 圖片標(biāo)簽 顯示圖片
? src: 指定圖片路徑(相對路徑)
? width: 寬度
? height: 高度
? alt: 圖片加載失敗時的提示
相對路徑:
? ./ 代表當(dāng)前路徑
? ../ 代表的是上一級路徑
? ../../ 代表的是上上一級路徑
ul標(biāo)簽: 無序列表
ol標(biāo)簽: 有序列表
li標(biāo)簽: 列表項
a標(biāo)簽: 超鏈接標(biāo)簽:
? target: 打開方式
? href: 指定要跳轉(zhuǎn)的鏈接地址
table標(biāo)簽: table > tr > td
tr標(biāo)簽: 行
td標(biāo)簽: 列
? 合并行: rowspan
? 合并列: colspan
網(wǎng)站注冊案例:
? form 標(biāo)簽: 表單標(biāo)簽,主要是用來向服務(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ōu)化 需求分析:? 由于我們昨天使用表格布局存在缺陷,那么我們要來考慮使用DIV+CSS來對頁面進(jìn)行優(yōu)化
表格布局的缺陷:
1. 嵌套層級太多, 一旦出現(xiàn)嵌套順序錯亂, 整個頁面達(dá)不到預(yù)期效果 2. 采用表格布局,頁面不夠靈活, 動其中某一塊,整個表格布局的結(jié)構(gòu)全都要變技術(shù)分析
HTML的塊標(biāo)簽:
? div標(biāo)簽: 默認(rèn)占一行,自動換行
? span標(biāo)簽: 內(nèi)容顯示在同一行
CSS概述:
? Cascading Style Sheets : 層疊樣式表
? 紅磚, 抹了一層水泥, 白灰
主要用作用:
? 用來美化我們的HTML頁面的
? HTML 決定網(wǎng)頁的骨架 ,CSS 化妝
? 將頁面的HTML和美化進(jìn)行分離
CSS的簡單語法:
? 在一個style標(biāo)簽中,去編寫CSS內(nèi)容,最好將style標(biāo)簽寫在這個head標(biāo)簽中
CSS選擇器: 幫助我們找到我們要修飾的標(biāo)簽或者元素
元素選擇:
元素的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
ID選擇器:
以#號開頭 ID在整個頁面中必須是唯一的s
#ID的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
類選擇器:
以 . 開頭
.類的名稱{
屬性名稱:屬性的值;
屬性名稱:屬性的值;
}
CSS的引入方式:
? 外部樣式: 通過link標(biāo)簽引入一個外部的css文件
? 內(nèi)部樣式: 直接在style標(biāo)簽內(nèi)編寫CSS代碼
? 行內(nèi)樣式: 直接在標(biāo)簽中添加一個style屬性, 編寫CSS樣式
CSS浮動 : 浮動的元素會脫離正常的文檔流,在正常的文檔流中不占空間
float屬性:
left
right
clear屬性: 清除浮動
both : 兩邊都不允許浮動
left: 左邊不允許浮動
right : 右邊不允許浮動
流式布局
步驟分析:
創(chuàng)一個最外層div
第一部份: LOGO部分: 嵌套三個div
第二部分: 導(dǎo)航欄部分 : 放置5個超鏈接
第三部分: 輪播圖
第四部分:
第五部分: 直接放一張圖片
第六部分: 抄第四部分的
第七部分: 放置一張圖片
第八部分: 放一堆超鏈接
代碼實現(xiàn):
最新商品
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
最新商品
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
高壓鍋
$998
擴展:
CSS的優(yōu)先級
按照選擇器搜索精確度來編寫: 行內(nèi)樣式 > ID選擇器 > 類選擇器 > 元素選擇器
就近原則: 哪個離得近,就選用哪個的樣式
CSS: 層疊樣式表
主要作用:
1. 美化頁面 2. 將頁面美化和HTML代碼進(jìn)行分離,提高代碼的服用型
選擇器:
元素選擇器: 標(biāo)簽的名稱{}
類選擇器: 以. 開頭 .類的名稱
ID選擇器: 以#開頭 , #ID的名稱 (ID必須是頁面上面唯一)
CSS浮動:
float : left, right 不再占有正常文檔流中的空間 , 流式布局
clear : both left right
?
CSS中的其它選擇器
選擇器分組: 選擇器1,選擇器2{ 屬性的名稱:屬性的值}
屬性選擇器:
a[title] a[titile="aaa"] a[href][title] a[href][title="aaa"]
后代選擇器: 爺爺選擇器 孫子選擇器 找出所有的后代
子元素選擇器: 父選擇器 > 兒子選擇器
偽類選擇器: 通常都是用在A標(biāo)簽上
?
?
使用DIV+CSS完成注冊頁面的優(yōu)化 需求分析由于我們的注冊頁面也是用table布局的,存在與首頁同樣的問題,所以我們需要使用div+css對我們的注冊頁面進(jìn)行美化
總共是5部分內(nèi)容
技術(shù)分析CSS的盒子模型: 萬物皆盒子
內(nèi)邊距:
padding-top:
padding-right:
padding-bottom:
padding-left:
padding:10px; 上下左右都是10px padding:10px 20px; 上下是10px 左右是20px padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px padding: 10px 20px 30px 40px; 上右下左, 順時針的方向
外邊距:
margin-top:
margin-right:
margin-bottom:
margin-left:
CSS絕對定位:
? position: absolute
? top: 控制距離頂部的位置
? left: 控制距離左邊的位置
步驟分析:總共是5部分
第一部分是LOGO部分
第二部分是導(dǎo)航菜單
第三部分是注冊部分
第四部分是FOOTER圖片
第五部分是一堆超鏈接
代碼實現(xiàn):
CSS部分的回顧:
? CSS: 層疊樣式表.
? CSS作用: 美化頁面,提高代碼的復(fù)用性
? 選擇器:
? 需要掌握的:
? 元素選擇器: 標(biāo)簽的名稱
? 類選擇器: 以 . 開頭
? ID選擇器: 以#開頭, #ID的名稱 ID必須是唯一的
? 優(yōu)先級: 按照選擇精確度: 行內(nèi)樣式 > ID選擇器 > 類選擇器 > 元素選擇器
? 就近原則
? 擴展選擇器:
? 選擇器分組: 選擇器1,選擇器2 以逗號隔開
? 后代選擇器: 爺爺 孫子 中間以空格隔開
? 子元素選擇器: 爸爸 > 兒子
? 屬性選擇器: 選擇器[屬性的名稱=""]
? 偽類選擇器: 超鏈接標(biāo)簽上使用
? 浮動: float屬性 left right
? 清除浮動: clear: both left right
?
? 盒子模型: 順時針 : 上右下左
? padding : 內(nèi)邊距 ,控制的是盒子內(nèi)容的距離
? margin : 外邊距 控制盒子與盒子之間的距離
? 絕對定位:
? position: absolute
? top:
? left:
使用JS完成簡單的數(shù)據(jù)校驗 需求分析使用JS完成對注冊頁面的簡單數(shù)據(jù)校驗,不允許出現(xiàn)用戶名或密碼為空的情況
技術(shù)分析什么是javascript: JavaScript一種直譯式腳本語言，
什么是腳本語言?
? java源代碼 ----> 編譯成.class文件 -----> java虛擬機中才能執(zhí)行
? 腳本語言: 源碼 -------- > 解釋執(zhí)行
? js由我們的瀏覽器來解釋執(zhí)行
HTML: 決定了頁面的框架
CSS: 用來美化我們的頁面
JS: 提供用戶的交互的
ECMAScript : 核心部分 ,定義js的語法規(guī)范
DOM: document Object Model 文檔對象模型 , 主要是用來管理頁面的
BOM : Browser Object Model 瀏覽器對象模型, 前進(jìn),后退,頁面刷新, 地址欄, 歷史記錄, 屏幕寬高
變量弱類型: var i = true
區(qū)分大小寫
語句結(jié)束之后的分號 ,可以有,也可以沒有
寫在script標(biāo)簽
基本類型
string
number
boolean
undefine
null
引用類型
對象, 內(nèi)置對象
類型轉(zhuǎn)換
js內(nèi)部自動轉(zhuǎn)換
運算符和java 一樣
"===" 全等號: 值和類型都必須相等
== 值相等就可以了
語句和java 一樣
alert() 直接彈框
document.write() 向頁面輸出
console.log() 向控制臺輸出
innerHTML: 向頁面輸出
獲取頁面元素: document.getElementById("id的名稱");
JS聲明變量:
? var 變量的名稱 = 變量的值
JS聲明函數(shù):
? var 函數(shù)的名稱 = function(){
? }
?
? function 函數(shù)的名稱(){
? }
JS的開發(fā)步驟1. 確定事件 2. 通常事件都會出發(fā)一個函數(shù) 3. 函數(shù)里面通常都會去操作頁面元素,做一些交互動作步驟分析: 代碼實現(xiàn)
javascript : 它是一門腳本語言 , 直接解釋執(zhí)行的語言
javascript:
? ECMAScript : 定義的語法
? DOM: document Object Model
? BOM: 瀏覽器對象模型
會定義變量: var 變量的名稱 = 變量的值
會定義函數(shù):
? function 函數(shù)的名稱(參數(shù)的名稱){
? }
使用JS完成圖片的輪播效果 需求分析在我們的網(wǎng)站首頁,通常需要有一塊區(qū)域,用來顯示廣告,但是這塊區(qū)域如果僅僅顯示一張圖片肯定是不夠的, 故我們需要采用動態(tài)循環(huán)播放我們所有的廣告. 顯示效果照抄黑馬程序員的網(wǎng)站首頁
技術(shù)分析: 步驟分析: 代碼實現(xiàn):
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/53144.html
摘要：今日目標(biāo)使用完成網(wǎng)站首頁的優(yōu)化使用完成網(wǎng)站注冊頁面的優(yōu)化使用完成簡單的數(shù)據(jù)校驗使用完成圖片輪播效果教學(xué)目標(biāo)了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語法，數(shù)據(jù)類型，能夠使用完成簡單的頁 今日目標(biāo) 使用CSS完成網(wǎng)站首頁的優(yōu)化 使用CSS完成網(wǎng)站注冊頁面的優(yōu)化 使用JS完成簡單的數(shù)據(jù)校驗 使用JS完成圖片輪播效果 教學(xué)目標(biāo)： 了解...
摘要：協(xié)議版本請求頭客戶端向服務(wù)器端表示，我能支持什么類型的數(shù)據(jù)。在地址欄上輸入項目名稱向報告，我這個應(yīng)用里面有這個，名字叫做具體的路徑是注冊的映射。的配置，通過這個對象，可以獲取在配置的時候一些信息先說，在寫怎么用，最后說有什么用。 1.Http協(xié)議 什么是協(xié)議 雙方在交互、通訊的時候， 遵守的一種規(guī)范、規(guī)則。 http協(xié)議 針對網(wǎng)絡(luò)上的客戶端 與 服務(wù)器端在執(zhí)行http請求的時候...
摘要：列名字段名表單中的屬性名要一至創(chuàng)建數(shù)據(jù)庫及表開發(fā)應(yīng)用搭建開發(fā)環(huán)境添加包創(chuàng)建實現(xiàn)類層業(yè)務(wù)層接口實現(xiàn)類數(shù)據(jù)訪問層接口實現(xiàn)類添加工具類表示層要注意注冊頁面登錄頁面 一、JavaWeb開發(fā)模式 C/S：客戶端 / 服務(wù)器 （胖客戶端）B/S：瀏覽器 / 服務(wù)器 （瘦客戶端） JavaBean: 就是一個普通類（實體bean），包含三樣標(biāo)準(zhǔn)：一個無參構(gòu)造、私有屬性、公共的getter和se...
摘要：張三標(biāo)簽可以自定義。區(qū)非法字符嚴(yán)格地講，在中僅有字符和是非法的。添加包依賴在查找指定節(jié)點的時候，根據(jù)語法規(guī)則來查找后續(xù)的代碼與以前的解析代碼一樣。這在生活中是不可能出現(xiàn)的。元素的格式化情況。網(wǎng)頁游戲，優(yōu)點客戶端只要有瀏覽器就可以了。 1.Xml概念 eXtendsible markup language 可擴展的標(biāo)記語言 2.XML 有什么用? 1.可以用來保存數(shù)據(jù) 2.可以用來...
閱讀 2977·2021-11-25 09:43
閱讀 3597·2021-11-24 11:13
閱讀 3369·2021-10-14 09:42
閱讀 2570·2021-09-23 11:53
閱讀 3618·2021-09-22 15:57
閱讀 3231·2021-09-02 09:54
閱讀 3508·2019-08-30 13:47
閱讀 1647·2019-08-29 16:55
