前端HTML与CSS学习笔记总结篇(超详细)

第一部分 HTML

---

第一章 职业规划和前景

---

• 职业方向规划定位：

  • web前端开发工程师
  • web网站架构师
  • 自己创业
  • 转岗管理或其他

• web前端开发的前景展望：

  • 未来IT行业企业需求最多的人才
  • 结合最新的html5抢占移动端的市场
  • 自己创业做老板
  • 随着互联网的普及web开发成为企业的宠儿和核心

• web职业发展目标：

  • 第一、梳理知识架构

    • 负责内容的HTML
    • 负责外观的css（层叠样式表）
    • 负责行为的js
    • ps切图

  • 第二、分解目标（起步阶段、提升阶段、成型阶段）

    • 起步阶段：

      • 基本知识的掌握
      • 常用工具的掌握
      • 沟通技巧的掌握（围绕客户的需求）
      • 良好的开发习惯（加注释、对齐方式）

    • 提升阶段：

      • 熟悉掌握HTML基本标签和属性
      • 熟练掌握css的基本语法和使用
      • 浏览器兼容和w3c标准的掌握
      • 结合html+css+js开始系统项目的开发

    • 成型阶段：

      • 精通DIV+CCS布局
      • 精通css样式表控制html标签
      • 熟悉运用js制作动态网站的效果
      • 能独立开发完成网站

---

第二章 html基本结构

---

• 认识HTML：

  • html不是一种编程语言，是一种标志语言
  • 标记语言是由一套标识标签组成的
  • html使用标签来描述网页

• html结构：

1 2 3 4

• 不成对出现的标签
  
 

  ---

       

• HTML 基本标签的讲解：

  •   标签

  • —-

    仅仅用于标题文本，不要为了产生粗体文本使用它们

  • 标签 段落标签

  • 标签

  • 都会让文字产生加粗效果

    • 用于强调文本，强度更深，表示重要文本—>用于SEO优化
    • 只是视觉加粗效果—>单纯为了产生加粗
  •  标签
    • em用于强调文本
    • i只是视觉斜体效果
    • 比强调更强
  • 特殊符号：
    •  ; —->空格
    • >; —>大于号
    • <；—>小于号
    • "；—>引号
    • ©;–>版权号

---

第三章 html基本标签

---

• HTMl基本标签：

  • span标签
    • 对被用来组合文档中的行内元素
    • 注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化

  • 标签 
          
     
           
    文字的格式按源码的排版来显示，我们称之为预处理格式
     
          
     

  • 标签—>他有一个必不可少的属性 href

    • target属性：
    • _self(在原来页面打开)
    • _blank（新窗口打开）
    • _top（打开时忽略所有的框架）
    • _parent（在父窗口中打开）

  • 创建锚点和锚链接

    • 锚点也是一种超链接，是页面内进行跳转的超链接
      • 第一步：创建锚点 
      • 第二步：使用创建好的锚点名称 内容
  • marquee标签
    • 可以创建一个内容滚动效果

1

• direction 表示滚动方向，取值有（left,right,up,down,默认left）
• loop表示滚动循环的次数，默认为无限循环

1	οnmοuseοver=this.stop() οnmοuseοver=this.start() scrollamout="1"(滚动速度)

• 表示当鼠标移上区域的时候停止滚动，鼠标移开继续滚动

---

第四章 img图片标签与路径

---

• 图片标签与路径：

  • 常见图片格式 jpg png gif
  • Gif （只支持全透明）
  • Jpeg /jpg
  • Png 半/全透明都支持

• 图片标签写法 ：

• 图片四要素：

  • src="" 图片路径
  • alt="" 图片含义
  • width="" 图片宽度 和图片大小保持一致
  • height="" 图片高度 和图片大小保持一致
  • title=""

• 路径知识：

  • 相对路径、绝对路径：

    • 相对路径：(Relative Path) 相对于该文件的路径；
    • 绝对路径：(Absolute Path) 从磁盘出发的路径；

  •  align属性–设置图片与后面文字的位置关系
    值–top、bottom、middle、absmiddle、left、right

• 在静态页面中：

  • /开头表示根目录；

  • ./表示当前目录；（斜画线前面一个点）

  • ../上级目录；（斜画线前面两个点）

  • 直接用文件名不带/也表示同一目录

  • 这些都是相对于当前文件的位置来说的，如果用绝对路径的话就是写全了。

---

第五章 三种列表的讲解

---

• 三种列表的知识讲解：
  • 无序列表
    • 无序列表是一个没有顺序项目的列表，此列表项默认粗体圆点进行标识

  1 2 3 4 5

  • 1. 有序列表
       • 有序列表也是一列项目，只是列表项目使用的是数字进行标记。 有序列表始于 
          标签。每个列表项始于 
         1. 标签。

  1 2 3 4 5

  内容一 内容二 内容三

  • 列表符号

    • 无序列表-列表符号:

      • type="circle" 空心圆 type=“disc” 实心圆 默认值 type="square" 方块符

    • 有序列表-列表符号

      • type="A" A B C D
      • type="a" a b c d
      • type="1" 1 2 3 4 默认值type=”I” I II III type=”i” i ii iii

    • 列表嵌套

    • 无序列表-嵌套

  1 2 3 4 5 6 7 8 9

  柚子 沙田柚 蜜柚 荔枝 苹果

  • 有序列表-嵌套

  1 2 3 4 5 6 7 8 9

  茶 红茶 绿茶 果汁 牛奶

  • 定义列表
    • 定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表以 

       标签开始。每个定义列表项以 

      开始。每个自定义列表项的定义以 

       开始。

  1 2 3 4 5 6

  pc网页制作 学习DIV+CSS JS JQ 项目实战 手机网页制作 手机网页制作实战

  • dd是对dt的解释

    • < dl>< /dl>用来创建一个普通的列表,
    • < dt>< /dt>用来创建列表中的上层项目，
    • < dd>< /dd>用来创建列表中最下层项目，
    • < dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

  1 2 3 4 5 6 7 8 9 10

  中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约

  • dl是definition list的缩写
  • dt是definition title的缩写
  • dd是definition description的缩写
  • list-style属性具有三个属性分量：
  • list-style-position ：设置列表项图标的位置，位于文本内或者文本外
  • list-style-type： 设置列表项图标的类型
  • list-style-image：使用图像设置列表项图标

  ---

  第六章 表单元素(上)

  ---

  • 表单标签:

    • 表单标签

      • 表单是一个包含表单元素的区域，包括起来的都是表单的内容

        1 2 3

  • HTML标签 - Action和确认按钮：

    • 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

  1 2 3 4

  username:

  • HTML标签 - 隐藏域隐藏标签：

  • 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器

  1 2 3

  • 标签的掌握

    • 常用type类型：

      • type="text" 单行文本输入框
      • type="password" 密码（maxlength=""）
      • type="radio" 单项选择（checked="checked"）
      • type="checkbox" 多项选择
      • type="button" 按钮
      • type="submit" 提交 type="image"图片提交
      • type="file" 上传文件
      • type="reset"重置
      • type="hidden" 隐藏

  • 关于表单中的设置默认值：

    1 2 3

  1 2 3 4

  • textarea没有默认值

  • 标签的使用

    • • label 元素不会向用户呈现任何特殊效果。
      • 不过，它为鼠标用户改进了可用性。
      • 如果您在 label 元素内点击文本，就会触发此控件。
      • 就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

    •  标签的for 属性应当与相关元素的 id属性相同。

    • 例子：（重要—注册表单–用户体验–必做）

      1 2 3

      单向选择 男： 女：

  ---

  第七章 表单和表格(下)

  ---

  • 表单和表格标签：
    • </code>文本域标签</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><textarea></code>标签：</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><textarea>是文本域标签，可以在其中插入一段文字内容，它有两个常用属性rows和cols

  • 注意：

    • rows表示这个文本域有多少行
    • cols表示这个文本域有多少列

  • 除了这两个属性它还有readonly（只读，文本域的内容无法改变，相当于协议）和title（鼠标放上提示）

  • 标签的掌握

    • 注：当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 

     表单数据提交给服务器时包括 name属性

    1 2 3 4 5 6

    1月 2月

• 常用到的属性：disabled=“disabled” name="sel" size="2"

• 表格标签
  表格标签：是表格标签，可以用它定义一个表格。

  1 2 3 4 5 6

  姓名 性别

• 注意：

  的border属性不能少
   行标签：
  可以定义表格中的一行，一个<tr>表示一行。

  标签的使用

  1 2 3 4 5 6 7 8 9 10 11

  姓名 性别 姓名 性别

  • 单元格标签:

    • 可以定义表格中的一个单元格，表示一个单元格。

      1 2 3 4 5 6 7

      姓名 性别 爱好

    • border-collapse 属性设置是否将表格边框折叠为单一边框：
    • border-collapse:collapse;
    • colspan左右合并
    • rowspan上下合并

  第一部分总结：

  • 非可视化标签：head meta style scrpit...
  • 可视化标签：img div span a ul li…
  • 只有可视化标签，才能用css改变它
  • 单标签：meta link base img input br hr

  • 双标签：html head body div a p span ..ul li ol dl ….

  • 常用可视化标签

    • div
      • 一般用它来布局
    • a 超链接标签
      • href*属性：设置跳转的网页地址
      • target属性：设置跳转的目标
      • 结论：凡事页面可以点击跳转或者表单提交的文字，都用a标签
    • img
      • src*属性用来设置图片的url数据
      • alt提供给搜索引擎搜索的
      • width
      • height
      • 结论 ：显示图片
    • ul li
      • 列表
      • 结论：只要将来设计页面中有固定样式的列表，就用ul和li
    • table caption tr td (th)
      • 慢慢已经被淘汰了 被ul li代替
      • 如果是合并竖排的就是合并行（rowspan）
      • 如果是合并横排的就是合并列（colspan）

  ---

  HTML部分导图总结

  ---

  • HTML5标签集合

  

  

  

  ---

  第二部分 CSS

  ---

  第八章 css基础知识

  ---

  • css基础知识：
    • css样式表的定义
    • css：（Cascading Style Sheets）层叠样式表；
  • 分类及位置：内部样式-head区域style标签里面
    • 外部样式-link调用
    • 内联样式-标签元素里面
  • css内的注释：/*注释内容*/

  • css样式表的语法

    • CSS规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。

    • 盒子名或者标签名{属性:值;}

    • CSS中几种颜色的表示方法

      • 用颜色名表示
        • 有17个预先确定的颜色，它们是
          • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
            　　olive, orange, purple, red, silver, teal, white, and yellow

      • 用十六进制的颜色值表示(红、绿、蓝)

        • #FF0000或者#F00

      • 用rgb(r,g,b)函数表示

        • 如：rgb(255,255,0)

      • 用hsl(Hue,Saturation,Lightness)函数表示（色调、饱和度、亮度)

        • 如：hsl(120,100%,100%),色调0代表红色，120代表绿色，240代表
          蓝色

      • 用rgba(r,g,b,a)函数表示

        • 其中a表示的是改颜色的透明度，取值范围是0~1，其中0代表完全透明

      • 用hsla(Hue,Saturation,Lightness,alpha)函数表示

        • 色调、饱和度、亮度、透明度
      • 例子

  1 2 3 4 5 6 7 8 9

  <div style="position:absolute;top:0px"> <div style="background-color:gray;">background-color:gray div> <div style="background-color:#F00;">background-color:#F00 div> <div style="background-color:#ffff00;">background-color:#ffff00 div> <div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255) div> <div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%) div> <div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5) div> <div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5) div> div>

  

  • 内部样式表
    • 当单个页面需要设置样式时，就应该使用内部样式表。
    • 使用 标签在文档里面定义内部样式表

  1 2 3 4 5

  • 从外部引入到样式分为两种：（注意写在head标签里面）

  • 当样式需要应用于很多页面时，就需要用到外部样式表，首先需要创建一个css文件，然后引用到我们的页面中。

  • Link样式表式： 

  • Html式： 

  • 内联样式表（优先级高）

    • 写在标签里面的样式

    • 如：

  • 表示给p标签里面的文字颜色设置为红色

  • 区别：外链样式与导入样式

    • link标签是属于xhtml范畴，而@import则是css2.1中特有的。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

    • 加载的顺序的区别，link加载的css时，是一种并行(没有尝试是否是这样)加载CSS方式，而@impor则在整个页面加载完成后才加载。

    • 兼容性的区别，因@import``CSS2.1才特有的，所以对于不兼容CSS2.1的浏览器来说，无效。

    • 在样式控制上(比如动态改变网页的布局时,使用JavaScript操作DOM)的区别，此时@import就无能为力了。

  ---

  • 样式的优先级补充
    • 相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：
      • 内联样式表（标签内部） > 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

  • 权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式

  • 层叠优先级是:

    • 浏览器缺省< 外部样式表 < 内部样式表 < 内联样式
  • 其中样式表又有:类选择器 < 类派生选择器<ID选择器 < ID派生选择器

  • 派生选择器以前叫上下文选择器，所以完整的层叠优先级是:

    • 浏览器缺省 <外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器< 外部样式表ID选择器< 外部样式表ID派生选择器< 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式…共12个优先级

  • 另外，如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：

    • 一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！

  ---

  第九章 css选择器(上)

  • css选择器：
    • class类选择器可以重复利用
    • id选择器唯一
  • 标签选择器
    • 什么是选择器：css选择器就是要改变样式的对象

  • 选择器{属性:值;属性:值;}

  • 标签选择器：页面中所有的标签都是一个选择器 p{color:red;}

  • ID选择器

    • 选择id命名的元素 以 # 开头 #p1{color:#0f0;}

  • 类选择器

    • class选择器，选择clas命名的元素 以.开头 .first{color:#00f;}
  • css代码写完后上线前要经过压缩处理
  • 本地和服务器分两个css版本（备份）

  • 压缩后注释都清除，空间体积减少

  • 群组选择器

    • 选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}
  • 包含选择器
    • 选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开p
      • span{color:red;}

  • 属性选择器

    • 选择包含某一属性的元素
    • a[title]{color:red;} 选择包含title的a标签
    • a[title][href]{color:red;} 选择包含title和href的a标签

  • > + 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）

    • p > span{color:red;}
  • 相邻兄弟选择器：只选择后面的相邻兄弟元素
    • p + span{color:red;}

  ---

  第十章 css选择器(下)

  ---

  • 伪类选择器
    • a:link {color:#FF0000;} / 未访问的链接 / （只用于a标签）
    • a:visited {color:#00FF00;} / 已访问的链接 / （只用于a标签）
    • a:hover {color:#FF00FF;}/* 鼠标移动到链接上
    • */（可和其他标签结合一起用）
    • a:active {color:#0000FF;} / 选定的链接 /
    • 注意
      • 伪类选择器的排序很重要，a:link a:visited a:hover a:active，记作lvha

  • 输入伪类选择器（针对表单）

    • input:focus{color:red;} / 键盘输入焦点 /

  • 其他伪类选择器

    • p:first-child{color:red;} /* 第一个p */
    • :before 在元素之前添加内容。
    • :after 在元素之后添加内容。

  • css优先规则

    • 内联样式表-> ID 选择器—> Class 类选择器->标签选择器

  ---

  第十一章 背景属性

  ---

  • 背景属性：

    • 背景的添加 ：

    • 背景颜色的添加:

      • background:red;
      • backgronnd-color:red;

    • 背景图片的添加：

      • background:url(“images/1.jpg”);
      • backgronnd-image:url(“images/1.jpg”);
    • 背景的平铺
    • 什么是平铺？平铺就是图片是否重复出现
      • 不平铺：background-repeat:no-repeat;
      • 水平方向平铺：background-repeat:repeat-x;
      • 垂直方向平铺：background-repeat:repeat-y;
      • 完全平铺：默认为完全平铺
    • 背景图片的定位
      • 背景图片的定位就是可以设置显示背景图片的位置，通过属性background-position来实现
      • background-position的取值可为英文单词或者数值和百分值。
      • background-positon的英文单词取值
      • top left
      • top center
      • top right
      • center left
      • center center
      • center right
      • bottom left
      • bottom center
      • ottom right
    • background-positon的数值取值
      • background-position:x y;
    • positon的百分值取值
      • background-position:x% y%;

    • 背景图片的大小

      • 背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。

    • background-size的数值取值

      • background-size:x y;

    • background-size的数值取值

      • background-size:x% y%;

    • 背景图片的滚动

      • 背景图片是否随着内容的滚动而滚动由background-attachment设置

      • background-attachment:fixed; 固定，不随内容的滚动而滚动

      • background-attachment:scroll; 滚动，随内容的滚动而滚动

  ---

  第十二章 文字文本属性

  ---

  • css文字文本属性：

    • 文字属性

      • color:red; 文字颜色
      • font-size:12px; 文字大小
      • font-weight:“bold” 文字粗细(bold/normal)
      • font-family:“宋体” 文字字体
      • font-variant:small-caps小写字母以大写字母显示

  • 文本属性

    • text-align:center; 文本对齐(right/left/center)
    • line-height:10px; 行间距(可通过它实现文本的垂直居中)
    • text-indent:20px; 首行缩进
    • text-decoration:none;
      • 文本线(none/underline/overline/line-through)
    • letter-spacing: 字间距

  ---

  第十三章 盒子模型

  ---

  • 盒子模型
    • 盒子模型就是一个有高度和宽度的矩形区域
    • 所有html标签都是盒子模型
    • div标签自定义盒子模型

  • 所有的标签都是盒子模型

    • class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。

  • 盒子模型的组成

    • 盒子模型组成部分：
      • 自身内容：width、height 宽高
      • 内边距： padding
      • 盒子边框： border 边框线
      • 与其他盒子距离： margin外边距
      • 内容+内边距+边框+外边距=面积

  • border 边框

    • 常见写法 border:1px solid #f00;

  • 单独属性：

    • border-width:
    • border-style:
      • dotted 点状虚线
      • dashed（虚线）
      • solid（实线）
      • double（双实线）
    • border-color (颜色)

  • padding 内边距

    • 值：像素/厘米等长度单位、百分比

      • padding:10px; 上下左右
      • padding:10px 10px; 上下 左右
      • padding:10px 10px 10px; 上 左右 下
      • padding:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）

  • 单独属性：

    • padding-top:
    • padding-right:
    • padding-bottom:
    • padding-left:

  • 当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

  • margin 外边距

    • 值：与padding相同

    • 单独属性：与padding相同

  • 外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

  ---

  补充盒子模型内容

  ---

  • 标准盒子模型

    • 盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型

  

  • 从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content部分不包含其他部分

  • IE盒子模型

  

  • 从上图可以看到 ie盒子模型的范围也包括 margin、border、padding、content

  • 和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 padding

  • IE盒子模型width = padding+border+内容

  • 标准盒子模型 = 内容的宽度（不包含border+padding）

  • 例：

    • 一个盒子的 margin为 20px，border 为 1px，padding为 10px，content 的宽为 200px、高为 50px，假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px

  • 那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。

  • 假如不加doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie浏览器会采用 ie 盒子模型去解释你的盒子，而 ff会采用标准w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。
  • 反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

  ---

  • 用 jquery 做的例子来证实一下

  1 2 3 4 5 6 7 8 9 10 11 12

  • 　上面的代码没有加上 doctype 声明，在 ie 浏览器中显示 ie盒子模型，在 ff 浏览器中显示“标准w3c盒子模型”。

  1 2 3 4 5 6 7 8 9 10 11 12 13

  • 　代码2 与代码1 唯一的不同的就是顶部加了 doctype声明。在所有浏览器中都显示“标准 w3c盒子模型”

  • 所以为了让网页能兼容各个浏览器，让我们用标准 w3c 盒子模型

  • 扩展

    • 学会使用box-sizing布局

  ---

  第十四章 块元素、行元素与溢出

  ---

  • 基本概念
    • 块级元素：默认情况下独占一行的元素，可控制宽高、上下边距；
    • 行内元素：默认情况下一行可以摆放多个的元素，不可控制宽高和上下边距

  • 行块转换

    • display:none; 不显示
    • display:block; 变成块级元素
    • display:inline; 变成行级元素
    • display:inline-block; 以块级元素样式展示，以行级元素样式排列

  • 溢出

    • overflow:hidden; 溢出隐藏
    • overflow:scroll; 内容会被修剪，浏览器会显示滚动条
    • overflow:auto; 如果内容被修剪，则产生滚动条

  • 文本不换行：white-space:nowrap;

  • 长单词换行：word-wrap:break-word;

  • 行内元素和快级元素小结

    • 一、块级元素：block element

      • 每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；

      • 块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素。

      • DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

    • 二、行内元素：inline element

      • 也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。

    • 三、block（块）元素的特点:

      • ①、总是在新行上开始；
      • ②、高度，行高以及外边距和内边距都可控制；
      • ③、宽度缺省是它的容器的100%，除非设定一个宽度。
      • ④、它可以容纳内联元素和其他块元素

    • 四、inline元素的特点

      • ①、和其他元素都在一行上；
      • ②、高，行高及外边距和内边距不可改变；
      • ③、宽度就是它的文字或图片的宽度，不可改变
      • ④、内联元素只能容纳文本或者其他内联元素

    • 对行内元素，需要注意如下:

      • 设置宽度width 无效。 设置高度height无效，可以通过line-height来设置。 设置margin
      • 只有左右margin有效，上下无效。
      • 设置padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

    • 五、常见的块状元素

      • address – 地址
      • blockquote – 块引用
      • center – 举中对齐块
      • dir – 目录列表
      • div – 常用块级容易，也是CSS layout的主要标签
      • dl – 定义列表
      • fieldset – form控制组
      • form – 交互表单
      • h1 – 大标题
      • h2 – 副标题
      • h3 – 3级标题
      • h4 – 4级标题
      • h5 – 5级标题
      • h6 – 6级标题
      • hr – 水平分隔线
      • isindex – input prompt
      • menu – 菜单列表
      • noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
      • noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
      • ol – 有序表单
      • p – 段落
      • pre – 格式化文本
      • table – 表格
      • ul – 无序列表

    • 六、常见的内联元素

      • a – 锚点
      • abbr – 缩写
      • acronym – 首字
      • b – 粗体(不推荐)
      • bdo – bidi override
      • big – 大字体
      • br – 换行
      • cite – 引用
      • code – 计算机代码(在引用源码的时候需要)
      • dfn – 定义字段
      • em – 强调
      • font – 字体设定(不推荐)
      • i – 斜体
      • img – 图片
      • input – 输入框
      • kbd – 定义键盘文本
      • label – 表格标签
      • q – 短引用
      • s – 中划线(不推荐)
      • samp – 定义范例计算机代码
      • select – 项目选择
      • small – 小字体文本
      • span – 常用内联容器，定义文本内区块
      • strike – 中划线
      • strong – 粗体强调
      • sub – 下标
      • sup – 上标
      • textarea – 多行文本输入框
      • tt – 电传文本
      • u – 下划线

    • 七，可变元素

      • 可变元素为根据上下文语境决定该元素为块元素或者内联元素。
      • applet - java applet
      • button - 按钮
      • del- 删除文本
      • iframe - inline frame
      • ins - 插入的文本
      • map - 图片区块(map)
      • object - object对象
      • script - 客户端脚本

    • 八、行内元素与块级元素有什么不同

      • 区别一：

        • 块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
        • 行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

      • 区别二：

        • 块级：块级元素可以设置宽高
        • 行内：行内元素不可以设置宽高

      • 区别三：

        • 块级：块级元素可以设置margin，padding
        • 行内：行内元素水平方向的margin-left; margin-right;

      • padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

      • 区别四：

        • 块级：display:block;
        • 行内：display:inline;

    • 替换元素有如下：（和img一样的设置方法）

      • 、、</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><select></code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><object></code>都是替换元素，这些元素都没有实际的内容</li> </ul> </li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px">可以通过修改<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display</code>属性来切换块级元素和行内元素</li> </ul> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <h4 id="第十五章-定位" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"> 第十五章 定位</h4> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">static</code>静态定位（不对它的位置进行改变，在哪里就在那里）</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">默认值。没有定位，元素出现在正常的流中（忽略 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">top</code>,<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">bottom,</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">left, right</code> 或者 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">z-index</code> 声明）。</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">fixed</code>固定定位（参照物–浏览器窗口）—做 弹窗广告用到</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"left"</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"top"</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"right"</code>以及 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"bottom"</code>属性进行规定。</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">relative</code>（相对定位 ）（参照物以他本身）</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">生成相对定位的元素，相对于其正常位置进行定位。</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">absolute</code>（绝对定位）(除了<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">static</code>都可以，找到参照物–>与它最近的已经有定位的父元素进行定位)</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">生成绝对定位的元素，相对于 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">static</code> 定位以外的第一个父元素进行定位。</li> <li style="list-style:none; position:relative; padding-left:14px">元素的位置通过 “<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">left"</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"top"</code>, <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"right"</code> 以及 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">"bottom"</code> 属性进行规定</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> z-index</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">z-index</code> 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。</li> <li style="list-style:none; position:relative; padding-left:14px">定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 一切皆为框</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">块级元素: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">div</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">h1</code>或<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">p</code>元素 即：显示为一块内容称之为 “块框“ ;</li> <li style="list-style:none; position:relative; padding-left:14px">行内元素: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">span</code>,<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">strong</code>,<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a</code>等元素 即：内容显示在行中称 “行内框”;</li> <li style="list-style:none; position:relative; padding-left:14px">使用display属性改变成框的类型 即：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:block</code>; 让行内元素设置为块级元素，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:none;</code> 没有框</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 相对定位：</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">如果对一个元素进行相对定位，它将出现在它所在的位置上。</li> <li style="list-style:none; position:relative; padding-left:14px">通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.adv_relative { position: relative; left: 30px; top: 20px; }</code></li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 绝对定位：</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">元素的位置相对于最近的已定位祖先元素，如果元素没有已定位 的祖先元素，它的位置相对于最初的包含块。 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.adv_absolute { position: absolute; left: 30px; top: 20px; }</code></li> </ul> </li> </ul> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"> <img src="http://img.e-com-net.com/image/info8/f022cd498d024a24a65bf90741699713.jpg" alt="" style="border:0px; max-width:100%; max-height:100%; height:auto" width="0" height="0"><br> <img src="http://img.e-com-net.com/image/info8/d6a305a16cbd46f6940e63546263fdc6.jpg" alt="" style="border:0px; max-width:100%; max-height:100%; height:auto" width="0" height="0"></p> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <h4 id="第十六章-框架" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"> 第十六章 框架</h4> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">frameset</code>框架： <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><frameset></code> —- 用来定义一个框架；双标签<br> 不能和 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><body></code> 一起使用</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">rows</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">cols</code>属性</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">rows</code> 定义行表示框架有多少行（取值 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">px</code>/<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">%</code>/ <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">*</code> ）</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">cols</code> 定义列表示框架有多少列（取值<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">px</code>/ <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">%</code>/ <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">*</code> ）</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> frame子框架</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">frame</code>> —- 表示框架中的某一个部分；单标签，要跟结束标志</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">src</code> 显示的网页的路径</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">name</code> 框架名</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">frameborder</code> 边框线（取值 0 / 1）</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">noframes</code>>属性</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">noframes</code>> 提供不支持框架的浏览器显示<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">body</code>的内容；双标签</p> </li> </ul> </li> </ul> <table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody> <tr> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div> <div class="line"> 5 </div> <div class="line"> 6 </div> <div class="line"> 7 </div> <div class="line"> 8 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line"> <frameset> </div> <div class="line"> <frame src=“” /> </div> <div class="line"> <frame src=“” /> </div> <div class="line"> <frame src=“” /> </div> <div class="line"> <noframes> </div> <div class="line"> <body>内容</body> </div> <div class="line"> </noframes> </div> <div class="line"> </frameset> </div></pre> </td> </tr> </tbody> </table> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><iframe></code>内联框架 <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">iframe</code>元素会创建包含另外一个文档的内联框架（即行内框架）</li> <li style="list-style:none; position:relative; padding-left:14px">允许和 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">body</code> 一起使用</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">width</code> 宽（取值 px / %）</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">height</code> 高（取值 px / %）</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">name</code> 框架名</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">frameborder</code> 边框线（取值 0 / 1）</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">src</code> 显示的网页的路径</li> </ul> </li> </ul> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <h4 id="第十七章-css高级属性" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"> 第十七章 css高级属性</h4> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">opacity</code>透明属性 <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">opacity</code> <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px">对于<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">IE6/7/</code>，使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">filter:alpha(opacity:值;</code>) 值为<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">0-100</code></li> <li style="list-style:none; position:relative; padding-left:14px">对于<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Webkit</code>，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Opera</code>，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Firefox</code>，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">IE9+</code>，使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">opacity</code>:值; 值为<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">0-1</code></li> <li style="list-style:none; position:relative; padding-left:14px">对于早期火狐，使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">-moz-opacity</code>:值; 值为<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">0-1</code></li> <li style="list-style:none; position:relative; padding-left:14px">所以写透明属性时，一般写法是</li> </ul> </li> </ul> </li> </ul> <table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody> <tr> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div> <div class="line"> 5 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line"> { </div> <div class="line"> opacity:0.5; </div> <div class="line"> filter:alpha(opacity：50);/*0-100*/ </div> <div class="line"> -moz-opacity:0.5; /*取值0-1*/-->针对早起版本的火狐兼容问题的解决 </div> <div class="line"> } </div></pre> </td> </tr> </tbody> </table> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border-radius</code>圆角边框属性</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">向 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">div</code> 元素添加圆角边框 <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border-radius:10px</code>;</li> </ul> </li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">box-shadow</code>阴影属性</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">box-shadow</code>属性向框添加阴影效果,后面跟4个参数。</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">box-shadow:0px 0px 10px #000;</code></p> </li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><embed></code>属性</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 是<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">HTML5</code>中新增的标签,媒体嵌入插件标签，可以通过<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><embed></code>插入音频或视频</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><embed src=“media/music.mp3” /></code></p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 格式<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.mid</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.wav</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.mp3</code>等</p> </li> </ul> </li> </ul> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">CSS部分导图总结</span></li> </ul> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"> <img src="http://img.e-com-net.com/image/info8/1a1561dbdcdc4fb598250cae941c19bb.jpg" alt="" style="border:0px; max-width:100%; max-height:100%; height:auto" width="0" height="0"></p> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"><br> </li> </ul> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"> <img src="http://img.e-com-net.com/image/info8/8392cddc4f774f57b710a628ebb5450d.jpg" alt="" style="border:0px; max-width:100%; max-height:100%; height:auto" width="0" height="0"></p> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">css</code>常见简写</li> </ul> <p style="margin-top:25px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-size:15px; line-height:2em"> </p> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <h3 id="第三部分-附录" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal; font-size:16px"> 第三部分 附录</h3> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <h4 id="附录一-DIV命名规范" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"> 附录一 DIV命名规范</h4> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 企业<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">DIV</code>使用频率高的命名方法</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <span style="color:rgb(0,0,0)">网页内容类</span></p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 标题: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">title</code></p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">摘要: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">summary</code></li> <li style="list-style:none; position:relative; padding-left:14px">箭头： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">arrow</code></li> <li style="list-style:none; position:relative; padding-left:14px">商标： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">label</code></li> <li style="list-style:none; position:relative; padding-left:14px">网站标志： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">logo</code></li> <li style="list-style:none; position:relative; padding-left:14px">转角/圆角：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">corner</code></li> <li style="list-style:none; position:relative; padding-left:14px">横幅广告： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">banner</code></li> <li style="list-style:none; position:relative; padding-left:14px">子菜单： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">subMenu</code></li> <li style="list-style:none; position:relative; padding-left:14px">搜索： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">search</code></li> <li style="list-style:none; position:relative; padding-left:14px">搜索框： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">searchBox</code></li> <li style="list-style:none; position:relative; padding-left:14px">登录： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">login</code></li> <li style="list-style:none; position:relative; padding-left:14px">登录条：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">loginbar</code></li> <li style="list-style:none; position:relative; padding-left:14px">工具条： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">toolbar</code></li> <li style="list-style:none; position:relative; padding-left:14px">下拉： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">drop</code></li> <li style="list-style:none; position:relative; padding-left:14px">标签页： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">tab</code></li> <li style="list-style:none; position:relative; padding-left:14px">当前的： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">current</code></li> <li style="list-style:none; position:relative; padding-left:14px">列表： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">list</code></li> <li style="list-style:none; position:relative; padding-left:14px">滚动： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">scroll</code></li> <li style="list-style:none; position:relative; padding-left:14px">服务： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">service</code></li> <li style="list-style:none; position:relative; padding-left:14px">提示信息： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">msg</code></li> <li style="list-style:none; position:relative; padding-left:14px">热点：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">hot</code></li> <li style="list-style:none; position:relative; padding-left:14px">新闻： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">news</code></li> <li style="list-style:none; position:relative; padding-left:14px">小技巧： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">tips</code></li> <li style="list-style:none; position:relative; padding-left:14px">下载： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">download</code></li> <li style="list-style:none; position:relative; padding-left:14px">栏目标题： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">title</code></li> <li style="list-style:none; position:relative; padding-left:14px">热点： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">hot</code></li> <li style="list-style:none; position:relative; padding-left:14px">加入：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">joinus</code></li> <li style="list-style:none; position:relative; padding-left:14px">注册： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">regsiter</code></li> <li style="list-style:none; position:relative; padding-left:14px">指南： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">guide</code></li> <li style="list-style:none; position:relative; padding-left:14px">友情链接： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">friendlink</code></li> <li style="list-style:none; position:relative; padding-left:14px">状态： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">status</code></li> <li style="list-style:none; position:relative; padding-left:14px">版权： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">copyright</code></li> <li style="list-style:none; position:relative; padding-left:14px">按钮： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">btn</code></li> <li style="list-style:none; position:relative; padding-left:14px">合作伙伴： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">partner</code></li> <li style="list-style:none; position:relative; padding-left:14px">投票： <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">vote</code></li> <li style="list-style:none; position:relative; padding-left:14px">左右中：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">left</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">right</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">center</code></li> </ul> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> </li> <li style="list-style:none; position:relative; padding-left:14px">注释的写法: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">/* Footer */</code> 内容区<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">/* End Footer */</code></li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <span style="color:rgb(0,0,0)">id的命名:</span></p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 页面结构</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">容器: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">container</code></li> <li style="list-style:none; position:relative; padding-left:14px">页头：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">header</code></li> <li style="list-style:none; position:relative; padding-left:14px">内容：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">content</code>/<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">container</code></li> <li style="list-style:none; position:relative; padding-left:14px">页面主体：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">main</code></li> <li style="list-style:none; position:relative; padding-left:14px">页尾：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">footer</code></li> <li style="list-style:none; position:relative; padding-left:14px">导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">nav</code></li> <li style="list-style:none; position:relative; padding-left:14px">侧栏：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">sidebar</code></li> <li style="list-style:none; position:relative; padding-left:14px">栏目：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">column</code></li> <li style="list-style:none; position:relative; padding-left:14px">页面外围控制整体布局宽度：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">wrapper</code></li> <li style="list-style:none; position:relative; padding-left:14px">左右中：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">left</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">right</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">center</code></li> </ul> </li> </ul> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 导航</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">nav</code></li> <li style="list-style:none; position:relative; padding-left:14px">主导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">mainbav</code></li> <li style="list-style:none; position:relative; padding-left:14px">子导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">subnav</code></li> <li style="list-style:none; position:relative; padding-left:14px">顶导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">topnav</code></li> <li style="list-style:none; position:relative; padding-left:14px">边导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">sidebar</code></li> <li style="list-style:none; position:relative; padding-left:14px">左导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">leftsidebar</code></li> <li style="list-style:none; position:relative; padding-left:14px">右导航：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">rightsidebar</code></li> <li style="list-style:none; position:relative; padding-left:14px">菜单：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">menu</code></li> <li style="list-style:none; position:relative; padding-left:14px">子菜单：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">submenu</code></li> <li style="list-style:none; position:relative; padding-left:14px">标题: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">title</code></li> <li style="list-style:none; position:relative; padding-left:14px">摘要: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">summary</code></li> </ul> </li> </ul> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 功能</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">标志：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">logo</code></li> <li style="list-style:none; position:relative; padding-left:14px">广告：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">banner</code></li> <li style="list-style:none; position:relative; padding-left:14px">登陆：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">login</code></li> <li style="list-style:none; position:relative; padding-left:14px">登录条：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">loginbar</code></li> <li style="list-style:none; position:relative; padding-left:14px">注册：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">regsiter</code></li> <li style="list-style:none; position:relative; padding-left:14px">搜索：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">search</code></li> <li style="list-style:none; position:relative; padding-left:14px">功能区：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">shop</code></li> <li style="list-style:none; position:relative; padding-left:14px">标题：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">title</code></li> <li style="list-style:none; position:relative; padding-left:14px">加入：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">joinus</code></li> <li style="list-style:none; position:relative; padding-left:14px">状态：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">status</code></li> <li style="list-style:none; position:relative; padding-left:14px">按钮：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">btn</code></li> <li style="list-style:none; position:relative; padding-left:14px">滚动：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">scroll</code></li> <li style="list-style:none; position:relative; padding-left:14px">标签页：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">tab</code></li> <li style="list-style:none; position:relative; padding-left:14px">文章列表：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">list</code></li> <li style="list-style:none; position:relative; padding-left:14px">提示信息：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">msg</code></li> <li style="list-style:none; position:relative; padding-left:14px">当前的:<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">current</code></li> <li style="list-style:none; position:relative; padding-left:14px">小技巧：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">tips</code></li> <li style="list-style:none; position:relative; padding-left:14px">图标: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">icon</code></li> <li style="list-style:none; position:relative; padding-left:14px">注释：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">note</code></li> <li style="list-style:none; position:relative; padding-left:14px">指南：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">guild</code></li> <li style="list-style:none; position:relative; padding-left:14px">服务：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">service</code></li> <li style="list-style:none; position:relative; padding-left:14px">热点：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">hot</code></li> <li style="list-style:none; position:relative; padding-left:14px">新闻：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">news</code></li> <li style="list-style:none; position:relative; padding-left:14px">下载：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">download</code></li> <li style="list-style:none; position:relative; padding-left:14px">投票：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">vote</code></li> <li style="list-style:none; position:relative; padding-left:14px">合作伙伴：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">partner</code></li> <li style="list-style:none; position:relative; padding-left:14px">友情链接：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">link</code></li> <li style="list-style:none; position:relative; padding-left:14px">版权：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">copyright</code></li> </ul> </li> </ul> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <span style="color:rgb(0,0,0)"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">class</code>的命名:</span></p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 颜色:使用颜色的名称或者16进制代码,如</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.red { color: red; }</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.f60 { color: #f60; }</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.ff8600 { color: #ff8600; }</code></li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 字体大小,直接使用”font+字体大小”作为名称,如</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.font12px { font-size: 12px; }</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.font9px {font-size: 9pt; }</code></li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 对齐样式,使用对齐目标的英文名称,如</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.left { float:left; }</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.bottom { float:bottom; }</code></li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 标题栏样式,使用”类别+功能”的方式命名,如</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.barnews { }</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.barproduct { }</code></li> </ul> </li> </ul> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <span style="color:rgb(0,0,0)">注意事项::</span></p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">一律小写;</li> <li style="list-style:none; position:relative; padding-left:14px">尽量用英文;</li> <li style="list-style:none; position:relative; padding-left:14px">不加中杠和下划线;</li> <li style="list-style:none; position:relative; padding-left:14px">尽量不缩写，除非一看就明白的单词.</li> </ul> </li> </ul> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> </li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <span style="color:rgb(0,0,0)">推荐的 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code> 书写顺序：</span></p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 显示属性</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">list-style</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">position</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">float</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">clear</code></li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 自身属性</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">width</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">height</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">margin</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">padding</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background</code></li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 文本属性</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">color</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">font</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">text-decoration</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">text-align</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">vertical-align</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">white-space</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">other text</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">content</code></li> </ul> </li> </ul> </li> </ul> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <h4 id="附录二-CSS精灵" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"> 附录二 CSS精灵</h4> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">CSS精灵原理以及应用</span> <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。 <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px">该图片使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background和background-position</code>属性渲染，这也就意味着你的标签变得更加复杂了，图片是在<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>中定义，而非<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><img></code>标签。</li> </ul> </li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">一个简单的例子</span>： <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px">一张图片作出一个按钮的三个状态</li> <li style="list-style:none; position:relative; padding-left:14px">一个链接用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:link</code>，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:hover</code>，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:active</code> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)"><a class="button" href="#">链接</a></code></li> <li style="list-style:none; position:relative; padding-left:14px">加入右侧的图片为：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">200px 65px</code>的三个按钮图拼合而成的图片<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">button.png</code>，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>进行定义。</li> </ul> </li> </ul> <table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody> <tr> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div> <div class="line"> 5 </div> <div class="line"> 6 </div> <div class="line"> 7 </div> <div class="line"> 8 </div> <div class="line"> 9 </div> <div class="line"> 10 </div> <div class="line"> 11 </div> <div class="line"> 12 </div> <div class="line"> 13 </div> <div class="line"> 14 </div> <div class="line"> 15 </div> <div class="line"> 16 </div> <div class="line"> 17 </div> <div class="line"> 18 </div> <div class="line"> 19 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:680px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line"> a { </div> <div class="line"> display:block; </div> <div class="line"> width:200px; </div> <div class="line"> height:65px; </div> <div class="line"> line-height:65px; /*定义状态*/ </div> <div class="line"> text-indent:-2015px; /*隐藏文字*/ </div> <div class="line"> background-image:url(button.png); /*定义背景图片*/ </div> <div class="line"> background-position:0 0; </div> <div class="line"> /*定义链接的普通状态，此时图像显示的是顶上的部分*/ </div> <div class="line"> } </div> <div class="line"></div> <div class="line"> a:hover { </div> <div class="line"> background-position:0 -66px; </div> <div class="line"> /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/ </div> <div class="line"> } </div> <div class="line"> a:active { </div> <div class="line"> background-position:0 -132px; </div> <div class="line"> /*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/ </div> <div class="line"> } </div></pre> </td> </tr> </tbody> </table> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px">更多的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值 <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px">如：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background:url(nav.png) -180px 24pxno-repeat</code>; 来达到更精确的定位</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">优点：</span> <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px">减少加载网页图片时对服务器的请求次数</li> <li style="list-style:none; position:relative; padding-left:14px">可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。</li> <li style="list-style:none; position:relative; padding-left:14px">提高页面的加载速度</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">sprite</code>技术的其中一个好处是图片的加载时间(在有许多 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">sprite</code> 时，单张图片的加载时间)。由所需图片拼成的一张 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">GIF</code>图片的尺寸会明显小于所有图片拼合前的大小。单张的 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">GIF</code>只有相关的一个色表，而单独分割的每一张 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">GIF</code> 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">JPEG</code> 或者 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">PNG</code><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">sprite</code> 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。</li> <li style="list-style:none; position:relative; padding-left:14px">减少鼠标滑过的一些<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">bug</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">IE6</code>不会主动预加载鼠标滑过即<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">a:hover</code>中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>雪碧，由于一张图片即可，所以不会出现这种现象。</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">不足：</span> <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>雪碧的最大问题是内存使用</li> <li style="list-style:none; position:relative; padding-left:14px">影响浏览器的缩放功能</li> <li style="list-style:none; position:relative; padding-left:14px">拼图维护比较麻烦</li> <li style="list-style:none; position:relative; padding-left:14px">使<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>的编写变得困难</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code> 雪碧调用的图片不能被打印</li> <li style="list-style:none; position:relative; padding-left:14px">错误得使用 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Sprites</code> 影响可访问性</li> </ul> </li> </ul> <h4 id="附录三-一些tips解决方案" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"> 附录三 一些tips解决方案</h4> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <h5 id="页面优化实践" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal"> 页面优化实践</h5> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 从下面的几个方面可以进行页面的优化：</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">减少请求数</li> <li style="list-style:none; position:relative; padding-left:14px">图片合并</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>文件合并</li> <li style="list-style:none; position:relative; padding-left:14px">减少内联样式</li> <li style="list-style:none; position:relative; padding-left:14px">避免在 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>中使用 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">import</code></li> <li style="list-style:none; position:relative; padding-left:14px">减少文件大小</li> <li style="list-style:none; position:relative; padding-left:14px">选择适合的图片格式</li> <li style="list-style:none; position:relative; padding-left:14px">图片压缩</li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code> 值缩写（<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">Shorthand Property</code>)</li> <li style="list-style:none; position:relative; padding-left:14px">文件压缩</li> <li style="list-style:none; position:relative; padding-left:14px">页面性能</li> <li style="list-style:none; position:relative; padding-left:14px">调整文件加载顺序</li> <li style="list-style:none; position:relative; padding-left:14px">减少标签数量</li> <li style="list-style:none; position:relative; padding-left:14px">调整选择器长度</li> <li style="list-style:none; position:relative; padding-left:14px">尽量使用<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code> 制作显示表现</li> <li style="list-style:none; position:relative; padding-left:14px">增强代码可读性与可维护性</li> <li style="list-style:none; position:relative; padding-left:14px">规范化</li> <li style="list-style:none; position:relative; padding-left:14px">语义化</li> <li style="list-style:none; position:relative; padding-left:14px">模块化</li> </ul> </li> </ul> <h5 id="写DIV-CSS-的一些常识" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal"> 写DIV+CSS 的一些常识</h5> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 不要使用过小的图片做背景平铺</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">这就是为何很多人都不用 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">1px</code> 的原因，这才知晓。宽高 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">1px</code> 的图片平铺出一个宽高 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">200px</code> 的区域，需要 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">200200=40, 000</code> 次，占用资源</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 无边框</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">推荐的写法是 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border:none</code>;，哈哈，我一直在用这个。 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border:0;</code> 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 慎用 通配符</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">所谓通配符，就是将<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code> 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>的十六进制颜色代码缩写</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 样式放头上，脚本放脚下。不内嵌，只外链</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 坚决不用 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>表达式</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 使用 引用样式表，而不是通过<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">@import</code> 导入。</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 一般来说，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">PNG</code>比 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">GIF</code> 要小，小得多。再者，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">GIF</code> 中有多少颜色是被浪费的，很值得优化。</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 千万不要在 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">HTML</code>中缩放图片，一者不好看，二者占资源。</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 正文字体最好用偶数</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">12px</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">14px</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">16px</code>，效果非常好。特例，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">15px</code>。</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">block</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ul</code>、<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">ol</code>等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 段落之间，至少要有一倍行距</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 强行指定某些元素的 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">line-height</code>，正文 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">1.6</code>倍于文字大小，标题<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">1.3</code>倍。</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 中文标点用全角</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">英文夹杂在中文中，左右空格，半角。</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 中文字体的粗体和斜体，远离较好</p> </li> </ul> <h5 id="常用代码片段" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal"> 常用代码片段</h5> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px">雅虎工程师提供的<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">CSS</code>初始化示例代码【仅供参考】 <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px">可以在<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">html</code>头文件中直接引用，从而避免浏览器的不兼容带来的错误。</li> </ul> </li> </ul> <table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody> <tr> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div> <div class="line"> 5 </div> <div class="line"> 6 </div> <div class="line"> 7 </div> <div class="line"> 8 </div> <div class="line"> 9 </div> <div class="line"> 10 </div> <div class="line"> 11 </div> <div class="line"> 12 </div> <div class="line"> 13 </div> <div class="line"> 14 </div> <div class="line"> 15 </div> <div class="line"> 16 </div> <div class="line"> 17 </div> <div class="line"> 18 </div> <div class="line"> 19 </div> <div class="line"> 20 </div> <div class="line"> 21 </div> <div class="line"> 22 </div> <div class="line"> 23 </div> <div class="line"> 24 </div> <div class="line"> 25 </div> <div class="line"> 26 </div> <div class="line"> 27 </div> <div class="line"> 28 </div> <div class="line"> 29 </div> <div class="line"> 30 </div> <div class="line"> 31 </div> <div class="line"> 32 </div> <div class="line"> 33 </div> <div class="line"> 34 </div> <div class="line"> 35 </div> <div class="line"> 36 </div> <div class="line"> 37 </div> <div class="line"> 38 </div> <div class="line"> 39 </div> <div class="line"> 40 </div> <div class="line"> 41 </div> <div class="line"> 42 </div> <div class="line"> 43 </div> <div class="line"> 44 </div> <div class="line"> 45 </div> <div class="line"> 46 </div> <div class="line"> 47 </div> <div class="line"> 48 </div> <div class="line"> 49 </div> <div class="line"> 50 </div> <div class="line"> 51 </div> <div class="line"> 52 </div> <div class="line"> 53 </div> <div class="line"> 54 </div> <div class="line"> 55 </div> <div class="line"> 56 </div> <div class="line"> 57 </div> <div class="line"> 58 </div> <div class="line"> 59 </div> <div class="line"> 60 </div> <div class="line"> 61 </div> <div class="line"> 62 </div> <div class="line"> 63 </div> <div class="line"> 64 </div> <div class="line"> 65 </div> <div class="line"> 66 </div> <div class="line"> 67 </div> <div class="line"> 68 </div> <div class="line"> 69 </div> <div class="line"> 70 </div> <div class="line"> 71 </div> <div class="line"> 72 </div> <div class="line"> 73 </div> <div class="line"> 74 </div> <div class="line"> 75 </div> <div class="line"> 76 </div> <div class="line"> 77 </div> <div class="line"> 78 </div> <div class="line"> 79 </div> <div class="line"> 80 </div> <div class="line"> 81 </div> <div class="line"> 82 </div> <div class="line"> 83 </div> <div class="line"> 84 </div> <div class="line"> 85 </div> <div class="line"> 86 </div> <div class="line"> 87 </div> <div class="line"> 88 </div> <div class="line"> 89 </div> <div class="line"> 90 </div> <div class="line"> 91 </div> <div class="line"> 92 </div> <div class="line"> 93 </div> <div class="line"> 94 </div> <div class="line"> 95 </div> <div class="line"> 96 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:680px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line"> body, </div> <div class="line"> div, </div> <div class="line"> dl, </div> <div class="line"> dt, </div> <div class="line"> dd, </div> <div class="line"> ul, </div> <div class="line"> ol, </div> <div class="line"> li, </div> <div class="line"> h1, </div> <div class="line"> h2, </div> <div class="line"> h3, </div> <div class="line"> h4, </div> <div class="line"> h5, </div> <div class="line"> h6, </div> <div class="line"> pre, </div> <div class="line"> code, </div> <div class="line"> form, </div> <div class="line"> fieldset, </div> <div class="line"> legend, </div> <div class="line"> input, </div> <div class="line"> button, </div> <div class="line"> textarea, </div> <div class="line"> p, </div> <div class="line"> blockquote, </div> <div class="line"> th, </div> <div class="line"> td { </div> <div class="line"> margin:0; padding:0; </div> <div class="line"> } </div> <div class="line"> body { </div> <div class="line"> background:#fff; </div> <div class="line"> color:#555; </div> <div class="line"> font-size:14px; </div> <div class="line"> font-family: Verdana, Arial, Helvetica, sans-serif; </div> <div class="line"> } </div> <div class="line"> td, </div> <div class="line"> th, </div> <div class="line"> caption { </div> <div class="line"> font-size:14px; </div> <div class="line"> } </div> <div class="line"> h1, </div> <div class="line"> h2, </div> <div class="line"> h3, </div> <div class="line"> h4, </div> <div class="line"> h5, </div> <div class="line"> h6 { </div> <div class="line"> font-weight:normal; </div> <div class="line"> font-size:100%; </div> <div class="line"> } </div> <div class="line"></div> <div class="line"> address, </div> <div class="line"> caption, </div> <div class="line"> cite, </div> <div class="line"> code, </div> <div class="line"> dfn, </div> <div class="line"> em, </div> <div class="line"> strong, </div> <div class="line"> th, </div> <div class="line"> var { </div> <div class="line"> font-style:normal; </div> <div class="line"> font-weight:normal; </div> <div class="line"> } </div> <div class="line"> a { </div> <div class="line"> color:#555; </div> <div class="line"> text-decoration:none; </div> <div class="line"> } </div> <div class="line"> a:hover { </div> <div class="line"> text-decoration:underline; </div> <div class="line"> } </div> <div class="line"> img { </div> <div class="line"> border:none; </div> <div class="line"> } </div> <div class="line"> ol,ul,li { </div> <div class="line"> list-style:none; </div> <div class="line"> } </div> <div class="line"> input, </div> <div class="line"> textarea, </div> <div class="line"> select, </div> <div class="line"> button { </div> <div class="line"> font:14px Verdana,Helvetica,Arial,sans-serif; </div> <div class="line"> } </div> <div class="line"> table { </div> <div class="line"> border-collapse:collapse; </div> <div class="line"> } </div> <div class="line"> html { </div> <div class="line"> overflow-y: scroll; </div> <div class="line"> } </div> <div class="line"> .clearfix:after { </div> <div class="line"> content: "."; </div> <div class="line"> display: block; </div> <div class="line"> height:0; </div> <div class="line"> clear:both; </div> <div class="line"> visibility: hidden; </div> <div class="line"> } </div> <div class="line"> .clearfix { </div> <div class="line"> *zoom:1; </div> <div class="line"> } </div></pre> </td> </tr> </tbody> </table> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">mobile meta</code>标签</li> </ul> <table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody> <tr> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line"> 1 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line"> <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">meta</span> <span class="attr">name</span>=<span class="string" style="color:rgb(26,188,156)">”viewport”</span> <span class="attr">content</span>=<span class="string" style="color:rgb(26,188,156)">”width</span>=<span class="string" style="color:rgb(26,188,156)">320,target-densitydpi</span>=<span class="string" style="color:rgb(26,188,156)">dpi_value,initial-scale</span>=<span class="string" style="color:rgb(26,188,156)">1,</span> <span class="attr">user-scalable</span>=<span class="string" style="color:rgb(26,188,156)">no”/</span>></span> </div></pre> </td> </tr> </tbody> </table> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px">表格不被撑开</li> </ul> <table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody> <tr> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line"> 1 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line"> <span class="selector-tag" style="color:rgb(233,105,0)">table-layout</span>: <span class="selector-tag" style="color:rgb(233,105,0)">fixed</span>; <span class="selector-tag" style="color:rgb(233,105,0)">word-break</span>: <span class="selector-tag" style="color:rgb(233,105,0)">break-all</span>;; <span class="selector-tag" style="color:rgb(233,105,0)">border-collapse</span>: <span class="selector-tag" style="color:rgb(233,105,0)">collapse</span> </div></pre> </td> </tr> </tbody> </table> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px">不设宽高居中</li> </ul> <table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody> <tr> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div> <div class="line"> 5 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line"> <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">div</span> <span class="attr">id</span>=<span class="string" style="color:rgb(26,188,156)">”abc”</span> <span class="attr">style</span>=<span class="string" style="color:rgb(26,188,156)">”display:table;text-align:center;width:100%;height:100%;”</span>></span> </div> <div class="line">       <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">span</span> <span class="attr">style</span>=<span class="string" style="color:rgb(26,188,156)">”background:#f00;</span> <span class="attr">display:table-cell</span>; <span class="attr">vertical-align:middle</span>;”></span> </div> <div class="line">             <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">input</span> <span class="attr">type</span>=<span class="string" style="color:rgb(26,188,156)">”button”</span> <span class="attr">value</span>=<span class="string" style="color:rgb(26,188,156)">”item1″</span> /></span> </div> <div class="line">       <span class="tag" style="color:rgb(41,115,183)"></<span class="name" style="color:rgb(82,82,82)">span</span>></span> </div> <div class="line"> <span class="tag" style="color:rgb(41,115,183)"></<span class="name" style="color:rgb(82,82,82)">div</span>></span> </div></pre> </td> </tr> </tbody> </table> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px">透明度的兼容代码</li> </ul> <table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody> <tr> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line"> filter:alpha(opacity=50); /*1-100*/ </div> <div class="line"> -moz-opacity:0.5; /*0-1.0*/ </div> <div class="line"> -khtml-opacity:0.5; /*0-1.0*/ </div> <div class="line"> opacity:0.5; /*0-1.0*/ </div></pre> </td> </tr> </tbody> </table> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px">文字溢出点点省略</li> </ul> <table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody> <tr> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line"> <span class="selector-tag" style="color:rgb(233,105,0)">white-space</span> <span class="selector-pseudo" style="color:rgb(41,115,183)">:nowrap</span>; </div> <div class="line"> <span class="selector-tag" style="color:rgb(233,105,0)">text-overflow</span> <span class="selector-pseudo" style="color:rgb(41,115,183)">:ellipsis</span>; </div> <div class="line"> <span class="selector-tag" style="color:rgb(233,105,0)">overflow</span> <span class="selector-pseudo" style="color:rgb(41,115,183)">:hidden</span>; </div></pre> </td> </tr> </tbody> </table> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 清除浮动的几种方法</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 方法一：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">投机取巧法</code> – 不推荐</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 方法二：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">overflow + zoom</code>方法 –不推荐<br> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.fix{overflow:hidden; zoom:1;}</code></p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">此方法优点在于代码简洁，涵盖所有浏览器</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 方法三：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">after + zoom</code>方法 -推荐–此方法可以说是综合起来最好的方法了</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">clearfix</code>只应用在包含浮动子元素的父级元素上</li> </ul> </li> </ul> </li> </ul> <table style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody> <tr> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div> <div class="line"> 5 </div> <div class="line"> 6 </div> <div class="line"> 7 </div> <div class="line"> 8 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; border:0px; font-size:14px; width:689px"> <pre style="white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; overflow-y:hidden; font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; line-height:1.5em; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line"> <span class="selector-class" style="color:rgb(41,115,183)">.fix</span>{ <span class="attribute" style="color:rgb(233,105,0)">zoom</span>: <span class="number" style="color:rgb(174,129,255)">1</span>;} </div> <div class="line"> <span class="selector-class" style="color:rgb(41,115,183)">.fix</span> <span class="selector-pseudo" style="color:rgb(41,115,183)">:after</span>{ </div> <div class="line"> <span class="attribute" style="color:rgb(233,105,0)">display</span>:block; </div> <div class="line"> <span class="attribute" style="color:rgb(233,105,0)">content</span>: <span class="string" style="color:rgb(26,188,156)">'clear'</span>; </div> <div class="line"> <span class="attribute" style="color:rgb(233,105,0)">clear</span>:both; </div> <div class="line"> <span class="attribute" style="color:rgb(233,105,0)">line-height</span>: <span class="number" style="color:rgb(174,129,255)">0</span>; </div> <div class="line"> <span class="attribute" style="color:rgb(233,105,0)">visibility</span>:hidden; </div> <div class="line"> } </div></pre> </td> </tr> </tbody> </table> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px">更多代码片段详情 <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px">实用的60个CSS代码片段</li> </ul> </li> </ul> <h5 id="一些总结" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal"> 一些总结</h5> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 自动继承属性：</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">color</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">font</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">text-align</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">list-style</code><br> …</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 非继承属性：</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">background</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">border</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">position</code><br> …</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 具有破坏性的元素：</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">float</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:none;</code></li> <li style="list-style:none; position:relative; padding-left:14px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">position:absoblute/fixed/sticky;</code></li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 具有包裹性的元素：</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">display:inline-block/table-cell</code></p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">position:absolute/fixed/sticky</code></p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">overflow:hidden/scroll</code></p> </li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 消除图片底部间隙的方法</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 图片块状化-无基线对齐<br> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">img{display:block;}</code></p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 图片底线对齐<br> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">img{vertical-align:bottom;}</code></p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 行高足够小 - 基线位置上移<br> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">.box{line-height:0;}</code></p> </li> </ul> </li> </ul> <h5 id="一些概念" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal"> 一些概念</h5> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> BFC</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">BFC全称<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">”Block Formatting Context”</code> 中文为“块级格式化上下文”</li> </ul> <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 记住这么一句话：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">BFC</code>元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">BFC</code>就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 扩展阅读</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">CSS中的BFC</li> </ul> </li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px">优雅降级(<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">graceful degradation</code>) <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px">一开始就构建完整的功能，然后再针对低版本浏览器进行兼容</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px">渐进增强 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">progressive enhancement</code>： <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px">是在浏览器开启<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">JavaScript</code>功能后，如果浏览器版本不支持某些 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">JavaScript</code> 能力，我们解决这种问题的方式</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px">平稳退化 <ul style="line-height:1.8em; padding:0px; list-style:none"> <li style="list-style:none; position:relative; padding-left:14px">是在浏览器没有<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">JavaScript</code>功能，或没有开启<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro Hei",Arial,sans-serif; font-size:1em; padding:3px 6px; vertical-align:middle; background-color:rgb(247,247,247); color:rgb(233,105,0)">JavaScript</code>功能情况下，我们解决这种问题的方式；</li> </ul> </li> </ul> <h5 id="方案荟萃扩展阅读" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; font-weight:normal"> 方案荟萃扩展阅读</h5> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <span style="color:rgb(0,0,0)">关于布局</span></p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">垂直居中</li> <li style="list-style:none; position:relative; padding-left:14px">css完全居中</li> <li style="list-style:none; position:relative; padding-left:14px">居中之美</li> <li style="list-style:none; position:relative; padding-left:14px">网页中的底部foot定位</li> <li style="list-style:none; position:relative; padding-left:14px">页面高度100%</li> <li style="list-style:none; position:relative; padding-left:14px">textarea高度自适应</li> <li style="list-style:none; position:relative; padding-left:14px">多行溢出省略</li> <li style="list-style:none; position:relative; padding-left:14px">Retina屏1px线</li> <li style="list-style:none; position:relative; padding-left:14px">Flexbugs</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> <span style="color:rgb(0,0,0)">其他</span></p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">IF IE ENDIF条件判断之IE10</li> <li style="list-style:none; position:relative; padding-left:14px">Chrome 翻译插件</li> <li style="list-style:none; position:relative; padding-left:14px">网页retina优化</li> <li style="list-style:none; position:relative; padding-left:14px">常用meta</li> <li style="list-style:none; position:relative; padding-left:14px">树状菜单</li> <li style="list-style:none; position:relative; padding-left:14px">em vs rem</li> <li style="list-style:none; position:relative; padding-left:14px">css vs js</li> <li style="list-style:none; position:relative; padding-left:14px">css解决方案（w3cplus）</li> <li style="list-style:none; position:relative; padding-left:14px">Textures生成纹理</li> <li style="list-style:none; position:relative; padding-left:14px">CSSgram</li> <li style="list-style:none; position:relative; padding-left:14px">Csscss（检查重复声明等）</li> </ul> </li> </ul> <h4 id="附录四-部分工具资源" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"> 附录四 部分工具资源</h4> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px">学会使用Emmet插件快速编码</li> <li style="list-style:none; position:relative; padding-left:14px">Emmet常用快捷键</li> <li style="list-style:none; position:relative; padding-left:14px">Sublime专题</li> <li style="list-style:none; position:relative; padding-left:14px">Sublime常用插件总结</li> <li style="list-style:none; position:relative; padding-left:14px">Front-End -Develop -Tools</li> <li style="list-style:none; position:relative; padding-left:14px">ToolsBox-自己整理的一份工具列表</li> </ul> <h4 id="附录五-编码规范" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"> 附录五 编码规范</h4> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px">编码规范</li> <li style="list-style:none; position:relative; padding-left:14px">前端规范</li> <li style="list-style:none; position:relative; padding-left:14px">web develop standard</li> <li style="list-style:none; position:relative; padding-left:14px">Web 前端开发规范文档</li> <li style="list-style:none; position:relative; padding-left:14px">前端开发规范手册</li> </ul> <h4 id="附录六-进阶学习" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"> 附录六 进阶学习</h4> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px">DOM编程之API学习</li> <li style="list-style:none; position:relative; padding-left:14px">JavaScript基础学习</li> </ul> <h4 id="附录七-其他资源" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"> 附录七 其他资源</h4> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px">Github上前端学习资源汇总</li> <li style="list-style:none; position:relative; padding-left:14px">WEB 前端开发学习笔记</li> <li style="list-style:none; position:relative; padding-left:14px">前端开发工具箱</li> <li style="list-style:none; position:relative; padding-left:14px">148个资源让你成为CSS专家</li> <li style="list-style:none; position:relative; padding-left:14px">学习CSS布局-经典必看</li> </ul> <h4 id="附录八-常见问题" style="margin:28px 0px 15px; padding:0px; color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; font-weight:normal"> 附录八 常见问题</h4> <hr style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; font-size:14px; orphans:2; widows:2; height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="color:rgb(85,85,85); font-family:PingFangSC-Regular,Roboto,Verdana,'Open Sans','Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei','Source Han Sans CN','WenQuanYi Micro Hei',Arial,sans-serif; orphans:2; widows:2; line-height:1.8em; padding:0px; list-style:none; font-size:15px"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 前端指路</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">写给前端面试者（w3cplus）</li> <li style="list-style:none; position:relative; padding-left:14px">如何成为一名卓越的前端工程师（勾三股四博客）</li> <li style="list-style:none; position:relative; padding-left:14px">什么是全栈工程师</li> <li style="list-style:none; position:relative; padding-left:14px">如何跟上前端开发的最新前沿</li> <li style="list-style:none; position:relative; padding-left:14px">浏览器的工作原理</li> <li style="list-style:none; position:relative; padding-left:14px">移动前端开发和 Web 前端开发的区别</li> <li style="list-style:none; position:relative; padding-left:14px">大型网站CSS编写与维护</li> <li style="list-style:none; position:relative; padding-left:14px">CSS核心技术关键字</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 性能/规范/实践</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">如何阅读W3c规范(王晓轩)</li> <li style="list-style:none; position:relative; padding-left:14px">如何阅读W3c规范(高博)</li> <li style="list-style:none; position:relative; padding-left:14px">雅虎web性能优化军规</li> <li style="list-style:none; position:relative; padding-left:14px">权威前端性能指南</li> <li style="list-style:none; position:relative; padding-left:14px">高性能css</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="margin-top:0px; margin-bottom:20px; padding-top:0px; padding-bottom:0px; line-height:2em"> 一些问答社区</p> <ul style="line-height:1.8em; padding:0px; list-style:none; margin-top:-10px"> <li style="list-style:none; position:relative; padding-left:14px">quora</li> <li style="list-style:none; position:relative; padding-left:14px">stackoverflow</li> <li style="list-style:none; position:relative; padding-left:14px">知乎</li> <li style="list-style:none; position:relative; padding-left:14px">前端乱炖问答区</li> <li style="list-style:none; position:relative; padding-left:14px">segmentfault问答区</li> </ul> </li> </ul> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1495283500608192512"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html,html,ccs,web,html5)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835511912843014144.htm" title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a> <span class="text-muted">范范0825</span> <a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835504218178416640.htm" title="Google earth studio 简介" target="_blank">Google earth studio 简介</a> <span class="text-muted">陟彼高冈yu</span> <a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G</div> </li> <li><a href="/article/1835502578050363392.htm" title="PHP环境搭建详细教程" target="_blank">PHP环境搭建详细教程</a> <span class="text-muted">好看资源平台</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835495170972413952.htm" title="git - Webhook让部署自动化" target="_blank">git - Webhook让部署自动化</a> <span class="text-muted">大猪大猪</span> <div>我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> <span class="text-muted">dmengmeng</span> <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835470931783413760.htm" title="「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验" target="_blank">「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验</a> <span class="text-muted">张风捷特烈</span> <a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www</div> </li> <li><a href="/article/1835455048277127168.htm" title="Python神器！WEB自动化测试集成工具 DrissionPage" target="_blank">Python神器！WEB自动化测试集成工具 DrissionPage</a> <span class="text-muted">亚丁号</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率</div> </li> <li><a href="/article/1835454921990828032.htm" title="Java爬虫框架（一）--架构设计" target="_blank">Java爬虫框架（一）--架构设计</a> <span class="text-muted">狼图腾-狼之传说</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BB%BB%E5%8A%A1/1.htm">任务</a><a class="tag" taget="_blank" href="/search/html%E8%A7%A3%E6%9E%90%E5%99%A8/1.htm">html解析器</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8/1.htm">存储</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/1.htm">电子商务</a> <div>一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast</div> </li> <li><a href="/article/1835454543471669248.htm" title="Java：爬虫框架" target="_blank">Java：爬虫框架</a> <span class="text-muted">dingcho</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分</div> </li> <li><a href="/article/1835451016456269824.htm" title="MongoDB知识概括" target="_blank">MongoDB知识概括</a> <span class="text-muted">GeorgeLin98</span> <a class="tag" taget="_blank" href="/search/%E6%8C%81%E4%B9%85%E5%B1%82/1.htm">持久层</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数</div> </li> <li><a href="/article/1835443823287824384.htm" title="Python实现下载当前年份的谷歌影像" target="_blank">Python实现下载当前年份的谷歌影像</a> <span class="text-muted">sand&wich</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在GIS项目和地图应用中，获取最新的地理影像数据是非常重要的。本文将介绍如何使用Python代码从Google地图自动下载当前年份的影像数据，并将其保存为高分辨率的TIFF格式文件。这个过程涉及地理坐标转换、多线程下载和图像处理。关键功能该脚本的核心功能包括：坐标转换：支持WGS-84与WebMercator投影之间转换，以及处理中国GCJ-02偏移。自动化下载：多线程下载地图瓦片，提高效率。图像</div> </li> <li><a href="/article/1835443569968640000.htm" title="Spring MVC 全面指南：从入门到精通的详细解析" target="_blank">Spring MVC 全面指南：从入门到精通的详细解析</a> <span class="text-muted">一杯梅子酱</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%E5%AD%A6%E4%B9%A0/1.htm">技术栈学习</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri</div> </li> <li><a href="/article/1835438028768768000.htm" title="Spring Boot中实现跨域请求" target="_blank">Spring Boot中实现跨域请求</a> <span class="text-muted">BABA8891</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>在SpringBoot中实现跨域请求（CORS，Cross-OriginResourceSharing）可以通过多种方式，以下是几种常见的方法：1.使用@CrossOrigin注解在SpringBoot中，你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用：importorg.springframework.web.bind.annotation.</div> </li> <li><a href="/article/1835438028009598976.htm" title="WebMagic：强大的Java爬虫框架解析与实战" target="_blank">WebMagic：强大的Java爬虫框架解析与实战</a> <span class="text-muted">Aaron_945</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> <span class="text-muted">有一只柴犬</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> <span class="text-muted">夜空_2cd3</span> <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> <span class="text-muted">全能全知者</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> <span class="text-muted">和自己一起成长</span> <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835399198405652480.htm" title="uniapp使用内置地图选择插件，实现地址选择并在地图上标点" target="_blank">uniapp使用内置地图选择插件，实现地址选择并在地图上标点</a> <span class="text-muted">神夜大侠</span> <a class="tag" taget="_blank" href="/search/Uniapp/1.htm">Uniapp</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a> <div>uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na</div> </li> <li><a href="/article/1835395418381447168.htm" title="【Golang】实现 Excel 文件下载功能" target="_blank">【Golang】实现 Excel 文件下载功能</a> <span class="text-muted">RumIV</span> <a class="tag" taget="_blank" href="/search/Golang/1.htm">Golang</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在当今的网络应用开发中，提供数据导出功能是一项常见的需求。Excel作为一种广泛使用的电子表格格式，通常是数据导出的首选格式之一。在本教程中，我们将学习如何使用Go语言和GinWeb框架来创建一个Excel文件，并允许用户通过HTTP请求下载该文件。准备工作在开始之前，请确保您的开发环境中已经安装了Go语言和相关的开发工具。此外，您还需要安装GinWeb框架和excelize包，这两个包都将用于我</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> <span class="text-muted">清风怎不知意</span> <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835393400380157952.htm" title="VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。" target="_blank">VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。</a> <span class="text-muted">焚木灵</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，</div> </li> <li><a href="/article/1835392769678471168.htm" title="metaRTC8.0，一个全新架构的webRTC SDK库" target="_blank">metaRTC8.0，一个全新架构的webRTC SDK库</a> <span class="text-muted">metaRTC</span> <a class="tag" taget="_blank" href="/search/webrtc/1.htm">webrtc</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a> <div>概述metaRTC8.0是metaRTC开源以来架构变化最大的一个版本，是metaIPC3.0等高性能的基础。metaRTC8.0是一个全新架构版本，并非在metaRTC7.0版本上简单升级，在QOS/语音对讲/内存占用/视频文件录制读取等方面新增多个模块，在弱网对抗/语音对讲/内存优化等效果上有显著提升。metaRTC8.0在一年多的开发中进行了近200次迭代，metaRTC8.0社区版计划在2</div> </li> <li><a href="/article/1835392770102095872.htm" title="metaRTC/webRTC QOS 方案与实践" target="_blank">metaRTC/webRTC QOS 方案与实践</a> <span class="text-muted">metaRTC</span> <a class="tag" taget="_blank" href="/search/metaRTC/1.htm">metaRTC</a><a class="tag" taget="_blank" href="/search/%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">解决方案</a><a class="tag" taget="_blank" href="/search/webrtc/1.htm">webrtc</a><a class="tag" taget="_blank" href="/search/qos/1.htm">qos</a> <div>概述质量服务(QOS/QualityofService)是指利用各种技术方案提高网络通信质量的技术，网络通信质量需要解决下面两个问题：网络问题：UDP/不稳定网络/弱网下的丢包/延时/乱序/抖动数据量问题：发送数据量超带宽负载和平滑发送拥塞控制是各种技术方案的数据基础，丢包恢复解决丢包问题，抗乱序抖动解决网络乱序抖动问题，流量控制解决平滑发送数据/数据超带宽负载/延时问题。拥塞控制(Congest</div> </li> <li><a href="/article/122.htm" title="java数字签名三种方式" target="_blank">java数字签名三种方式</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>以下3钟数字签名都是基于jdk7的 1，RSA String password="test"; // 1.初始化密钥 KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA"); keyPairGenerator.initialize(51</div> </li> <li><a href="/article/249.htm" title="Hibernate学习笔记" target="_blank">Hibernate学习笔记</a> <span class="text-muted">caoyong</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>1>、Hibernate是数据访问层框架，是一个ORM(Object Relation Mapping)框架，作者为:Gavin King 2>、搭建Hibernate的开发环境      a>、添加jar包:      aa>、hibernatte开发包中/lib/required/所</div> </li> <li><a href="/article/376.htm" title="设计模式之装饰器模式Decorator（结构型）" target="_blank">设计模式之装饰器模式Decorator（结构型）</a> <span class="text-muted">漂泊一剑客</span> <a class="tag" taget="_blank" href="/search/Decorator/1.htm">Decorator</a> <div>1. 概述        若你从事过面向对象开发，实现给一个类或对象增加行为，使用继承机制，这是所有面向对象语言的一个基本特性。如果已经存在的一个类缺少某些方法，或者须要给方法添加更多的功能（魅力），你也许会仅仅继承这个类来产生一个新类—这建立在额外的代码上。       </div> </li> <li><a href="/article/503.htm" title="读取磁盘文件txt，并输入String" target="_blank">读取磁盘文件txt，并输入String</a> <span class="text-muted">一炮送你回车库</span> <a class="tag" taget="_blank" href="/search/String/1.htm">String</a> <div>public static void main(String[] args) throws IOException {    String fileContent = readFileContent("d:/aaa.txt");    System.out.println(fileContent);    </div> </li> <li><a href="/article/630.htm" title="js三级联动下拉框" target="_blank">js三级联动下拉框</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/%E4%B8%89%E7%BA%A7%E8%81%94%E5%8A%A8/1.htm">三级联动</a> <div> //三级联动 省/直辖市<select id="province"></select> 市/省直辖<select id="city"></select> 县/区 <select id="area"></select> </div> </li> <li><a href="/article/757.htm" title="erlang之parse_transform编译选项的应用" target="_blank">erlang之parse_transform编译选项的应用</a> <span class="text-muted">616050468</span> <a class="tag" taget="_blank" href="/search/parse_transform/1.htm">parse_transform</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">游戏服务器</a><a class="tag" taget="_blank" href="/search/%E5%B1%9E%E6%80%A7%E5%90%8C%E6%AD%A5/1.htm">属性同步</a><a class="tag" taget="_blank" href="/search/abstract_code/1.htm">abstract_code</a> <div>         最近使用erlang重构了游戏服务器的所有代码，之前看过C++/lua写的服务器引擎代码，引擎实现了玩家属性自动同步给前端和增量更新玩家数据到数据库的功能，这也是现在很多游戏服务器的优化方向，在引擎层面去解决数据同步和数据持久化，数据发生变化了业务层不需要关心怎么去同步给前端。由于游戏过程中玩家每个业务中玩家数据更改的量其实是很少</div> </li> <li><a href="/article/884.htm" title="JAVA JSON的解析" target="_blank">JAVA JSON的解析</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> // { // “Total”：“条数”， // Code: 1, // // “PaymentItems”:[ // { // “PaymentItemID”:”支款单ID”, // “PaymentCode”:”支款单编号”, // “PaymentTime”:”支款日期”, // ”ContractNo”:”合同号”， // </div> </li> <li><a href="/article/1011.htm" title="POJ-1273-Drainage Ditches" target="_blank">POJ-1273-Drainage Ditches</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/ACM_POJ/1.htm">ACM_POJ</a> <div>POJ-1273-Drainage Ditches http://poj.org/problem?id=1273 基本的最大流，按LRJ的白书写的 #include<iostream> #include<cstring> #include<queue> using namespace std; #define INF 0x7fffffff int ma</div> </li> <li><a href="/article/1138.htm" title="工作流Activiti5表的命名及含义" target="_blank">工作流Activiti5表的命名及含义</a> <span class="text-muted">atongyeye</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a><a class="tag" taget="_blank" href="/search/Activiti/1.htm">Activiti</a> <div>activiti5 - http://activiti.org/designer/update在线插件安装 activiti5一共23张表 Activiti的表都以ACT_开头。 第二部分是表示表的用途的两个字母标识。 用途也和服务的API对应。 ACT_RE_*: 'RE'表示repository。 这个前缀的表包含了流程定义和流程静态资源 （图片，规则，等等）。 A</div> </li> <li><a href="/article/1265.htm" title="android的广播机制和广播的简单使用" target="_blank">android的广播机制和广播的简单使用</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%B9%BF%E6%92%AD%E6%9C%BA%E5%88%B6/1.htm">广播机制</a><a class="tag" taget="_blank" href="/search/%E5%B9%BF%E6%92%AD%E7%9A%84%E6%B3%A8%E5%86%8C/1.htm">广播的注册</a> <div>      Android广播机制简介 在Android中，有一些操作完成以后，会发送广播，比如说发出一条短信，或打出一个电话，如果某个程序接收了这个广播，就会做相应的处理。这个广播跟我们传统意义中的电台广播有些相似之处。之所以叫做广播，就是因为它只负责“说”而不管你“听不听”，也就是不管你接收方如何处理。另外，广播可以被不只一个应用程序所接收，当然也可能不被任何应</div> </li> <li><a href="/article/1392.htm" title="Spring事务传播行为详解" target="_blank">Spring事务传播行为详解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1%E4%BC%A0%E6%92%AD%E8%A1%8C%E4%B8%BA/1.htm">事务传播行为</a> <div>        在service类前加上@Transactional，声明这个service所有方法需要事务管理。每一个业务方法开始时都会打开一个事务。         Spring默认情况下会对运行期例外(RunTimeException)进行事务回滚。这</div> </li> <li><a href="/article/1519.htm" title="eidtplus operate" target="_blank">eidtplus operate</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/eidtplus/1.htm">eidtplus</a> <div>开启列模式: Alt+C 鼠标选择   OR   Alt+鼠标左键拖动 列模式替换或复制内容(多行): 右键-->格式-->填充所选内容-->选择相应操作 OR Ctrl+Shift+V(复制多行数据,必须行数一致) -------------------------------------------------------</div> </li> <li><a href="/article/1646.htm" title="【Kafka一】Kafka入门" target="_blank">【Kafka一】Kafka入门</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>这篇文章来自Spark集成Kafka(http://bit1129.iteye.com/blog/2174765)，这里把它单独取出来，作为Kafka的入门吧   下载Kafka http://mirror.bit.edu.cn/apache/kafka/0.8.1.1/kafka_2.10-0.8.1.1.tgz 2.10表示Scala的版本，而0.8.1.1表示Kafka</div> </li> <li><a href="/article/1773.htm" title="Spring 事务实现机制" target="_blank">Spring 事务实现机制</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86/1.htm">代理</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1/1.htm">事务</a> <div>Spring是以代理的方式实现对事务的管理。我们在Action中所使用的Service对象，其实是代理对象的实例，并不是我们所写的Service对象实例。既然是两个不同的对象，那为什么我们在Action中可以象使用Service对象一样的使用代理对象呢？为了说明问题，假设有个Service类叫AService，它的Spring事务代理类为AProxyService，AService实现了一个接口 </div> </li> <li><a href="/article/1900.htm" title="bootstrap源码学习与示例：bootstrap-dropdown（转帖）" target="_blank">bootstrap源码学习与示例：bootstrap-dropdown（转帖）</a> <span class="text-muted">BreakingBad</span> <a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/dropdown/1.htm">dropdown</a> <div>bootstrap-dropdown组件是个烂东西，我读后的整体感觉。 一个下拉开菜单的设计： <ul class="nav pull-right"> <li id="fat-menu" class="dropdown"> </div> </li> <li><a href="/article/2027.htm" title="读《研磨设计模式》-代码笔记-中介者模式-Mediator" target="_blank">读《研磨设计模式》-代码笔记-中介者模式-Mediator</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* * 中介者模式（Mediator）：用一个中介对象来封装一系列的对象交互。 * 中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。 * * 在我看来，Mediator模式是把多个对象（</div> </li> <li><a href="/article/2154.htm" title="常用代码记录" target="_blank">常用代码记录</a> <span class="text-muted">chenjunt3</span> <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a><a class="tag" taget="_blank" href="/search/J%23/1.htm">J#</a> <div>  1、单据设置某行或某字段不能修改 //i是行号,"cash"是字段名称 getBillCardPanelWrapper().getBillCardPanel().getBillModel().setCellEditable(i, "cash", false); //取得单据表体所有项用以上语句做循环就能设置整行了 getBillC</div> </li> <li><a href="/article/2281.htm" title="搜索引擎与工作流引擎" target="_blank">搜索引擎与工作流引擎</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8/1.htm">网络应用</a> <div>      最近在公司做和搜索有关的工作，(只是简单的应用开源工具集成到自己的产品中)工作流系统的进一步设计暂时放在一边了，偶然看到谷歌的研究员吴军写的数学之美系列中的搜索引擎与图论这篇文章中的介绍，我发现这样一个关系(仅仅是猜想)   -----搜索引擎和流程引擎的基础--都是图论，至少像在我在JWFD中引擎算法中用到的是自定义的广度优先</div> </li> <li><a href="/article/2408.htm" title="oracle Health Monitor" target="_blank">oracle Health Monitor</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/Health+Monitor/1.htm">Health Monitor</a> <div>About Health Monitor Beginning with Release 11g, Oracle Database includes a framework called Health Monitor for running diagnostic checks on the database. About Health Monitor Checks Health M</div> </li> <li><a href="/article/2535.htm" title="JSON字符串转换为对象" target="_blank">JSON字符串转换为对象</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>    作为前言,首先是要吐槽一下公司的脑残编译部署方式,web和core分开部署本来没什么问题,但是这丫居然不把json的包作为基础包而作为web的包,导致了core端不能使用,而且我们的core是可以当web来用的(不要在意这些细节),所以在core中处理json串就是个问题.没办法,跟编译那帮人也扯不清楚,只有自己写json的解析了.   </div> </li> <li><a href="/article/2662.htm" title="C语言学习八结构体，综合应用，学生管理系统" target="_blank">C语言学习八结构体，综合应用，学生管理系统</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>实现功能的代码： # include <stdio.h> # include <malloc.h> struct Student { int age; float score; char name[100]; }; int main(void) { int len; struct Student * pArr; int i,</div> </li> <li><a href="/article/2789.htm" title="vagrant学习笔记" target="_blank">vagrant学习笔记</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/vagrant/1.htm">vagrant</a> <div>想了解多主机是如何定义和使用的, 所以又学习了一遍vagrant   1. vagrant virtualbox 下载安装 https://www.vagrantup.com/downloads.html https://www.virtualbox.org/wiki/Downloads   查看安装在命令行输入vagrant     2.</div> </li> <li><a href="/article/2916.htm" title="14.性能优化-优化-软件配置优化" target="_blank">14.性能优化-优化-软件配置优化</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E9%85%8D%E7%BD%AE/1.htm">软件配置</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>1.Tomcat线程池 修改tomcat的server.xml文件： <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxThreads="1200" m</div> </li> <li><a href="/article/3043.htm" title="一个不错的shell 脚本教程 入门级" target="_blank">一个不错的shell 脚本教程 入门级</a> <span class="text-muted">HarborChung</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a> <div>一个不错的shell 脚本教程 入门级 建立一个脚本 　　Linux中有好多中不同的shell，但是通常我们使用bash (bourne again shell) 进行shell编程，因为bash是免费的并且很容易使用。所以在本文中笔者所提供的脚本都是使用bash（但是在大多数情况下，这些脚本同样可以在 bash的大姐，bourne shell中运行）。 　　如同其他语言一样</div> </li> <li><a href="/article/3170.htm" title="Spring4新特性——核心容器的其他改进" target="_blank">Spring4新特性——核心容器的其他改进</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E4%BB%A3%E7%90%86/1.htm">动态代理</a><a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a><a class="tag" taget="_blank" href="/search/%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5/1.htm">依赖注入</a> <div>Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新</div> </li> <li><a href="/article/3297.htm" title="Linux设置tomcat开机启动" target="_blank">Linux设置tomcat开机启动</a> <span class="text-muted">liuxingguome</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%9C%BA%E8%87%AA%E5%90%AF%E5%8A%A8/1.htm">开机自启动</a> <div>执行命令sudo gedit /etc/init.d/tomcat6 然后把以下英文部分复制过去。（注意第一句#!/bin/sh如果不写，就不是一个shell文件。然后将对应的jdk和tomcat换成你自己的目录就行了。 #!/bin/bash # # /etc/rc.d/init.d/tomcat # init script for tomcat precesses</div> </li> <li><a href="/article/3424.htm" title="第13章 Ajax进阶（下）" target="_blank">第13章 Ajax进阶（下）</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3551.htm" title="Troubleshooting Crystal Reports off BW" target="_blank">Troubleshooting Crystal Reports off BW</a> <span class="text-muted">blueoxygen</span> <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a> <div>http://wiki.sdn.sap.com/wiki/display/BOBJ/Troubleshooting+Crystal+Reports+off+BW#TroubleshootingCrystalReportsoffBW-TracingBOE   Quite useful, especially this part: SAP BW connectivity For t</div> </li> <li><a href="/article/3678.htm" title="Java开发熟手该当心的11个错误" target="_blank">Java开发熟手该当心的11个错误</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>#1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收 测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目 可以在属性文件中配置，那么使它成为</div> </li> <li><a href="/article/3805.htm" title="正则表达式大全" target="_blank">正则表达式大全</a> <span class="text-muted">yang852220741</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a> <div>今天向大家分享正则表达式大全，它可以大提高你的工作效率 正则表达式也可以被当作是一门语言，当你学习一门新的编程语言的时候，他们是一个小的子语言。初看时觉得它没有任何的意义，但是很多时候，你不得不阅读一些教程，或文章来理解这些简单的描述模式。 一、校验数字的表达式 数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>