邢台医院网站建设,做软件的公司网站有哪些,百度地图导航网页版,建个企业网站备案需要多长时间目录 一、HTML概述和基本结构1.1 概述1.2 基本结构1.3 html文档类型1.4 html注释 二、HTML常用标签2.1 块标签2.2 行内标签2.3 字符实体2.4 图片标签2.5 链接标签2.6 列表标签2.7 表单2.8 表格 三、页面布局四、CSS样式4.1 基本语法和页面引用4.2 文本样式设置4.3 颜色表示法4.… 目录 一、HTML概述和基本结构1.1 概述1.2 基本结构1.3 html文档类型1.4 html注释 二、HTML常用标签2.1 块标签2.2 行内标签2.3 字符实体2.4 图片标签2.5 链接标签2.6 列表标签2.7 表单2.8 表格 三、页面布局四、CSS样式4.1 基本语法和页面引用4.2 文本样式设置4.3 颜色表示法4.4 选择器1. 标签选择器2. id选择器3. 类选择器4. 层级(后代)选择器5. (群)组选择器6. 属性选择器7. 父子选择器8. 相邻兄弟选择器9. 伪类及伪元素选择器 4.5 css盒子模型1. 设置宽高2. 设置边框3. 设置内间距4. 设置外边距5. 盒子模型的实际尺寸6. overflow元素的溢出处理7. 块元素、内联元素、内联块元素 4.6 浮动1. 浮动元素的特性2. 浮动可以实现的效果3. 解决浮动导致父元素高度无法撑开的问题 4.7 定位1. 相对定位2. 绝对定位3. 固定定位 4.8 background属性4.9 综合案例 五、HTML5与CSS35.1 css权重5.2 css3新增选择器5.3 css3圆角和rgba5.4 css3 transition动画5.5 css3 transform变换5.6 css3 animation动画5.7 css3 浏览器前缀5.8 html5标签 六、移动端页面开发6.1 视口6.2 页面适配1. 流体布局2. 响应式布局3. 基于rem布局 七、JavaScript7.1 JavaScript嵌入页面的方式7.2 变量1. 变量类型2. 语句与注释3. 变量、函数、属性、函数参数命名规范4. 变量的作用域 7.3 获取元素1. getElementById2. getElementsByTagName 7.4 操作元素属性1. 通过“.”操作属性2. 通过“[ ]”操作属性3. innerHTML 7.5 函数1. 函数的定义和执行2. 变量与函数预解析3. 提取行间事件4. 匿名函数5. 函数传参6. 函数的return关键字 7.6 条件语句7.7 数组及操作方法1. 定义数组的方法2. 操作数组中数据的方法3. 多维数组 7.8 循环语句7.9 字符串处理方法7.10 类型转换7.11 定时器7.12 常用的内置对象 八、JQuery8.1 jquery加载8.2 jquery选择器1. 获取元素2. 对选择集进行过滤3. 选择集转移4. 判断是否选择到了元素 8.3 jquery样式操作1. 操作行间样式2. 操作样式名3. 常用特殊效果样式 8.4 jquery常用事件8.5 jquery链式调用8.6 jquery动画8.7 尺寸相关、滚动事件8.8 jquery属性操作1. 获取和设置html的内容2. prop() 取出或设置某个属性的值 8.9 事件冒泡8.10 事件委托8.11 元素节点操作8.12 JSON8.13 ajax与jsonp1. ajax2. jsonp 九、本地化存储9.1 cookie9.2 localStorage9.3 sessionStorage 十、JQueryUI10.1 案例-实现数值滚动条 十一、移动端库和框架11.1 移动端js事件11.2 zeptojs11.3 swiper11.4 bootstrap1. bootstrap容器2. bootstrap栅格系统3. bootstrap列偏移4. bootstrap按钮5. bootstrap表单6. bootstrap导航菜单7. bootstrap路径导航8. bootstrap巨幕9. bootstrap模态框10. bootstrap下拉菜单11. bootstrap隐藏类12. bootstrap响应式图片 11.5 案例1. 布局拆分2. 目录结构3. 导航栏实现4. 巨幕实现5. 活动介绍实现6. 商品列表实现 十二、正则表达式12.1 创建正则表达式1. 使用构造函数创建2. 使用字面量语法创建 12.2 匹配规则12.3 量词12.4 任意一个或者范围12.5 限制开头结尾12.6 常用的匹配方法 一、HTML概述和基本结构
1.1 概述
HTML是 HyperText Mark-up Language 的首字母简写意思是超文本标记语言超文本指的是超链接标记指的是标签是一种用来制作网页的语言这种语言由一个个的标签组成用这种语言制作的文件保存的是一个文本文件文件的扩展名为html或者htm一个html文件就是一个网页html文件用编辑器打开显示的是文本可以用文本的方式编辑它如果用浏览器打开浏览器会按照标签描述内容将文件渲染成网页显示的网页可以从一个网页链接跳转到另外一个网页。
1.2 基本结构
一个html的基本结构如下
!DOCTYPE html
html langenhead meta charsetUTF-8title网页标题/title/headbody网页显示内容/body
/html第一行是文档声明第二行“”标签和最后一行“”定义html文档的整体“”标签中的‘lang“en”’定义网页的语言为英文定义成中文是’lang“zh-CN”,不定义也没什么影响它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素“”标签里面负责对网页进行一些设置以及定义标题设置包括定义网页的编码格式外链css样式文件和javascript文件等设置的内容不会显示在网页上标题的内容会显示在标题栏“”内编写网页上显示的内容。
1.3 html文档类型
目前常用的两种文档类型是xhtml 1.0和html5, 两种文档的区别:
文档声明和编码声明html5新增了标签元素以及元素属性 (1) xhtml 1.0 xhtml 1.0 是html5之前的一个常用的版本目前许多网站仍然使用此版本。 此版本文档用sublime text创建方法 html:xt tab 文档示例
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml xml:langenheadmeta http-equivContent-Type contenttext/html;charsetUTF-8title xhtml 1.0 文档类型 /title/headbody/body
/html(2) html5 pc端可以使用xhtml 1.0也可以使用html5html5是向下兼容的 此版本文档用sublime text创建方法 html:5 tab 或者 ! tab 文档示例
!DOCTYPE html
html langenheadmeta charsetUTF-8title html5文档类型 /title/headbody/body
/html1.4 html注释
html文档代码中可以插入注释注释是对代码的说明和解释注释的内容不会显示在页面上html代码中插入注释的方法是
!-- 这是一段注释 --二、HTML常用标签
2.1 块标签
块级元素block-level elements是指在页面上显示为块状独占一行的 HTML 元素。这些块级元素一般用于组织和结构化页面的内容。以下是一些常见的 HTML 块级标签示例
div定义一个 HTML 文档中的分区或节并且通常用于容纳其他 HTML 元素或组织页面的布局。p定义一个段落用于显示一段文本。h1 - h6定义标题h1 表示最高级别的标题h6表示最低级别的标题。ul定义一个无序列表用于显示项目的列表其中的项目通常使用 标签表示。ol定义一个有序列表用于显示带有编号的项目列表。dl定义一个定义列表配合dt和dd一起使用table定义一个表格用于显示表格数据其中的行由 tr 标签表示每一行内的单元格则由 td 或 th 标签表示。blockquote定义一个长文本的块引用常用于引用他人的话或段落。header定义页面或节的页眉用于包含页面的标题、标志或导航等内容。footer定义页面或节的页脚用于包含版权信息、联系方式等内容。section定义一个页面或节中的区域用于组织相关的内容。form : 标签用于创建包含表单元素的区域通常用于收集用户输入的数据。
2.2 行内标签
行内标签它们不会独占一行而是在行内根据上下文进行排列。行内元素主要用于标记文本中的小片段或对文本进行更具体的样式调整。以下是一些常见的行内元素标签示例
a用于创建超链接通过设置href属性指向目标链接。span作为一个通用的行内容器用于包裹需要具体处理的文本或其他行内元素。img用于插入图像通过设置src属性指定图像的 URL。strong表示重要文本被浏览器默认显示为粗体。em表示强调的文本被浏览器默认显示为斜体。code用于标记代码片段被浏览器默认显示为等宽字体。label用于为表单元素创建标签通过设置for属性与相应的表单元素关联。input用于创建输入字段如文本框、复选框、单选按钮等。select用于创建下拉菜单通过插入元素定义选项。button用于创建按钮可以用于触发特定的操作。
2.3 字符实体
代码中成段的文字如果文字间想空多个空格在代码中空多个空格在渲染成网页时只会显示一个空格如果想显示多个空格可以使用空格的字符实体 在网页上显示 “” 和 “” 会误认为是标签想在网页上显示“”和“”可以使用它们的字符实体lt;和gt;
2.4 图片标签
img标签可以在网页上插入一张图片它是独立使用的标签它的常用属性有
src属性 定义图片的引用地址alt属性 定义图片加载失败时显示的文字搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片所以此属性非常重要。
img srcimages/pic.jpg alt产品图片 /绝对路径和相对路径 像网页上插入图片这种外部文件需要定义文件的引用地址引用外部文件还包括引用外部样式表javascript等等引用地址分为绝对地址和相对地址。 绝对地址相对于磁盘的位置去定位文件的地址相对地址相对于引用文件本身去定位被引用的文件地址 绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件相对路径就没有这个问题。相对路径的定义技巧“ ./ ” 表示当前文件所在目录下比如“./pic.jpg” 表示当前目录下的pic.jpg的图片这个使用时可以省略。“ …/ ” 表示当前文件所在目录下的上一级目录比如“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。 2.5 链接标签
a标签可以在网页上定义一个链接地址它的常用属性有
href属性 定义跳转的地址title属性 定义鼠标悬停时弹出的提示文字框target属性 定义链接窗口打开的位置 target“_self” 缺省值新页面替换原来的页面在原来位置打开target“_blank” 新页面会在新开的一个浏览器窗口打开
a href#/a !-- # 表示链接到页面顶部 --
a hrefhttp://www.baidu.com/ title百度一下百度/a
a href2.html target_blank测试页面2/a2.6 列表标签
(1) 有序列表 在网页上定义一个有编号的内容列表可以用ol、li配合使用来实现代码如下
olli列表文字一/lili列表文字二/lili列表文字三/li
/ol在网页上生成的列表每条项目上会按1、2、3编号有序列表在实际开发中较少使用。
(2) 无序列表 在网页上定义一个无编号的内容列表可以用ul、li配合使用来实现代码如下
ullia href#新闻标题一/a/lilia href#新闻标题二/a/lilia href#新闻标题三/a/li
/ul在网页上生成的列表每条项目上会有一个小图标这个小图标在不同浏览器上显示效果不同所以一般会用样式去掉默认的小图标如果需要图标可以用样式自定义图标从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
(3) 定义列表 定义列表通常用于术语的定义。dl标签表示列表的整体。dt标签定义术语的题目。dd标签是术语的解释。一个dl中可以有多个题目和解释代码如下
h3前端三大块/h3
dldthtml/dtdd负责页面的结构/dddtcss/dtdd负责页面的表现/dddtjavascript/dtdd负责页面的行为/dd/dl2.7 表单
表单用于搜集不同类型的用户输入表单由不同类型的标签组成相关标签及属性用法如下
form标签 定义整体的表单区域 action属性 定义表单数据提交地址method属性 定义表单提交的方式一般有“get”方式和“post”方式 label标签 为表单元素定义文字标注input标签 定义通用的表单元素 type属性 type“text” 定义单行文本输入框type“password” 定义密码输入框type“radio” 定义单选框type“checkbox” 定义复选框type“file” 定义上传文件type“submit” 定义提交按钮type“reset” 定义重置按钮type“button” 定义一个普通按钮type“image” 定义图片作为提交按钮用src属性定义图片地址type“hidden” 定义一个隐藏的表单域用来存储值 value属性 定义表单元素的值name属性 定义表单元素的名称此名称是提交数据时的键名 textarea标签 定义多行文本输入框select标签 定义下拉表单元素option标签 与select标签配合定义下拉表单元素中的选项 下面是一个注册表单的示例:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
form actionhttp://www... methodgetplabel姓名/labelinput typetext nameusername//pplabel密码/labelinput typepassword namepassword//pplabel性别/labelinput typeradio namegender value0/ 男input typeradio namegender value1/ 女/pplabel爱好/labelinput typecheckbox namelike valuesing/ 唱歌input typecheckbox namelike valuerun/ 跑步input typecheckbox namelike valueswiming/ 游泳/pplabel照片/labelinput typefile nameperson_pic/pplabel个人描述/labeltextarea nameabout/textarea/pplabel籍贯/labelselect namesiteoption value0北京/optionoption value1上海/optionoption value2广州/optionoption value3深圳/option/select/ppinput typesubmit name value提交!-- input类型为submit定义提交按钮还可以用图片控件代替submit按钮提交一般会导致提交两次不建议使用。如input typeimage srcxxx.gif--input typereset name value重置/p
/form
/body
/html效果图如下:
2.8 表格
table标签声明一个表格它的常用属性如下 border属性 定义表格的边框设置值是数值cellpadding属性 定义单元格内容与边框的距离设置值是数值cellspacing属性 定义单元格与单元格之间的距离设置值是数值align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有left | center | right tr标签定义表格中的一行td和th标签定义一行中的一个单元格td代表普通单元格th表示表头单元格常用属性如下 align 设置单元格中内容的水平对齐方式,设置值有left | center | rightvalign 设置单元格中内容的垂直对齐方式 top | middle | bottomcolspan 设置单元格水平合并设置值是数值rowspan 设置单元格垂直合并设置值是数值
例如制作如下表格:
!-- table(trtd*5)*6 --
table border1 width700 aligncenter cellpadding10 cellspacing0trtd colspan5基本情况/td/trtrtd width15%性名/tdtd width25%/tdtd width15%性别/tdtd width25%/tdtd rowspan5img srcimages/person.png alt人物图片/td/trtrtd电子信箱/tdtd/tdtd联系电话/tdtd/td/trtrtd民族/tdtd/tdtd出生日期/tdtd/td/trtrtd政治面貌/tdtd/tdtd健康情况/tdtd/td/trtrtd籍贯/tdtd/tdtd学历/tdtd/td/tr
/table三、页面布局
布局也可以叫做排版它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上布局的方式分为两种
table布局通过table元素将页面空间划分成若干个单元格将文字或图片等元素放入单元格中隐藏表格的边框从而实现布局。这种布局方式也叫传统布局目前主要使用在EDM(广告邮件中的页面)中主流的布局方式不用这种。HTMLCSS布局(DIVCSS)主要通过CSS样式设置来布局文字或图片等元素需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局它比传统布局要复杂目前是主流的布局方式。
四、CSS样式
4.1 基本语法和页面引用
css的定义方法是
选择器 { 属性1:值1; 属性2:值2; 属性3:值3;}选择器是将样式和页面元素关联起来的名称属性是希望设置的样式属性每个属性有一个或多个值。代码示例
div{ width:100px; height:100px; color:red
}css页面引入方法
外联式通过link标签链接到外部样式表到页面中。
link relstylesheet typetext/css hrefcss/main.css嵌入式通过style标签在网页上创建嵌入的样式表。
style typetext/cssdiv{ width:100px; height:100px; color:red }......
/style内联式通过标签的style属性在标签上直接写样式。
div stylewidth:100px; height:100px; color:red ....../div4.2 文本样式设置
常用的应用文本的css样式
color设置文字的颜色如 color:red;font-size 设置文字的大小有3种表现形式px|cm|百分比, 如font-size:12px;font-family 设置文字的字体多个字体,浏览器首先匹配最前面的,如font-family:‘微软雅黑’;font-style 设置字体是否倾斜normal正常italic斜体如font-style:‘normal’; 设置不倾斜font-style:‘italic’;设置文字倾斜font-weight 设置文字是否加粗如font-weight:bold; 设置加粗 font-weight:normal 设置不加粗line-height 设置文字的行高设置行高相当于在每行文字的上下同时加间距 如line-height:24px; font 同时设置文字的几个属性写的顺序有兼容问题建议按照如下顺序写 font是否加粗 字号/行高 字体如 font:normal 12px/36px ‘微软雅黑’;text-decoration 设置文字的下划线如text-decoration:none; 将文字下划线去掉text-indent 设置文字首行缩进如text-indent:24px; 设置文字首行缩进24px text-align 设置文字水平对齐方式如text-align:center 设置文字水平居中 text-transform转换文本的大小写形式如 uppercase大写和 lowercase小写。line-height设置文本行高控制行与行之间的间距。letter-spacing调整字符之间的间距。word-spacing调整单词之间的间距。text-shadow为文本添加阴影效果。white-space控制文本的空白处理方式如换行、截断等。text-overflow控制文本溢出时的处理方式如text-overflow:clip 将多出的文字裁剪掉 text-overflow:ellipsis 将多出的文字显示成省略号。white-space 一般用来设置文本不换行如white-space:nowrap 设置文本不换行 一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号text-shadow为文本添加阴影效果。text-justify控制文本对齐方式特别是对于具有两个或多个字符之间的间隔处理。text-orientation设置文本的方向可以为竖排或倒排文本。text-underline-position调整下划线的位置。word-break控制词的断行方式。word-wrap控制文本在到达容器边界时是否进行自动换行。hyphens控制连字符的使用以控制长单词的换行和分隔。text-align-last控制文本在行末最后一行的对齐方式。text-size-adjust调整移动设备上文本大小的显示方式。unicode-bidi控制文本的方向和处理方式对于一些特殊语言或字符集很有用。direction设置文本的书写方向如 rtl从右到左或 ltr从左到右。font-variant控制字体的变体效果如小型大写字母等。writing-mode指定文本的书写模式如水平、竖排或倒排。overflow-wrap控制文本在容器边界处是否自动换行。text-underline-offset调整下划线与文本之间的垂直偏移量。
4.3 颜色表示法
css颜色值主要有三种表示方法
颜色名表示比如red 红色gold 金色rgb表示比如rgb(255,0,0)表示红色16进制数值表示比如#ff0000 表示红色这种可以简写成 #f00
4.4 选择器
1. 标签选择器
标签选择器此种选择器影响范围大建议尽量应用在层级选择器中。 举例
*{margin:0;padding:0}
div{color:red} div..../div !-- 对应以上2条样式 --
div classbox..../div !-- 对应以上2条样式 --2. id选择器
通过id的名称来做选择元素元素的id名称不能重复所以一个样式设置项只能对应于页面上一个元素不能复用id名一般给程序使用所以不推荐使用id作为选择器。 举例
#box{color:red} div idbox..../div !-- 对应以上一条样式其它元素不允许应用此样式 --3. 类选择器
通过类名来选择元素一个类可应用于多个元素一个元素上也可以使用多个类应用灵活可复用是css中应用最多的一种选择器。 举例
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
/*这样表示classbox的div*/
div.box{color:black} div classbox..../div
div classred..../div
h1 classred big mt10..../h1
p classred mt10..../p4. 层级(后代)选择器
主要应用在选择父元素下的子元素或者子元素下面的子元素可与标签元素结合使用减少命名同时也可以通过层级防止命名冲突。层级选择器直接用空格隔开。 举例
/* 父级选择器 子级选择器 孙级选择器 ...等等中间用空格 */
.box span{color:red}
.box .red{color:pink}
.red{color:red}div classboxspan..../spana href# classred..../a
/divh3 classred..../h35. (群)组选择器
多个选择器如果有同样的样式设置可以使用组选择器。组内的选择器直接用逗号隔开 举例
/* 多个选择器直接组成一个组用逗号隔开,同时生效 */
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
/* 这个表示带有idbox2的div*/
div#box2{color:yellow} div classbox1..../div
div classbox2..../div
div classbox3..../div6. 属性选择器
/*匹配所有title属性*/
[title]{width: 200px;height:200px;border:1px solid red;}
/*匹配img标签的title属性*/
img[title]{width: 200px;height:200px;border:1px solid red;}
/*匹配img的title和id属性 */
img[title][id]{width: 200px;height:200px;border:1px solid red;}
/*匹配img标签id属性为tag01的*/
img[title][idtag01]{width: 200px;height:200px;border:1px solid red;}img src alt title idtag01 /
img src alt title idtag02 /7. 父子选择器
父子选择器使用符号 它选择作为某个元素的直接子元素的元素。它建立了父元素和子元素之间的直接关系。
trtd{color: red;background-color: #999999;font-size: 90px;}tabletrtd我是td/td/tr
/table8. 相邻兄弟选择器
兄弟选择器Adjacent Sibling Selector是一种CSS选择器它允许您选择某个元素之后紧邻的同级元素。兄弟选择器使用加号来表示。
styleh1 p {color: blue;}
/styleh1标题/h1
p这个段落将会应用蓝色文本颜色因为它紧跟在 h1 元素后面。/p
p这个段落不会应用蓝色文本颜色因为它不是紧跟在 h1 元素后面。/p
h2副标题/h2
p这个段落不会应用蓝色文本颜色因为它不是紧跟在 h1 元素后面。/p在上面的示例中兄弟选择器 h1 p 选择紧跟在 h1 元素后的 p 元素并将它们的文本颜色设置为蓝色。因此第一个 p 元素将会应用蓝色文本颜色而其他的 p 元素则不会应用该样式。
9. 伪类及伪元素选择器
伪类和伪元素选择器是用来选择特定元素的一种方式它们通过在选择器后面使用冒号:来标识。 伪类是用于选择处于特定状态的元素比如用户交互的状态或者元素所处的位置等。 以下是一些常见的伪类选择器示例
:hover选择鼠标指针悬停在上面的元素。:active选择被激活或点击的元素。:link : 在点击超链接之前表现的样式:visited : 点击过超链接后表现的样式:active : 鼠标点击的同时表现的样式:focus选择当前拥有焦点的元素。:after : 在元素之后添加内容,需要和content属性一起使用设置在对象后发生的内容。默认地这个伪元素是inline行内元素不过可以使用属性 display 改变这一点。:first-child选择作为其父元素的第一个子元素的元素。:last-child选择作为其父元素的最后一个子元素的元素。:nth-child(n)选择作为其父元素的第 n 个子元素的元素。
伪元素用于向元素的某个部分应用样式并且不需要在HTML中添加额外的标记。 以下是一些常见的伪元素选择器示例
::before在元素内容之前插入生成的伪元素。::after在元素内容之后插入生成的伪元素。::first-line选择元素的第一行。::first-letter选择元素内容的第一个字母。
style/* 伪类选择器 */a:hover {color: red;}li:first-child {font-weight: bold;}/* 伪元素选择器 */p::before {content: 前缀;font-weight: bold;}p::after {content: 后缀;font-weight: bold;}span::first-letter {font-size: 2em;font-weight: bold;}
/stylea href#鼠标悬停时变红色/aulli第一项/lili第二项/lili第三项/li
/ulp这是一个段落。/pspan这是一段文本。/span4.5 css盒子模型
CSS 盒子模型是用来描述 HTML 元素在页面中所占空间的一种模型。它将每个元素看作是一个矩形的盒子由盒子的内容(content)、内边距padding、边框border和外边距margin组成。盒子模型示意图如下
1. 设置宽高
当为元素应用宽度width和高度height样式时通常是指内容区域的宽度和高度并不包括内边距、边框和外边距。默认情况下CSS 盒子模型使用的是标准盒子模型content-box但在某些情况下你也可以选择使用另一种盒子模型border-box其中宽度和高度将包括内边距和边框。 示例代码
style typetext/css.box {width: 200px;height: 100px;}
/stylediv classboxContent
/div2. 设置边框
边框样式有3种:
solid: 边框实线double: 双线dashed: 虚线dotted点状边框由一系列小点组成groove凹陷边框呈现立体凹槽效果。ridge凸起边框呈现立体凸起效果。inset内嵌边框在边框内部显示一个凹陷效果。outset外嵌边框在边框外部显示一个凸起效果。 设置一边的边框比如顶部边框可以按如下设置
style typetext/css.box {width: 200px;height: 100px;border: 1px solid black; /* 设置四周边框1px,实线,黑色*/border-top-color:red; /* 设置顶部边框颜色为红色 */border-top-width:10px; /* 设置顶部边框粗细为10px */border-top-style:solid; /* 设置顶部边框的线性为实线常用的有solid(实线) dashed(虚线) dotted(点线); */}
/stylediv classboxContent
/div效果图:
3. 设置内间距
设置盒子四边的内间距可设置如下
padding-top20px; /* 设置顶部内间距20px */
padding-left:30px; /* 设置左边内间距30px */
padding-right:40px; /* 设置右边内间距40px */
padding-bottom:50px; /* 设置底部内间距50px */上面的设置可以简写如下
/* 四个值按照顺时针方向,分别设置的是上方20像素右方40像素下方50像素左方30像素的内边距值。 */
padding20px 40px 50px 30px; padding后面还可以跟3个值2个值和1个值它们分别设置的项目如下
/* 设置上方内边距为20px左右内边距为40px底部内边距为50px */
padding20px 40px 50px;
/* 设置上下内边距为20px左右内边距为40px*/
padding20px 40px;
/* 设置四边内边距为20px */
padding20px; 4. 设置外边距
外边距的设置方法和padding的设置方法相同将上面设置项中的’padding’换成’margin’就是外边距设置方法。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle typetext/css.box {width: 100px;height: 100px;border: 1px solid black; /* 设置四周边框1px,实线,黑色*/border-top-color:red; /* 设置顶部边框颜色为红色 */border-top-width:10px; /* 设置顶部边框粗细为10px */border-top-style:solid; /* 设置顶部边框的线性为实线常用的有solid(实线) dashed(虚线) dotted(点线); */padding: 20px 40px 50px; /* 设置上方内边距为20px,左右内边距为40px,下方内边距为50px;*/margin:20px; /* 设置外边距为20px */}/style
/head
body
div classboxContent1/div
div classboxContent2/div
/body
/html5. 盒子模型的实际尺寸
盒子的width和height设置的是盒子内容的宽和高不是盒子本身的宽和高盒子的真实尺寸计算公式如下
盒子宽度 width padding左右 border左右盒子高度 height padding上下 border上下 例如:
!DOCTYPE html
html langen
headmeta charsetUTF-8title盒子的真实尺寸/titlestyle typetext/css.box01{width:50px;height:50px;background-color:gold;}.box02{width:50px;height:50px;background-color:gold;border:50px solid #000;}.box03{width:50px;height:50px;background-color:gold;border:50px solid #000;padding: 50px;}/style
/head
bodydiv classbox011/divdiv classbox022/divdiv classbox033/div
/body
/html效果图:
6. overflow元素的溢出处理
当子元素的尺寸超过父元素的尺寸时需要设置父元素显示溢出的子元素的方式设置的方法是通过overflow属性来设置。overflow的设置项
visible 默认值。内容不会被修剪会呈现在元素框之外。hidden 内容会被修剪并且其余内容是不可见的此属性还有清除浮动、清除margin-top塌陷的功能。scroll 内容会被修剪但是浏览器会显示滚动条以便查看其余的内容。auto 如果内容被修剪则浏览器会显示滚动条以便查看其余的内容。inherit 规定应该从父元素继承 overflow 属性的值。 例如:
style typetext/css.box{width:200px;height:50px;background-color:gold;margin:50px auto 100px;}.box2{width:200px;height:100px;border: 1px solid green;}/stylediv classbox第一个盒子,父盒子div classbox2子盒子子盒子子盒子子盒子子盒子子盒子子盒子/div
/div显示效果: 这是一个默认效果, 即overflow:visible ,inherit效果同默认. 如果设置为hidden, 效果如下: 设置为scroll和auto的效果:
7. 块元素、内联元素、内联块元素
元素就是标签布局中常用的有三种标签块元素、内联元素、内联块元素了解这三种元素的特性才能熟练的进行页面布局。
(1) 块元素 块元素也可以称为行元素布局中常用的标签如div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素它在布局中的行为
支持全部的样式如果没有设置宽度默认的宽度为父级宽度100%盒子占据一行、即使设置了宽度
(2) 内联元素 内联元素也可以称为行内元素布局中常用的标签如a、span、em、b、strong、i等等都是内联元素它们在布局中的行为
支持部分样式不支持宽、高、margin上下、padding上下宽高由内容决定盒子并在一行代码换行盒子之间会产生间距子元素是内联元素父元素可以用text-align属性设置子元素水平对齐方式
(3) 内联块元素 内联块元素也叫行内块元素是新增的元素类型现有元素没有归于此类别的img和input元素的行为类似这种元素但是也归类于内联元素我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为
支持全部样式如果没有设置宽高宽高由内容决定盒子并在一行代码换行盒子会产生间距子元素是内联块元素父元素可以用text-align属性设置子元素水平对齐方式。
这三种元素可以通过display属性来相互转化不过实际开发中块元素用得比较多所以我们经常把内联元素转化为块元素少量转化为内联块而要使用内联元素时直接使用内联元素而不用块元素转化了。 解决内联元素间隙的方法 1、去掉内联元素之间的换行 2、将内联元素的父级设置font-size为0内联元素自身再设置font-size (4) display属性 display属性是用来设置元素的类型及隐藏的常用的属性有
none 元素隐藏且不占位置将被完全隐藏。block 元素以块元素显示inline 元素以内联元素显示inline-block 元素以内联块元素显示flex元素将采用弹性盒子布局可以按照指定的方式自由地伸缩和排列元素。grid元素将采用网格布局可以将元素放置到二维网格中进行更加复杂的布局。table元素将被显示为表格可以使用表格相关的CSS属性进行布局。inline-table元素被显示为内联表格可以在同一行内显示其他元素。list-item元素将被显示为列表项如li标签。
实现下图效果, 鼠标悬停后会改变颜色
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle typetext/css.box{width:700px;height:auto;border:1px solid gold;font-size: 0;}.box a{background-color:white;width:100px;height:50px;font-size:16px;color:pink;padding-top:15px;font-family:微软雅黑;display:inline-block;text-align: center;text-decoration:none;}.box a:hover{background-color:gold;color:white;}/style
/head
bodydiv classboxa href#首页/aa href#公司简介/aa href#解决方案/aa href#公司新闻/aa href#行业动态/aa href#招贤纳士/aa href#联系我们/a/div/body
/html4.6 浮动
浮动float是 CSS 中一种常用的布局技术它可以使元素脱离正常的文档流使其向左或向右浮动并让其他元素围绕它。
1. 浮动元素的特性
浮动元素有左浮动(float:left)和右浮动(float:right)两种浮动的元素会向左或向右浮动碰到父元素边界、其他元素才停下来相邻浮动的块元素可以并在一行超出父级宽度就换行浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)浮动元素后面没有浮动的元素会占据浮动元素的位置没有浮动的元素内的文字会避开浮动的元素形成文字饶图的效果父元素如果没有设置尺寸(一般是高度不设置)父元素内整体浮动的元素无法撑开父元素父元素需要清除浮动浮动元素之间没有垂直margin的合并
2. 浮动可以实现的效果
通过使用浮动你可以实现以下效果
元素的浮动方向可以是向左float: left;或向右float: right;。其他元素会围绕浮动元素进行布局避免覆盖。浮动元素可以放置在其容器的左侧或右侧。浮动元素的宽度默认根据内容进行自适应也可以通过设置具体的宽度来限制其宽度。使用浮动可以创建多列布局、实现图文混排等复杂的布局效果。 下面是一个简单的示例展示了如何使用浮动来实现两个元素的左右布局
style typetext/css.left {float: left;width: 200px;height: 200px;background-color: red;}.right {float: right;width: 200px;height: 200px;background-color: blue;}
/stylediv classleft左侧元素/div
div classright右侧元素/div
div classcontent是劳动法接口来的数据反馈第三方第三方讲究的是发快递少了房间第三方了打卡时间猎杀对决反馈留点时间佛挡杀佛进来看到数据来看反馈留点时间链接发来宽度缩放是劳动法接口来的数据反馈第三方第三方讲究的是发快递少了房间第三方了打卡时间猎杀对决反馈留点时间佛挡杀佛进来看到数据来看反馈留点时间链接发来宽度缩放是劳动法接口来的数据反馈第三方第三方讲究的是发快递少了房间第三方了打卡时间猎杀对决反馈留点时间佛挡杀佛进来看到数据来看反馈留点时间链接发来宽度缩放是劳动法接口来的数据反馈第三方第三方讲究的是发快递少了房间第三方了打卡时间猎杀对决反馈留点时间佛挡杀佛进来看到数据来看反馈留点时间链接发来宽度缩放是劳动法接口来的数据反馈第三方第三方讲究的是发快递少了房间第三方了打卡时间猎杀对决反馈留点时间佛挡杀佛进来看到数据来看反馈留点时间链接发来宽度缩放是劳动法接口来的数据反馈第三方第三方讲究的是发快递少了房间第三方了打卡时间猎杀对决反馈留点时间佛挡杀佛进来看到数据来看反馈留点时间链接发来宽度缩放是劳动法接口来的数据反馈第三方第三方讲究的是发快递少了房间第三方了打卡时间猎杀对决反馈留点时间佛挡杀佛进来看到数据来看反馈留点时间链接发来宽度缩放是劳动法接口来的数据反馈第三方第三方讲究的是发快递少了房间第三方了打卡时间猎杀对决反馈留点时间佛挡杀佛进来看到数据来看反馈留点时间链接发来宽度缩放/div3. 解决浮动导致父元素高度无法撑开的问题
父元素如果没有设置尺寸(一般是高度不设置)父元素内整体浮动的元素无法撑开父元素父元素需要清除浮动, 先来看看没有撑开的效果:
style
/*父容器设置红色边框*/
.box{border: 4px solid red;}
/*第一个浮动div*/
.div01{border: 2px solid blue;color:blue;width: 200px;height: 200px;float: left;}
/*第二个浮动div*/
.div02{border: 2px solid green;color:green;width: 100px;height: 100px;float: left;}
/*正常的div*/
.div03{border: 2px solid gold;color:gold;height:50px}
/stylediv classboxdiv classdiv01浮动的div01/divdiv classdiv02浮动的div02/divdiv classdiv03正常的div03/div
/div可以看到父元素的高度是由div03文本内容撑开的, 并且还有一个问题就是和父级box同级的其他div的布局和浮动div01重叠了.这也是因为父级box没有撑开导致的. 我们想要的效果是让父元素的高度由它的子元素中最高的高度决定, 也就是例子中的div01. 要解决这个问题有3种方案: (1) 在浮动元素的同级创建一个空盒子,设置样式clean:both
style.box{border: 4px solid red;}
.div01{border: 2px solid blue;color:blue;width: 200px;height: 200px;float: left;}
.div02{border: 2px solid green;color:green;width: 100px;height: 100px;float: left;}
.div03{border: 2px solid gold;color:gold;height:50px}
/* 解决方案一 *//stylediv classboxdiv classdiv01浮动的div01/divdiv classdiv02浮动的div02/divdiv classdiv03正常的div03/divdiv classclear/div
/div来看看效果图: (2) 通过在浮动元素的父级标签中添加如下style:
{display:block;overflow:hidden;}
display:block:表示可以让标签变成块级元素;
overflow:hidden:表示超出的部分隐藏;(3) 还是在父级标签中添加style
.clear:after{display: block;clear: both;content: .;visibility: hidden;height: 0;}
.clean{zoom:1;}
兼容所有浏览器需要使用到after伪元素
content:表示在标签的内容添加东西;
visibility: hidden:表示把content添加的东西设置为隐藏;
zoom:1是为了兼容IE4.7 定位
HTML的定位指的是通过CSS定义元素在页面中的位置和布局。在HTML中可以使用不同的CSS属性和值来实现定位常用的定位方式包括相对定位relative绝对定位absolute固定定位fixed和粘性定位sticky默认值是(static)没有定位(inherit )是从父元素继承 position 属性的值。可以使用css的position属性来设置元素的定位类型。 其中
1. 相对定位
通过设置元素的position属性为relative可以相对于元素在正常文档流中的位置进行微调使用top、bottom、left和right属性来控制元素的偏移量。相对的是该标签原本的位置,可以是正数和负数, 当top为正数,则相对原来的位置往下移动,反之往上移动;当left为正数,则相对原来的位置往右移动,反之往左移动;特点是移动位置后,原来的位置仍然占着,虽然用不到. 例如: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml xml:langen
headmeta http-equivContent-Type contenttext/html;charsetUTF-8title相对定位/titlestyle typetext/css.div01{border:1px solid red;width: 50px;height: 50px;}.div02{border:1px solid blue;width: 50px;height: 50px;background-color: blue;position: relative;top: 25px;left: 50px;}.div03{border:1px solid green;width: 50px;height: 50px;}/style
/head
body
div classdiv01我是第一个/div
div classdiv02我是第二个/div
div classdiv03我是第三个/div
/body
/html效果图:
2. 绝对定位
绝对定位相对于他有position属性的父级元素进行定位,如果父级元素没有position定位,那么就找父级的父级,直到向上找到position定位为止,如果他向上找不到position定位,那么就以最外层的body进行定位.并且,绝对定位不会保留原有的位置空间。绝对定位有四种值改变它的位置:top right,bottom,left; !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml xml:langen
headmeta http-equivContent-Type contenttext/html;charsetUTF-8title绝对定位/titlestyle typetext/css*{font-size: 20px;font-weight: bold;}.div01{border:1px solid green;width: 200px;height: 100px;}.div02{border:1px solid red;width: 200px;height: 200px;position: absolute;left: 200px;top:50px;}.div03{border:1px solid blue;height: 100px;}/style
/head
body styleborder:5px dashed black我是body区域!-- 设置一个有position属性的父级元素给绝对定位元素使用 --div styleposition: relative;padding: 20px;background-color: pink我是粉红色区域,我有position属性div stylepadding:20px;background-color:yellow;我是黄色区域div classdiv01我是第一个盒子/divdiv classdiv02我是第二个盒子/divdiv classdiv03我是第三个盒子/div/div/div/body
/html效果图:
3. 固定定位
position属性的值为fixed时可以实现元素的固定定位即元素相对于浏览器窗口进行定位无论页面如何滚动元素的位置都不会改变。 例如我们可以使用固定定位来创建一个悬浮在页面顶部的导航栏
style.navbar {position: fixed;top: 0;left: 0;width: 100%;background-color: #f2f2f2;padding: 10px;}
/stylediv classnavbara href#Home/aa href#About/aa href#Contact/a
/div效果图: 注意: 固定布局是悬浮在某个位置的, 因此它会遮盖下方元素的内容 4.8 background属性
background属性是css中应用比较多且比较重要的一个属性它是负责给元素设置背景图片和背景颜色的background是一个复合属性它可以分解成如下几个设置项
background-color: 设置背景颜色background-image: 设置背景图片地址
/*使用单个图像*/
background-image: url(image.jpg);/*使用多个图像*/
background-image: url(image1.jpg), url(image2.jpg);/*使用渐变背景*/
background-image: linear-gradient(red, yellow);/*使用径向渐变背景*/
background-image: radial-gradient(circle, red, yellow);background-repeat: 设置背景图片如何重复平铺,可以接受以下几个值 repeat背景图像在水平和垂直方向上重复显示。这是默认值。repeat-x背景图像在水平方向上重复显示垂直方向上不重复。repeat-y背景图像在垂直方向上重复显示水平方向上不重复。no-repeat背景图像在水平和垂直方向上均不重复仅显示一次。 background-position: 设置背景图片的位置,可以接受一个或两个值,如果只提供一个值该值将应用于水平方向X轴垂直方向Y轴会默认为中心。如果提供两个值第一个值将用于水平方向X轴第二个值用于垂直方向Y轴。
/*把背景图像放置在元素的右上角。*/
background-position: top right;/*把背景图像向右移动10个像素向下移动20个像素。正值是右下角方向*/background-position: 10px 20px;/*把背景图像水平方向上向右移动容器宽度的20%垂直方向上向下移动容器高度的50%。*/background-position: 20% 50%;/*把背景图片放置在容器的顶部同时向右偏移 20 像素*/background-position: top 20px;/*把背景图片放置在容器的顶部同时水平对齐到容器的左侧距离左侧的距离为容器宽度的 20%*/background-position: top 20%;/*把背景图像放置在元素的左边上方距离为容器高度的 25%*/background-position: left 25%;/*把背景图像放置在元素的左边并向下20个像素*/background-position: left 20px;比如说我们想把下边的盒子用右边的图片作为背景并且让背景显示图片中靠近底部的那朵花 用上面中间那张图片作为左边那个比它尺寸小的盒子的背景上面右边的实现效果设置为
background:url(location_bg.jpg);
background-position:-110px -150px;/*
或者合在一起写
background:url(location_bg.jpg) -110px -150px
*/第一个数值表示背景图相对于自己的左上角向左偏移110px负值向左正值向右第二个数值表示背景图相对于自己的左上角向上偏移150px负值向上正值向下。 实现原理示意图
background-attachment: 设置背景图片是固定还是随着页面滚动条滚动,可以接受以下三个值 scroll背景图像会随页面的滚动而滚动。这是默认值。fixed背景图像会固定在视窗中的位置无论页面如何滚动背景图像都不会移动, 只会移动页面的内容。local背景图像会随着元素内容的滚动而滚动当元素内容滚动到底时背景图像停止滚动。
实际应用中我们可以用background属性将上面所有的设置项放在一起而且也建议这么做这样做性能更高而且兼容性更好比如
background: #00FF00 url(bgimage.gif) no-repeat left center fixed这里面的#00ff00是设置background-colorurl(bgimage.gif)是设置background-imageno-repeat是设置background-repeatleft center是设置background-positionfixed是设置background-attachment各个设置项用空格隔开有的设置项不写也是可以的它会使用默认值。
下面这些例子使用下面这张图片做为背景图
!DOCTYPE html
html langen
headmeta charsetUTF-8titletest background/titlestyle typetext/css.backshow{width:320px;height:160px;border:3px solid #333;margin:10px;float:left;}/*cyan是颜色*/.bg1{background:cyan url(bg.jpg);}.bg2{background:cyan url(bg.jpg) repeat-x;}.bg3{background:cyan url(bg.jpg) repeat-y;}.bg4{background:cyan url(bg.jpg) no-repeat;}.bg5{background:cyan url(bg.jpg) no-repeat left center;}.bg6{background:cyan url(bg.jpg) no-repeat right center;}/style
/head
bodydiv classbackshow bg1/divdiv classbackshow bg2/divdiv classbackshow bg3/divdiv classbackshow bg4/divdiv classbackshow bg5/divdiv classbackshow bg6/div
/body
/html效果图: 上图是float:left的布局方式,即从上到下,从左到右的效果.
background-size属性
length使用长度值来指定背景图像的大小。长度值可以是像素px、英寸in、厘米cm等。它不允许使用负值。percentage使用百分比来指定背景图像的大小。百分比是相对于容器的宽度或高度来计算的。同样它不允许使用负值。auto背景图像以其真实大小显示无需进行任何缩放。cover将背景图像等比缩放以使其完全覆盖容器。这可能导致图像超出容器的边界。contain将背景图像等比缩放以使其宽度或高度与容器的宽度或高度相等。图像会被包含在容器内不会超出容器。 这些取值可以通过使用 background-size 属性来设置例如
div {background-image: url(image.jpg);background-size: cover;
}4.9 综合案例
1、特征布局翻页所需知识点盒模型、内联元素
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestyle.pagenation{list-style:none;margin:50px auto 0;padding:0;width:600px;height:40px;border:1px solid #666;font-size:0;text-align:center;}.pagenation li{display:inline-block;height:26px;font-size:12px;margin:7px 5px 0;}.pagenation li a{display:block;background-color:gold;height:26px;line-height:26px;padding:0 10px;font:normal 12px/26px Microsoft Yahei;color:#000;text-decoration:none;}.pagenation li a:hover{background-color:red;color:#fff;}/style
/headbodyul classpagenationlia href#上一页/a/lilia href#1/a/lilia href#2/a/lilia href#3/a/lilia href#4/a/lilispan…/span/lilia href#17/a/lilia href#18/a/lilia href#19/a/lilia href#20/a/lilia href#下一页/a/li/ul/body/html2、特征布局导航条01所需知识点盒模型、行内元素布局
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestyle.menu{list-style:none;margin:50px auto 0;padding:0;width:958px;height:40px;border:1px solid #666;text-align:center;font-size:0;}.menu li{display:inline-block;font-size:14px;height:40px;}.menu li a{display:block;height:40px; font:normal 14px/40px Microsoft Yahei;text-decoration:none;color:#000;}.menu li a:hover{color:#ff8800;}.menu li span{display:block;height:40px;font:normal 14px/40px Microsoft Yahei;margin:0 20px;}/style
/headbodyul classmenulia href#首页/a/lilispan|/span/lilia href#网站建设/a/lilispan|/span/lilia href#程序开发/a/lilispan|/span/lilia href#网络营销/a/lilispan|/span/lilia href#企业VI/a/lilispan|/span/lilia href#案例展示/a/lilispan|/span/lilia href#联系我们/a/li/ul/body/html3、特征布局导航条02所需知识点盒模型、浮动、定位、字体对齐
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestyle.menu {list-style: none;margin: 50px auto 0;padding: 0;width: 960px;height: 40px;background-color: #55a8ea;position: relative;}.menu li {width: 100px;height: 40px;float: left;}.menu li a {display: block;width: 100px;height: 40px;line-height: 40px;text-align: center;font-size: 14px;font-family: Microsoft Yahei;color: #fff;text-decoration: none;}.menu li a:hover {background-color: #00619f;}.menu .new {width: 33px;height: 20px;background: url(images/new.png) no-repeat;position: absolute;left: 432px;top: -10px;}/style
/headbodyul classmenulia href#首页/a/lilia href#网站建设/a/lilia href#程序开发/a/lilia href#网络营销/a/lilia href#企业VI/a/lilia href#案例展示/a/lilia href#联系我们/a/lili classnew/li/ul/body/html五、HTML5与CSS3
5.1 css权重
CSS权重指的是样式的优先级有两条或多条样式作用于一个元素权重高的那条样式对元素起作用,权重相同的后写的样式会覆盖前面写的样式。
权重的等级 可以把样式的应用方式分为几个等级按照等级来计算权重, 按从高到低的顺序排列 1、!important加在样式属性值后权重值为 10000 2、内联样式如style””权重值为1000 3、ID选择器如#content权重值为100 4、类伪类和属性选择器如 .content、:hover 权重值为10 5、标签选择器和伪元素选择器如div、p、:before 权重值为1 6、通用选择器*、子选择器、相邻选择器、同胞选择器~、权重值为0
例1:
style typetext/cssdiv{color:red !important;}
/style
......
div stylecolor:blue这是一个div元素/div
!--
两条样式同时作用一个div上面的样式权重值为100001下面的行间样式的权重值为1000
所以文字的最终颜色为red
--例2:
style typetext/css#content div.main_content h2{color:red; }#content .main_content h2{color:blue;}
/style
......
div idcontentdiv classmain_contenth2这是一个h2标题/h2/div
/div
!--
第一条样式的权重计算 1001101结果为112
第二条样式的权重计算 100101结果为111
h2标题的最终颜色为red
--5.2 css3新增选择器
E:nth-child(n)匹配元素类型为E且是父元素的第n个子元素
style typetext/css .list div:nth-child(2){background-color:red;}
/style
......
div classlisth21/h2div2/divdiv3/divdiv4/divdiv5/div
/div!-- 匹配结果是第2个子元素div匹配 div2/div--E:first-child匹配元素类型为E且是父元素的第一个子元素E:last-child匹配元素类型为E且是父元素的最后一个子元素E F: E元素下面第一层子集E ~ F: E元素后面的兄弟元素E F: 紧挨着的后面的兄弟元素E[attr] 含有attr属性的元素
style typetext/cssdiv[data-attrok]{color:red;}
/style
......
div data-attrok这是一个div元素/divE[attr‘ok’] 含有attr属性的元素且它的值为“ok”E[attr^‘ok’] 含有attr属性的元素且它的值的开头含有“ok”E[attr$‘ok’] 含有attr属性的元素且它的值的结尾含有“ok”E[attr*‘ok’] 含有attr属性的元素且它的值中含有“ok”
5.3 css3圆角和rgba
设置某一个角的圆角比如设置左上角的圆角 border-top-left-radius:30px 60px; 同时分别设置四个角 border-radius:30px 60px 120px 150px; 设置四个圆角相同 border-radius:50%;
rgba颜色值表示 rgba(0,0,0,0.1) 前三个数值表示颜色第四个数值表示颜色的透明度 如果要表示盒子是透明的,可以这样
.box{opacity:0.1;/* 兼容IE */filter:alpha(opacity10);
}5.4 css3 transition动画
transition 属性可用于实现元素的动画效果。transition 属性允许您在元素的属性值发生变化时平滑过渡到新值。transition 属性可以应用于任何可以通过 CSS 进行过渡的属性如 background-color、opacity 等。 transition 属性由以下几个部分组成
transition-property指定要过渡的属性名称如 width、height、color 等或 all表示所有属性。可以使用逗号分隔多个属性。transition-duration指定过渡的持续时间以秒或毫秒为单位。transition-timing-function指定过渡的时间曲线缓动效果。常见的缓动函数有 linear(匀速)、ease(中间快,两边慢)、ease-in(先慢后快)、ease-out(先快后慢) 、ease-in-out (两边慢,中间先快后慢)。transition-delay指定过渡的延迟时间以秒或毫秒为单位。 以下是一个示例演示了如何使用 transition 属性来创建一个简单的动画效果
!DOCTYPE html
html
headstyle.box {width: 100px;height: 100px;background-color: red;transition: width 1s ease-in-out;}.box:hover {width: 200px;}/style
/head
bodydiv classbox/div
/body
/html在上面的示例中当鼠标悬停在 box 元素上时它的宽度会从原先的 100 像素过渡到 200 像素过渡效果持续时间为 1 秒并且使用了缓动函数 ease-in-out。这样可以实现一个平滑的宽度变化动画。
5.5 css3 transform变换
CSS3 的 transform 属性是一种用于对元素进行变换的功能强大的属性。它允许您对元素进行平移、旋转、缩放、倾斜等各种变换操作。 下面是一些常用的 transform 变换函数及其用法
translate(x,y) 设置盒子位移通过指定在水平和垂直方向上的偏移量来移动元素。例如transform: translate(100px, 50px) 将元素沿 x 轴向右移动 100 像素在 y 轴向下移动 50 像素。scale(x,y) 设置盒子缩放通过指定一个缩放比例来增大或缩小元素的尺寸。例如transform: scale(2) 将元素的尺寸放大两倍而 transform: scale(0.5) 将元素的尺寸缩小为原来的一半。rotate(deg) 设置盒子旋转通过指定一个角度来旋转元素。例如transform: rotate(45deg) 将元素顺时针旋转 45 度。skew(x-angle,y-angle) 设置盒子斜切通过指定在 x 轴和 y 轴上的倾斜角度来倾斜元素。例如transform: skew(30deg, 20deg) 将元素在 x 轴上倾斜 30 度在 y 轴上倾斜 20 度。perspective 属性用于设置透视距离: 它影响具有三维变换的元素。通过设置透视距离您可以模拟元素在三维空间中的远近观感。例如perspective: 100px 将设置一个透视距离为 100 像素。transform-style flat | preserve-3d 设置盒子是否按3d空间显示: flat 值表示元素不应用 3D 变换只显示在平面上preserve-3d 值表示元素应用 3D 变换保持其在 3D 空间中的位置关系。translateX、translateY、translateZ 设置三维移动: translateX 控制元素在 X 轴上的平移translateY 控制元素在 Y 轴上的平移translateZ 控制元素在 Z 轴上的平移。rotateX、rotateY、rotateZ 属性用于在三维空间中进行旋转变换: rotateX 控制元素绕 X 轴旋转rotateY 控制元素绕 Y 轴旋转rotateZ 控制元素绕 Z 轴旋转。scaleX、scaleY、scaleZ 属性用于在三维空间中进行缩放变换。scaleX 控制元素在 X 轴上的缩放scaleY 控制元素在 Y 轴上的缩放scaleZ 控制元素在 Z 轴上的缩放。transform-origin 属性用于设置变形的中心点: 它控制变换的起点和元素围绕其进行旋转、缩放或其他变换的中心。该属性可以使用像素值、百分比或关键字如 top、center、left 等进行指定。
下面实现一个鼠标悬停在图片时会进行沿y轴180度旋转, 看到背面内容
!DOCTYPE html
html langen
headmeta charsetUTF-8title翻面/titlestyle typetext/css.box{width:300px;height:272px;margin:50px auto 0;/*启用3d效果*/transform-style:preserve-3d;position:relative;}.box .pic{width:300px;height:272px;position:absolute;background-color:cyan;left:0;top:0;/*perspective(800px)这是一个透视变换函数通过指定透视距离来创建 3D 效果;rotateY(0deg)这是一个 Y 轴旋转变换函数通过指定一个角度来使元素沿 Y 轴旋转。在这种情况下角度设置为 0 度表示不进行旋转*/transform:perspective(800px) rotateY(0deg);/*用于控制元素的背面是否可见,hidden为不可见,visible为可见*/backface-visibility:hidden;/*指定500ms的过度动画*/transition:all 500ms ease;}.box .back_info{width:300px;height:272px;text-align:center;line-height:272px;background-color:gold;position:absolute;left:0;top:0;/*沿y轴旋转180度*/transform:rotateY(180deg);backface-visibility:hidden;transition:all 500ms ease;}.box:hover .pic{/*鼠标悬停的时候沿y轴旋转180度,透视距离800px */transform:perspective(180px) rotateY(180deg);}.box:hover .back_info{/*鼠标悬停的时候沿y轴旋转0度,透视距离800px */transform:perspective(800px) rotateY(0deg);}/style
/head
bodydiv classboxdiv classpicimg src../images/location_bg.jpg/divdiv classback_info背面文字说明/div/div
/body
/html5.6 css3 animation动画
使用 CSS3 Animation可以在网页中通过 CSS 属性来定义和控制元素的动态变化而不需要使用 JavaScript 或其他脚本语言。 CSS3 Animation 提供了一些属性来控制动画效果以下是一些常用的属性
keyframes 定义关键帧动画的集合它描述了动画的不同状态或关键点。animation-name 动画名称,它指定要应用的动画效果的关键帧集合。关键帧集合是通过 keyframes 规则定义的。animation-duration 动画时间animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)animation-delay 动画延迟animation-iteration-count 动画播放次数 n|infinite(无限循环)animation-direction 动画结束后是否反向还原 normal|alternateanimation-play-state 动画状态 paused(停止)|running(运动)animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)animation:name duration timing-function delay iteration-count direction;同时设置多个属性
示例: 使用动画展示一个人物行走的动画, 用到的图片如下: 通过动画可以控制每一格的人物显示:
!DOCTYPE html
html langen
headmeta charsetUTF-8title走路动画/titlestyle typetext/css.box{width:120px;height:180px;border:1px solid #ccc;margin:50px auto 0;position:relative;/*超出盒子区域的部分隐藏*/overflow:hidden;}.box img{display:block;width:960px;height:182px;position: absolute;left:0;top:0;/*使用同步指定动画执行的名称walking关键帧集合,时长1s,steps(8) 意味着动画将被分成 8 个步骤,infinite 表示动画将无限循环播放直到被停止或移除*/animation:walking 1.0s steps(8) infinite;}keyframes walking{/*表示动画的起始状态即初始帧。在这个示例中元素的 left 属性值从 0px 开始。*/from{left:0px;}/*to 表示动画的结束状态即最终帧。在这个示例中元素的 left 属性值达到 -960px。*/to{left:-960px;}}/style
/head
bodydiv classboximg src../images/walking.png/div
/body
/html效果图如下,框中的小人会不断的变化行走姿势.
5.7 css3 浏览器前缀
为了让CSS3样式兼容需要将某些样式加上浏览器前缀
-ms- 兼容IE浏览器-moz- 兼容firefox-o- 兼容opera-webkit- 兼容chrome 和 safari
div
{ -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg);
}目前的状况是有些CSS3属性需要加前缀有些不需要加有些只需要加一部分这些加前缀的工作可以交给插件来完成比如安装 autoprefixer 可以在Sublime text中通过package control 安装 autoprefixer 1、preferences/key Bindings-User
{ keys: [ctrlaltx], command: autoprefixer }2、Preferencespackage settingAutoPrefixerSetting-User
{browsers: [last 7 versions],cascade: true,remove: true
}last 7 versions最新的浏览器的7个版本 cascade缩进美化属性值 remove是否去掉不必要的前缀
5.8 html5标签
新增语义标签
header 页面头部、页眉nav 页面导航article 一篇文章section 文章中的章节aside 侧边栏footer 页面底部、页脚 音频视频audiovideo PC端兼容h5的新标签的方法在页面中引入以下js文件:
script typetext/javascript src//cdn.bootcss.com/html5shiv/r29/html5.js/script表单控件
input typeurl用于输入URL地址。input typeemail用于输入电子邮件地址。input typedate用于选择日期。input typetime用于选择时间。input typeweek用于选择特定的星期。input typenumber用于输入数字。input typerange用于选择一个范围滑动条。input typetel用于输入电话号码。input typecolor用于选择颜色。input typesearch用于输入搜索关键字。 效果图如下:
六、移动端页面开发
6.1 视口
视口是移动设备上用来显示网页的区域一般会比移动设备可视区域大宽度可能是980px或者1024px目的是为了显示下整个为PC端设计的网页这样带来的后果是移动端会出现横向滚动条为了避免这种情况移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看可以用 meta 标签name“viewport ” 来设置视口的大小将视口的大小设置为和移动设备可视区一样的大小。
head
......
meta nameviewport contentwidthdevice-width, user-scalableno,initial-scale1.0, maximum-scale1.0, minimum-scale1.0
......
/head其中用到的属性含义如下:
nameviewport来定义了网页的视口viewport属性。widthdevice-width表示视口的宽度应该与设备的宽度相等这将确保网页在不同设备上呈现的宽度一致。user-scalableno表示用户无法对网页进行缩放禁止了用户对页面进行手动缩放的操作。initial-scale1.0表示页面刚加载时的初始缩放比例为1.0即不进行缩放。maximum-scale1.0表示用户最大只能将页面缩放到1.0倍即不进行放大。minimum-scale1.0表示用户最小只能将页面缩放到1.0倍即不进行缩小。
6.2 页面适配
设备屏幕有多种不同的分辨率页面适配方案有如下几种
全适配响应式布局流体布局移动端适配流体布局少量响应式基于rem的布局
1. 流体布局
流体布局就是使用百分比来设置元素的宽度元素的高度按实际高度写固定值流体布局中元素的边线无法用百分比可以使用样式中的计算函数 calc() 来设置宽度或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。 calc() 可以通过计算的方式给元素加尺寸比如 widthcalc(25% - 4px);其中 25% 是相对于父容器的宽度而 4px 是从计算结果中减去的像素值。 box-sizing 用于指定盒子模型的尺寸计算方式。其中有两个常用的取值
content-box 默认的盒子尺寸计算方式,它将盒子的宽度计算为元素的内容宽度。border-box 置盒子的尺寸计算方式为从边框开始盒子的尺寸边框和内填充算在盒子尺寸内 通过将 box-sizing 设置为 border-box可以使元素的盒子尺寸的计算方式从边框开始确保边框和内边距不会使元素的宽度超出百分比设置的值。
.container {width: 100%;
}.box {width: 25%;height: 200px;border: 1px solid black;box-sizing: border-box;
}在上面的代码中.container 类表示父容器宽度为 100%相对于其父级容器.box 类是一个使用流体布局的子元素宽度设置为 25%相对于 .container并且使用了 border-box 盒子模型。
2. 响应式布局
响应式布局就是使用媒体查询的方式通过查询浏览器宽度不同的宽度应用不同的样式块每个样式块对应的是该宽度下的布局方式从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕pc、平板、手机。 相应布局的伪代码如下
media (max-width:960px){.left_con{width:58%;}.right_con{width:38%;}
}
media (max-width:768px){.left_con{width:100%;}.right_con{width:100%;}
}其中,media是一个使用 CSS 媒体查询。媒体查询允许根据设备的宽度或其他特性应用不同的样式规则。这个代码片段中的媒体查询使用了两个不同的条件并给两个不同的类设置了不同的宽度
第一个媒体查询 media (max-width: 960px) 表示当设备的最大宽度小于或等于 960 像素时应用包含在花括号内的样式规则。在该规则中.left_con 类的宽度设置为 58%.right_con 类的宽度设置为 38%。第二个媒体查询 media (max-width: 768px) 表示当设备的最大宽度小于或等于 768 像素时应用包含在花括号内的样式规则。在该规则中.left_con 类和 .right_con 类的宽度都被设置为 100%。
3. 基于rem布局
基于 rem 的布局是一种使用 rem 单位来设置尺寸的布局方式。在这种布局中根据根节点通常是 html 标签设置的字体大小来计算其他元素的尺寸所有元素的尺寸都相对于根节点进行调整。 具体来说通过设置 html 标签的字体大小可以影响整个页面中使用 rem 单位的元素的尺寸。当你更改根节点的字体大小时使用 rem 单位设置的元素的尺寸将按比例调整。 以下是一个示例代码演示如何使用基于 rem 的布局
html {font-size: 16px; /* 设置根节点的字体大小 */
}body {font-size: 1rem; /* 按照根节点的字体大小为基准设置 body 的字体大小 */
}.container {width: 20rem; /* 相对于根节点计算大小为根节点字体大小的 20 倍 */height: 10rem; /* 相对于根节点计算大小为根节点字体大小的 10 倍 */
}.box {width: 5rem; /* 相对于根节点计算大小为根节点字体大小的 5 倍 */height: 5rem; /* 相对于根节点计算大小为根节点字体大小的 5 倍 */
}在上面的示例代码中我们通过设置 标签的 font-size 为 16px将其作为根节点字体大小。然后根据根节点字体大小的倍数来设定其他元素的尺寸使用 rem 单位进行设置。例如.container 类
cssrem安装 cssrem插件可以动态地将px尺寸换算成rem尺寸 下载本项目比如git clone https://github.com/flashlizi/cssrem 进入packages目录Sublime Text - Preferences - Browse Packages… 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。 配置参数 参数配置文件Sublime Text - Preferences - Package Settings - cssrem px_to_rem - px转rem的单位比例默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为[“.css”, “.less”, “.sass”]。
七、JavaScript
是一种广泛用于编写网页前端和后端的脚本语言。它是一门基于对象和事件驱动的语言最初被设计用于在网页上添加交互效果。它由三部分组成:
ECMAscript javascript的语法变量、函数、循环语句等语法DOM 文档对象模型 操作html和css的方法BOM 浏览器对象模型 操作浏览器的一些方法
7.1 JavaScript嵌入页面的方式
行间事件主要用于事件
input typebutton name onclickalert(ok);页面script标签嵌入
script typetext/javascript alert(ok);
/script外部引入
script typetext/javascript srcjs/index.js/script7.2 变量
JavaScript 是一种弱类型语言javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’
1. 变量类型
5种基本数据类型 number 数字类型string 字符串类型boolean 布尔类型 true 或 falseundefined类型变量声明未初始化它的值就是undefinednull类型表示空对象如果定义的变量将来准备保存对象可以将变量初始化为null,在页面上获取不到对象返回的值就是null 1种复合类型object类型
通过typeof运算符可以判断数据的类型
typeof 42; // number
typeof Hello; // string
typeof true; // boolean
typeof undefined; // undefined
typeof null; // objectnull 是一个特殊的对象类型这是 JavaScript 的历史遗留问题
typeof { name: John }; // object
typeof [1, 2, 3]; // object
typeof function() {}; // function2. 语句与注释
一条javascript语句应该以“;”结尾
script typetext/javascript var iNum 123;var sTr abc123;function fnAlert(){alert(sTr);};fnAlert();
/scriptjavascript注释
script typetext/javascript // 单行注释var iNum 123;/* 多行注释1、...2、...*/var sTr abc123;
/script3. 变量、函数、属性、函数参数命名规范
区分大小写第一个字符必须是字母、下划线_或者美元符号$其他字符可以是字母、下划线、美元符或数字
4. 变量的作用域
变量作用域指的是变量的作用范围javascript中的变量分为全局变量和局部变量。
全局变量在函数之外定义的变量为整个页面公用函数内部外部都可以访问。局部变量在函数内部定义的变量只能在定义该变量的函数内部访问外部无法访问。
script typetext/javascript//全局变量var a 12;function myalert(){//局部变量var b 23;alert(a);alert(b);}myalert(); //弹出12和23alert(a); //弹出12 alert(b); //出错
/script7.3 获取元素
1. getElementById
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素获取到的是一个html对象然后将它赋值给一个变量比如
script typetext/javascriptvar oDiv document.getElementById(div1);
/script
....
div iddiv1这是一个div元素/div上面的语句如果把javascript写在元素的上面就会出错因为页面从上往下加载执行的javascript去页面上获取元素div1的时候元素div1还没有加载解决方法有两种 第一种方法将javascript放到页面最下边
....
div iddiv1这是一个div元素/div
....script typetext/javascriptvar oDiv document.getElementById(div1);
/script
/body第二种方法将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行就不会出错了。
script typetext/javascriptwindow.onload function(){var oDiv document.getElementById(div1);}
/script....div iddiv1这是一个div元素/div2. getElementsByTagName
除了可以通过id的方式获取元素, 还可以通过标签名来获取, 使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签获取的是一个选择集不是数组但是可以用下标的方式操作选择集里面的标签元素。
script typetext/javascriptwindow.onload function(){var aLi document.getElementsByTagName(li);// aLi.style.backgroundColor gold; // 出错不能同时设置多个lialert(aLi.length); // 6aLi[0].style.backgroundColor gold;}
/script
....
ulli1/lili2/lili3/lili4/lili5/lili6/li
/ul7.4 操作元素属性
获取的页面元素就可以对页面元素的属性进行操作属性的操作包括属性的读和写。 操作属性的方法
“.” 操作“[ ]”操作
属性写法
html的属性和js里面属性写法一样“class” 属性写成 “className”“style” 属性里面的属性有横杠的改成驼峰式比如“font-size”改成”style.fontSize”
1. 通过“.”操作属性
script typetext/javascriptwindow.onload function(){var oInput document.getElementById(input1);var oA document.getElementById(link1);// 读取属性值var sValue oInput.value;var sType oInput.type;var sName oInput.name;var sLinks oA.href;// 写(设置)属性oA.style.color red;oA.style.fontSize sValue;}/script......input typetext namesetsize idinput1 value20px
a hrefhttp://www.baidu.com idlink1百度/a2. 通过“[ ]”操作属性
script typetext/javascriptwindow.onload function(){var oInput1 document.getElementById(input1);var oInput2 document.getElementById(input2);var oA document.getElementById(link1);// 读取属性var sVal1 oInput1.value;var sVal2 oInput2.value;// 写(设置)属性// oA.style.val1 val2; 没反应oA.style[sVal1] sVal2; }/script......input typetext namesetattr idinput1 valuefontSize
input typetext namesetnum idinput2 value30px
a hrefhttp://www.baidu.com idlink1百度/a3. innerHTML
innerHTML可以读取标签的内容或者写入标签到指定标签内.
script typetext/javascriptwindow.onload function(){var oDiv document.getElementById(div1);//读取var sTxt oDiv.innerHTML;alert(sTxt);//写入oDiv.innerHTML a hrefhttp://www.baidu.com百度a/;}
/script......div iddiv1这是一个div元素/div7.5 函数
函数就是可以重复执行的代码片。
1. 函数的定义和执行
script typetext/javascript// 函数定义function fnAlert(){alert(hello!);}// 函数执行fnAlert();
/script2. 变量与函数预解析
JavaScript解析过程分为两个阶段先是编译阶段然后执行阶段在编译阶段会将function定义的函数提前并且将var定义的变量声明提前将它赋值为undefined。
script typetext/javascript fnAlert(); // 弹出 helloalert(iNum); // 弹出 undefinedfunction fnAlert(){alert(hello!);}var iNum 123;
/script3. 提取行间事件
行间事件inline event是在 HTML 元素标签内部通过使用特定的 HTML 属性将 JavaScript 代码直接嵌入到 HTML 元素中的一种方式。行间事件允许您为特定的 HTML 元素定义与用户互动相关的行为或功能。 行间事件使用一种特定的属性来指定事件类型和相应的 JavaScript 代码。常见的行间事件属性包括
onclick当用户点击元素时触发。onmouseover当用户将鼠标移动到元素上方时触发。onmouseout当用户将鼠标从元素上移开时触发。onkeydown当用户按下键盘上的任意键时触发。onload当页面或图片加载完成时触发。 通过将相应的 JavaScript 代码直接赋值给这些行间事件属性可以响应用户的操作或页面加载事件并在事件发生时执行对应的 JavaScript 代码。这种方式方便简洁适用于处理特定元素的简单交互行为。 以下是一个示例展示如何在 HTML 元素中使用行间事件
!DOCTYPE html
html
bodybutton onclickalert(Hello World!)Click me/buttondiv onmouseoverconsole.log(Mouse over!)Hover over me/divinput onkeydownconsole.log(Key pressed!) typetextimg onloadconsole.log(Image loaded!) srcexample.png/body
/html在html行间调用的事件可以提取到javascript中调用从而做到结构与行为分离。
!--示例1--
script typetext/javascript function fnAlert(){alert(ok!);}
/script
......
input typebutton name value弹出 onclickfnAlert()!--示例2--
script typetext/javascriptwindow.onload function(){var oBtn document.getElementById(btn1);oBtn.onclick fnAlert;function fnAlert(){alert(ok!);}}
/script
......
input typebutton name value弹出 idbtn14. 匿名函数
定义的函数可以不给名称这个叫做匿名函数可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
script typetext/javascriptwindow.onload function(){var oBtn document.getElementById(btn1);/*oBtn.onclick myalert;function myalert(){alert(ok!);}*/// 直接将匿名函数赋值给绑定的事件oBtn.onclick function (){alert(ok!);}
}/script此外封闭函数也是匿名函数的一种写法, 创建一个一开始就执行而不用命名的函数.
(function myalert(){alert(hello!);
})();还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function myalert(){alert(hello!);
}()封闭函数的好处是可以创造一个独立的空间在封闭函数内定义的变量和函数不会影响外部同名的函数和变量可以避免命名冲突在页面上引入多个js文件时用这种方式添加js文件比较安全比如
var iNum01 12;
function myalert(){alert(hello!);
}
(function(){var iNum01 24;function myalert(){alert(hello!world);}alert(iNum01);myalert()
})()
alert(iNum01);
myalert();上面代码的执行后的alert文案先后顺序如下:
24
hello!world
12
hello5. 函数传参
script typetext/javascriptfunction fnAlert(a){alert(a);}fnAlert(12345);
/script6. 函数的return关键字
函数中’return’关键字的作用
返回函数执行的结果结束函数的运行阻止默认行为
script typetext/javascript
function fnAdd(iNum01,iNum02){var iRs iNum01 iNum02;return iRs;// 下面这句话将不被执行alert(here!);
}var iCount fnAdd(3,4);
alert(iCount); //弹出7
/script7.6 条件语句
通过条件来控制程序的走向就需要用到条件语句。 运算符
算术运算符 (加)、 -(减)、 *(乘)、 /(除)、 %(求余)赋值运算符、 、 -、 *、 /、 %条件运算符(相等运算符)、(全等运算符)、、、、、!、(而且)、||(或者)、!(否)
(1) if else语句
var iNum01 3;
var iNum02 5;
var sTr;
if(iNum01iNum02){sTr 大于;
}
else
{sTr 小于;
}
alert(sTr);(2) 多重if else语句
var iNow 1;
if(iNow1)
{... ;
}
else if(iNow2)
{... ;
}
else
{... ;
}(3) switch语句 多重if else语句可以换成性能更高的switch语句
var iNow 1;switch (iNow){case 1:...;break;case 2:...;break; default:...;
}7.7 数组及操作方法
数组就是一组数据的集合javascript中数组里面的数据可以是不同类型的。
1. 定义数组的方法
//对象的实例创建
var aList new Array(1,2,3);//直接量创建
var aList2 [1,2,3,asd];2. 操作数组中数据的方法
(1) 获取数组的长度aList.length;
var aList [1,2,3,4];
alert(aList.length); // 弹出4(2) 用下标操作数组的某个数据aList[0];
var aList [1,2,3,4];
alert(aList[0]); // 弹出1(3) join() 将数组成员通过一个分隔符合并成字符串
var aList [1,2,3,4];
alert(aList.join(-)); // 弹出 1-2-3-4(4) push() 和 pop() 从数组最后增加成员或删除成员
var aList [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4(5) unshift()和 shift() 从数组前面增加成员或删除成员
var aList [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4(6) reverse() 将数组反转
var aList [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1(7) indexOf() 返回数组中元素第一次出现的索引值
var aList [1,2,3,4,1,3,4];
alert(aList.indexOf(1));(8) splice() 用于在数组中进行添加、删除和替换元素操作. splice() 方法的语法如下:
array.splice(start, deleteCount, item1, item2, ...)参数含义: start指定要修改的起始索引位置。 deleteCount可选参数指定要删除的元素数量。如果该参数为 0则不删除任何元素。 item1, item2, …可选参数如果提供了这些参数则插入或添加到数组中的新元素。 例如:
var aList [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素(2)开始删除1个元素(3)然后在此位置增加7,8,9三个元素
alert(aList); //弹出 1,2,7,8,9,43. 多维数组
多维数组指的是数组的成员也是数组的数组。
var aList [[1,2,3],[a,b,c]];alert(aList[0][1]); //弹出2, 即第一个数组的第0个元素的第1个元素;7.8 循环语句
程序中进行有规律的重复性操作需要用到循环语句。 (1) for 循环
for(var i0;ilen;i)
{......
}(2) while循环
var i0;while(i8){......i;
}示例: 通过for循环对数组进行去重
var aList [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];var aList2 [];for(var i0;iaList.length;i)
{ /*这个条件语句用于判断当前元素是否是第一次出现在 aList 数组中。indexOf() 方法用于返回指定元素在数组中第一次出现的索引位置如果没有找到则返回 -1。这里通过将当前元素的索引与它在数组中第一次出现的索引进行比较如果相等则说明该元素是第一次出现满足条件。*/if(aList.indexOf(aList[i])i){aList2.push(aList[i]);}
}alert(aList2);7.9 字符串处理方法
(1) 字符串合并操作“ ”
var iNum01 12;
var iNum02 24;
var sNum03 12;
var sTr abc;
alert(iNum01iNum02); //弹出36
alert(iNum01sNum03); //弹出1212 数字和字符串相加等同于字符串拼接
alert(sNum03sTr); //弹出12abc(2) parseInt() 将数字字符串转化为整数
var sNum01 12;
var sNum02 24;
var sNum03 12.32;
alert(sNum01sNum02); //弹出1224
alert(parseInt(sNum01)parseInt(sNum02)) //弹出36
alert(sNum03) //弹出数字12 将字符串小数转化为数字整数(3) parseFloat() 将数字字符串转化为小数
var sNum03 12.32
alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数(4) split() 把一个字符串分隔成字符串组成的数组
var sTr 2017-4-22;
var aRr sTr.split(-);
var aRr2 sTr.split();alert(aRr); //弹出[2017,4,2]
alert(aRr2); //弹出[2,0,1,7,-,4,-,2,2](5) charAt() 获取字符串中的某一个字符
var sId #div1;
var sTr sId.charAt(0);
alert(sTr); //弹出 #(6) indexOf() 查找字符串是否含有某字符,返回其索引
var sTr abcdefgh;
var iNum sTr.indexOf(c);
alert(iNum); //弹出2(7) substring() 截取字符串 用法 substring(start,end)不包括end
var sTr abcdefghijkl;
var sTr2 sTr.substring(3,5);
var sTr3 sTr.substring(1);alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl(8) toUpperCase() 字符串转大写
var sTr abcdef;
var sTr2 sTr.toUpperCase();
alert(sTr2); //弹出ABCDEF(9) toLowerCase() 字符串转小写
var sTr ABCDEF;
var sTr2 sTr.toLowerCase();
alert(sTr2); //弹出abcdef(10) 字符串反转
var str asdfj12jlsdkf098;
var str2 str.split().reverse().join();alert(str2); //890fkdslj21jfdsa7.10 类型转换
(1) 直接转换 parseInt() 与 parseFloat()
alert(127); //弹出127
alert( parseInt(12) 7 ); //弹出19
alert( parseInt(5.6)); // 弹出5
alert(5.62.3); // 弹出5.62.3
alert(parseFloat(5.6)2.3); // 弹出7.8999999999999995
alert(0.10.2); //弹出 0.3000000000000004
alert((0.1*1000.2*100)/100); //弹出0.3
alert((parseFloat(5.6)*1002.3*100)/100); //弹出7.9(2) 隐式转换 “” 和 “-”
if(33)
{alert(相等);
}// 弹出相等
alert(10-3); // 弹出7(3) NaN 和 isNaN
alert( parseInt(123abc) ); // 弹出123
alert( parseInt(abc123) ); // 弹出NaN7.11 定时器
定时器在javascript中的作用
制作动画异步操作函数缓冲与节流 定时器类型及语法
/*定时器setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器setInterval 反复执行的定时器clearInterval 关闭反复执行的定时器*/var time1 setTimeout(myalert,2000);
var time2 setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){alert(ok!);
}示例1-通过定时器实现当前时间变化展示
!DOCTYPE html
html langen xmlnshttp://www.w3.org/1999/html
headmeta charsetUTF-8title定时器/titlescript typetext/javascriptwindow.onload function(){var oDiv document.getElementById(div1);function timego(){var now new Date();var year now.getFullYear();var month now.getMonth()1;var date now.getDate();var week now.getDay();var hour now.getHours();var minute now.getMinutes();var second now.getSeconds();var str 当前时间是 year 年month月date日 toweek(week) todou(hour):todou(minute):todou(second);oDiv.innerHTML str;}timego();// 重复执行timego,间隔1ssetInterval(timego,1000);}function toweek(n){if(n0){return 星期日;}else if(n1){return 星期一;}else if(n2){return 星期二;}else if(n3){return 星期三;}else if(n4){return 星期四;}else if(n5){return 星期五;}else{return 星期六;}}function todou(n){if(n10){return 0n;}else{return n;}}/script/head
body
div iddiv1/div
/body
/html效果图:
7.12 常用的内置对象
JavaScript 内置了许多对象这些对象提供了各种功能和方法可用于进行常见的编程任务。以下是 JavaScript 中一些常见的内置对象的示例
ObjectJavaScript 中的基础对象是其他对象的基础并具有一些通用的方法和属性。Array用于创建和操作数组的对象提供了许多有用的数组操作方法如 push、pop、shift、unshift、splice 等。String用于创建和操作字符串的对象提供了一系列字符串处理方法如 split、replace、substring、toLowerCase、toUpperCase 等。Number用于创建和操作数字的对象提供了一些数学运算和格式化数字的方法如 toFixed、toFixed、parseInt、parseFloat 等。Boolean用于创建和操作布尔值的对象提供了一些布尔操作方法如 toString、valueOf 等。Date用于创建和操作日期和时间的对象提供了一系列日期和时间处理方法如 getDate、getMonth、getFullYear、getHours、getTime 等。Math提供了一系列数学运算的方法如绝对值abs、开方sqrt、最大值max、最小值min、随机数random、向下取整floor、向上取整ceil等。JSON提供了用于解析和序列化 JSON 数据的方法如 parse、stringify。 除了上述对象还有一些其他的内置对象例如 RegExp用于正则表达式处理Error用于处理错误和异常全局对象如 Global表示全局环境、Window表示浏览器窗口对象等。 这些不同的内置对象提供了各种不同的功能和方法使得 JavaScript 在处理各种类型的数据和任务时更加便利和灵活。使用这些内置对象开发者可以更轻松地进行对象的创建、操作和处理。
八、JQuery
jQuery是目前使用最广泛的javascript函数库。据统计全世界排名前100万的网站有46%使用jQuery远远超过其他库。微软公司甚至把jQuery作为他们的官方库。 jQuery的版本分为1.x系列和2.x、3.x系列1.x系列兼容低版本的浏览器2.x、3.x系列放弃支持低版本浏览器目前使用最多的是1.x系列的。 jquery是一个函数库一个js文件页面用script标签引入这个js文件就可以使用。
script typetext/javascript srcjs/jquery-1.12.2.js/script相关网站
版本下载代码查看
8.1 jquery加载
将获取元素的语句写到页面头部会因为元素还没有加载而出错jquery提供了ready方法解决这个问题它的速度比原生的 window.onload 更快。
!-- 引入jquery --
script typetext/javascript srcjquery-migrate-3.4.1.min.js/scriptscript typetext/javascript$(document).ready(function(){alert(hello)})// 还可以简写成如下:$(function(){alert(world)})
/script8.2 jquery选择器
jquery选择器可以快速地选择元素选择规则和css样式相同使用length属性判断是否选择成功。
1. 获取元素
$(#myId) //选择id为myId的网页元素
$(.myClass) // 选择class为myClass的元素
$(li) //选择所有的li元素
$(#ul1 li span) //选择id为为ul1元素下的所有li下的span元素
$(input[namefirst]) // 选择name属性等于first的input元素2. 对选择集进行过滤
$(div).has(p); // 选择包含p元素的div元素
$(div).not(.myClass); //选择class不等于myClass的div元素
$(div).filter(.myClass); //选择class等于myClass的div元素
$(div).eq(5); //选择第6个div元素3. 选择集转移
$(div).prev(); //选择div元素前面紧挨的同辈元素
$(div).prevAll(); //选择div元素之前所有的同辈元素
$(div).next(); //选择div元素后面紧挨的同辈元素
$(div).nextAll(); //选择div元素后面所有的同辈元素
$(div).parent(); //选择div的父元素
$(div).children(); //选择div的所有子元素
$(div).siblings(); //选择div的同级元素
$(div).find(.myClass); //选择div内的class等于myClass的元素4. 判断是否选择到了元素
jquery有容错机制即使没有找到元素也不会出错可以用length属性来判断是否找到了元素,length等于0就是没选择到元素length大于0就是选择到了元素。
var $div1 $(#div1);
var $div2 $(#div2);
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
div iddiv1这是一个div/div8.3 jquery样式操作
使用jquery可以用同一个函数完成取值和赋值
1. 操作行间样式
// 获取div的样式
$(div).css(width);
$(div).css(color);//设置div的样式
$(div).css(width,30px);
$(div).css(height,30px);
// 也可以通过下面的方式设置多个样式属性
$(div).css({fontSize:30px,color:red});注意: 选择器获取的多个元素获取信息获取的是第一个比如$(“div”).css(“width”)获取的是第一个div的width。 2. 操作样式名
$(#div1).addClass(divClass2) //为id为div1的对象追加样式divClass2
$(#div1).removeClass(divClass) //移除id为div1的对象的class名为divClass的样式
$(#div1).removeClass(divClass divClass2) //移除多个样式
$(#div1).toggleClass(anotherClass) //重复切换anotherClass样式3. 常用特殊效果样式
fadeOut() 淡出fadeToggle() 切换淡入淡出hide() 隐藏元素show() 显示元素toggle() 切换元素的可见状态slideDown() 向下展开slideUp() 向上卷起slideToggle() 依次展开或卷起某个元素 用法示例:
$btn.click(function(){/*1000: 1000 毫秒easing指定动画效果的缓动函数。这里使用了 swing表示使用默认的缓动函数即渐进加速。*/$(#div1).fadeIn(1000,swing,function(){alert(done!);});});8.4 jquery常用事件
blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入进入子元素也触发mouseout() 鼠标离开离开子元素也触发mouseenter() 鼠标进入进入子元素不触发mouseleave() 鼠标离开离开子元素不触发hover() 同时为mouseenter和mouseleave事件指定处理函数ready() DOM加载完成resize() 浏览器窗口的大小发生改变scroll() 滚动条的位置发生变化submit() 用户递交表单
给元素绑定click事件, 可以用到如下方法
$(#btn1).click(function(){// 内部的this指的是原生对象// 使用jquery对象用 $(this)})// 或者通过绑定的方式
$(#div1).bind(mouseover click, function(event) {alert($(this).html());// 取消绑定mouseover事件, 但是click事件仍在$(this).unbind(mouseover);
});有时候需要获得匹配元素相对于其同胞元素的索引位置此时可以用index()方法获取
var $li $(.list li).eq(1);
alert($li.index()); // 弹出1
......
ul classlistli1/lili2/lili4/lili5/lili6/li
/ul8.5 jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象所有jquery对象的方法可以连起来写
$(#div1) // id为div1的元素
.children(ul) //该元素下面的ul子元素
.slideDown(fast) //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children(ul) //这些兄弟元素中的ul子元素
.slideUp(fast); //高度实际高度变换到零来隐藏ul元素示例-实现一个点击列表展开的动画效果 静态效果如下:
style typetext/cssbody{font-family:Microsoft Yahei;}body,ul{margin:0px;padding:0px;}ul{list-style:none;}.menu{width:200px;margin:20px auto 0;}.menu .level1,.menu li ul a{display:block;width:200px;height:30px;line-height:30px;text-decoration:none;background-color:#3366cc;color:#fff;font-size:16px;text-indent:10px; }.menu .level1{border-bottom:1px solid #afc6f6;}.menu li ul a{font-size:14px;text-indent:20px;background-color:#7aa1ef;}.menu li ul li{border-bottom:1px solid #afc6f6;}.menu li ul{display:none;}.menu li ul.current{display:block;}.menu li ul li a:hover{background-color:#f6b544;}/styleul classmenulia href# classlevel1水果/aul classcurrentlia href#苹果/a/lilia href#梨子/a/lilia href#葡萄/a/lilia href#火龙果/a/li/ul/lilia href# classlevel1海鲜/aullia href#蛏子/a/lilia href#扇贝/a/lilia href#龙虾/a/lilia href#象拔蚌/a/li/ul/lilia href# classlevel1肉类/aullia href#内蒙古羊肉/a/lilia href#进口牛肉/a/lilia href#野猪肉/a/li /ul/lilia href# classlevel1蔬菜/aullia href#娃娃菜/a/lilia href#西红柿/a/lilia href#西芹/a/lilia href#胡萝卜/a/li/ul/lilia href# classlevel1速冻/aullia href#冰淇淋/a/lilia href#湾仔码头/a/lilia href#海参/a/lilia href#牛肉丸/a/li/ul/li/ul通过jQuery实现点击切换查看下一个列表
script typetext/javascript$(function(){$(.level1).click(function(){//当前点击的元素紧挨的同辈元素向下展开再跳到此元素的父级(li),//再跳到此父级的其他的同辈元素(li),选择其他同辈元素(li)的子元素ul然后将它向上收起。// 通过stop() 可以修正反复点击导致的持续动画的问题$(this).next().stop().slideToggle().parent().siblings().children(ul).slideUp();})})/script点击海鲜的时候, 收起水果的列表,然后展示海鲜的列表.
8.6 jquery动画
通过animate方法可以设置元素某属性值上的动画可以设置一个或多个属性值,写法和css样式是一样的动画执行完成后会执行一个函数
$(#div1).animate({width:300,height:300
},1000,swing,function(){alert(done!);
});参数可以写成数字表达式
$(#div1).animate({width:100, // 每次点击在原来的基础上100的宽度height:300
},1000,swing,function(){alert(done!);
});案例-实现轮播切换效果 静态效果图如下: 通过jQuery实现点击tab切换选项卡
script typetext/javascript$(function(){var $btn $(.btns input);var $slides $(.cons .slides);$btn.click(function(){// 当前点击的按钮加上current样式后除了当前其他的按钮去掉current样式$(this).addClass(current).siblings().removeClass(current);// 通过动画修改slides的左边距,达到切换的效果,每次切换的500x索引$slides.stop().animate({left:-500*$(this).index()});})})/script效果图:
8.7 尺寸相关、滚动事件
width()、height() 获取元素内容的width和heightinnerWidth()、innerHeight()包括padding的width和heightouterWidth()、outerHeight()包括padding和border的width和heightouterWidth(true)、outerHeight(true)包括padding和border以及margin的width和heightoffset 获取元素相对页面的绝对位置(随窗口的变化而变化), 它是一个包含top和left的object对象.scroll() 滚动监听
// 获取浏览器可视区宽度高度
$(window).width();
$(window).height();// 获取页面文档内容的宽度高度, 通常大于等于window的宽高
$(document).width();
$(document).height();// 获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();// 页面滚动事件
$(window).scroll(function(){ ......
})8.8 jquery属性操作
1. 获取和设置html的内容
// 取出html内容
var $htm $(#div1).html();// 设置html内容
$(#div1).html(span添加文字/span);// 循环操作
$(.list li).each(function(i){$(this).html(i);
})2. prop() 取出或设置某个属性的值
// 取出图片的地址
var $src $(#img1).prop(src);
// 设置图片的地址和alt属性
$(#img1).prop({src: test.jpg, alt: Test Image });8.9 事件冒泡
什么是事件冒泡 在一个对象上触发某类事件比如单击onclick事件如果此对象定义了此事件的处理程序那么此事件就会调用这个处理程序如果没有定义此事件处理程序或者事件返回true那么这个事件会向这个对象的父级对象传播从里到外直至它被处理父级对象所有同类事件都将被激活或者它到达了对象层次的最顶层即document对象有些浏览器是window。
事件冒泡的作用 事件冒泡允许多个操作被集中处理把事件处理器添加到一个父级元素上避免把事件处理器添加到多个子级元素上它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡 事件冒泡机制有时候是不需要的需要阻止掉通过 event.stopPropagation() 来阻止
阻止表单提交 表单提交也可以通过事件来阻止, 通过event.preventDefault();来实现, 例如:
$(#form1).submit(function(event){event.preventDefault();
})示例:
script typetext/javascript$(function(){var $box1 $(.father);var $box2 $(.son);var $box3 $(.grandson);$(document).click(function(event) {alert(grandfather);})$box1.click(function() {alert(father);}).css({border:1px solid red, height:300px, width:300px});$box2.click(function() {alert(son);}).css({border:1px solid blue, height:200px, width:200px});$box3.click(function(event) {alert(grandson);// 这个可以阻止事件冒泡//event.stopPropagation();//return false 相当于event.stopPropagation();和event.preventDefault();}).css({border:1px solid black, height:100px, width:100px});})
/script如下图所示: 点击黑色方块响应事件顺序依次为: box3box2box1document 点击蓝色方块响应事件顺序依次为: box2box1document 点击蓝红方块响应事件顺序依次为: box1document 点击空白区域响应事件顺序依次为: document
8.10 事件委托
事件委托就是利用冒泡的原理把事件加到父级上通过判断事件来源的子集执行相应的操作事件委托首先可以极大减少事件绑定次数提高性能其次可以让新加入的子元素也可以拥有相同的操作。 (1) 一般绑定事件的写法
$(function(){$ali $(#list li);// 所有的li标签都会加上click事件$ali.click(function() {$(this).css({background:red});});
})
...
ul idlistli1/lili2/lili3/lili4/lili5/li
/ul(2) 事件委托的写法
$(function() {$list $(#list);// $list.delegate(li, click, function() {// $(this).css({background:red});// });// jquery3.0之后版本用on$list.on(click, li, function() {$(this).css({background:red});});
});...
ul idlistli1/lili2/lili3/lili4/lili5/li
/ul8.11 元素节点操作
(1) 创建节点
var $div $(div);
var $div2 $(div这是一个div元素/div);(2) 插入节点 append() 和 appendTo()在现存元素的内部从后面插入元素
append()方法将目标元素作为子元素添加到调用者元素中。appendTo()方法将调用者元素移动到目标元素中。
var $span $(span这是一个span元素/span);
$(#div1).append($span);
......
div iddiv1/divprepend()和prependTo()在现存元素的内部从前面插入元素
prepend()方法将目标元素作为第一个子元素添加到调用者元素中。prependTo()方法将调用者元素移动到目标元素的开头。 after()和insertAfter()在现存元素的外部从后面插入元素after()方法在调用者元素之后插入目标元素或内容。insertAfter()方法将调用者元素插入到目标元素之后。 before()和insertBefore()在现存元素的外部从前面插入元素before()方法在调用者元素之前插入目标元素或内容。insertBefore()方法将调用者元素插入到目标元素之前。
(3) 删除节点
$(#div1).remove();8.12 JSON
json是 JavaScript Object Notation 的首字母缩写单词的意思是javascript对象表示法这里说的json指的是类似于javascript对象的一种数据格式目前这种数据格式比较流行逐渐替换掉了传统的xml数据格式。 javascript自定义对象
var oMan {name:tom,age:16,talk:function(s){alert(我会说s);}
}json格式的数据
{name:tom,age:18
}与json对象不同的是json数据格式的属性名称和字符串值需要用双引号引起来用单引号或者不用引号会导致读取数据错误。 json的另外一个数据格式是数组和javascript中的数组字面量相同。
[tom,18,programmer]8.13 ajax与jsonp
1. ajax
ajax技术的目的是让javascript发送http请求与后台通信获取数据和信息。ajax技术的原理是实例化xmlhttp对象使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行从而实现异步。
局部刷新和无刷新 ajax可以实现局部刷新也叫做无刷新无刷新指的是整个页面不刷新只是局部刷新ajax可以自己发送http请求不用通过浏览器的地址栏所以页面整体不会刷新ajax获取到后台数据更新页面显示数据的部分就做到了页面局部刷新。
同源策略 ajax请求的页面或资源只能是同一个域下面的资源不能是其他域的资源这是在设计ajax时基于安全的考虑。特征报错提示
XMLHttpRequest cannot load https://www.baidu.com/. No
Access-Control-Allow-Origin header is present on the requested resource.
Origin null is therefore not allowed access.$.ajax使用方法 常用参数
url 请求地址type 请求方式默认是’GET’常用的还有’POST’dataType 设置返回的数据格式常用的是’json’格式也可以设置为’html’data 设置发送给服务器的数据success 设置请求成功后的回调函数error 设置请求失败后的回调函数async 设置是否异步默认值是’true’表示异步
以前的写法
$.ajax({url: js/data.json,type: GET,dataType: json,data:{aa:1}success:function(data){alert(data.name);},error:function(){alert(服务器超时请重试);}
});新的写法(推荐)
$.ajax({url: js/data.json,type: GET,dataType: json,data:{aa:1}
})
.done(function(data) {alert(data.name);
})
.fail(function() {alert(服务器超时请重试);
});// data.json里面的数据 {name:tom,age:18}2. jsonp
ajax只能请求同一个域下的数据或资源有时候需要跨域请求数据就需要用到jsonp技术jsonp可以跨域请求数据它的原理主要是利用了
$.ajax({url:js/data.js,type:get,dataType:jsonp,jsonpCallback:fnBack
})
.done(function(data){alert(data.name);
})
.fail(function() {alert(服务器超时请重试);
});// data.js里面的数据 fnBack({name:tom,age:18});示例: 获取360搜索关键词联想数据
$(function(){$(#txt01).keyup(function(){var sVal $(this).val();$.ajax({url:https://sug.so.360.cn/suggest?,type:get,dataType:jsonp,data: {word: sVal}}).done(function(data){var aData data.s;$(.list).empty();for(var i0;iaData.length;i){var $li $(li aData[i] /li);$li.appendTo($(.list));}}) })
})//......input typetext name idtxt01
ul classlist/ul九、本地化存储
本地存储分为cookie以及新增的localStorage和sessionStorage
9.1 cookie
Cookie是一种通过浏览器在客户端存储数据的机制。Cookie可以在请求和响应之间传递数据并存储在用户的浏览器中。Cookie有一些限制如每个域名的Cookie数目限制、每个Cookie的大小限制以及过期时间等。Cookie通常用于存储用户的标识信息、会话状态等简单的数据。 Cookie存储在本地容量最大4k在同源的http请求时携带传递损耗带宽可设置访问路径只有此路径及此路径的子路径才能访问此cookie在设置的过期时间之前有效。 读取 Cookie 的值时无论该值是布尔值、数值还是字符串它都会以字符串的形式返回。
设置cookie 需要提前引入jquery.cookie.js文件
//jquery 设置cookie
$.cookie(mycookie,123,{expires:7,path:/});
//jquery 获取cookie
$.cookie(mycookie);// js设置
document.cookie usernameJohn Doe; expiresThu, 31 Dec 2023 23:59:59 GMT;案例-实现只弹一次窗 弹窗样式和html代码如下:
.close{float:right;font-size:30px;margin-right: 10px;
}
.mask{position:fixed;width:100%;height:100%;background-color:#000;opacity:0.3;filter:alpha(opacity30);left:0;top:0;z-index:9990;
}.pop_con{display:block;
}
.pop{position:fixed;width:300px;height:200px;background-color:#fff;border:3px solid #000;left:50%;top:50%;margin-left:-250px;margin-top:-150px;z-index:9999;
}div classpop_condiv classpop亲!本网站最近有大量优惠活动,请强力关注!a href# idclose classclosex/aa hrefjavascript;; classuser_read朕知道了!/a/divdiv classmask/div
/div
h1网站内容/h1jquery代码如下:
$(function(){$(.close).click(function(){$(.pop_con).css(display,none);})// 判断是否显示过弹窗var hasShow $.cookie(hasShow);if(hasShow undefined){// 显示弹窗// show的作用等同于css(display,block)$(pop_con).show();}$(.user_read).click(function(){// 保存弹窗记录$.cookie(hasShow,true,{expires:7,path:/});$(pop_con).hide();})})9.2 localStorage
localStorage 存储在本地容量为5M或者更大不会在请求时候携带传递它提供了一个持久化存储的区域用于存储在特定域名下的字符串键值对。这意味着在同一个域名下的页面之间数据可以在用户关闭浏览器或电脑后仍然保留下来用于下次访问时的读取和修改
//设置
localStorage.setItem(dat, 456);
localStorage.dat 456;//获取
localStorage.getItem(dat);
localStorage.dat//删除
localStorage.removeItem(dat);9.3 sessionStorage
sessionStorage 是 JavaScript 中的一个 Web API用于在浏览器中保存会话级别的数据。 与 localStorage 不同sessionStorage 提供了一个会话期间持久化存储的区域。会话期间指的是用户在同一个标签页或浏览器窗口中保持打开状态的时间段。当用户关闭标签页或浏览器窗口时sessionStorage 中的数据将被清除。
// 设置或者更新
sessionStorage.setItem(key, value);
// 获取
var value sessionStorage.getItem(key);注意: localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制可以将数据更新的通知监听者Web Storage的api接口使用更方便。 iPhone的无痕浏览不支持Web Storage只能用cookie。 十、JQueryUI
jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。 官网地址:http://jqueryui.com/ , 在上面可以下载jquery-ui.min.js
10.1 案例-实现数值滚动条
会用到https://jqueryui.com/draggable/中的draggable函数 静态效果图:
.slidebar_con{width:650px;height:32px;margin:50px auto 0;
}.slidebar{width:600px;height:30px;border:1px solid #ccc; float:left;position:relative;
}.slidebar .dragbar{width:30px;height:30px;background-color:gold;cursor:pointer;position:absolute;left:0;top:0;
}.slidebar .progress{width:0px;height:30px;background-color:#f0f0f0;position:absolute;left:0;top:0;
}.slide_count{padding:0;float:right;width:40px;height:30px;border:1px solid #ccc;text-align:center;font-size:16px;
}...
div classslidebar_condiv classslidebar!-- 当前进度 --div classprogress/div!-- 滑块 --div classdragbar/div/div!-- 数值显示区域 --input typetext name value0 classslide_count
/divjQuery代码如下:
// 引入jQuery
script src./jquery-migrate-3.4.1.min.js typetext/javascript/script
// 引入jQuery-ui
script src./jquery-ui.min.js typetext/javascript/script$(function(){$(.dragbar).draggable({// 只允许水平拖拽,不受父容器的限制// axis:x, // 只允许在父容器内拖拽containment: parent, // 设置拖拽的时候的透明度opacity:0.6,// 设置回调函数drag:function(ev,ui){// 获取拖动的距离var nowleft ui.position.left;// 修改进度条的当前进度的宽度$(.progress).css({width:nowleft}); // 显示进度的数值$(.slide_count).val(parseInt(nowleft*100/570)); }})
})效果图:
十一、移动端库和框架
11.1 移动端js事件
移动端的操作方式和PC端是不同的移动端主要用手指操作所以有特殊的touch事件touch事件包括如下几个事件
touchstart: //手指放到屏幕上时触发touchmove: //手指在屏幕上滑动式触发touchend: //手指离开屏幕时触发touchcancel: //系统取消touch事件的时候触发比较少用 移动端一般有三种操作点击、滑动、拖动这三种操作一般是组合使用上面的几个事件来完成的所有上面的4个事件一般很少单独使用一般是封装使用来实现这三种操作可以使用封装成熟的js库。
11.2 zeptojs
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库 它与jquery有着类似的api。 如果你会用jquery那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的它的最初目标是在移动端提供一个精简的类似jquery的js库。 zepto官网http://zeptojs.com/ zepto包含很多模块默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块如果还需要其他的模块可以自定义构建。
11.3 swiper
swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件一般用来触屏焦点图、触屏整屏滚动等效果。 swiper分为2.x版本和3.x版本2.x版本支持低版本浏览器(IE7)3.x放弃支持低版本浏览器适合应用在移动端。 2.x版本中文网址http://2.swiper.com.cn/ 3.x版本中文网地址http://www.swiper.com.cn/
11.4 bootstrap
简单、直观、强悍的前端开发框架让web开发更迅速、简单。 来自Twitter是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的让书写代码更容易。 移动优先响应式布局开发。 bootstrap中文网址http://www.bootcss.com/ 使用bootstrap的头文件声明需要引入js和css文件
!-- 设置视口 --
meta nameviewport contentwidthdevice-width, user-scalableno,initial-scale1.0, maximum-scale1.0, minimum-scale1.0
!-- 引入jQuery --
script src./jquery-migrate-3.4.1.min.js typetext/javascript/script
!-- 引入bootstrap的js --
script src./bootstrap.min.js typetext/javascript/script
!-- 引入bootstrap的样式 --
link relstylesheet typetext/css href./bootstrap.min.css1. bootstrap容器
container-fluid 流体 : 宽度100%
.container-fluid{height: 50px;border: 1px solid #000;background-color: gold;
}div classcontainer-fluid流体容器/div
效果图: 可以看到宽度是100%自适应的,并且自带左右边距。
container : 响应式布局容器 这是一个固定宽度的容器其宽度在不同屏幕尺寸下会随着屏幕大小的改变而变化。它会根据不同的响应式查询区间来调整宽度使内容在不同设备上具有适当的显示效果。这个容器会在大型屏幕上居中显示。 以下是Bootstrap提供的常用的响应式查询区间 Extra small (xs)小于576px的屏幕适用于手机。Small (sm)介于576px和768px之间的屏幕适用于平板电脑。Medium (md)介于768px和992px之间的屏幕适用于小型台式电脑和平板电脑。Large (lg)介于992px和1200px之间的屏幕适用于常规台式电脑。Extra large (xl)大于1200px的屏幕适用于大屏幕显示器。
.container{height: 50px;border: 1px solid #000;background-color: gold;
}div classcontainer响应式布局容器/div
可以看到当浏览器缩小的时候, 容器也会随着缩小 当拉伸窗口后, 容器的宽度也会改变
2. bootstrap栅格系统
Bootstrap 栅格系统是一种用于构建自适应网页布局的前端框架。它基于CSS和HTML使开发者能够轻松地创建响应式网页以适应不同屏幕尺寸的设备。 栅格系统由一系列行rows和列columns组成。每一行被分成12个等宽的列开发者可以根据需要在每一行中使用这些列来布局网页内容。通过添加不同的CSS类开发者可以指定每个列应该在不同设备尺寸上占据的宽度。 Bootstrap 栅格系统的一些常用类包括 .container定义了一个容器用于包含栅格系统的内容。 .row定义了一个行用于包含列。 .col定义了一个列可以通过添加后缀例如 .col-md-6来指定在不同设备尺寸上的列宽度。 以下是一些栅格系统的示例代码
div classcontainerdiv classrowdiv classcol-md-6内容列1/divdiv classcol-md-6内容列2/div/div
/div在这个示例中两个列将在中等设备尺寸md上各占据父容器的一半宽度。 类似的还有:
col-lg- 大于1200排成一行小于1200分别占一行col-md- 大于992排成一行小于992分别占一行col-sm- 大于768排成一行小于768分别占一行col-xs- 始终排列成一行
style typetext/cssdiv[class*col-]{background-color:cyan;border:1px solid #ddd;height:50px;}
/style......div classcontainerdiv classrowdiv classcol-lg-3col-lg-3/divdiv classcol-lg-3col-lg-3/divdiv classcol-lg-5col-lg-5/divdiv classcol-lg-1col-lg-1/div/divbrbrdiv classrowdiv classcol-md-3col-md-3/divdiv classcol-md-3col-md-3/divdiv classcol-md-3col-md-3/divdiv classcol-md-3col-md-3/div/divbrbrdiv classrowdiv classcol-sm-3col-sm-3/divdiv classcol-sm-3col-sm-3/divdiv classcol-sm-3col-sm-3/divdiv classcol-sm-3col-sm-3/div/divbrbrdiv classrowdiv classcol-xs-3col-xs-3/divdiv classcol-xs-3col-xs-3/divdiv classcol-xs-3col-xs-3/divdiv classcol-xs-3col-xs-3/div/div
/div来看看浏览器窗口缩小到最小的情况
放大中等宽度后的效果: 放大到最大的效果:
3. bootstrap列偏移
列偏移column offset是在Bootstrap栅格系统中一种用于调整列在水平方向上的位置的技术。通过使用列偏移类可以将列从其所在行的左侧或右侧偏移一定的列数以实现更灵活的布局。 在Bootstrap栅格系统中列偏移类的命名规则如下
col-lg-offset-适用于大型设备大屏幕尺寸偏移的列数在类名后面指定范围从1到11最多可以偏移11列。col-md-offset-适用于中等设备尺寸偏移的列数在类名后面指定范围从1到11。col-sm-offset-适用于小型设备尺寸偏移的列数在类名后面指定范围从1到11。col-xs-offset-适用于超小型设备尺寸偏移的列数在类名后面指定范围从1到11。 偏移列的原理是通过设置margin-left属性来实现的。例如使用col-md-offset-4类会将列向右侧偏移4列。这意味着在中等设备尺寸上该列将以4列的宽度空出左侧的位置使其在整个布局中向右移动。 以下是一个使用列偏移的示例代码
div classrowdiv classcol-md-4 col-md-offset-2偏移了2列的列/divdiv classcol-md-6正常列/div
/div在这个示例中第一个列使用了col-md-4 col-md-offset-2类它会在中等设备尺寸上以4列宽度的列开始并向右偏移2列。这样它在布局中会向右移动两列的距离。第二个列通过col-md-6类指定了一个正常的列没有偏移。
4. bootstrap按钮
Bootstrap提供了一些用于创建不同样式和功能的按钮的类。下面是一些常用的Bootstrap按钮类
btn声明一个按钮元素。btn-default默认按钮样式。btn-primary主要按钮样式通常用于突出显示主要操作。btn-success成功按钮样式表示操作成功或积极的结果。btn-info信息按钮样式用于提供额外的信息或提示。btn-warning警告按钮样式提示可能的问题或警告。btn-danger危险按钮样式用于表示删除或其他危险操作。btn-link链接样式的按钮看起来像一个链接没有背景色和边框。btn-lg指定大尺寸按钮。btn-md指定中等尺寸按钮。btn-xs指定小尺寸按钮。btn-block将按钮的宽度设置为父元素的100%使其具有块级元素的宽度。active指定按钮为活动状态即被按下或选中。disabled禁用按钮使其不可点击。btn-group定义一个按钮组用于将多个按钮组合在一起。 下面是一个示例代码演示如何使用这些按钮类
div classcontainerbutton classbtn btn-default默认按钮/buttonbutton classbtn btn-primary主要按钮/buttonbutton classbtn btn-success成功按钮/buttonbutton classbtn btn-info信息按钮/buttonbutton classbtn btn-warning警告按钮/buttonbutton classbtn btn-danger危险按钮/buttona href# classbtn btn-link链接按钮/abutton classbtn btn-lg大尺寸按钮/buttonbutton classbtn btn-md中等尺寸按钮/buttonbutton classbtn btn-xs小尺寸按钮/buttonbutton classbtn btn-block块级按钮/buttonbutton classbtn btn-primary active活动按钮/buttonbutton classbtn btn-default disabled禁用按钮/buttondiv classbtn-groupbutton classbtn btn-primary按钮一/buttonbutton classbtn btn-primary按钮二/buttonbutton classbtn btn-primary按钮三/button/div!-- 一般按钮组 --div classbtn-groupinput typebutton name value按钮一 classbtn btn-primaryinput typebutton name value按钮二 classbtn btn-warninginput typebutton name value按钮三 classbtn btn-danger/div!-- 通栏按钮组 如果用input标签做按钮需要将它用 btn-group的容器包起来btn-group-justified: 可以匹配窗口的宽度自适应,方便地创建具有平均宽度的按钮组--div classbtn-group btn-group-justifieddiv classbtn-groupinput typebutton name value按钮一 classbtn btn-primary/divdiv classbtn-groupinput typebutton name value按钮二 classbtn btn-warning/divdiv classbtn-groupinput typebutton name value按钮三 classbtn btn-danger/div/div!-- 通栏按钮组如果用a标签做按钮就不用上面的结构直接写--div classbtn-group btn-group-justifieda href# classbtn btn-primary按钮一/aa href# classbtn btn-default按钮二/aa href# classbtn btn-default按钮三/a/div
/div效果图:
5. bootstrap表单
在 Bootstrap 中表单是一种常见的用户输入和交互的方式。它提供了一系列的CSS类可以帮助开发者轻松地创建各种样式和布局的表单。 下面是一些常用的 Bootstrap 表单相关的类
form声明一个表单域。form-inline用于创建内联表单即将表单元素排列在同一行。form-horizontal用于创建水平排列的表单即将表单元素在同一行水平排布。form-group用于包括表单文字和表单控件的表单组。每个表单组通常包含一个标签和一个表单控件。form-control用于设置文本输入框、下拉列表等表单控件的样式。checkbox 和 checkbox-inline用于设置多选框的样式checkbox-inline 可以使多选框在同一行内显示。radio 和 radio-inline用于设置单选框的样式radio-inline 可以使单选框在同一行内显示。input-group用于创建表单控件组可以在输入框周围添加其他元素如按钮或图标等input-group-addon用于设置表单控件组中的附加物Add-on的样式。input-group-btn用于设置表单控件组中的按钮样式。form-group-lg用于设置大尺寸表单的样式。form-group-sm用于设置小尺寸表单的样式。 下面是一个示例代码演示如何使用这些类创建不同样式的表单
div classcontainerform roleformdiv classform-group form-group-lglabel forexampleInputEmail1Email address/labelinput typeemail classform-control idexampleInputEmail1 placeholderEnter email/divdiv classform-grouplabel forexampleInputPassword1Password/labelinput typepassword classform-control idexampleInputPassword1 placeholderPassword/divdiv classform-grouplabel forexampleInputFileFile input/labelinput typefile idexampleInputFilep classhelp-blockExample block-level help text here./p/divdiv classcheckboxlabelinput typecheckbox Check me out/label/divbutton typesubmit classbtn btn-primarySubmit/button/form!-- 表单控件组 --div classinput-groupinput typetext classform-controlspan classinput-group-addon/span/div!-- 表单控件组 --div classinput-groupinput typetext classform-controlspan classinput-group-btnbutton classbtn btn-default typebuttonGo!/button/span/div/div效果图 :
6. bootstrap导航菜单
navbar 声明导航条navbar-default 声明默认的导航条样式navbar-inverse 声明反白的导航条样式navbar-static-top 去掉导航条的圆角navbar-fixed-top 固定到顶部的导航条navbar-fixed-bottom 固定到底部的导航条navbar-header 申明logo的容器navbar-brand 针对logo等固定内容的样式nav navbar-nav 定义导航条中的菜单navbar-form 定义导航条中的表单navbar-btn 定义导航条中的按钮navbar-text 定义导航条中的文本navbar-left 菜单靠左navbar-right 菜单靠右
div classnavbar navbar-inverse navbar-static-top div classcontainerdiv classnavbar-headerbutton classnavbar-toggle data-togglecollapse data-target#mymenu!-- 设置菜单栏右侧的3条横杆 --span classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona href# classnavbar-brandLOGO/a/div!-- 菜单栏选项 --div classcollapse navbar-collapse idmymenuul classnav navbar-navli classactivea href#首页/a/lilia href#公司新闻/a/lilia href#行业动态/a/li/ul!-- 表单项 --form classnavbar-form navbar-rightdiv classform-groupdiv classinput-groupinput typetext classform-controlspan classinput-group-btnbutton classbtn btn-default typebuttonGo!/button/span/div /div/form/div/div
/div效果图: 宽窗口的效果 窄窗口的效果:
7. bootstrap路径导航
Breadcrumb面包屑导航是一种常见的网站导航模式用于显示用户在网站中的当前位置路径。它通常将网站的层级结构以层级关系的方式展示出来。 Breadcrumb 由一系列链接或文本组成链接之间通过一个分隔符比如 或 /进行分隔。用户可以通过点击链接返回到其上一级页面。以下是一个简单的面包屑导航示例
ol classbreadcrumblia href#Home/a/lilia href#Library/a/lili classactiveData/li
/ol效果图:
8. bootstrap巨幕
Bootstrap的Jumbotron巨幕是一个突出显示的大块区域例如焦点图用于吸引用户的注意、突出显示主要内容或创建引人注目的标题。Jumbotron组件常用于展示页面的核心信息或关键部分。 以下是一个简单的使用Bootstrap Jumbotron的示例代码
div classjumbotrondiv classcontainerh1 classdisplay-4Welcome to Our Website!/h1p classleadLorem ipsum dolor sit amet, consectetur adipiscing elit./pa classbtn btn-primary btn-lg href# rolebuttonLearn more/a/div
/div效果图:
9. bootstrap模态框
模态框Modal是一种常用的弹出式窗口组件用于显示额外的内容、对话框或用户交互。模态框提供了一种便捷的方式来集中用户的注意力并让用户与其中的内容进行交互。 下面是关于Bootstrap模态框的一些常用组件和类
div classmodal用于声明一个模态框。它作为模态框的容器包含整个模态框的内容。div classmodal-dialog定义模态框的尺寸。这个元素用来包裹模态框的主要内容。div classmodal-lg用于定义大尺寸的模态框。将这个类添加到modal-dialog元素上可以增加模态框的尺寸。div classmodal-sm用于定义小尺寸的模态框。将这个类添加到modal-dialog元素上可以减小模态框的尺寸。div classmodal-header模态框的头部通常包含一个标题和一个关闭按钮。div classmodal-body模态框的主体用于显示模态框的主要内容。div classmodal-footer模态框的底部通常包含操作按钮或其他辅助性内容。 下面是一个简单的模态框示例
button typebutton classbtn btn-primary data-togglemodal data-target#myModalOpen Modal/buttondiv classmodaldiv classmodal-dialog modal-lgdiv classmodal-contentdiv classmodal-headerh5 classmodal-titleModal Title/h5button typebutton classclose data-dismissmodaltimes;/button/divdiv classmodal-bodypModal content goes here.../p/divdiv classmodal-footerbutton typebutton classbtn btn-primarySave Changes/buttonbutton typebutton classbtn btn-secondary data-dismissmodalClose/button/div/div/div
/div效果图: 在这个例子中我们使用了Bootstrap的模态框组件并添加了头部、主体和底部来展示模态框的内容。关闭按钮使用了 data-dismiss“modal” 属性点击它会关闭模态框。data-togglemodal属性的按钮点击后会弹出模态框。 此外, 也可以通过js方法来控制模态框的显示和隐藏, 例如: $(function(){// 显示$(#open_modal).click(function(){// 定位到最外层的modal$(.modal).modal({show:true,// 点击背景可以关掉backdrop:static})})// 隐藏$(#close_modal).click(function(){$(.modal).modal(hide);})
})10. bootstrap下拉菜单
下拉菜单是通过使用 dropdown-toggle 类和 dropdown-menu 类来实现的。
dropdown-toggle 类被用于创建一个触发下拉菜单的按钮或链接。您可以在按钮或链接上添加 data-toggle“dropdown” 属性以及一个下拉菜单的唯一标识符 data-target 或 href 属性。例如
button classdropdown-toggle typebutton iddropdownMenuButton data-toggledropdown aria-haspopuptrue aria-expandedfalse下拉菜单
/button或者a classdropdown-toggle href# rolebutton iddropdownMenuLink data-toggledropdown aria-haspopuptrue aria-expandedfalse下拉菜单
/adropdown-menu 类用于包裹下拉菜单项并显示下拉菜单。您可以在 dropdown-menu 类上添加其他类来改变下拉菜单的样式例如 dropdown-menu-right 将下拉菜单对齐到右边。下面是一个简单的下拉菜单示例
div classdropdownbutton classdropdown-toggle typebutton iddropdownMenuButton data-toggledropdown aria-haspopuptrue aria-expandedfalse下拉菜单/buttondiv classdropdown-menu aria-labelledbydropdownMenuButtona classdropdown-item href#菜单项1/aa classdropdown-item href#菜单项2/aa classdropdown-item href#菜单项3/a/div
/div效果图: 点击后变成:
11. bootstrap隐藏类
Bootstrap 提供了一些隐藏类来根据设备的屏幕大小隐藏元素。这些类用于响应式设计使您可以根据不同的设备类别例如小型设备、中型设备、大型设备隐藏或显示特定的元素。 以下是Bootstrap提供的一些隐藏类
hidden-xs这个类隐藏了额外小型设备屏幕宽度小于768px上的元素。hidden-sm这个类隐藏了小型设备屏幕宽度大于等于768px上的元素。hidden-md这个类隐藏了中型设备屏幕宽度大于等于992px上的元素。hidden-lg这个类隐藏了大型设备屏幕宽度大于等于1200px上的元素。 例如如果您希望在小型设备上隐藏一个元素您可以使用 hidden-xs 类
div classhidden-xs这个内容在小型设备上将被隐藏。
/div12. bootstrap响应式图片
在 Bootstrap 中img-responsive 类是用于使图片在不同屏幕大小下自适应并保持比例以提供更好的用户体验。要使用 img-responsive 类只需将其添加到 img 元素的类属性中如下所示
img srcpath/to/image.jpg alt描述图片的文字 classimg-responsive添加了 img-responsive 类之后图片将自动根据父容器的宽度进行缩放并在不同屏幕大小下适应。这有助于确保图片在所有设备上都能够以合适的比例显示并有助于提高页面的可读性和用户体验。 重要提示在最新版本的 BootstrapBootstrap 5中已经不再使用 img-responsive 类。取而代之的是一种全新的图像类 img-fluid该类提供了类似的自适应图片功能。因此如果您使用的是 Bootstrap 5请使用以下类代替 img-responsive 类
img srcpath/to/image.jpg alt描述图片的文字 classimg-fluid11.5 案例
实现效果图:
1. 布局拆分
根据效果图的排版结构, 从上到下可以拆分为4大部分, 分别是:
导航栏 可以通过bootstrap的navbar来实现 巨幕 可以通过bootstrap的jumbotron来实现 活动介绍 活动介绍可以分为2个row来实现, 第一个row用来展示标题和描述, 第二个row用来展示图文样式.商品列表 商品列表可以单独一个row来实现
2. 目录结构
目录结构如下: 其中, css目录下bootstrap.min.css是bootstrap提供的样式, 而index.css是自定义的样式, 这里是用来覆盖bootstrap默认样式时会用到的. images用来存放图片文件 js目录下bootstrap.min.js文件是bootstrap提供的, jquery-1.12.4.min.js是jquery的库文件 fonts目录下存放的是bootstrap的字体文件 index.html是案例演示的网页, 该网页的头部需要声明以下内容, 顺序不能错, 因为后面依赖的可以覆盖前面依赖的:
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0title天天生鲜-水果节/titlelink relstylesheet typetext/css hrefcss/bootstrap.min.csslink relstylesheet typetext/css hrefcss/index.cssscript typetext/javascript srcjs/jquery-1.12.4.min.js/scriptscript typetext/javascript srcjs/bootstrap.min.js/script
/head3. 导航栏实现
代码如下:
div classnavbar navbar-inverse navbar-static-topdiv classcontainer!-- 定义logo和切换小图标 --div classnavbar-headerbutton classnavbar-toggle data-togglecollapse data-target#mymenuspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona href# classnavbar-brandimg srcimages/logo.png alt天天生鲜logo/a/divdiv classcollapse navbar-collapse idmymenu!-- 定义菜单 --ul classnav navbar-navli classactivea href#首页/a/lilia href#推荐商品/a/lilia href#手机生鲜/a/lilia href#抽奖/a/li/ul!-- 定义菜单里面的表单 --form classnavbar-form navbar-rightdiv classform-groupdiv classinput-groupinput typetext name classform-controlspan classinput-group-btnbutton classbtn btn-defaultspan classglyphicon glyphicon-search/span/button/span/div/div/form/div/div
/div默认效果如下: 小屏幕的样式 这和实际的效果还是相差很大的, 首先背景颜色就不对了,然后是logo图标上下边距也不对, 如果要实现效果图的样式, 我们可以借助浏览器的元素审查检查功能,观察目标元素当前的样式, 然后再index.css中覆盖响应的样式即可. 例如, 点击导航栏背景条,右键检查, 可以查看当前使用的背景样式和其他样式 例如我想覆盖背景样式和边框样式,就可以这样处理
// index.css
.navbar-inverse {background-color: #ff722b;border-color: #ff722b;
}此时刷新界面的效果如下: 此时a标签的背景图和文字颜色也不对, 然后左侧logo图片的上下距离页对, 先来检查a标签的样式 替换的话也简单, 把样式名拷贝,然后在index.css中替换即可
// index.css
.navbar-inverse .navbar-navlia {color: #fff;
}
.navbar-inverse .navbar-nav.activea,.navbar-inverse .navbar-nav.activea:hover,.navbar-inverse .navbar-nav.activea:focus {color: #fff;background-color: #db6226;
}此时再看效果就OK了 然后就是logo的上下间距调整了,查看看看 可以看到有设置一个上下的15px的padding, 修改如下:
// index.css
.navbar-brand{padding:5px 15px;
}再次刷新已恢复正常 再次检查的时候可以看到, 被覆盖的会有删除线 接下来要调整的是右侧的菜单按钮边框和选中时的背景色 修改如下:
// index.css
.navbar-inverse .navbar-toggle {border-color: #fff;
}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {background-color: #db6226
}效果如下: 接下来, 还需要修改缩小后的菜单栏的黑色边框
修改如下:
// index.cs.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form {border-color: #fff
}效果如下:
4. 巨幕实现
代码如下:
body!--导航栏--div classnavbar navbar-inverse navbar-static-top.../div!--巨幕--div classjumbotrondiv classcontainerdiv classrow!--大屏幕和中屏幕占5个栅格,然后偏移1个,那就是总共占6个栅格--div classcol-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1!--天天生鲜水果节 文字图片--img srcimages/banner_title.png classbanner_title img-responsive!--小标题--h2 classbanner_detail_title水果节介绍/h2!--文本描述--p classbanner_detail天天生鲜将在北京、天津、上海、南京、苏州、杭州、成都、武汉8座核心城市同期推出北京水果专场借助天天生鲜产地端到用户端的渠道果品流转效率得以大大提高。依托天天生鲜的渠道优势首届果节做到了高质低价。/p/div!--大屏幕和中屏幕占4个栅格,然后偏移1个,那就是总共占5个栅格, 然后设置屏幕宽度小于992px, 因此此栅格--div classcol-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 hidden-sm hidden-xs!--右侧的大图,支持响应式,添加img-responsive--img srcimages/basket.png classimg-responsive/div/div/div/div/body此时在浏览器预览模式下设置992*768的尺寸查看效果图如下: 把宽度改成小于992再看, 比如改成991 可以看到栅格的缩小隐藏功能已经实现了, 但是样式不是我们想要的, 我们需要改的地方有:
添加背景图修改导航栏和巨幕直接的间距标题的字号和颜色文字详情的字体和颜色“天天生鲜水果节” 文字图片的顶部边距(大屏幕宽度1200px以上和中屏幕宽度992px以上的是不一样的, 这里需要用到media来实现) 下面直接给出修改的index.css文件, 因为替换操作的步骤和上面的是一样的, 借助浏览器的检查功能即可.
// index.css
.navbar{margin-bottom:0px;
}.jumbotron{background:url(../images/banner_bg.jpg) center center no-repeat;padding:25px 0;
}.banner_title{margin-top:47px;
}media (max-width:1200px){.banner_title{margin-top:30px;}
}media (max-width:992px){.banner_title{margin-top:15px;}
}.banner_detail_title{font-size:18px;color:#ffff00;
}.jumbotron .banner_detail{font-size:14px;color:#fff;line-height:28px;
}修改后,效果如下:
5. 活动介绍实现
活动介绍分为2个行, 第一行给标题和简介, 第二行给图文内容, 上代码:
!--导航栏--
div classnavbar navbar-inverse navbar-static-top...
/div!--巨幕--
div classjumbotron...
/div!--活动介绍--
div classcontainer!--活动信息,独占一行--div classrow active-infoh3 classtext-center活动图片/h3p classtext-center天天生鲜产地直采的果品甚至可以追溯到种植者和生产的地块儿。确定具体采摘地块儿后在适合的时间将水果采摘下来后直接在地头包装成箱根据订单分装运到各个分仓然后由配送员送到用户手中。以下是本次活动相关的图片/p/div!--活动图--div classrow active-pic-list!--共有4个图文结构的内容展示, 每个在大屏幕和中屏幕占3个栅格, 小屏幕(宽度768px以上)占6个栅格,小于宽度768px就会独占一行--div classcol-lg-3 col-md-3 col-sm-6div classthumbnailimg srcimages/active01.jpgh4现场采摘活动/h4/div/divdiv classcol-lg-3 col-md-3 col-sm-6div classthumbnailimg srcimages/active02.jpgh4现场采摘活动/h4/div/divdiv classcol-lg-3 col-md-3 col-sm-6div classthumbnailimg srcimages/active03.jpgh4现场采摘活动/h4/div/divdiv classcol-lg-3 col-md-3 col-sm-6div classthumbnailimg srcimages/active04.jpgh4现场采摘活动/h4/div/div/div/div不同屏幕下的效果图: 可以看到要修改的内容有:
活动介绍和下面的图文内容没有左对齐活动标题字号颜色修改活动详情字号颜色修改活动图片边框和最大宽度设置活动图片描述对齐方式和字号颜色修改 下面直接上css代码:
.active-info{margin:0;
}.active-info h3{margin-top:0;font-size:30px;color:#333;
}.active-info p{font-size:14px;color:#333;
}.active-pic-list .thumbnail{max-width:260px;margin:0 auto 20px;
}.active-pic-list .thumbnail h4{text-align:center;font-size:15px;color:#333;
}修改后效果图:
6. 商品列表实现
商品列表独占一个行即可, 上代码:
!--商品列表--
div classcontainerdiv classrow goods_list!--商品图片大屏幕一行显示5个,每个占2个栅格, 小于1200px宽度则独占一行,每个图片设置响应式图片--div classcol-lg-2div classgoods_conimg srcimages/goods.jpg classimg-reponsiveh4商品名称/h4p¥ 25.00/500g/p/div/divdiv classcol-lg-2div classgoods_conimg srcimages/goods.jpg classimg-reponsiveh4商品名称/h4p¥ 25.00/500g/p/div/divdiv classcol-lg-2div classgoods_conimg srcimages/goods.jpg classimg-reponsiveh4商品名称/h4p¥ 25.00/500g/p/div/divdiv classcol-lg-2div classgoods_conimg srcimages/goods.jpg classimg-reponsiveh4商品名称/h4p¥ 25.00/500g/p/div/divdiv classcol-lg-2div classgoods_conimg srcimages/goods.jpg classimg-reponsiveh4商品名称/h4p¥ 25.00/500g/p/div/div/div
/div不同尺寸的效果如下: 可以看到, 需要调整的地方有:
商品图片添加边框商品列表需要占满整个行, 也即是每个图片的宽度均分, 然后每个栅格的宽度也要均分还需要通过media的方式设置992px和768px尺寸下的图片排版, 992px以下的每行放3张图片, 768px以下的放1张图片 修改样式如下:
.goods_con{border:1px solid #ddd;margin:0 auto 20px;max-width:260px;}.goods_con img{width:100%;
}.goods_list .col-lg-2{width:20%;
}media (max-width:1200px){.goods_list .col-lg-2{width:20%;float:left;}
}media (max-width:992px){.goods_list .col-lg-2{width:33.33%;float:left;}
}media (max-width:768px){.goods_list .col-lg-2{width:100%;float:left;}
}效果图如下:
十二、正则表达式
12.1 创建正则表达式
js有两种创建正则表达式的方式:
使用构造函数创建使用字面量语法创建
1. 使用构造函数创建
语法如下:
var re new RegExp(规则, 可选参数);这种方式通过RegExp构造函数来创建正则表达式对象。其中‘规则’是一个表示正则表达式模式的字符串例如’\d’表示匹配数字。可选的第二个参数是一个字符串用于指定正则表达式的匹配标志例如’g’表示全局匹配、i’表示忽略大小写匹配等。 例如以下代码创建了一个正则表达式对象用于匹配字符串中的数字
var re new RegExp(\\d, g);2. 使用字面量语法创建
语法如下:
var re /规则/参数;这种方式使用斜杠/来定义正则表达式的模式并通过斜杠后的参数指定匹配标志。模式和参数直接写在斜杠之间。 例如以下代码创建了一个正则表达式对象用于匹配字符串中以字母开头的单词
var re /\d/g这个正则表达式的模式是 \d表示匹配任何数字字符0-9。标志 g 表示全局匹配也就是在整个字符串中找到所有符合规则的匹配项。 常用的参数有: i: 忽略大小写匹配将正则表达式中的字母匹配是否区分大小写。g: 全局匹配在整个字符串中查找所有匹配项。m: 多行匹配使 ^ 和 $ 可以匹配多行文本的每行开始和结束。s: 单行匹配使 . 匹配任何字符包括换行符 \n。u: 启用 Unicode 匹配将模式解析为 Unicode 码点的序列。y粘附匹配从目标字符串的当前位置开始匹配。 12.2 匹配规则
普通字符匹配 如/a/ 匹配字符 ‘a’/a,b/ 匹配字符 ‘a,b’转义字符匹配 \d 匹配一个数字即0-9 \D 匹配一个非数字即除了0-9 \w 匹配一个单词字符字母、数字、下划线 \W 匹配任何非单词字符。等价于[^A-Za-z0-9_] \s 匹配一个空白符 \S 匹配一个非空白符 \b 匹配单词边界 \B 匹配非单词边界 . 匹配一个任意字符
12.3 量词
? 出现零次或一次最多出现一次 出现一次或多次至少出现一次 * 出现零次或多次任意次 {n} 出现n次 {n,m} 出现n到m次 {n,} 至少出现n次
12.4 任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符 [a-z0-9] : 匹配a到z或者0到9中的任意一个字符
12.5 限制开头结尾
^ 以紧挨的元素开头 $ 以紧挨的元素结尾
12.6 常用的匹配方法
test 用法正则.test(字符串) 匹配成功就返回真否则就返回假replace 用法字符串.replace(正则新的字符串) 匹配成功的字符去替换新的字符Match 用法字符串.search(正则)返回匹配到的第一个匹配项的索引。如果没有匹配到则返回 -1。
var str Hello World!;
var pattern /Hello/;
var isMatched pattern.test(str);
console.log(isMatched); // truevar str The rain in Spain falls mainly on the plain.;
var pattern /ain/g;
var matches str.match(pattern);
console.log(matches); // [ain, ain, ain, ain]var str Hello World!;
var pattern /Hello/;
var newStr str.replace(pattern, Hi);
console.log(newStr); // Hi World!
