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

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

  1. 1、本文档共42页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多

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;

}

/style;单位、字体、文本和背景样式;1.CSS属性中的单位;;示例:使用百分比%,相对父元素对应的属性值;;2.CSS字体样式;2.CSS字体样式;2.4字体名:font-family:字体名1,字体名2,…;3.CSS文本样式;3.2行高?:line-height:px|em|百分比(相对字体,一般使用px应用于块元素);3.3首行缩进:text-indent:px|em|百分比(相对父元素宽度,但一般使用px);3.CSS文本样式;3.CSS文本样式;3.7垂直对齐方式?:vertical-align:top|middle|bottom|text-top|text-bottom|super|sub;vertical-align:text-top;;pclass=p1

imgsrc=./梦想.jpg/

这是段落文字

span段落其他文字/span

/p

pclass=p2

imgsrc=./梦想.jpg/

这是段落文字

span段落其他文字/span

/p

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

主板

显卡

硬盘

内存

机箱

电源

散热器

显示器支架

刻录机/光驱

声卡/扩展卡

文档评论(0)

balala11 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档