前端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 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="height:1px; max-width:400px; margin-top:-1px; border:none"> <h4 id="第十五章-定位" style="font-weight:normal; margin:28px 0px 15px; font-size:14px"> 第十五章 定位</h4> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">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="line-height:2em; margin-bottom:20px">一切皆为框</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="line-height:2em; margin-bottom:20px">相对定位：</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="line-height:2em; margin-bottom:20px">绝对定位：</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="height:1px; max-width:400px; margin-top:-1px; border:none"> <p style="font-size:15px; line-height:2em; margin-bottom:20px; color:rgb(85,85,85)"> <img src="http://img.e-com-net.com/image/info8/f022cd498d024a24a65bf90741699713.jpg" alt="" style="border:0px; max-width:100%; height:auto" width="0" height="0"><br style=""> <img src="http://img.e-com-net.com/image/info8/d6a305a16cbd46f6940e63546263fdc6.jpg" alt="" style="border:0px; max-width:100%; height:auto" width="0" height="0"></p> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <h4 id="第十六章-框架" style="font-weight:normal; margin:28px 0px 15px; font-size:14px"> 第十六章 框架</h4> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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 style=""> 不能和 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">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="line-height:2em; margin-bottom:20px"><<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody style=""> <tr style=""> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line" style=""> 1 </div> <div class="line" style=""> 2 </div> <div class="line" style=""> 3 </div> <div class="line" style=""> 4 </div> <div class="line" style=""> 5 </div> <div class="line" style=""> 6 </div> <div class="line" style=""> 7 </div> <div class="line" style=""> 8 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:689px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line" style=""> <frameset> </div> <div class="line" style=""> <frame src=“” /> </div> <div class="line" style=""> <frame src=“” /> </div> <div class="line" style=""> <frame src=“” /> </div> <div class="line" style=""> <noframes> </div> <div class="line" style=""> <body>内容</body> </div> <div class="line" style=""> </noframes> </div> <div class="line" style=""> </frameset> </div></pre> </td> </tr> </tbody> </table> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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="height:1px; max-width:400px; margin-top:-1px; border:none"> <h4 id="第十七章-css高级属性" style="font-weight:normal; margin:28px 0px 15px; font-size:14px"> 第十七章 css高级属性</h4> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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="border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody style=""> <tr style=""> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line" style=""> 1 </div> <div class="line" style=""> 2 </div> <div class="line" style=""> 3 </div> <div class="line" style=""> 4 </div> <div class="line" style=""> 5 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:689px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line" style=""> { </div> <div class="line" style=""> opacity:0.5; </div> <div class="line" style=""> filter:alpha(opacity：50);/*0-100*/ </div> <div class="line" style=""> -moz-opacity:0.5; /*取值0-1*/-->针对早起版本的火狐兼容问题的解决 </div> <div class="line" style=""> } </div></pre> </td> </tr> </tbody> </table> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">是<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">格式<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px"><span style="color:rgb(0,0,0)">CSS部分导图总结</span></li> </ul> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <p style="font-size:15px; line-height:2em; margin-bottom:20px; color:rgb(85,85,85)"> <img src="http://img.e-com-net.com/image/info8/1a1561dbdcdc4fb598250cae941c19bb.jpg" alt="" style="border:0px; max-width:100%; height:auto" width="0" height="0"></p> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px"><br> </li> </ul> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <p style="font-size:15px; line-height:2em; margin-bottom:20px; color:rgb(85,85,85)"> <img src="http://img.e-com-net.com/image/info8/8392cddc4f774f57b710a628ebb5450d.jpg" alt="" style="border:0px; max-width:100%; height:auto" width="0" height="0"></p> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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="font-size:15px; line-height:2em; margin-bottom:20px; color:rgb(85,85,85); margin-top:25px"> </p> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <h3 id="第三部分-附录" style="font-weight:normal; margin:28px 0px 15px; font-size:16px"> 第三部分 附录</h3> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <h4 id="附录一-DIV命名规范" style="font-weight:normal; margin:28px 0px 15px; font-size:14px"> 附录一 DIV命名规范</h4> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px">企业<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><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="line-height:2em; margin-bottom:20px">标题: <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><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="line-height:2em; margin-bottom:20px">页面结构</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="line-height:2em; margin-bottom:20px">导航</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="line-height:2em; margin-bottom:20px">功能</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="line-height:2em; margin-bottom:20px"><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="line-height:2em; margin-bottom:20px">颜色:使用颜色的名称或者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="line-height:2em; margin-bottom:20px">字体大小,直接使用”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="line-height:2em; margin-bottom:20px">对齐样式,使用对齐目标的英文名称,如</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="line-height:2em; margin-bottom:20px">标题栏样式,使用”类别+功能”的方式命名,如</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="line-height:2em; margin-bottom:20px"><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="line-height:2em; margin-bottom:20px"><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="line-height:2em; margin-bottom:20px">显示属性</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="line-height:2em; margin-bottom:20px">自身属性</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="line-height:2em; margin-bottom:20px">文本属性</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="height:1px; max-width:400px; margin-top:-1px; border:none"> <h4 id="附录二-CSS精灵" style="font-weight:normal; margin:28px 0px 15px; font-size:14px"> 附录二 CSS精灵</h4> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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="border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody style=""> <tr style=""> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line" style=""> 1 </div> <div class="line" style=""> 2 </div> <div class="line" style=""> 3 </div> <div class="line" style=""> 4 </div> <div class="line" style=""> 5 </div> <div class="line" style=""> 6 </div> <div class="line" style=""> 7 </div> <div class="line" style=""> 8 </div> <div class="line" style=""> 9 </div> <div class="line" style=""> 10 </div> <div class="line" style=""> 11 </div> <div class="line" style=""> 12 </div> <div class="line" style=""> 13 </div> <div class="line" style=""> 14 </div> <div class="line" style=""> 15 </div> <div class="line" style=""> 16 </div> <div class="line" style=""> 17 </div> <div class="line" style=""> 18 </div> <div class="line" style=""> 19 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:680px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line" style=""> a { </div> <div class="line" style=""> display:block; </div> <div class="line" style=""> width:200px; </div> <div class="line" style=""> height:65px; </div> <div class="line" style=""> line-height:65px; /*定义状态*/ </div> <div class="line" style=""> text-indent:-2015px; /*隐藏文字*/ </div> <div class="line" style=""> background-image:url(button.png); /*定义背景图片*/ </div> <div class="line" style=""> background-position:0 0; </div> <div class="line" style=""> /*定义链接的普通状态，此时图像显示的是顶上的部分*/ </div> <div class="line" style=""> } </div> <div class="line" style=""></div> <div class="line" style=""> a:hover { </div> <div class="line" style=""> background-position:0 -66px; </div> <div class="line" style=""> /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/ </div> <div class="line" style=""> } </div> <div class="line" style=""> a:active { </div> <div class="line" style=""> background-position:0 -132px; </div> <div class="line" style=""> /*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/ </div> <div class="line" style=""> } </div></pre> </td> </tr> </tbody> </table> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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="font-weight:normal; margin:28px 0px 15px; font-size:14px"> 附录三 一些tips解决方案</h4> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <h5 id="页面优化实践" style="font-weight:normal; margin:28px 0px 15px">页面优化实践</h5> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px">从下面的几个方面可以进行页面的优化：</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="font-weight:normal; margin:28px 0px 15px">写DIV+CSS 的一些常识</h5> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px">不要使用过小的图片做背景平铺</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="line-height:2em; margin-bottom:20px">无边框</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="line-height:2em; margin-bottom:20px">慎用 通配符</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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">样式放头上，脚本放脚下。不内嵌，只外链</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px">坚决不用 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">使用 引用样式表，而不是通过<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">一般来说，<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">千万不要在 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">正文字体最好用偶数</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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">段落之间，至少要有一倍行距</p> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px">强行指定某些元素的 <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">中文标点用全角</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="line-height:2em; margin-bottom:20px">中文字体的粗体和斜体，远离较好</p> </li> </ul> <h5 id="常用代码片段" style="font-weight:normal; margin:28px 0px 15px">常用代码片段</h5> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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="border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody style=""> <tr style=""> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line" style=""> 1 </div> <div class="line" style=""> 2 </div> <div class="line" style=""> 3 </div> <div class="line" style=""> 4 </div> <div class="line" style=""> 5 </div> <div class="line" style=""> 6 </div> <div class="line" style=""> 7 </div> <div class="line" style=""> 8 </div> <div class="line" style=""> 9 </div> <div class="line" style=""> 10 </div> <div class="line" style=""> 11 </div> <div class="line" style=""> 12 </div> <div class="line" style=""> 13 </div> <div class="line" style=""> 14 </div> <div class="line" style=""> 15 </div> <div class="line" style=""> 16 </div> <div class="line" style=""> 17 </div> <div class="line" style=""> 18 </div> <div class="line" style=""> 19 </div> <div class="line" style=""> 20 </div> <div class="line" style=""> 21 </div> <div class="line" style=""> 22 </div> <div class="line" style=""> 23 </div> <div class="line" style=""> 24 </div> <div class="line" style=""> 25 </div> <div class="line" style=""> 26 </div> <div class="line" style=""> 27 </div> <div class="line" style=""> 28 </div> <div class="line" style=""> 29 </div> <div class="line" style=""> 30 </div> <div class="line" style=""> 31 </div> <div class="line" style=""> 32 </div> <div class="line" style=""> 33 </div> <div class="line" style=""> 34 </div> <div class="line" style=""> 35 </div> <div class="line" style=""> 36 </div> <div class="line" style=""> 37 </div> <div class="line" style=""> 38 </div> <div class="line" style=""> 39 </div> <div class="line" style=""> 40 </div> <div class="line" style=""> 41 </div> <div class="line" style=""> 42 </div> <div class="line" style=""> 43 </div> <div class="line" style=""> 44 </div> <div class="line" style=""> 45 </div> <div class="line" style=""> 46 </div> <div class="line" style=""> 47 </div> <div class="line" style=""> 48 </div> <div class="line" style=""> 49 </div> <div class="line" style=""> 50 </div> <div class="line" style=""> 51 </div> <div class="line" style=""> 52 </div> <div class="line" style=""> 53 </div> <div class="line" style=""> 54 </div> <div class="line" style=""> 55 </div> <div class="line" style=""> 56 </div> <div class="line" style=""> 57 </div> <div class="line" style=""> 58 </div> <div class="line" style=""> 59 </div> <div class="line" style=""> 60 </div> <div class="line" style=""> 61 </div> <div class="line" style=""> 62 </div> <div class="line" style=""> 63 </div> <div class="line" style=""> 64 </div> <div class="line" style=""> 65 </div> <div class="line" style=""> 66 </div> <div class="line" style=""> 67 </div> <div class="line" style=""> 68 </div> <div class="line" style=""> 69 </div> <div class="line" style=""> 70 </div> <div class="line" style=""> 71 </div> <div class="line" style=""> 72 </div> <div class="line" style=""> 73 </div> <div class="line" style=""> 74 </div> <div class="line" style=""> 75 </div> <div class="line" style=""> 76 </div> <div class="line" style=""> 77 </div> <div class="line" style=""> 78 </div> <div class="line" style=""> 79 </div> <div class="line" style=""> 80 </div> <div class="line" style=""> 81 </div> <div class="line" style=""> 82 </div> <div class="line" style=""> 83 </div> <div class="line" style=""> 84 </div> <div class="line" style=""> 85 </div> <div class="line" style=""> 86 </div> <div class="line" style=""> 87 </div> <div class="line" style=""> 88 </div> <div class="line" style=""> 89 </div> <div class="line" style=""> 90 </div> <div class="line" style=""> 91 </div> <div class="line" style=""> 92 </div> <div class="line" style=""> 93 </div> <div class="line" style=""> 94 </div> <div class="line" style=""> 95 </div> <div class="line" style=""> 96 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:680px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line" style=""> body, </div> <div class="line" style=""> div, </div> <div class="line" style=""> dl, </div> <div class="line" style=""> dt, </div> <div class="line" style=""> dd, </div> <div class="line" style=""> ul, </div> <div class="line" style=""> ol, </div> <div class="line" style=""> li, </div> <div class="line" style=""> h1, </div> <div class="line" style=""> h2, </div> <div class="line" style=""> h3, </div> <div class="line" style=""> h4, </div> <div class="line" style=""> h5, </div> <div class="line" style=""> h6, </div> <div class="line" style=""> pre, </div> <div class="line" style=""> code, </div> <div class="line" style=""> form, </div> <div class="line" style=""> fieldset, </div> <div class="line" style=""> legend, </div> <div class="line" style=""> input, </div> <div class="line" style=""> button, </div> <div class="line" style=""> textarea, </div> <div class="line" style=""> p, </div> <div class="line" style=""> blockquote, </div> <div class="line" style=""> th, </div> <div class="line" style=""> td { </div> <div class="line" style=""> margin:0; padding:0; </div> <div class="line" style=""> } </div> <div class="line" style=""> body { </div> <div class="line" style=""> background:#fff; </div> <div class="line" style=""> color:#555; </div> <div class="line" style=""> font-size:14px; </div> <div class="line" style=""> font-family: Verdana, Arial, Helvetica, sans-serif; </div> <div class="line" style=""> } </div> <div class="line" style=""> td, </div> <div class="line" style=""> th, </div> <div class="line" style=""> caption { </div> <div class="line" style=""> font-size:14px; </div> <div class="line" style=""> } </div> <div class="line" style=""> h1, </div> <div class="line" style=""> h2, </div> <div class="line" style=""> h3, </div> <div class="line" style=""> h4, </div> <div class="line" style=""> h5, </div> <div class="line" style=""> h6 { </div> <div class="line" style=""> font-weight:normal; </div> <div class="line" style=""> font-size:100%; </div> <div class="line" style=""> } </div> <div class="line" style=""></div> <div class="line" style=""> address, </div> <div class="line" style=""> caption, </div> <div class="line" style=""> cite, </div> <div class="line" style=""> code, </div> <div class="line" style=""> dfn, </div> <div class="line" style=""> em, </div> <div class="line" style=""> strong, </div> <div class="line" style=""> th, </div> <div class="line" style=""> var { </div> <div class="line" style=""> font-style:normal; </div> <div class="line" style=""> font-weight:normal; </div> <div class="line" style=""> } </div> <div class="line" style=""> a { </div> <div class="line" style=""> color:#555; </div> <div class="line" style=""> text-decoration:none; </div> <div class="line" style=""> } </div> <div class="line" style=""> a:hover { </div> <div class="line" style=""> text-decoration:underline; </div> <div class="line" style=""> } </div> <div class="line" style=""> img { </div> <div class="line" style=""> border:none; </div> <div class="line" style=""> } </div> <div class="line" style=""> ol,ul,li { </div> <div class="line" style=""> list-style:none; </div> <div class="line" style=""> } </div> <div class="line" style=""> input, </div> <div class="line" style=""> textarea, </div> <div class="line" style=""> select, </div> <div class="line" style=""> button { </div> <div class="line" style=""> font:14px Verdana,Helvetica,Arial,sans-serif; </div> <div class="line" style=""> } </div> <div class="line" style=""> table { </div> <div class="line" style=""> border-collapse:collapse; </div> <div class="line" style=""> } </div> <div class="line" style=""> html { </div> <div class="line" style=""> overflow-y: scroll; </div> <div class="line" style=""> } </div> <div class="line" style=""> .clearfix:after { </div> <div class="line" style=""> content: "."; </div> <div class="line" style=""> display: block; </div> <div class="line" style=""> height:0; </div> <div class="line" style=""> clear:both; </div> <div class="line" style=""> visibility: hidden; </div> <div class="line" style=""> } </div> <div class="line" style=""> .clearfix { </div> <div class="line" style=""> *zoom:1; </div> <div class="line" style=""> } </div></pre> </td> </tr> </tbody> </table> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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="border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody style=""> <tr style=""> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line" style=""> 1 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:689px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line" style=""> <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">meta</span> <span class="attr" style="">name</span>=<span class="string" style="color:rgb(26,188,156)">”viewport”</span> <span class="attr" style="">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" style="">user-scalable</span>=<span class="string" style="color:rgb(26,188,156)">no”/</span>></span> </div></pre> </td> </tr> </tbody> </table> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px">表格不被撑开</li> </ul> <table style="border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody style=""> <tr style=""> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line" style=""> 1 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:689px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line" style=""> <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="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px">不设宽高居中</li> </ul> <table style="border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody style=""> <tr style=""> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line" style=""> 1 </div> <div class="line" style=""> 2 </div> <div class="line" style=""> 3 </div> <div class="line" style=""> 4 </div> <div class="line" style=""> 5 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:689px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line" style=""> <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">div</span> <span class="attr" style="">id</span>=<span class="string" style="color:rgb(26,188,156)">”abc”</span> <span class="attr" style="">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" style="">       <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">span</span> <span class="attr" style="">style</span>=<span class="string" style="color:rgb(26,188,156)">”background:#f00;</span> <span class="attr" style="">display:table-cell</span>; <span class="attr" style="">vertical-align:middle</span>;”></span> </div> <div class="line" style="">             <span class="tag" style="color:rgb(41,115,183)"><<span class="name" style="color:rgb(82,82,82)">input</span> <span class="attr" style="">type</span>=<span class="string" style="color:rgb(26,188,156)">”button”</span> <span class="attr" style="">value</span>=<span class="string" style="color:rgb(26,188,156)">”item1″</span> /></span> </div> <div class="line" style="">       <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" style=""> <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="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px">透明度的兼容代码</li> </ul> <table style="border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody style=""> <tr style=""> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line" style=""> 1 </div> <div class="line" style=""> 2 </div> <div class="line" style=""> 3 </div> <div class="line" style=""> 4 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:689px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line" style=""> filter:alpha(opacity=50); /*1-100*/ </div> <div class="line" style=""> -moz-opacity:0.5; /*0-1.0*/ </div> <div class="line" style=""> -khtml-opacity:0.5; /*0-1.0*/ </div> <div class="line" style=""> opacity:0.5; /*0-1.0*/ </div></pre> </td> </tr> </tbody> </table> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px">文字溢出点点省略</li> </ul> <table style="border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody style=""> <tr style=""> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line" style=""> 1 </div> <div class="line" style=""> 2 </div> <div class="line" style=""> 3 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:689px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line" style=""> <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" style=""> <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" style=""> <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="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px">清除浮动的几种方法</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="line-height:2em; margin-bottom:20px">方法一：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">方法二：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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 style=""> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">方法三：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="border-collapse:collapse; border-spacing:0px; width:728px; max-width:100%; border:0px; margin:0px"> <tbody style=""> <tr style=""> <td class="gutter" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent; padding-right:30px; text-align:right; border:0px"> <div class="line" style=""> 1 </div> <div class="line" style=""> 2 </div> <div class="line" style=""> 3 </div> <div class="line" style=""> 4 </div> <div class="line" style=""> 5 </div> <div class="line" style=""> 6 </div> <div class="line" style=""> 7 </div> <div class="line" style=""> 8 </div></pre> </td> <td class="code" style="padding:0px; line-height:1.5; vertical-align:top; color:rgb(85,85,85); border:0px; font-size:14px; width:689px"> <pre style="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; white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; background-color:transparent"> <div class="line" style=""> <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" style=""> <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" style=""> <span class="attribute" style="color:rgb(233,105,0)">display</span>:block; </div> <div class="line" style=""> <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" style=""> <span class="attribute" style="color:rgb(233,105,0)">clear</span>:both; </div> <div class="line" style=""> <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" style=""> <span class="attribute" style="color:rgb(233,105,0)">visibility</span>:hidden; </div> <div class="line" style=""> } </div></pre> </td> </tr> </tbody> </table> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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="font-weight:normal; margin:28px 0px 15px">一些总结</h5> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px">自动继承属性：</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 style=""> …</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px">非继承属性：</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 style=""> …</li> </ul> </li> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px">具有破坏性的元素：</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="line-height:2em; margin-bottom:20px">具有包裹性的元素：</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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">消除图片底部间隙的方法</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="line-height:2em; margin-bottom:20px">图片块状化-无基线对齐<br style=""> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">图片底线对齐<br style=""> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">行高足够小 - 基线位置上移<br style=""> <code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="font-weight:normal; margin:28px 0px 15px">一些概念</h5> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px">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="line-height:2em; margin-bottom:20px">记住这么一句话：<code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px"><code style="font-family:PingFangSC-Regular,Roboto,Verdana,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","Source Han Sans CN","WenQuanYi Micro 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="line-height:2em; margin-bottom:20px">扩展阅读</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="font-weight:normal; margin:28px 0px 15px">方案荟萃扩展阅读</h5> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px"><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="line-height:2em; margin-bottom:20px"><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="font-weight:normal; margin:28px 0px 15px; font-size:14px"> 附录四 部分工具资源</h4> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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="font-weight:normal; margin:28px 0px 15px; font-size:14px"> 附录五 编码规范</h4> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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="font-weight:normal; margin:28px 0px 15px; font-size:14px"> 附录六 进阶学习</h4> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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="font-weight:normal; margin:28px 0px 15px; font-size:14px"> 附录七 其他资源</h4> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <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="font-weight:normal; margin:28px 0px 15px; font-size:14px"> 附录八 常见问题</h4> <hr style="height:1px; max-width:400px; margin-top:-1px; border:none"> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li style="list-style:none; position:relative; padding-left:14px"> <p style="line-height:2em; margin-bottom:20px">前端指路</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="line-height:2em; margin-bottom:20px">性能/规范/实践</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="line-height:2em; margin-bottom:20px">一些问答社区</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> <ul style="line-height:1.8em; padding:0px; list-style:none; font-size:15px; color:rgb(85,85,85)"> <li></li> </ul> </div> </div> <div class="text-center donation" style="text-align:center; font-family:PingFangSC-Regular,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"> </div> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1305761602045251584"></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,html5,css,web)</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/42.htm" title="jQuery 键盘事件keydown ,keypress ,keyup介绍" target="_blank">jQuery 键盘事件keydown ,keypress ,keyup介绍</a> <span class="text-muted">107x</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/keydown/1.htm">keydown</a><a class="tag" taget="_blank" href="/search/keypress/1.htm">keypress</a><a class="tag" taget="_blank" href="/search/keyup/1.htm">keyup</a> <div>本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。 一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup()  代码如下 复制代码 $('input').keyup(funciton(){      </div> </li> <li><a href="/article/169.htm" title="AngularJS中的Promise" target="_blank">AngularJS中的Promise</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Promise/1.htm">Promise</a> <div>一.Promise         Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。         为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var cu</div> </li> <li><a href="/article/296.htm" title="c++ 用数组实现栈类" target="_blank">c++ 用数组实现栈类</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a> <div>#include<iostream> #include<cassert> using namespace std; template<class T, int SIZE = 50> class Stack{ private: T list[SIZE];//数组存放栈的元素 int top;//栈顶位置 public: Stack(</div> </li> <li><a href="/article/423.htm" title="java和c语言的雷同" target="_blank">java和c语言的雷同</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/%E9%80%92%E5%BD%92/1.htm">递归</a><a class="tag" taget="_blank" href="/search/scaner/1.htm">scaner</a> <div>软件启动时的初始化代码，加载用户信息2015年5月27号 从头学java二 1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点：      a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句 不会再继续执行。      b、for循环相比于whi</div> </li> <li><a href="/article/550.htm" title="LINUX环境并发服务器的三种实现模型" target="_blank">LINUX环境并发服务器的三种实现模型</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 1  循环服务器与并发服务器模型 在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。 目前最常用的服务器模型有： ·循环服务器：服务器在同一时刻只能响应一个客户端的请求 ·并发服务器：服</div> </li> <li><a href="/article/677.htm" title="Oracle数据库查询指令" target="_blank">Oracle数据库查询指令</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/oracle%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">oracle数据库</a> <div>20140920   单表查询 -- 查询************************************************************************************************************ -- 使用scott用户登录   -- 查看emp表   desc emp   </div> </li> <li><a href="/article/804.htm" title="ext右下角浮动窗口" target="_blank">ext右下角浮动窗口</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a> <div>第一种 <!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/1999/</div> </li> <li><a href="/article/931.htm" title="浅谈REDIS数据库的键值设计" target="_blank">浅谈REDIS数据库的键值设计</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>http://www.cnblogs.com/aidandan/ 原文地址：http://www.hoterran.info/redis_kv_design 丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。 </div> </li> <li><a href="/article/1058.htm" title="maven编译可执行jar包" target="_blank">maven编译可执行jar包</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven <build> <plugins> <plugin> <artifactId>maven-asse</div> </li> <li><a href="/article/1185.htm" title="人力资源在现代企业中的作用" target="_blank">人力资源在现代企业中的作用</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/HR+%E4%BC%81%E4%B8%9A%E7%AE%A1%E7%90%86/1.htm">HR 企业管理</a> <div>//人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的 人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点： 工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源 在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着 明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只 知道人力资源是管理企业招聘的 当时我被招聘上了，当时给我们培训 的人</div> </li> <li><a href="/article/1312.htm" title="Linux自启动设置详解" target="_blank">Linux自启动设置详解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。 阅读之前建议先看一下附图。 本文中假设inittab中设置的init tree为： /etc/rc.d/rc0.d /etc/rc.d/rc1.d /etc/rc.d/rc2.d /etc/rc.d/rc3.d /etc/rc.d/rc4.d /etc/rc.d/rc5.d /etc</div> </li> <li><a href="/article/1439.htm" title="Spring Aop Schema实现" target="_blank">Spring Aop Schema实现</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/AOP/1.htm">AOP</a> <div>本例使用的是Spring2.5 1.Aop配置文件spring-aop.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmln</div> </li> <li><a href="/article/1566.htm" title="【Gson七】Gson预定义类型适配器" target="_blank">【Gson七】Gson预定义类型适配器</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a> <div>Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式，   DateTypeAdapter   public final class DateTypeAdapter extends TypeAdapter<Date> { public static final TypeAdapterFacto</div> </li> <li><a href="/article/1693.htm" title="【Spark八十八】Spark Streaming累加器操作（updateStateByKey)" target="_blank">【Spark八十八】Spark Streaming累加器操作（updateStateByKey)</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/update/1.htm">update</a> <div>在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。 比如： 对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。   Spark Streaming的解决方案是累加器，工作原理是，定义</div> </li> <li><a href="/article/1820.htm" title="linux系统下通过shell脚本快速找到哪个进程在写文件" target="_blank">linux系统下通过shell脚本快速找到哪个进程在写文件</a> <span class="text-muted">ronin47</span> <div>一个文件正在被进程写 我想查看这个进程 文件一直在增大 找不到谁在写 使用lsof也没找到 这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。 幸运的是systemtap的安装包里带了inodewatch.stp，位</div> </li> <li><a href="/article/1947.htm" title="java-两种方法求第一个最长的可重复子串" target="_blank">java-两种方法求第一个最长的可重复子串</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/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div> import java.util.Arrays; import java.util.Collections; import java.util.List; public class MaxPrefix { public static void main(String[] args) { String str="abbdabcdabcx"; </div> </li> <li><a href="/article/2074.htm" title="Netty源码学习-ServerBootstrap启动及事件处理过程" target="_blank">Netty源码学习-ServerBootstrap启动及事件处理过程</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/netty/1.htm">netty</a> <div>Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： http://bylijinnan.iteye.com/blog/1992325 Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的 文章里面提到的操作，每一步都能在Netty里面找到对应的代码 其中Reactor里面的Acceptor就对应Netty的ServerBo</div> </li> <li><a href="/article/2201.htm" title="servelt filter listener 的生命周期" target="_blank">servelt filter listener 的生命周期</a> <span class="text-muted">cngolon</span> <a class="tag" taget="_blank" href="/search/filter/1.htm">filter</a><a class="tag" taget="_blank" href="/search/listener/1.htm">listener</a><a class="tag" taget="_blank" href="/search/servelt/1.htm">servelt</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/1.htm">生命周期</a> <div>1. servlet    当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说</div> </li> <li><a href="/article/2328.htm" title="jmpopups获取input元素值" target="_blank">jmpopups获取input元素值</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>jmpopups 获取弹出层form表单 首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。 当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。 我们必须到jmpopups生成的代码中去查找这个值，$(</div> </li> <li><a href="/article/2455.htm" title="vi查找替换命令详解" target="_blank">vi查找替换命令详解</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</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><a class="tag" taget="_blank" href="/search/%E6%9B%BF%E6%8D%A2/1.htm">替换</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E6%89%BE/1.htm">查找</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>一、查找 查找命令 /pattern<Enter> ：向下查找pattern匹配字符串 ?pattern<Enter>：向上查找pattern匹配字符串 使用了查找命令之后，使用如下两个键快速查找： n：按照同一方向继续查找 N：按照反方向查找 字符串匹配 pattern是需要匹配的字符串，例如： 1:  /abc<En</div> </li> <li><a href="/article/2582.htm" title="对网站中的js,css文件进行打包" target="_blank">对网站中的js,css文件进行打包</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%89%93%E5%8C%85/1.htm">打包</a> <div>一，为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。 为什么要进行打包呢，主要目的是为了合理的管理自己的代码 。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J</div> </li> <li><a href="/article/2709.htm" title="php Yii: 出现undefined offset 或者 undefined index解决方案" target="_blank">php Yii: 出现undefined offset 或者 undefined index解决方案</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/undefined/1.htm">undefined</a> <div>在开发Yii 时，在程序中定义了如下方式：        if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级</div> </li> <li><a href="/article/2836.htm" title="linux 文件格式（1） sed工具" target="_blank">linux 文件格式（1） sed工具</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux+sed%E5%B7%A5%E5%85%B7/1.htm">linux sed工具</a><a class="tag" taget="_blank" href="/search/sed%E5%B7%A5%E5%85%B7/1.htm">sed工具</a><a class="tag" taget="_blank" href="/search/linux+sed%E8%AF%A6%E8%A7%A3/1.htm">linux sed详解</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2106082 简介       sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾</div> </li> <li><a href="/article/2963.htm" title="Android应用程序获取系统权限" target="_blank">Android应用程序获取系统权限</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>引用 如何使Android应用程序获取系统权限         第一个方法简单点，不过需要在Android系统源码的环境下用make来编译：         1. 在应用程序的AndroidManifest.xml中的manifest节点</div> </li> <li><a href="/article/3090.htm" title="HoverTree开发日志之验证码" target="_blank">HoverTree开发日志之验证码</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/webform/1.htm">webform</a> <div>HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多</div> </li> <li><a href="/article/3217.htm" title="JSON API：用 JSON 构建 API 的标准指南中文版" target="_blank">JSON API：用 JSON 构建 API 的标准指南中文版</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>译文地址：https://github.com/justjavac/json-api-zh_CN 如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式， 那么 JSON API 就是你的 anti-bikeshedding 武器。 通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。 基于 JSON API 的客户端还能够充分利用缓存，</div> </li> <li><a href="/article/3344.htm" title="数据结构随记_2" target="_blank">数据结构随记_2</a> <span class="text-muted">lx.asymmetric</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>第三章 栈与队列 一．简答题 1. 在一个循环队列中，队首指针指向队首元素的  前一个    位置。  2.在具有n个单元的循环队列中，队满时共有  n-1  个元素。  3. 向栈中压入元素的操作是先  移动栈顶指针&n</div> </li> <li><a href="/article/3471.htm" title="Linux下的监控工具dstat" target="_blank">Linux下的监控工具dstat</a> <span class="text-muted">网络接口</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是, </div> </li> <li><a href="/article/3598.htm" title="C 语言初级入门--二维数组和指针" target="_blank">C 语言初级入门--二维数组和指针</a> <span class="text-muted">1140566087</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/c%2Fc%2B%2B/1.htm">c/c++</a><a class="tag" taget="_blank" href="/search/%E6%8C%87%E9%92%88/1.htm">指针</a> <div>/* 二维数组的定义和二维数组元素的引用 二维数组的定义： 当数组中的每个元素带有两个下标时，称这样的数组为二维数组； (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 语法： 类型名 数组名[常量表达式1][常量表达式2] 二维数组的引用： 引用二维数组元素时必须带有两个下标，引用形式如下： 例如： int a[3][4];  引用：</div> </li> <li><a href="/article/3725.htm" title="10点睛Spring4.1-Application Event" target="_blank">10点睛Spring4.1-Application Event</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/application/1.htm">application</a> <div>10.1 Application Event Spring使用Application Event给bean之间的消息通讯提供了手段 应按照如下部分实现bean之间的消息通讯 继承ApplicationEvent类实现自己的事件 实现继承ApplicationListener接口实现监听事件 使用ApplicationContext发布消息 </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>