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