當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
html5中3个盒子怎样设置,Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务10 盒子模型及应用.pptx...
生活随笔
收集整理的這篇文章主要介紹了
html5中3个盒子怎样设置,Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务10 盒子模型及应用.pptx...
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
第五單元 盒子模型任務(wù)10 盒子模型及應(yīng)用學習目標盒子模型的概念掌握邊框的設(shè)置內(nèi)邊距的設(shè)置外邊距的設(shè)置學習目標了解:利用盒子模型布局網(wǎng)頁的優(yōu)勢任務(wù)目標實戰(zhàn)演練——制作古詩文欣賞網(wǎng)頁強化訓練——制作散文賞析網(wǎng)頁知識準備1. 盒子模型的概念知識準備1. 盒子模型的概念CSS將HTML頁面中的每一個元素看成是一個矩形盒子,占據(jù)一定的頁面空間。一個HTML頁面由很多這樣的盒子組成,這些盒子之間會相互影響,因此網(wǎng)頁布局主要是掌握:一個獨立的盒子的內(nèi)部結(jié)構(gòu);多個盒子之間的相互關(guān)系。盒子模型使用
設(shè)置四邊的邊框樣式為雙實線 設(shè)置上下邊框樣式為單實線,左右邊框樣式為虛線 設(shè)置上邊框樣式為單實線,左右邊框樣式為虛線,下邊框樣式為點線 知識準備小技巧:分別設(shè)置邊框樣式上邊框樣式:border-top-style右邊框樣式:border-right-style下邊框樣式:border-bottom-style左邊框樣式:border-left-style知識準備2. 邊框的設(shè)置:邊框?qū)挾冗吙驅(qū)挾?border-width):單位為像素px基本格式:border- width:上邊框 [ 右邊框 下邊框 左邊框];值復制原則:1個值:四邊2個值:上下/左右3個值:上/左右/下4個值:上/右/下/左知識準備示例:邊框?qū)挾鹊脑O(shè)置 設(shè)置四邊的邊框為1像素,單實線 設(shè)置上下邊框為2像素,左右邊框為1像素,單實線 設(shè)置上邊框為2像素,左右邊框為3像素,下邊框為4像素,單實線知識準備小技巧:分別設(shè)置邊框?qū)挾壬线吙驅(qū)挾?#xff1a;border-top-width右邊框?qū)挾?#xff1a;border-right-width下邊框?qū)挾?#xff1a;border-bottom-width左邊框?qū)挾?#xff1a;border-left-width知識準備2.邊框的設(shè)置:邊框顏色邊框顏色(border-color):預定義的顏色值、#RRGGBB或rgb(r,b,g)?;靖袷?#xff1a;border-color:上邊框 [ 右邊框 下邊框 左邊框];值復制原則:1個值:四邊2個值:上下/左右3個值:上/左右/下4個值:上/右/下/左知識準備示例:邊框顏色的設(shè)置總結(jié)
以上是生活随笔為你收集整理的html5中3个盒子怎样设置,Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务10 盒子模型及应用.pptx...的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux 学习笔记(基础)
- 下一篇: SpringBoot入门 (一) Hel