文档详情

Web前端开发（HTML5+CSS3+JavaScript）课件第5章盒子模型与文本格式.pptx

发布：2024-12-10约3.08千字共42页下载文档

文本预览下载声明

Web前端基础技术;;一盒子模型;元素的width和height属性;（1）独立设置

margin-top:上外边距px；margin-right:右外边距px；margin-bottom：下外边距px；margin-left:左外边距px;1.段落：宽度为300px，高度为100px;

2.在1基础上，设置左、右内边距为100px；

3.在2基础上，设置左、右外边距为100px;;计算:宽度和高度是实际宽度和高度，包括边框，但不包括margin

如：width=400px,那么，width=border+padding+content=400px;n其前、后元素自动分行；例如段落前后的文本

n默认宽度为100%，高度为auto（由子元素高度决定）；

n可以改变宽度和高度；

n通常作为容器元素使用。

典型的块元素有：div、p、h1~h6、ul、li等。

其中：div是最常用的块元素，它没有默认属性。div作为容器元素可以包含任意其他的HTML元素，主要用于元素定位和页面布局。;2.行内元素特征;块元素和行内元素可以相互转换;示例将列表项转换为行内块元素[不换行]，实现列表项的水平排列。 ;style

ul{

list-style:none;

padding:0;

margin:0;

}

li{

display:inline-block;

}

a{/*撑大父元素*/

display:block;

padding:10px;

border:1pxsolid#ccc;

}

a:hover{

background-color:black;

color:white;

}

imgsrc=./梦想.jpg/

这是段落文字

span段落其他文字/span

pclass=p2

imgsrc=./梦想.jpg/

这是段落文字

span段落其他文字/span

pclass=p3

imgsrc=./梦想.jpg/

这是段落文字

span段落其他文字/span

/p;注：span标记相当于文本标签，仅仅用于文字说明，或者对需要单独设置样式的文字起到包裹、分隔作用；除非对部分文字设置样式外一般不会使用。;body

h3部分文字效果,使用span标记包裹/h3

p这是段落，包含

spanclass=red红/span

spanclass=green绿/span

spanclass=blue蓝/span三种文字/p

p这是spanclass=text粗体、斜体而且加下划线/span的文字/p

p这是段落，显示表达式：

Xspanclass=super1/spanspanclass=sub2/sapn+

Yspanclass=super1/spanspanclass=sub2/span=Z/p

/body;综合实例：仿京东二级菜单中导航链接的效果;素材

电脑整机

笔记本

游戏本

平板电脑

台式机

一体机

服务器/工作站

电脑配件

显示器

CPU

主板

显卡

硬盘

内存

机箱

电源

散热器

显示器支架

刻录机/光驱

声卡/扩展卡

显示全部

相似文档

Web前端开发（HTML5+CSS3+JavaScript） 课件 第5章 盒子模型与文本格式.pptx

Web前端开发（HTML5+CSS3+JavaScript）课件第5章盒子模型与文本格式.pptx