- 1、本文档共42页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 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
主板
显卡
硬盘
内存
机箱
电源
散热器
显示器支架
刻录机/光驱
声卡/扩展卡
您可能关注的文档
- Web前端开发(HTML5+CSS3+JavaScript) 教学大纲.doc
- 《Web前端开发(HTML5+CSS3+JavaScript)》 教案全套 严健武 第1--24次课:Web前端开发概述及HTML基础--- 实验8 登录与注册表单.docx
- Web前端开发(HTML5+CSS3+JavaScript) 课件 第1章 WEB前端开发概述.pptx
- Web前端开发(HTML5+CSS3+JavaScript) 课件 第2章 HTML基础.pptx
- Web前端开发(HTML5+CSS3+JavaScript) 课件 第2章 格式化文本和段落.pptx
- Web前端开发(HTML5+CSS3+JavaScript) 课件 第3章 3.1- 列表.pptx
- Web前端开发(HTML5+CSS3+JavaScript) 课件 第3章 3.2-超链接 图片热点 .pptx
- Web前端开发(HTML5+CSS3+JavaScript) 课件 第3章 3.3-表格.pptx
- Web前端开发(HTML5+CSS3+JavaScript) 课件 第3章 3.4-表单.pptx
- Web前端开发(HTML5+CSS3+JavaScript) 课件 第4章 CSS基础.pptx
文档评论(0)