html+css

1 、 B/S 软件的结构

  2 、前端的开发流程

 

 

 

 

3、 网页的组成部分

页面由三部分内容组成！

分别是内容（结构）、表现、行为。

 

内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容   我们使用 html 技术来展示。

表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用 CSS 技术实现

行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。

4 、 HTML 简介

H yper T ext M arkup L anguage （超文本标记语言）     简写： HTML

Html 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，

通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

常用标签介绍 W3Csholl.chm

9.1 、 font 字体标签  

font 可以显示文本内容，并且修改文本的字体，和颜色，以及文本大小。

 

需求 1 ：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。

 

<!-- 字体标签

需求 1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。

font是字体标签，可以定义文本内容。修改文本大小，文本字体，以及颜色

face属性修改文本的字体

size属性修改文本大小

color属性修改文本的颜色

 -->

< font   face = "宋体"   size = "8"   color = "red"   > 我是字体标签 </ font >

 

9.2 、特殊字符

 

 

 

 

需求 1 ：把  <br> 换行标签 变成文本 转换成字符显示在页面上

 

 

< body >

<!-- 特殊字符

<br> 就是换行标签

我们需要使用转义字符（特殊字符）

< 特殊字符 <

> 特殊字符     >

空格的特殊字符  

在 html 中多个连续的空白字符。只会解析成为一个空格 。

 -->

1 < br > 2 < br />

国哥很                帅！

</ body >

 

9.3 、标题标签

<h1>----<h6>

需求 1 ：演示标题 1 到 标题 6 的

 

<!--

<h1>----<h6>

需求 1：演示标题1到 标题6的

h1到h6都是标题标签

h1最大

h6最小

align 对齐属性

left 左对齐（默认）

center 居中

right 右对齐

 -->

  < h1   align = "left" > 标题 1 </ h1 >

  < h2   align = "center" > 标题 2 </ h2 >

  < h3   align = "right" > 标题 3 </ h3 >

  < h4 > 标题 4 </ h4 >

  < h5 > 标题 5 </ h5 >

  < h6 > 标题 6 </ h6 >

 

9.4 、超链接   （ **** 重 点 ，必 须 掌 握 * ）

需求 1 ：普通的 超连接。

超连接使用 a 标签

 

 

<!-- 超链接

需求 1：普通的 超连接。

a 标签是超连接标签

href 属性设置连接的地址。 (默认情况下。在当前页面进行跳转)

target属性设置哪个目标（窗口）进行跳转

_self 表示当窗口 (默认）

_blank 表示打开新窗口，跳转

 -->

< a   href = "http://www.baidu.com" > 百度（默认） </ a >< br />

< a   href = "http://www.baidu.com"   target = "_blank" > 百度 (新窗口) </ a >

 

9.5 、列表标签

需求 1 ：使用无序，列表方式，把东北 F4 ，小沈阳，赵四，刘能，宋小宝。展示出来

无序列表

ul 列表

li 列表项

 

< body >

<!--

但凡跟浏览器有关的内容。大多数都会有兼容性问题。

需求 1：使用无序，列表方式，把东北F4，小沈阳，赵四，刘能，宋小宝。展示出来

ul   是无序列表

type 可以修改列表项前面的符号

li   是列表项

 -->

  < h1 > 东北 F4 </ h1 >

  < ul   type = "none" >

  < li > 小沈阳 </ li >

  < li > 赵四 </ li >

  < li > 刘能 </ li >

  < li > 宋小宝 </ li >

  </ ul >

</ body >

 

 

 

9.6 、 img 标签

img 可以显示一张图片。

它有属性，可以修改图片的大小，宽高，设置不同图片的显示 src 属性。还可以设置当图片路径找不到图片的时候。可以用来替代显示的文本内容。

 

需求 1 ：使用 img 标签显示一张美女的照片。并修改宽高，和边框属性

 

< body >

<!--

需求 1：使用 img 标签显示一张美女的照片。并修改宽高，和边框属性

img 标签，图像标签，用于显示图片

src 属性 设置需要显示的图片路径

alt 属性 当设置的路径找不到图片的时候，替代显示的文本内容

width属性 设置图片的宽度

height属性 设置图片的高度

border属性 设置边框大小

路径又分为相对路径，和绝对路径：

. 表示当前目录

.. 表示上一级目录

绝对路径：

D:\\目录\\文件名 在 web中是错误的！

在 web中的绝对路径必须是:http://ip:port/工程名/资源名

http://192.168.10.168:8080/a/13.jpg

 -->

< img   alt = "美女找不到！"   src = "./1.jpg"   width = "100"   height = "120"   border = "1" />

< img   alt = "美女找不到！"   src = "../2.jpg"   width = "100"   height = "120"   border = "1" />

< img   alt = "美女找不到！"   src = "../imgs/3.jpg"   width = "100"   height = "120"   border = "1" />

< img   alt = "美女找不到！"   src = "../imgs/4.jpg"   width = "100"   height = "120"   border = "1" />

< img   alt = "美女找不到！"   src = "../imgs/5.jpg"   width = "100"   height = "120"   border = "1" />

< img   alt = "美女找不到！"   src = "http://192.168.10.168:8080/a/13.jpg"   width = "100"   height = "120"   border = "1" />

</ body >

 

 

9.7 、表格标签（  **** 重点，必须掌握 * ）

 

 

需求 1 ：做一个 带表头的 ，三行，三列的表格，并显示边框

需求 2 ：修改表格的宽度，高度，表格的对齐方式，单元格间距。

 

< body >

<!-- 需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框 -->

<!-- 需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。 -->

<!--

table 是表格标签

border 设置表格的边框

width 设置表单的宽度

height  设置表格的调试

cellspacing   设置单元格的间距

cellpadding   设置单元格的内边距

tr 是表格的行

td   是表格的单元格

align 对齐属性

b 标签是加粗标签

center 居中标签

 -->

< center >

< table   border = "1"   width = "500"   height = "500"   cellspacing = "0"   cellpadding = "10" >

< tr >

< th > 1.1 </ th >

< th > 1.2 </ th >

< th > 1.3 </ th >

</ tr >

< tr >

< td > 2.1 </ td >

< td > 2.2 </ td >

< td > 2.3 </ td >

</ tr >

< tr >

< td > 3.1 </ td >

< td > 3.2 </ td >

< td > 3.3 </ td >

</ tr >

</ table >

</ center >

</ body >

 

 

9.8 、跨行跨列表格   （ * 次重点，必须掌握 * ）

 

 

需求 1 ：新建一个五行，五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列。

 

 

<!-- 需求 1：新建一个五行，五列的表格，

第一行，第一列的单元格要跨两列，

第二行第一列的单元格跨两行，

第四行第四列的单元格跨两行两列。

colspan 设置跨列

rowspan 设置跨行

 -->

< table   border = "1"   width = "500"   height = "500"   cellspacing = "0" >

< tr >

< td   colspan = "2" > 1.1 </ td >

< td > 1.3 </ td >

< td > 1.4 </ td >

< td > 1.5 </ td >

</ tr >

< tr >

< td   rowspan = "2" > 2.1 </ td >

< td > 2.2 </ td >

< td > 2.3 </ td >

< td > 2.4 </ td >

< td > 2.5 </ td >

</ tr >

< tr >

< td > 3.2 </ td >

< td > 3.3 </ td >

< td > 3.4 </ td >

< td > 3.5 </ td >

</ tr >

< tr >

< td > 4.1 </ td >

< td > 4.2 </ td >

< td > 4.3 </ td >

< td   colspan = "2"   rowspan = "2" > 4.4 </ td >

</ tr >

< tr >

< td > 5.1 </ td >

< td > 5.2 </ td >

< td > 5.3 </ td >

</ tr >

</ table >

 

9.9 、了解 iframe 框架标签  ( 内嵌窗口 )

iframe 可以在页面上，内嵌一个小窗口可以单独加载一个页面内容。

 

< body >

<!-- 内联框架

单独加载一个页面。

src   设置单独加载的页面地址

./ 表示当前目录。它可以省略

a标签和 iframe 组合使用他为两个步骤：

1.在需要跳转 iframe 标签中，使用 name属性，起一个名称

2.在a标签的target属性上，设置需要跳转的 iframe 的 name的属性值。

 -->

< iframe   src = "5.img标签.html"   width = "500"   height = "400"   name = "abc" ></ iframe >

< br />< br />

< a   href = "1.font标签.html"   target = "abc" > 1.font标签. html </ a >< br />

< a   href = "7.表格跨行跨列.html"   target = "abc" > 7.表格跨行跨列. html </ a >< br />

</ body >

 

 

9.10 、表单标签   （ ***** 重点 ，必须掌握 *   ）

表单：客户端需要向服务器提交业务数据的时候，需要使用的元素。这些内容我们称之为表单。

 

 

 

 

需求 1: 创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），性趣爱好（多选），国籍（下拉列表）。

隐藏域，自我评价（多行文本域）。重置，提交。

 

<!-- 表单是form标签

input type=text 表示文本输入框 value属性设置默认值

input type=password 表示密码输入框

input type=radio 单选框 name属性可以分组 checked="checked"表示默认选中

input type= checkbox 复选框 checked="checked"表示默认选中

input type=submit 提交按钮

input type=reset 重置按钮

下拉列表 select

option下拉列表中的每一个选项 selected="selected"表示默认选中

多行文本输入框 : textarea rows设置多行文本框的行数（高度）， cols 设置宽度

 -->

< form   action = "http://www.baidu.com" >

用户名： < input   type = "text"   value = "1234" />< br />

密码 :   < input   type = "password"   value = "123" />< br />

性别：    < input   type = "radio"   name = "sex"   checked = "checked" /> 男

  < input   type = "radio"   name = "sex"   /> 女 < br />

兴趣爱好： < input   type = "checkbox"   />  C++

< input   type = "checkbox"   checked = "checked" />  java

< input   type = "checkbox"   />   cpp < br />

国籍： < select >

< option > --请选择国籍-- </ option >

< option   selected = "selected" > 中国 </ option >

< option > 美国 </ option >

< option > 日本 </ option >

</ select >< br />

自我评价： < textarea   rows = "10"   cols = "30" > 这是默认值 </ textarea >< br />

< input   type = "submit"   />   < input   type = "reset"   />

</ form >

 

提单提交的细节

< body >

<!--

form 是表单标签

action 提交的服务器地址

method 提交方式 GET 和 POST

表单提交时，没有提交到服务器的两个常用原因：

1.表单项，没有name属性值。

2.如果表单项，没有在提交的form标签中。是不会被提交到服务器的

GET请求的特点：

1.浏览器地址栏是action属性值?请求的参数（name=value&name=value）

2.请求不安全

3.GET请求有长度限制 （ 1000长度）

POST请求的特点：

1.浏览器地址栏只有action的属性值。

2.请求安全

3.没有长度限制（可以提交大量的数据）

input type=hidden 是隐藏域，当我们想向服务器发送一些数据。但是这些数据，又不希望用户看见。

 -->

< input   type = "hidden"   name = "ad"   value = "asdf" />  

< form   action = "http://127.0.0.1:8080"   method = "post" >

< table >

< tr >

< td > 用户名： </ td >

< td >< input   type = "text"   name = "username"   value = "1234" /></ td >

</ tr >

< tr >

< td > 密码 : </ td >

< td >< input   type = "password"   name = "password"   value = "123" /></ td >

</ tr >

< tr >

< td > 性别 : </ td >

< td >

< input   type = "radio"   name = "sex"   checked = "checked"   value = "boy" /> 男

< input   type = "radio"   name = "sex"   value = "girl" /> 女

</ td >

</ tr >

< tr >

< td > 兴趣爱好： </ td >

< td >

< input   type = "checkbox"   name = "hobby"   value = "cpp" />  C++

< input   type = "checkbox"   name = "hobby"   checked = "checked"   value = "java"   />  java

< input   type = "checkbox"   name = "hobby"   value = "cpp" />   cpp

</ td >

</ tr >

< tr >

< td > 国籍： </ td >

< td >

< select   name = "country" >

< option   value = "none" > --请选择国籍-- </ option >

< option   selected = "selected"   value = "cn" > 中国 </ option >

< option   value = "usa" > 美国 </ option >

< option   value = "jp" > 日本 </ option >

</ select >

</ td >

</ tr >

< tr >

< td > 自我评价： </ td >

< td >< textarea   name = "desc"   rows = "10"   cols = "30" > 这是默认值 </ textarea ></ td >

</ tr >

< tr >

< td >< input   type = "submit"   /></ td >

< td   align = "center" >< input   type = "reset"   /></ td >

</ tr >

</ table >

</ form >

</ body >

 

表单项：

input type=text 文本输入框 value 属性默认值

input type=password 密码输入框 value 默认值

input type=radio 单选框 name 属性可以分组， checked=” checked ” 表示默认选中 value 属性是提交到服务器的值

input type=checkbox 复选框 checked= ’ checked ”   表示默认选中 value 属性是提交到服务器的值

input type=file 文件上传域

input type=hidden 隐藏域

input type=submit 提交按钮 value 属性可以修改按钮上显示的文字

input type=reset 重置按钮 value 属性可以修改按钮上显示的文字

 

下拉列表： select     下拉列表中的选项 option  selected=” selected ”   表示默认选中   value 属性提交到服务器的值。

多行文本域： textarea 多行文本域 rows 设置高度    cols 设置宽度

 

 

form 标签 是表单标签

action 提交的服务器地址

method 提交的方式 GET 和 POST

 

如果 form 标签提交的时候，数据没有提交到服务器的两个原因：

1. 表单项，没有 name 属性值。

2. 表单项，没有在提交的 form 标签中

 

GET 请求的特点：

1. 浏览器地址栏有 action? 请求的参数（ name=value&name=value ）

2. 不安全

3. 长度限制

 

POST 请求的特点：

1. 浏览器地址栏只有 action 的属性值

2. 请求安全

3. 没有长度限制，可以提交大量的数据。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

9.11 其他标签

需求 1 ： div 、 span 、 p 标签的演示

 

div 块标签 （主要用来布局）

span 内联标签，主要用来封装文本内容

p 段落标签，主要用来封装文本

 

<!--

div 是块标签 默认会独占一行

span 封装文本，它的长度，就是文本内容的长度

p 是段落标签 ，默认会在段落的上方和下方，或空出一行来

 -->

< div >

不是 div 标签 1

</ div >

< div >

不是 div 标签 2

</ div >

< span > 这是 span标签1 </ span >

< span > 这是 span标签2 </ span >

< p > 这是段落标签 1 </ p >

< p > 这是段落标签 2 </ p >

 

 

HTML 最后的练习 2, ：创建登录的表单，包含用户名，密码框输入。并结合 table 标签排版。让它看上去整齐点

CSS 技术介绍

CSS2.0.chm

 

CSS 是「层叠样式表单」。是用于 ( 增强 ) 控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

 

 

 

 

3.2 、 CSS 语法规则：

 

 

选择器 ：浏览器根据 “选择器” 决定受 CSS 样式影响的 HTML 元素（标签）。

属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（ declaration ），例如： p {color: blue}

多个声明： 如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号，但尽量在每条声明的末尾都加上分号

例如：

p{

color:red;// 修改颜色为红色

font-size:30px;// 修改字体大小，为 30 像素。

}

每行最好只描述一个属性

CSS 注释： /* 注释内容 */

 

 

 

3.3 、 CSS 和 html 的结合方式

3.3.1 、第一种：

在标签的 style 属性上设置 ” key:value value; ” ，修改标签样式。

 

 

< div > div 标签 1 </ div >

< div > div 标签 2 </ div >

< span > span标签1 </ span >

< span > span标签2 </ span >

 

需求 1 ：分别定义两个 div 、 span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。

 

 

<!-- 需求1：分别定义两个 div 、 span标签，分别修改每个 div   标签的样式为：边框 1个像素，实线，红色。 -->

< div   style =" border : 1px solid red ;" > div 标签 1 </ div >

< div   style =" border : 1px solid red ;" > div 标签 2 </ div >

< span   style =" border : 1px solid red ;" > span标签1 </ span >

< span   style =" border : 1px solid red ;" > span标签2 </ span >

 

 

问题：这种方式的缺点？

1. 如果标签多了。样式多了。代码量非常庞大。

2. 可读性非常差。

3.Css 代码没什么复用性可方言。

 

3.3.2 、第二种：

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

格式如下：

xxx {

Key : value value;

}

 

 

< div > div 标签 1 </ div >

< div > div 标签 2 </ div >

< span > span标签1 </ span >

< span > span标签2 </ span >

 

需求 1 ：分别定义两个 div 、 span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。

 

< title > Insert title here </ title >

<!--

style 标签中定义的都是CSS样式代码。

 -->

< style   type = "text/css" >

/*需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。

第二种 css与html结合的方法

*/

div {

border : 1px solid red ;

}

span {

border : 1px solid red ;

}

</ style >

</ head >

< body >

< div > div 标签 1 </ div >

< div > div 标签 2 </ div >

< span > span标签1 </ span >

< span > span标签2 </ span >

</ body >

 

 

Css 注释 /* 这是 css 的代码注释   */

 

 

问题：这种方式的缺点。

1. 只能在同一页面内复用代码，不能在多个页面中复用 css 代码。

2. 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

 

3.3.3 、第三种：

使用 html 的 < link   rel = "stylesheet"   type = "text/css"   href = "./styles.css" >   标签 导入 css 样式文件。

 

 

 

 

 

 

3.4 、 CSS 选择器

3.4.1 、标签名选择器

标签名选择器的格式是：

标签名 {

属性：值；

}

 

 

 

< div > div 标签 1 </ div >

< div > div 标签 2 </ div >

< span > span标签1 </ span >

< span > span标签2 </ span >

 

 

需求 1 ：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。

并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。

 

 

< head >

< meta   charset = "UTF-8" >

< title > CSS选择器 </ title >

< style   type = "text/css" >

/*

需求 1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。

并且修改所有 span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。

 

  就可以使用标签名选择器

  格式是：

  标签名 {

  属性：值；

  }

 */

div {

color : blue ;

border : 1px yellow solid ;

font-size : 30px ;

}

span  {

color : yellow ;

font-size : 20px ;

border : 5px blue dashed  ;

}

</ style >

</ head >

< body >

< div > div 标签 1 </ div >

< div > div 标签 2 </ div >

< span > span标签1 </ span >

< span > span标签2 </ span >

</ body >

 

 

 

3.4.2 、 id 选择器

ID 选择器格式：

#id 属性值 {

属性：值；

}

 

 

需求 1 ：分别定义两个 div 标签，

第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色，

字体大小 30 个像素。边框为 1 像素黄色实线。

 

第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式 修改的字体颜色为红色，字体大小 20 个像素。边框为 5 像素蓝色点线。

 

< div   id = "id001" > div 标签 1 </ div >

< div   id = "id002" > div 标签 2 </ div >

 

 

 

< head >

< meta   charset = "UTF-8" >

< title > ID选择器 </ title >

< style   type = "text/css" >

/*

ID选择器格式：

#id属性值{

属性：值；

}

需求 1：分别定义两个 div 标签，

第一个 div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，

字体大小 30个像素。边框为1像素黄色实线。

第二个 div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。

*/

#id001 {

color : blue ;

font-size : 30px ;

border : 1px yellow solid ;

}

#id002 {

color : red ;

font-size : 20px ;

border : 5px blue dotted ;

}

</ style >

</ head >

< body >

< div   id = "id001" > div 标签 1 </ div >

< div   id = "id002" > div 标签 2 </ div >

</ body >

 

3.4.3 、 class 选择器（类选择器）

class 类型选择器的格式：

. class 属性值 {

属性：值；

}

 

 

需求 1 ：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。

需求 2 ：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。

 

 

 

 

<! DOCTYPE   html>

< html >

< head >

< meta   charset = "UTF-8" >

< title > class类型选择器 </ title >

< style   type = "text/css" >

/*需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。

需求 2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。

class类型选择器格式：

.class属性值{

属性：值；

}

*/

.class01 {

color : blue ;

font-size : 30px ;

border : 1px yellow solid ;

}

.class02 {

color : green ;

font-size : 26px ;

border : 1px red solid ;

}

</ style >

</ head >

< body >

< div   class = "class01" > div 标签 class01 </ div >

< div   class = "class02" > div 标签 </ div >

< span > span标签class01 </ span >

< span > span标签2 </ span >

</ body >

</ html >

 

 

 

3.4.4 、组合选择器

组合选择器格式：

选择器 1 ，选择器 2{

属性：值；

}

 

< style   type = "text/css" >

/*需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，

字体颜色为蓝色，字体大小 20个像素。边框为1像素黄色实线。*/

.class01 , #id01 {

color : blue ;

font-size : 20px ;

border : 1px yellow solid ;

}

</ style >

</ head >

< body >

    < div   class = "class01" > div 标签 class01 </ div >   < br   />

    < span   id = "id01" > span 标签 </ span >    < br   />  

    < div > div 标签 </ div >   < br   />

    < div > div 标签 id01 </ div >   < br   />

</ body >

 

 

3.5 、常用样式：

1 、颜色

color ： red ；

颜色可以写颜色名如： black, blue, red, green 等

颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0) ， #00F6DE ，如果写十六进制值必须加 #

 

2 、宽度

width:19px;

宽度可以写像素值： 19px ；

也可以写百分比值： 20% ；

 

3 、高度

height:20px;

高度可以写像素值： 19px ；

也可以写百分比值： 20% ；

 

4 、背景颜色

background-color:#0F2D4C

 

4、 字体样式：

color ： #FF0000 ；字体颜色红色

font-size ： 20px; 字体大小

 

5、 红色 1 像素实线边框

border ： 1px solid red;

 

7 、 DIV 居中

margin-left: auto;

margin-right: auto;

 

8、 文本居中：

text-align: center;

 

9、 超连接去下划线

text-decoration: none;

 

10、 表格细线

table {

border: 1px solid black; /* 设置边框 */

border-collapse: collapse; /* 将边框合并 */

}

td,th {

border: 1px solid black; /* 设置边框 */

}

 

11、 列表去除修饰

ul {

list-style: none;

}