成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

MorePainMoreGain / 1085人閱讀

摘要：今日目標(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)簽: 水平分割線, 華麗的分割線

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)全都要變
技術(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)簽中

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

元素選擇:

元素的名稱(chēng){
  屬性名稱(chēng):屬性的值;
  屬性名稱(chēng):屬性的值;
}

ID選擇器:

以#號(hào)開(kāi)頭  ID在整個(gè)頁(yè)面中必須是唯一的s
#ID的名稱(chēng){
  屬性名稱(chēng):屬性的值;
  屬性名稱(chēng):屬性的值;
}

類(lèi)選擇器:

以 . 開(kāi)頭 
.類(lèi)的名稱(chēng){
   屬性名稱(chēng):屬性的值;
      屬性名稱(chēng):屬性的值;
}

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)
            流式布局
步驟分析:

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

第一部份: LOGO部分: 嵌套三個(gè)div

第二部分: 導(dǎo)航欄部分 : 放置5個(gè)超鏈接

第三部分: 輪播圖

第四部分:

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

第六部分: 抄第四部分的

第七部分: 放置一張圖片

第八部分: 放一堆超鏈接

代碼實(shí)現(xiàn): 


    
        
        
        
    
    
        
        

            
            
            
                
            
            

            
            
            
            
            
                
             
            

                
            

             
            

                
最新商品

                
                
                

                    
                

                
                

                    

                        
                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    
                

            

            
            
            

                
            

            
            

                
最新商品

                
                
                

                    
                

                
                

                    

                        
                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998

                    

                    

                        
                        
高壓鍋

                        
$998
擴(kuò)展:

CSS的優(yōu)先級(jí)

按照選擇器搜索精確度來(lái)編寫(xiě): 行內(nèi)樣式 > ID選擇器 > 類(lèi)選擇器 > 元素選擇器

就近原則: 哪個(gè)離得近,就選用哪個(gè)的樣式

CSS: 層疊樣式表

主要作用:

  1. 美化頁(yè)面
  2. 將頁(yè)面美化和HTML代碼進(jìn)行分離,提高代碼的服用型

選擇器:

元素選擇器: 標(biāo)簽的名稱(chēng){}

類(lèi)選擇器: 以. 開(kāi)頭 .類(lèi)的名稱(chēng)

ID選擇器: 以#開(kāi)頭 , #ID的名稱(chēng) (ID必須是頁(yè)面上面唯一)

CSS浮動(dòng):

float : left, right 不再占有正常文檔流中的空間 , 流式布局

clear : both left right

?

CSS中的其它選擇器

選擇器分組: 選擇器1,選擇器2{ 屬性的名稱(chēng):屬性的值}

屬性選擇器:

a[title]
a[titile="aaa"]
a[href][title]
a[href][title="aaa"]

后代選擇器: 爺爺選擇器 孫子選擇器 找出所有的后代

子元素選擇器: 父選擇器 > 兒子選擇器

偽類(lèi)選擇器: 通常都是用在A標(biāo)簽上

?

?

使用DIV+CSS完成注冊(cè)頁(yè)面的優(yōu)化 需求分析

由于我們的注冊(cè)頁(yè)面也是用table布局的,存在與首頁(yè)同樣的問(wèn)題,所以我們需要使用div+css對(duì)我們的注冊(cè)頁(yè)面進(jìn)行美化

總共是5部分內(nèi)容

技術(shù)分析

CSS的盒子模型: 萬(wàn)物皆盒子

內(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;  上右下左, 順時(shí)針的方向

外邊距:

margin-top:

margin-right:

margin-bottom:

margin-left:

CSS絕對(duì)定位:

? position: absolute

? top: 控制距離頂部的位置

? left: 控制距離左邊的位置

步驟分析:

總共是5部分

第一部分是LOGO部分

第二部分是導(dǎo)航菜單

第三部分是注冊(cè)部分

第四部分是FOOTER圖片

第五部分是一堆超鏈接

代碼實(shí)現(xiàn): 


    
        
        
         
    
    
        
        

            
            
            
            
            
            

            
            
            
            

                
                

                    

                        

                            會(huì)員注冊(cè)USER REGISTER
                            
                        

                        

                            用戶名:
                            
                        

                        

                            密碼:
                            
                        

                        

                            確認(rèn)密碼:
                            
                        

                        

                            email:
                            
                        

                        

                            姓名:
                            
                        

                        

                            性別:
                             男
                             女
                             妖
                            
                        

                        

                            出生日期:
                            
                        

                        

                            驗(yàn)證碼:
CSS部分的回顧:

? CSS: 層疊樣式表.

? CSS作用: 美化頁(yè)面,提高代碼的復(fù)用性

? 選擇器:

? 需要掌握的:

? 元素選擇器: 標(biāo)簽的名稱(chēng)

? 類(lèi)選擇器: 以 . 開(kāi)頭

? ID選擇器: 以#開(kāi)頭, #ID的名稱(chēng) ID必須是唯一的

? 優(yōu)先級(jí): 按照選擇精確度: 行內(nèi)樣式 > ID選擇器 > 類(lèi)選擇器 > 元素選擇器

? 就近原則

? 擴(kuò)展選擇器:

? 選擇器分組: 選擇器1,選擇器2 以逗號(hào)隔開(kāi)

? 后代選擇器: 爺爺 孫子 中間以空格隔開(kāi)

? 子元素選擇器: 爸爸 > 兒子

? 屬性選擇器: 選擇器[屬性的名稱(chēng)=""]

? 偽類(lèi)選擇器: 超鏈接標(biāo)簽上使用

? 浮動(dòng): float屬性 left right

? 清除浮動(dòng): clear: both left right

?

? 盒子模型: 順時(shí)針 : 上右下左

? padding : 內(nèi)邊距 ,控制的是盒子內(nèi)容的距離

? margin : 外邊距 控制盒子與盒子之間的距離

? 絕對(duì)定位:

? position: absolute

? top:

? left:

使用JS完成簡(jiǎn)單的數(shù)據(jù)校驗(yàn) 需求分析

使用JS完成對(duì)注冊(cè)頁(yè)面的簡(jiǎn)單數(shù)據(jù)校驗(yàn),不允許出現(xiàn)用戶名或密碼為空的情況

技術(shù)分析
JavaScript概述

什么是javascript: JavaScript一種直譯式腳本語(yǔ)言，

什么是腳本語(yǔ)言?

? java源代碼 ----> 編譯成.class文件 -----> java虛擬機(jī)中才能執(zhí)行

? 腳本語(yǔ)言: 源碼 -------- > 解釋執(zhí)行

? js由我們的瀏覽器來(lái)解釋執(zhí)行

HTML: 決定了頁(yè)面的框架

CSS: 用來(lái)美化我們的頁(yè)面

JS: 提供用戶的交互的

JS的組成:

ECMAScript : 核心部分 ,定義js的語(yǔ)法規(guī)范

DOM: document Object Model 文檔對(duì)象模型 , 主要是用來(lái)管理頁(yè)面的

BOM : Browser Object Model 瀏覽器對(duì)象模型, 前進(jìn),后退,頁(yè)面刷新, 地址欄, 歷史記錄, 屏幕寬高

JS的語(yǔ)法:

變量弱類(lèi)型: var i = true

區(qū)分大小寫(xiě)

語(yǔ)句結(jié)束之后的分號(hào) ,可以有,也可以沒(méi)有

寫(xiě)在script標(biāo)簽

JS的數(shù)據(jù)類(lèi)型:

基本類(lèi)型

string

number

boolean

undefine

null

引用類(lèi)型

對(duì)象, 內(nèi)置對(duì)象

類(lèi)型轉(zhuǎn)換

js內(nèi)部自動(dòng)轉(zhuǎn)換

JS的運(yùn)算符和語(yǔ)句:

運(yùn)算符和java 一樣

"===" 全等號(hào): 值和類(lèi)型都必須相等

== 值相等就可以了

語(yǔ)句和java 一樣

JS的輸出

alert() 直接彈框

document.write() 向頁(yè)面輸出

console.log() 向控制臺(tái)輸出

innerHTML: 向頁(yè)面輸出

獲取頁(yè)面元素: document.getElementById("id的名稱(chēng)");

JS聲明變量:

? var 變量的名稱(chēng) = 變量的值

JS聲明函數(shù):

? var 函數(shù)的名稱(chēng) = function(){

? }

?

? function 函數(shù)的名稱(chēng)(){

? }

JS的開(kāi)發(fā)步驟 
1. 確定事件
2. 通常事件都會(huì)出發(fā)一個(gè)函數(shù)
3. 函數(shù)里面通常都會(huì)去操作頁(yè)面元素,做一些交互動(dòng)作
步驟分析: 代碼實(shí)現(xiàn) 


    
        
        
        
    
    
        

            
用戶名:

            
密碼:

            
確認(rèn)密碼:

            
手機(jī)號(hào)碼:

            
郵箱:

javascript : 它是一門(mén)腳本語(yǔ)言 , 直接解釋執(zhí)行的語(yǔ)言

javascript:

? ECMAScript : 定義的語(yǔ)法

? DOM: document Object Model

? BOM: 瀏覽器對(duì)象模型

會(huì)定義變量: var 變量的名稱(chēng) = 變量的值

會(huì)定義函數(shù):

? function 函數(shù)的名稱(chēng)(參數(shù)的名稱(chēng)){

? }

使用JS完成圖片的輪播效果 需求分析

在我們的網(wǎng)站首頁(yè),通常需要有一塊區(qū)域,用來(lái)顯示廣告,但是這塊區(qū)域如果僅僅顯示一張圖片肯定是不夠的, 故我們需要采用動(dòng)態(tài)循環(huán)播放我們所有的廣告. 顯示效果照抄黑馬程序員的網(wǎng)站首頁(yè)

技術(shù)分析: 步驟分析: 代碼實(shí)現(xiàn):

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114072.html

相關(guān)文章

  • JavaWEB開(kāi)發(fā)02——CSS&JS

    摘要：今日目標(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)： 了解...

    高勝山 評(píng)論0 收藏0

  • JavaWEB開(kāi)發(fā)07——Http協(xié)議&Servlet

    摘要：協(xié)議版本請(qǐng)求頭客戶端向服務(wù)器端表示，我能支持什么類(lèi)型的數(shù)據(jù)。在地址欄上輸入項(xiàng)目名稱(chēng)向報(bào)告，我這個(gè)應(yīng)用里面有這個(gè)，名字叫做具體的路徑是注冊(cè)的映射。的配置，通過(guò)這個(gè)對(duì)象，可以獲取在配置的時(shí)候一些信息先說(shuō)，在寫(xiě)怎么用，最后說(shuō)有什么用。 1.Http協(xié)議 什么是協(xié)議 雙方在交互、通訊的時(shí)候， 遵守的一種規(guī)范、規(guī)則。 http協(xié)議 針對(duì)網(wǎng)絡(luò)上的客戶端 與 服務(wù)器端在執(zhí)行http請(qǐng)求的時(shí)候...

    hsluoyz 評(píng)論0 收藏0

  • JavaWEB開(kāi)發(fā)12——el&jstl

    摘要：列名字段名表單中的屬性名要一至創(chuàng)建數(shù)據(jù)庫(kù)及表開(kāi)發(fā)應(yīng)用搭建開(kāi)發(fā)環(huán)境添加包創(chuàng)建實(shí)現(xiàn)類(lèi)層業(yè)務(wù)層接口實(shí)現(xiàn)類(lèi)數(shù)據(jù)訪問(wèn)層接口實(shí)現(xiàn)類(lèi)添加工具類(lèi)表示層要注意注冊(cè)頁(yè)面登錄頁(yè)面 一、JavaWeb開(kāi)發(fā)模式 C/S：客戶端 / 服務(wù)器 （胖客戶端）B/S：瀏覽器 / 服務(wù)器 （瘦客戶端） JavaBean: 就是一個(gè)普通類(lèi)（實(shí)體bean），包含三樣標(biāo)準(zhǔn)：一個(gè)無(wú)參構(gòu)造、私有屬性、公共的getter和se...

    Lionad-Morotar 評(píng)論0 收藏0

  • JavaWEB開(kāi)發(fā)06——XML&tomcat

    摘要：張三標(biāo)簽可以自定義。區(qū)非法字符嚴(yán)格地講，在中僅有字符和是非法的。添加包依賴(lài)在查找指定節(jié)點(diǎn)的時(shí)候，根據(jù)語(yǔ)法規(guī)則來(lái)查找后續(xù)的代碼與以前的解析代碼一樣。這在生活中是不可能出現(xiàn)的。元素的格式化情況。網(wǎng)頁(yè)游戲，優(yōu)點(diǎn)客戶端只要有瀏覽器就可以了。 1.Xml概念 eXtendsible markup language 可擴(kuò)展的標(biāo)記語(yǔ)言 2.XML 有什么用? 1.可以用來(lái)保存數(shù)據(jù) 2.可以用來(lái)...

    zeyu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<