- 博客(23)
- 收藏
- 关注
RSS订阅原创 11-定位
定位元素的定位属性边偏移定位模式(定位的分类)静态定位（static）相对定位（relative）绝对定位（absolute）父级别没有定位父级别有定位子绝父相绝对定位的盒子水平/垂直居中固定定位（fixed）叠放次序四种定位总结定位模式转换元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分。边偏移边偏移属性描述top顶端偏移量，定义元素相对于其父元素上边...
2020-03-15 13:01:25
415
原创 10-版心和布局流程
版心和布局流程布局流程常用的布局方式一列固定宽度且居中两列左窄右宽型通栏平均分布型 在制作网页时，要想使页面结构清晰、有条理，需要对网页进行"排版"。 “版心”(可视区) 是指网页中主体内容所在的区域，一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：确...
2020-03-15 12:39:46
350
原创 09-浮动
浮动普通流（normal flow）浮动（float）什么浮动？浮动的特性浮动总结清除浮动清除浮动的本质清除浮动的方法额外标签法父级添加overflow属性方法使用after伪元素清除浮动使用before和after双伪元素清除浮动普通流（normal flow） 这个单词很多人翻译为文档流，字面翻译普通流或者标准流都可以。网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位...
2020-03-15 12:33:38
399
原创 08-盒子模型
盒子模型基础知识网页布局的本质盒子模型盒子边框盒子边框写法总结表格的细线边框圆角边框（CSS3）内外边距内边距外边距图片、背景文字和盒子对齐的区别外边距合并清除元素的默认内外边距盒子模型的宽度和高度盒子模型布局的稳定性CSS3盒模型盒子阴影基础知识网页布局的本质 其实CSS就三个大模块：盒子模型浮动定位 其余的都是细节。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒...
2020-03-15 11:50:21
750
原创 07-CSS三大特性
CSS三大特性CSS层叠性CSS继承性CSS优先级 层叠、继承 、优先级是我们学习CSS必须掌握的三个特性。CSS层叠性 所谓层叠性是指多种CSS样式的叠加，是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的...
2020-03-15 11:29:50
231
原创 06-CSS背景样式
CSS背景样式颜色背景背景透明(CSS3)图片背景背景平铺背景位置背景缩放(CSS3)背景附着背景简写多背景(CSS3)案例凹凸文字导航栏 CSS可以添加背景颜色和背景图片以及对图片的设置。background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背...
2020-03-15 11:20:14
351
原创 04-CSS选择器（复合选择器）
复合选择器交集选择器并集选择器后代选择器子元素选择器属性选择器伪元素选择器（CSS3)CSS书写规范空格规范选择器规范属性规范 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。交集选择器 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如：h3.special。 交集...
2020-03-15 11:08:55
461
原创 08-HTML5新标签与特性
HTML5新标签与特性文档类型设定和字符设定文档类型设定字符设定H5常用的新标签结构标签datalistfieldset新增的input type属性值常用新属性多媒体标签多媒体embed多媒体 audio多媒体 video文档类型设定和字符设定文档类型设定<!DOCTYPE html>字符设定<!-- HTML与XHTML中建议这样去写 --><met...
2020-03-15 10:38:40
377
原创 07-HTML标签（表单标签）
表单标签input控件label标签textarea控件下拉菜单表单域 现实中的表单，类似去银行办理信用卡填写的单子，目的是为了收集用户信息。在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分：表单控件：包含了具体的表单功能项，如：单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户...
2020-03-15 10:35:39
219
原创 06-HTML标签（表格标签）
表格标签创建表格表格属性表头标签表格结构表格标题合并单元格表格现在主要用来处理、显示表格式数据，而不是用来布局。创建表格 在HTML网页中要想创建表格就需要使用表格相关的标签，创建表格的基本语法格式如下：<table> <tr> <td>单元格内的文字</td> ... </tr> ...<...
2020-03-15 10:32:47
389
原创 05-HTML标签（列表标签）
列表标签无序列表有序列表自定义列表 容器里面装载文字或图表的一种形式叫列表，列表最大的特点就是整齐、整洁、有序。无序列表 无序列表的各个列表项之间没有顺序级别之分，是并列的。基本语法如下：<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ......
2020-03-15 10:28:43
136
原创 04-HTML标签（链接标签）
链接标签链接标签基础用法锚点定位base标签路径相对路径绝对路径链接标签基础用法 在HTML中创建超链接的语法如下：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>href： 用于指定链接目标的url地址，当为a标签使用了href属性的时候，它就具备了超链接的功能target：用于指定链接页面的打开方式，其取值有...
2020-03-15 10:25:39
931
原创 03-HTML标签（二）
HTML标签文本格式化标签标签属性图像标签特殊字符标签注释标签文本格式化标签 在网页中有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML的文本格式化标签，使文字以特殊的方式显示：标签显示效果<b></b>、<strong></strong>文字以粗体的方式显示<i></i>、&...
2020-03-14 21:23:48
212
原创 02-HTML标签（一）
HTML标签排版标签标题标签段落标签水平线标签换行标签div和span标签排版标签 排版标签主要和CSS配合使用，显示网页结构的标签，是网页布局最常用的标签。标题标签 为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即：<h1>、<h2>、<h3>、<h4>、<h5>和<h6>...
2020-03-14 21:21:16
240
原创 01-HTML基础知识
HTML基础知识网页基础知识浏览器浏览器内核Web标准Web标准的构成初识HTMLHTML的基本框架HTML标签HTML标签的分类HTML标签关系HTML标签的语义化文档类型字符集网页基础知识浏览器 网页主要由文字、图像和超链接等元素构成，除了这些元素网页中还可以包含音频、视频以及Flash等。而浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Sa...
2020-03-14 21:14:35
372
原创 06 CSS通用样式-----表格
CSS通用样式-----表格优化表格默认风格个性风格斑马纹风格边框风格鼠标悬停风格紧凑单元格风格表格行风格响应式表格优化表格 Bootstrap3.0优化了表格结构标签，仅支持下面的表格标签及其样式优化设计：table：定义表格容器，构建表格数据的框架thead：定义表头容器tbody：定义表格内容容器tr：定义数据行结构td：定义表格数据的单元，即定义单元格th：定义每列（或...
2019-11-01 14:23:35
441
原创 05 CSS通用样式--列表
CSS通用样式--列表普通列表定义列表普通列表 HTML列表结构可分为两种类型：有序列表和无序列表。无序列表使用项目符号来表示列表，而有序列表则使用编号来标识列表的项目顺序。具体使用标签如下：ul：标识无序列表ol：标识有序列表li：标识列表项目 列表样式在默认状态下，呈现缩进显示，并带有列表项目符号。Bootstrap3.0定义了list-unstyled类样式，使用它可以移...
2019-11-01 09:34:16
282
原创 04 CSS通用样式----版式
CSS通用样式----版式标题文本强调强调类加粗和斜体对齐缩略语地址 Bootstrap通过重写HTML默认样式，实现对页面版式的优化，以适应当前网页信息呈现的流行趋势。标题 在Bootstrap中，HTML定义的所有标题标签都是可用的，从h1到h6。Bootstrap标题样式进行了显著的优化：重设上下边界为固定值，默认是一个行高距离，优化后统一为上为20像素，下为10像素，且不分标...
2019-10-31 18:33:59
637
原创 02 响应式设计基础
响应式设计认识响应式设计设计响应式图片认识响应式设计 响应式设计可以使网页适应不同的设备，开发人员只需要正确地实现响应式Web设计，网站就可以很好地适合各种设备。在现阶段，响应式Web设计的实现途径包括：弹性网络、液态布局、弹性图片显示、使用CSS Media Query技术等，基本设计思路如下：保证页面元素及布局具有足够的弹性来兼容各类设备平台和屏幕尺寸增强可读性和易用性，帮助用户在...
2019-10-30 09:05:36
348
原创 01 初识Bootstrap
初始BootstrapBootstrap特性Bootstrap构成Bootstrap的特色Bootstrap的功能Bootstrap插件使用BootstrapBootstrap开发工具和资源下载定制Bootstrap下载Bootstrap定制Bootstrap认识Bootstrap结构源码版Bootstrap文件结构编译版Bootstrap文件结构安装Bootstrap本地安装在线安装实战案例设计...
2019-10-29 16:06:41
710
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人