HTML, CSS学习笔记（完整版）

时间 2019-11-08

标签 html css 学习笔记完整栏目 HTML 繁體版

原文原文链接

第一章 div布局

前几课内容

.htm是早期的后缀。因为那时仅仅能支持长度为3的后缀。所以html与htm是同样的。php

shtml是server先处理而后再交给浏览器处理css

#HTML小知识#之#XHTML与HTML的差异#XHTML是更严谨更纯净的 HTML 版本号。XHTML目标是代替HTML。更具体的介绍 XHTML 教程 http://t.cn/h94BVhtml

#HTML小知识#之#<!DOCTYPE>声明#位于文档中的最前面的位置，处于 <html> 标签以前。此标签可告知浏览器文档使用哪一种 HTML 或 XHTML 规范。前端

该标签可声明三种 DTD 类型，分别表示严格版本号、过渡版本号以及基于框架的 HTML 文档。web

更具体的介绍http://t.cn/h59taG面试

作网页先布局。算法

先大处布局。在细节点缀。chrome

container的高度可以不用设定height，子元素有高度会把父元素撑开的编程

1.ID命名可依据C语言变量命名规则后端

2.HTML文件自己charset採用的编码必须与文件保存时的编码方式同样。不然出现乱码显现

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</body>

</html>

@CHARSET "UTF-8";

#container {

width: 1000px;

background-color: gray;

}

#header {

height: 120px;

background-color: red;

}

#main {

height: 600px;

background-color: yellow;

}

#bottom{

height:120px;

background-color: blue;

}

#left {

width: 700px;

height: 600px;

float: left;

background: green;

}

#right {

width: 300px;

height: 600px;

float: right;

background-color: pink;

}

第二章盒模型

margin 外边框

border 边框

padding 内边框

第12课首页布局实战之margin设置

外边距

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

@CHARSET "UTF-8";

#container {

width: 1000px;

background-color: gray;

}

#header {

height: 120px;

background-color: red;

}

#main {

height: 600px;

background-color: yellow;

}

#left {

width: 700px;

height: 600px;

float: left;

background: green;

}

.four {

width: 330px;

height: 280px;

background: black;

margin:10px;

float: left;

}

#right {

width: 300px;

height: 600px;

float: right;

background-color: pink;

}

#bottom{

height:120px;

background-color: blue;

}

第13课盒模型之border设置

border的3要素：宽，形状（实现虚线）。颜色

<!DOCTYPE html>

<html>

<head>

<title>study13.html</title>

div {

width: 300px;

height:300px;

background: blue;

border: 50px outset green;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

第14课用css控制border画三角形

边框透明

画一棵圣诞树

<!DOCTYPE html>

<html>

<head>

<title>study14.html</title>

#parent_div{

width: 600px;

height: 500px;

background: silver;

}

#tri1 {

width:0px;

height: 0px;

border-right: 100px solid transparent;

border-left: 100px solid transparent;

border-bottom: 100px solid green;

}

#tri2 {

width:0px;

height: 0px;

border-right: 120px solid transparent;

border-left: 120px solid transparent;

border-bottom: 120px solid green;

}

#tri3 {

width:0px;

height: 0px;

border-right: 150px solid transparent;

border-left: 150px solid transparent;

border-bottom: 150px solid green;

}

#tri4 {

width: 50px;

height: 130px;

background-color: saddlebrown;

}

</style>

</head>

<body>

</div>

</body>

</html>

改进版：

<!DOCTYPE html>

<html>

<head>

<title>study14.html</title>

#parent_div{

width: 400px;

height: 360px;

background: silver;

margin: 0px auto;

}

#tri1 {

width:0px;

height: 0px;

border-right: 100px solid transparent;

border-left: 100px solid transparent;

border-bottom: 100px solid green;

margin-bottom: -50px;

}

#tri2 {

width:0px;

height: 0px;

border-right: 120px solid transparent;

border-left: 120px solid transparent;

border-bottom: 120px solid green;

margin-bottom: -60px;

}

#tri3 {

width:0px;

height: 0px;

border-right: 150px solid transparent;

border-left: 150px solid transparent;

border-bottom: 150px solid green;

}

#tri4 {

width: 50px;

height: 100px;

background-color: saddlebrown;

}

</style>

</head>

<body>

</div>

</body>

</html>

第15课 padding具体解释

内边距

2.盒子的宽高各是100px。同一时候padding: 30px,背景为灰色。请问灰色面积是多少？160px*160px，因此padding也是铺的背景色，即背景色铺到border，但文字输入面积仅仅有100px*100px。

<!DOCTYPE html>

<html>

<head>

<title>study15.html</title>

#a{

width: 100px;

height:100px;

padding: 30px;

background-color: gray;

}

</style>

</head>

<body>

打一些乱七八糟的字測试一下

</div>

</body>

</html>

第16课 padding与背景

第17课 padding美化首页

添加padding后要下降原来width和height的值

<!DOCTYPE html>

<html>

<head>

</head>

<body>

2014.09.09(星期二)

腾讯2015校园招聘就业中心一楼信息公布厅 19:00- 21:00

2014.09.10(星期三)

中国舰船研究设计中心（武汉）就业中心一楼信息公布厅 10:00- 12:00

陕西海泰电子有限责任公司教2-100（德育基地） 10:00- 12:00

核工业西南物理研究院主楼A-403 16:30- 18:30

</div>

2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所就业中心204室 10:00- 12:00

航天恒星科技有限公司就业中心一楼信息公布厅 14:30- 16:30

北京数码视讯科技股份有限公司就业中心一楼信息公布厅 16:30- 18:30

百度就业中心一楼信息公布厅 19:00- 21:00

香港理工大学硕士招生宣讲会文治书院报告厅（西19舍1

</div>

2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所就业中心204室 10:00- 12:00

航天恒星科技有限公司就业中心一楼信息公布厅 14:30- 16:30

北京数码视讯科技股份有限公司就业中心一楼信息公布厅 16:30- 18:30

百度就业中心一楼信息公布厅 19:00- 21:00

香港理工大学硕士招生宣讲会文治书院报告厅（西19舍1

</div>

2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所就业中心204室 10:00- 12:00

航天恒星科技有限公司就业中心一楼信息公布厅 14:30- 16:30

北京数码视讯科技股份有限公司就业中心一楼信息公布厅 16:30- 18:30

百度就业中心一楼信息公布厅 19:00- 21:00

香港理工大学硕士招生宣讲会文治书院报告厅（西19舍1

</div>

</div>

</div>

</body>

</html>

@CHARSET "UTF-8";

#container {

width: 1000px;

background-color: gray;

}

#header {

height: 120px;

background-color: red;

}

#main {

height: 600px;

background-color: yellow;

}

#left {

width: 700px;

height: 600px;

float: left;

background: green;

}

.four {

width: 310px;

height: 260px;

background: white;

margin:10px;

padding:10px;

float: left;

}

#right {

width: 300px;

height: 600px;

float: right;

background-color: pink;

}

#bottom{

height:120px;

background-color: blue;

}

第18课盒子模型的总结

一个盒子，有margin，border，padding，实占多少空间？

<!DOCTYPE html>

<html>

<head>

<title>study15.html</title>

#a{

width: 300px;

height:300px;

border: 50px solid blue;

padding:50px;

margin:50px;

background-color: silver;

}

</style>

</head>

<body>

一个盒子，有margin。border，padding，实占多少空间？<br/>

竖直方向：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom<br/>

水平方向：width + padding-left + padding-right + border-left + border-right + margin-left + margin-right<br/>

</div>

</body>

</html>

第19课利用margin实现水平居中

<!DOCTYPE html>

<html>

<head>

<title>study19.html</title>

#a{

width: 300px;

height:200px;

background-color: silver;

margin: 0px auto;

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

2014.09.09(星期二)

腾讯2015校园招聘就业中心一楼信息公布厅 19:00- 21:00

2014.09.10(星期三)

中国舰船研究设计中心（武汉）就业中心一楼信息公布厅 10:00- 12:00

陕西海泰电子有限责任公司教2-100（德育基地） 10:00- 12:00

核工业西南物理研究院主楼A-403 16:30- 18:30

</div>

2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所就业中心204室 10:00- 12:00

航天恒星科技有限公司就业中心一楼信息公布厅 14:30- 16:30

北京数码视讯科技股份有限公司就业中心一楼信息公布厅 16:30- 18:30

百度就业中心一楼信息公布厅 19:00- 21:00

香港理工大学硕士招生宣讲会文治书院报告厅（西19舍1

</div>

2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所就业中心204室 10:00- 12:00

航天恒星科技有限公司就业中心一楼信息公布厅 14:30- 16:30

北京数码视讯科技股份有限公司就业中心一楼信息公布厅 16:30- 18:30

百度就业中心一楼信息公布厅 19:00- 21:00

香港理工大学硕士招生宣讲会文治书院报告厅（西19舍1

</div>

2014.09.11(星期四)

中国航天科技集团公司第一研究院第十二研究所就业中心204室 10:00- 12:00

航天恒星科技有限公司就业中心一楼信息公布厅 14:30- 16:30

北京数码视讯科技股份有限公司就业中心一楼信息公布厅 16:30- 18:30

百度就业中心一楼信息公布厅 19:00- 21:00

香港理工大学硕士招生宣讲会文治书院报告厅（西19舍1

</div>

</div>

</div>

</body>

</html>

@CHARSET "UTF-8";

#container {

width: 1000px;

background-color: gray;

margin: 0px auto;

}

#header {

height: 120px;

background-color: red;

}

#main {

height: 600px;

background-color: yellow;

}

#left {

width: 700px;

height: 600px;

float: left;

background: green;

}

.four {

width: 310px;

height: 260px;

background: white;

margin:10px;

padding:10px;

float: left;

}

#right {

width: 300px;

height: 600px;

float: right;

background-color: pink;

}

#bottom{

height:120px;

background-color: blue;

}

第20课 margin重叠现象

上下相邻普通元素margin重叠取大的值

float不一样

<!DOCTYPE html>

<html>

<head>

<title>study20.html</title>

#test1 {

height: 200px;

background: silver;

margin-bottom: 100px;

}

#test2 {

height: 200px;

background: red;

margin-top: 100px;

}

</style>

</head>

<body>

相邻的普通元素。上下边距。并非简单地的相加<br>

而是取当中较大的边距值<br>

这样的现象叫作margin重叠<br>

</div>

</body>

</html>

学过这课后又一次改动了圣诞树。

第21课 inline内联（行内元素）

<!DOCTYPE html>

<html>

<head>

<title>study21.html</title>

<style>

#kurong {

color: red;

}

</style>

</head>

<body>

<div>

离离原上草，一岁一<div id="kurong">枯荣</div>。

<br>

野火烧不尽，春风吹又生。<br>

远芳侵古道。晴翠接荒城。

<br>

又送王孙去，萋萋满别情。

<br>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>study21.html</title>

<style>

#kurong {

color: red;

}

</style>

</head>

<body>

<div>

离离原上草，一岁一<span id="kurong">枯荣</span>。

<br>

野火烧不尽，春风吹又生。

<br>

远芳侵古道。晴翠接荒城。<br>

又送王孙去，萋萋满别情。<br>

</div>

</body>

</html>

块状元素：独占一行

内联元素：不能设置宽高，内外边距，可以水平方向设置边距

* 块状元素和内联元素相互转化

块状元素转化为内联元素：css设置display:inline ;

内联元素转化为块状元素：css设置display:block ;

块状元素

内联元素

address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 文件夹列表
div - 常用块级easy，也是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 - 下划线
var - 定义变量

第22课内联与块状的转化

<!DOCTYPE html>

<html>

<head>

<title>study22.html</title>

div {

width:200px;

height:200px;

display:inline;

background: orange;

}

span {

width:200px;

height:200px;

display:none;

/* display:block; */

background: silver;

}

</style>

</head>

<body>

</body>

</html>

display可能的值

值描写叙述

none 此元素不会被显示。

block 此元素将显示为块级元素。此元素先后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素先后没有换行符。

inline-block 行内块元素。（CSS2.1 新增的值）

list-item 此元素会做为列表显示。

run-in 此元素会依据上下文做为块级元素或内联元素显示。

compact CSS中有值 compact，只是由于缺少普遍支持，已经从CSS2.1 中删除。

marker CSS中有值 marker，只是由于缺少普遍支持，已经从 CSS2.1 中删除。

table 此元素会做为块级表格来显示（相似 <table>）。表格先后带有换行符。

inline-table 此元素会做为内联表格来显示（相似<table>）。表格先后没有换行符。

table-row-group 此元素会做为一个或多个行的分组来显示（相似<tbody>）。

table-header-group 此元素会做为一个或多个行的分组来显示（相似 <thead>）。

table-footer-group 此元素会做为一个或多个行的分组来显示（相似 <tfoot>）。

table-row 此元素会做为一个表格行显示（相似 <tr>）。

table-column-group 此元素会做为一个或多个列的分组来显示（相似 <colgroup>）。

table-column 此元素会做为一个单元格列显示（相似 <col>）

table-cell 此元素会做为一个表格单元格显示（相似 <td> 和 <th>）

table-caption 此元素会做为一个表格标题显示（相似 <caption>）

inherit 规定应该从父元素继承 display 属性的值。

第三章 CSS

第23课 CSS控制段落文本

<!DOCTYPE html>

<html>

<head>

<title>study23.html</title>

#p1 {

background-color: silver;

text-align: center;

letter-spacing: 15px;

}

#p2 {

background-color: orange;

text-indent: 20px;

text-decoration: line-through;

}

</style>

</head>

<body>

<p id="p1">据有关数据显示。</p>

<p id="p2">只是，正当国内电商巨头们有条不紊的布局海淘之时，亚马逊，这家在中国早已被边缘化的国际电商巨鳄也在窥视着这块市场。

近日。亚马逊中国方面放出风声，最快在今年第四季度开通海外产品直邮服务，届时，国内用户就能经过亚马逊中国买到从国外来的商品。</p>

</body>

</html>

text-decoration none 默认。定义标准的文本。的一条线。

text-decoration overline 定义文本上的一条线。

text-decoration line-through 定义穿过文本下的一条线。

text-decoration blink 定义闪烁的文本。 //IE不支持火狐下可以使用

text-decoration inherit 规定应该从父元素继承text-decoration 属性的值。

text-decoration underline 定义文本下的一条线。

background-color 文本背景颜色

color 文本字体的颜色

text-indent 首行文本的缩进

text-align 文本对齐方式 left centerright

letter-spacing 字体间的距离

text-transform none默认值不变

text-transform uppercase 文本全大写

text-transform lowercase 文本全小写

text-transform 每个单词首字母大写

word-spacing 属性可以改变字（单词）之间的标准间隔。

其默认值normal 与设置值为 0 是同样的。

word-spacing 属性接受一个正长度值或负长度值。

假设提供一个正长度值。那么字之间的间隔就会添加。

为 word-spacing 设置一个负值，会把它拉近：

white-space 值为normal时去除空白字符

white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽略换行符，与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个br 元素。

在 CSS 中使用 nowrap 很相似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行，只是 white-space 值可以应用到不论什么元素。

当 white-space 属性设置为pre-wrap 时，浏览器不只会保留空白符并保留换行符。还赞成本身主动换行。

----------------------------------

Properties

属性 CSS Version

版本号 Inherit From Parent

继承性 Description

简单介绍

text-indent CSS1 有检索或设置对象中的文本的缩进

text-overflow CSS3 无设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

text-align CSS1/CSS3有设置或检索对象中文本的对齐方式

text-transform CSS1/CSS3 有检索或设置对象中的文本的大写和小写

text-decoration CSS1/CSS3 无复合属性。检索或设置对象中的文本的装饰，例如如下划线、闪烁等

text-decoration-line CSS3 无检索或设置对象中的文本装饰线条的位置。

text-decoration-color CSS3 无检索或设置对象中的文本装饰线条的颜色。

text-decoration-style CSS3 无检索或设置对象中的文本装饰线条的形状。

text-shadow CSS3 有设置或检索对象中文本的文字是否有阴影及模糊效果

text-fill-color CSS3 有设置或检索对象中的文字填充颜色

text-stroke CSS3 有复合属性。设置或检索对象中的文字的描边

text-stroke-width CSS3 有设置或检索对象中的文字的描边厚度

text-stroke-color CSS3 有设置或检索对象中的文字的描边颜色

letter-spacing CSS1 有检索或设置对象中的文字之间的间隔

word-spacing CSS1 有检索或设置对象中的单词之间插入的空格数。

vertical-align CSS1/CSS2 无设置或检索对象内容的垂直对其方式

word-wrap CSS3有设置或检索当当前行超过指定容器的边界时是否断开转行

white-space CSS1 有设置或检索对象内空格的处理方式

direction CSS2有检索或设置文本流的方向

unicode-bidi CSS2 无用于同一个页面里存在从不一样方向读进的文本显示。与direction属性一块儿使用

line-height CSS1 有检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离

tab-size CSS3有检索或设置对象中的制表符的长度

第24课文字控制

<!DOCTYPE html>

<html>

<head>

<title>study24.html</title>

#text1 {

color: blue;

font-style: italic;

font-weight: bold;

font-size: x-large;

line-height: 50px;

}

#text2 {

font: 23px/46px Microsoft YaHei;

}

</style>

</head>

<body>

离离原上草，一岁一枯荣。<br>

野火烧不尽，春风吹又生。<br>

</div>

远芳侵古道，晴翠接荒城。<br>

又送王孙去。萋萋满别情。<br>

</div>

</body>

</html>

字体的英文名

宋体 SimSun

黑体 SimHei

微软雅黑 Microsoft YaHei

微软正黑体 Microsoft JhengHei

新宋体 NSimSun

新细明体 PMingLiU

细明体 MingLiU

标楷体 DFKai-SB

仿宋 FangSong

楷体 KaiTi

仿宋_GB2312 FangSong_GB2312

楷体_GB2312 KaiTi_GB2312

宋体：SimSuncss中中文字体（font-family）的英文名称

Mac OS的一些：

华文细黑：STHeiti Light [STXihei]

华文黑体：STHeiti

华文楷体：STKaiti

华文宋体：STSong

华文仿宋：STFangsong

儷黑 Pro：LiHei Pro Medium

儷宋 Pro：LiSong Pro Light

標楷體：BiauKai

蘋果儷中黑：Apple LiGothic Medium

蘋果儷細宋：Apple LiSung Light

Windows的一些：

新細明體：PMingLiU

細明體：MingLiU

標楷體：DFKai-SB

黑体：SimHei

新宋体：NSimSun

仿宋：FangSong

楷体：KaiTi

仿宋_GB2312：FangSong_GB2312

楷体_GB2312：KaiTi_GB2312

微軟正黑體：Microsoft JhengHei

微软雅黑体：Microsoft YaHei

装Office会生出来的一些：

隶书：LiSu

幼圆：YouYuan

华文细黑：STXihei

华文楷体：STKaiti

华文宋体：STSong

华文中宋：STZhongsong

华文仿宋：STFangsong

方正舒体：FZShuTi

方正姚体：FZYaoti

华文彩云：STCaiyun

华文琥珀：STHupo

华文隶书：STLiti

华文行楷：STXingkai

华文新魏：STXinwei

Windows 中的中文字体。

在默认状况下，也就是未自行安装新字体或者 Office 等文字处理软件的状况下。Windows 默认提供下列字体：

Windows 95/98/98SE 宋体、黑体、楷体_GB23十二、仿宋_GB2312

Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB23十二、仿宋_GB2312 (Windows XP SP3 宋体-PUA)

Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB

那么每种字体能显示那些汉字呢？

Vista 以前的 Windows 中宋体/新宋体、黑体支持 GBK 1.0 字符集，

楷体_GB23十二、仿宋_GB2312 支持 GB2312-80 字符集。

（注：Windows 3.X 仅仅能支持 GB2312-80 字符集）

Vista 及以后的 Windows 中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持 GB18030-2000 字符集，

SimSun-ExtB 仅仅支持 GB18030-2005 字符集扩展 B 部分。

如下对字符集进行简单的介绍：

GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005

GB2312-80 中的字符数量最少，GB18030-2005 字符数量最多。

GB2312-80 是最先的版本号，字符数比較少；

GBK 1.0 中的汉字大体与 Unicode 1.1 中的汉字数量一样；

GB18030-2000 中的汉字大体与 Unicode 3.0 中的汉字数量一样。主要添加了扩展 A 部分。

GB18030-2005 中的汉字大体与 Unicode 4.1 中的汉字数量一样。主要添加了扩展 B 部分；

由于 Unicode 5.2 的公布。预计 GB18030 会在最近公布新版本号，添加扩展 C 部分。

需要说明的是在 GB18030 中扩展 B 部分并不是强制标准。

假设想查看 GB18030 的标准文本，请訪问 http://www.gb168.cn 中的强标阅读。

假设想了解 Unicode 的内容，请訪问 http://www.unicode.org。

现在纠正网上广泛的一个错误：

GB18030-2000 和 GB18030-2005 都不支持单字节的欧元符号

与中文简体有关的代吗页例如如下：

936 gb2312 中文简体(GB2312)————事实上是GBK

10008 x-mac-chinesesimp 中文简体(Mac)

20936 x-cp20936 中文简体(GB2312-80)

50227 x-cp50227 中文简体(ISO-2022)

51936 EUC-CN 中文简体(EUC)

52936 hz-gb-2312 中文简体(HZ)

54936 GB18030 中文简体(GB18030)

补充：

使用楷体_GB23十二、仿宋_GB2312后。在 Windows 7/Vista/2008 中可能再也不显示为相应的字体。

这是因为 Windows 7/Vista/2008 中有楷体、仿宋，默认状况下没有楷体_GB23十二、仿宋_GB2312，字体名称相差“_GB2312”。

第25课字体控制精讲

新闻标题：用黑体或无衬线（sans-serif）

新闻正文：宋体或有衬线（serif）

注意，你设置的字体。你客户机器上未必有。要没有。这是显示的就是默认字体。

因此，要注意，你选的一些好看的字体，别人没有。

因此。用设置字体，可以将选用字体，和备选字体依次在后面排列。

eg：

font-family：‘xx1’,'xx2','xd3',sans-serif;

上面这句的意思就是，客户的浏览器先去调用’xx1'字体，假设客户没有。便调用'xx2'，尚未。再调用'xx3',假设仍是没有，就让浏览器随便调用一个sans-serif的字体便可。

第26课背景图片

background-attachment : scroll默认值滚动 fiixed背景固定

background-color : transparent 默认值背景透明

background-color：颜色背景颜色

background-image： none默认值无背景url（背景路径）背景图片

background-position： left top center right 可以选择背景所在的位置

background-repeat： repeat-x X轴平铺 repeat-y Y轴平铺 no-repeat 背景图片不反复

1.背景图与背景色。都设置，显示背景图。

2.为何有的站点既设背景图又设背景色？

1）由于网速或代码冗余而致使站点打开速度慢的时候，图片载入不出来就能够先显示背景色。

2）另外一种状况。考虑到大屏下（如1920*1080或者更大）站点背景图不足以撑满整个显示区域，因此背景图之外的部分要显示背景色。并且背景图边缘部分必须处理稳当保证平滑过渡到背景色，不会有突兀的感受。

<!DOCTYPE html>

<html>

<head>

<title>study26.html</title>

body {

background-color:black;

background-repeat: repeat-x;

background-attachment: fixed;

}

</style>

</head>

<body>

</body>

</html>

第27课大图片背景

<!DOCTYPE html>

<html>

<head>

<title>study27.html</title>

#text1 {

border: 1px solid orange;

width: 500px;

height: 500px;

background-repeat: no-repeat;

background-position: center center;

}

#text2 {

width: 80px;

height: 20px;

border: 1px solid blue;

background-position: -5px -120px;

}

#text3 {

width: 30px;

height: 30px;

border: 1px solid black;

background-position: -160px -523px;

}

</style>

</head>

<body>

</body>

</html>

1.CSS控制页面时，页面以左上角为原点，向下为正Y轴。向右为正X轴

第28课 CSS选择器

<!DOCTYPE html>

<html>

<head>

<title>study28.html</title>

#test1 {

width: 100px;

height: 50px;

border: 1px solid blue;

}

.test2 {

width: 100px;

height: 50px;

border: 1px solid red;

}

div {

width: 200px;

height: 200px;

background-color: orange;

margin-bottom: 10px;

}

div p {

color: red;

}

</style>

</head>

<body>

<div>

普通div

<p>

div中的p

</p>

</div>

<p>

独立的p

</p>

<div>

css选择器：id选择器(#)。class选择器(.),标签选择器（div{}），派生选择器(div p{})

</div>

</body>

</html>

1.css选择器：id选择器(#)，class选择器(.),标签选择器（div{}），派生选择器(div p{})

2.还有没有其它选择器及其使用方法？

第一 id #xxx

第二 class .xxx

第三标签 div p body 等

第四后代 div p{} .a .b{} 等表示所有空格后面的选择器生效

第五子代 div > p 仅仅有大于号后面的选择器生效不继承下去了

第六群组选择 div,p,a{} 记住是逗号不是小数点。表示div p a标签都生效

第七伪选择器比方 a:link 让鼠标放上去的时候生效

第八通用选择器比方 p *{} 表示p标签后面的所有标签都生效

第九相邻选择器比方 p+div{} 表示 p后面的第一个div生效后面的都无效

第十属性选择器比方 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性有的话就生效

第29课 CSS优先级

控制的越精细，优先级越高

<!DOCTYPE html>

<html>

<head>

<title>study29.html</title>

p {

color: red;

}

.test2 {

color: green;

}

#test1 {

color: blue;

}

div #test1{

color: pink;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

第30课 CSS引入方式

<!DOCTYPE html>

<html>

<head>

<title>study30.html</title>

body {

background-color: silver;

}

</style>

</head>

<body>

</body>

</html>

@CHARSET "UTF-8";

@import url(study301.css);

#test1 {

width: 100px;

height: 100px;

background-color: orange;

}

@CHARSET "UTF-8";

@import url(study301.css);

#test1 {

width: 100px;

height: 100px;

background-color: orange;

}

CSS的四种引入方式

要说出CSS的引入方式，没有什么难度，但要说到为何使用不一样的引入方式，就有些学问在里面了。

CSS的引入方式最常用的有三种。

第一：在head部分增长<link rel="stylesheet"type="text/css" href="my.css"/>,引入外部的CSS文件。

这样的方法可以说是现在占统治地位的引入方法。

如同IE与浏览器。这也是最能体现CSS特色的方法；最能体现DIV+CSS中的内容与显示分离的思想，也最易改版维护，代码看起来也是最美观的一种。

第二：在head部分增长

div{margin: 0;padding: 0;border:1px redsolid;}

</style>

这样的方法的使用状况要少的多。最长见得就是訪问量大的门户站点。或者訪问量较大的企业站点的首页。

与第一种方法比起来。长处突出，弊端也明显。长处：速度快，所有的CSS控制都是针对本页面标签的，没有多余的ＣＳＳ命令。再者不用外链ＣＳＳ文件。直接在ＨＴＭＬ文档中读取样式。缺点就是改版麻烦些，单个页面显得臃肿，ＣＳＳ不能被其它ＨＴＭＬ引用形成代码量相对较多。维护也麻烦些。　但是採用这样的方法的公司大多有钱，对他们来讲用户量是关键，他们不缺人进行复杂的维护工做。

第三：直接在页面的标签里加　<divstyle="border:1px red solid;">測试信息</div>

这样的方法现在用的很是少，很是多公司不了解前端技术的领导还对这样的写法很是痛恨。

以为ＨＴＭＬ里不能出现ＣＳＳ命令。事实上有时候使用下也没有什么大不了。

比方通用性差，效果特殊，使用ＣＳＳ命令较少，并且不常修改的地方，使用这样的方法反而是很是好的选择。

除了这三种常用的ＣＳＳ引入方式。还有种很是多人都没有见过的引入方式

@import url(my.css);

</style>

这就是第四种引入方式。在ＩＢＭ工做的时候，仅仅能使用一种Ajax框架，就是ＤＯＪＯ。而ＤＯＪＯ的CSS引用。就是採用了@import的方式。这样的状况很是少，主要用在CSS文件数量庞大的负责的系统中。另外@important自己是一个CSS命令，是放在CSS文件中的，这个跟LINK标签有很是大的差异。

第31课 CSS初始化

<!DOCTYPE html>

<html>

<head>

<title>study31.html</title>

ul {

border: 1px solid blue;

}

li {

border: qpx solid red;

}

</style>

</head>

<body>

<div>

一样的元素，如li。在不一样的浏览器下。显示的效果稍有不一样。<br>

是因为，浏览器对各类元素的margin，border，font-size等略有不一样<br>

为了杜绝这样的状况，咱们经过CSS强制让所有的元素的属性值都同样<br>

这样浏览器显示效果就一致了。下降了不兼容状况的发生<br>

<ul>

</ul>

</div>

</body>

</html>

腾讯的初始化代码

/*update 20140616*/

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}

a{color:#172c45;text-decoration:none}

a:hover{color:#cd0200;text-decoration:underline}

em{font-style:normal}

li{list-style:none}

img{border:0;vertical-align:middle}

table{border-collapse:collapse;border-spacing:0}

p{word-wrap:break-word}

第四章 HTML语义标签

第32课HTML学习思惟导图

1、html结构：

主要包含3部分：doctype、head、body

1）doctype:文档类型,XHTML1.0提供了3中DTD供可供选择

* 过渡的(Transitional)：要求很宽松的DTD，它赞成你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码例如如下：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

* 严格的(Strict)：要求严格的DTD。你不能使用不论什么表现层的标识和属性，好比<br>，完整代码例如如下：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* 框架的(Frameset)：专门针对框架页面设计使用的DTD，假设你的页面中包括有框架，需要採用这样的DTD，完整代码例如如下：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2）head:包含meta charser和title,也能包含css。

3）body:各类div及html标签。

2、div布局

一、布局原则：从上到下、从左到右、从大到小

二、盒模型：块状元素div当作盒子。

1）盒子有本身的宽width和高height;

2)盒子与盒子之间的距离称为外边距margin：

margin后面可以跟1~4个值。依照上、右、下、左的顺序为四个方向分配值。没有分配到的取对边的值。

普通元素及父子元素在竖直方向上存在margin重叠现象，即相邻的两个普通元素，上下边距，不是简单的相加，而是取边距较大者的元素的边距值；关系为父子的两个div元素，竖直方向上假设两个元素都设有margin值，则会取margin值较大的元素的边距值。

3）盒子的厚度称为边框border。border的3要素：宽形状颜色。

border的3要素可单独定义，也可以和4个方向按需要结合。

4）盒子与内部内容的距离称为padding：定义方式同margin。

三、普通div无论宽度是多少都独占一行。要实现2个div并排显示。就要用浮动float，如float:left/right;

浮动元素后面再来一个普通元素，那这个元素会跑到浮动元素的如下，因此要使它正常显示。要清除浮动clear，如clear:left/right/both;

3、css效果

一、选择器

常用的有id选择器、类选择器、标签选择器、派生选择器

第一 id选择器 #xxx

第二 class选择器 .xxx

第三标签选择器 div p body 等

第四派生选择器 div p{} .a .b{} 等表示所有空格后面的选择器生效

第五子代选择器 div > p 仅仅有大于号后面的选择器生效不继承下去了

第六群组选择 div,p,a{} 记住是逗号不是小数点，表示div p a标签都生效

第七伪类选择器比方 a:link 让鼠标放上去的时候生效

第八通用选择器比方 p *{} 表示p标签后面的所有标签都生效

第九相邻选择器比方 p+div{} 表示 p后面的第一个div生效后面的都无效

第十属性选择器比方 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性有的话就生效

二、控制效果

1）段落控制：text-indent:首行缩进

text-align:水平文字方向

text-decoration:文本装饰线

letter-spacing:字符间距

text-transform:字母大写和小写转换

2）文本控制：color:颜色

font-style:字体样式

font-weight:字体粗细

font-size:字体大小

line-height:行高

font-family:字体

3）背景控制：background-color:背景色

background-image:背景图片

background-repeat:背景图反复

background-attachment:背景图粘贴方式

background-position:背景图位置

背景色和背景图同一时候设置时，优先显示背景图，同一时候设置为了当背景图被删除或缓冲慢时，设置一个与背景图色调相近的背景色。使站点的视觉效果不会反差太大。

当背景图比元素还大时。就需要调background-positin来实现。

4）css引入方式

①页内style标签即在head部分增长style标签：

div{margin: 0;padding: 0;border:1px red solid;}

</style>

②外部css文件,在head部分增长link：

③行内style标签,直接在页面的标签里加style属性：

④import导入即在head部分增长@import：

@import url(xxx.css);

</style>

5）初始化

因为各浏览器对于元素有默认css參数，而且可能不一致。那么相同一段代码在不一样浏览器之间显示效果就不同。

那么就需要统一对常用元素常用css參数手动设定统一效果。

4、html标签

分为2大类：无语义标签和有语义标签。

以前学过的div和span都是无语义标签，div是布局分块的块状元素，span是选择文字用的内联元素。

有语义标签，每个标签的名字就能看出它的做用，有标题h1~h6，段落p,图片img，视频embed，超连接和锚点a，无序列表ul,有序列表ol，表格table。

http://www.zixue.it/data/attachment/forum/201401/21/235003luj5trkebkd2udk5.jpeg

第33课 h标签与p标签

第34课 img标签

src 这里是路径问题。

./ 是一样文件夹下

../ 是返回上一级文件夹

<!DOCTYPE html>

<html>

<head>

<title>study34.html</title>

</head>

<body>

<img alt="吃惊" src="http://www.zixue.it/uc_server/avatar.php?

uid=5410&size=middle" title="别的站点的图片">

</body>

</html>

单闭合标签

凝视标签：

严格来说不算HTML标签的：<!DOCTYPE>文档声明标签

设置页面元信息的：<meta>标签

设置网页所有连接的相对文件夹(如根文件夹)的：<base>标签

换行：<br>

水平线：<hr>

图像：<img>

表单元素<input>

在表格table中定义一个或多个列的属性的：<col>标签

定义框架的一个窗体的：<frame>标签

定义文档与外部资源的关系的：<link>连接标签

第35课图片是内联仍是块状

图片不能设置margin值

可以转化为块状再取消margin值

<!DOCTYPE html>

<html>

<head>

<title>study35.html</title>

img {

width: 300px;

height: 180px;

border: 1px solid blue;

display: block;

}

#test1 {

width: 500px;

height: 300px;

border: 1px solid blue;

}

</style>

</head>

<body>

<div id="test1">图片是内联元素，同一时候是内联替换元素，替换元素是能设置宽高的</div>

</body>

</html>

搜索除了img还有那些替换元素 w3creplaced element

替换元素：

替换元素是浏览器依据其标签的元素与属性来推断显示详细的内容。

比方：<input /> type="text" 的是，这是一个文本输入框，换一个其它的时候。浏览器显示就不同

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素都没有实际的内容。

第36课有序列表和无序列表

为了最大程度的兼容不一样浏览器，一般把 li 标签设置为list-syle-type：none ，而后经过载入本身定义图片来实现。

<!DOCTYPE html>

<html>

<head>

<title>study36.html</title>

ul li {

list-style-type: square;

}

ol li {

list-style-type: upper-roman;

}

</style>

</head>

<body>

<ul>

</ul>

<ol>

<li>aaasda</li>

<li>aadfa</li>

<li>aaadsfa</li>

<li>aafda</li>

</ol>

</body>

</html>

-----

小熊列表

<!DOCTYPE html>

<html>

<head>

<title>study36.html</title>

ul li {

/* list-style-type: square; */

list-style-type: none;

background-repeat: no-repeat;

background-size:20px;

background-position: left center;

padding-left: 20px;

}

ol li {

list-style-type: upper-roman;

}

</style>

</head>

<body>

<ul>

</ul>

<ol>

<li>aaasda</li>

<li>aadfa</li>

<li>aaadsfa</li>

<li>aafda</li>

</ol>

</body>

</html>

第37课整齐的表格

<!DOCTYPE html>

<html>

<head>

<title>study37.html</title>

table {

border-collapse: collapse;/* 表格边框融合 */

}

td {

border: 1px solid blue;

}

</style>

</head>

<body>

<table>

<tr>

<td colspan="3">sdfsdf</td>

</tr>

<tr>

<td>sdfsdf</td>

</tr>

<tr>

<td>sdfsdf</td>

</tr>

</table>

</body>

</html>

第38课超连接

a标签，内联元素

<!DOCTYPE html>

<html>

<head>

<title>study38.html</title>

</head>

<body>

<a href="webTest.html" target="_blank" title="鼠标放上来">点击(在空白新窗体显示)</a>

</body>

</html>

使用# 来实现标签。转到特定内容下

第39课锚点

<!DOCTYPE html>

<html>

<head>

<title>study39.html</title>

</head>

<body>

<p>1asdfasdf</p>

<br>

<p>2asdfasdf</p>

<br>

<p>3asdfasdf</p>

</body>

</html>

第40课 css伪类

<!DOCTYPE html>

<html>

<head>

<title>study40.html</title>

a:LINK {/* 默认颜色 */

color: gray;

}

a:VISITED { /* 訪问过的颜色 */

color: purple;

}

a:HOVER { /* 鼠标放上去的颜色 */

color: orange;

}

a:ACTIVE { /* 鼠标按住不放的颜色 */

color: black;

}

</style>

</head>

<body>

<div>

css赞成咱们针对a标签的4中状态设置各自的css特性，叫作css的伪类<br>

1：active通常不写

2: 必定要注意，顺序是LVHA

3: a:link可以简写为a

</div>

<div>

</div>

</body>

</html>

第41课字符实体

<!DOCTYPE html>

<html>

<head>

<title>study41.html</title>

</head>

<body>

<div>

在html开发中，有一些字符，不适于直接写出，如><<br>

通常的格式：& + 实体名 + ;<br>

实体有很是多，记住常用的<br>

><"¥©<br>

</div>

</body>

</html>

第五章公司网页开发实战

第42课公司站点开发之首页布局

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</div>

</div>

</ul>

</div>

</div>

</body>

</html>

第43课首页实战导航制做

css初始化：

@CHARSET "UTF-8";

/*css reset code */

/**** 文字大小初始化,使1em=10px *****/

body {

font-size:62.5%;

} /* for IE/Win */

html>body {

font-size:10px;

} /* for everything else */

/*字体边框等初始化*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

padding: 0;

margin: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

fieldset,img {

border: 0;

}

img {

display:block;

}

address,caption,cite,code,dfn,th,var {

font-weight: normal;

font-style: normal;

}

ol,ul {

list-style: none;

}

caption,th {

text-align: left;

}

h1,h2,h3,h4,h5,h6 {

font-weight: normal;

font-size: 100%;

}

q:before,q:after {

content:'';

}

abbr,acronym { border: 0;

}

a {

text-decoration:none;

}

<!DOCTYPE html>

<html>

<head>

#container {

width: 1002px;

}

#header {

height:128px;

background: gray url("./indexPics/top_bg.jpg");

}

#navi li {

width:90px;

margin-right:1px;

float: left;

}

#navi a {

font-size:16px;

font-family:Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

</style>

</head>

<body>

</ul>

</div>

</div>

</ul>

</div>

</div>

</body>

</html>

第44课首页实战之main区开发

css

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid gray;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

font-size:12px;

color: gray;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

color: gray;

}

.four a:VISITED{

color: gray;

}

.four a:HOVER {

text-decoration: underline;

}

#rside {

height: 600px;

width: 294px;

background-color: green;

float: right;

}

#footer {

height: 120px;

background-color: black;

}

index.html

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

</body>

</html>

第45课首页实战之main区(2)

css

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid gray;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

font-size:12px;

color: gray;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

color: gray;

}

.four a:VISITED{

color: gray;

}

.four a:HOVER {

text-decoration: underline;

}

#rside {

width: 294px;

float: right;

}

#article {

background: #eee;

margin-top: 1px;

padding-top: 10px;

}

#article a {

display: block;

height: 29px;

padding-left:30px;

background-repeat: no-repeat;

}

#article a:HOVER {

}

#contact {

margin-top:1px;

height: 240px;

background-color: #eee;

}

#footer {

height: 120px;

background-color: black;

}

html

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

</div>

</body>

</html>

第46课首页实战之footer区域开发

css

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

margin: 0 auto;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#banner{

margin: 5px 0;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid #eee;

border-top:none;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

font-size:12px;

color: gray;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

color: gray;

}

.four a:VISITED{

color: gray;

}

.four a:HOVER {

text-decoration: underline;

}

#rside {

width: 294px;

float: right;

}

#article {

background: #eee;

margin-top: 1px;

padding-top: 10px;

}

#article a {

display: block;

height: 29px;

padding-left:30px;

background-repeat: no-repeat;

}

#article a:HOVER {

}

#contact {

margin-top:1px;

height: 240px;

background-color: #eee;

}

#footer {

margin-top:15px;

height: 120px;

}

#footer ul {

height: 40px;

background-color: #eee;

}

#footer li {

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer address {

font-family: Microsoft Yahei, SimHei, sans-serif;

font-size: 12px;

margin-top: 12px;

}

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

<ul>

</ul>

京ICP备123456789号</address>

</div>

</body>

</html>

第47课首页实战之色彩微调

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

margin: 0 auto;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#banner{

margin: 5px 0;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid #eee;

border-top:none;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

font-size:12px;

color: #888;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

color:#a0a0a0;

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

color: #888;

}

.four a:VISITED{

color: #808080;

}

.four a:HOVER {

color:#ff832c;

text-decoration: underline;

}

#rside {

width: 294px;

float: right;

}

#article {

background: #eee;

margin-top: 1px;

padding-top: 10px;

}

#article a {

color:#888;

display: block;

height: 29px;

padding-left:30px;

background-repeat: no-repeat;

}

#article a:HOVER {

color:#ff832c;

}

#contact {

margin-top:1px;

height: 240px;

background-color: #eee;

}

#footer {

margin-top:15px;

height: 120px;

}

#footer ul {

height: 40px;

background-color: #eee;

}

#footer li {

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer a {

color: #888;

}

#footer a:HOVER {

color:#ff832c;

}

#footer address {

font-family: Microsoft Yahei, SimHei, sans-serif;

font-size: 12px;

margin-top: 12px;

}

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

<ul>

</ul>

京ICP备123456789号</address>

</div>

</body>

</html>

第48课利用行高实现文字居中

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

margin: 0 auto;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

line-height:37px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#banner{

margin: 5px 0;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid #eee;

border-top:none;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

line-height:37px;

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

display:block;

line-height:37px;

font-family:SimSun, serif;

font-size:12px;

color: #888;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

color:#a0a0a0;

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

color: #888;

}

.four a:VISITED{

color: #808080;

}

.four a:HOVER {

color:#ff832c;

text-decoration: underline;

}

#rside {

width: 294px;

float: right;

}

#article {

background: #eee;

margin-top: 1px;

padding-top: 10px;

}

#article a {

color:#888;

display: block;

height: 29px;

line-height:29px;

padding-left:30px;

background-repeat: no-repeat;

}

#article a:HOVER {

color:#ff832c;

}

#contact {

margin-top:1px;

height: 240px;

background-color: #eee;

}

#footer {

margin-top:15px;

height: 120px;

}

#footer ul {

height: 40px;

background-color: #eee;

}

#footer li {

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer a {

color: #888;

}

#footer a:HOVER {

color:#ff832c;

}

#footer address {

font-family: Microsoft Yahei, SimHei, sans-serif;

font-size: 12px;

margin-top: 12px;

}

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

<ul>

</ul>

京ICP备123456789号</address>

</div>

</body>

</html>

第49课 IE浏览器兼容

主要是字体大小的问题

bug的几种常见缘由：

1 没有正确使用doctype。解决方式正确声明就能够

2 个浏览器对不一样标签的初始值不一样，解决方式 css初始化

3 自身书写不规范。写规范就能够

4 浏览器bug

IE下真正的bug

1 盒模型bug，解决方式使用严格doctype声明

2 双倍margin bug，解决方式： _display:inline此时仅仅影响IE浏览器。左浮元素。左margin是定义的2倍

3 不认识a:link。解决方式仅仅定义a

4 3像素margin bug。解决方式规范浮动与清楚浮动

终于代码：

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类站点建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

<ul>

</ul>

京ICP备123456789号</address>

</div>

</body>

</html>

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

margin: 0 auto;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

line-height:37px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#banner{

margin: 5px 0;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid #eee;

border-top:none;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

color:#151515;

line-height:37px;

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

display:block;

line-height:37px;

font-family:SimSun, serif;

font-size:12px;

color: #888;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

color:#a0a0a0;

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

font-size:12px;

color: #888;

}

.four a:VISITED{

color: #808080;

}

.four a:HOVER {

color:#ff832c;

text-decoration: underline;

}

#rside {

width: 294px;

float: right;

}

#article {

background: #eee;

margin-top: 1px;

padding-top: 10px;

}

#article a {

color:#888;

display: block;

height: 29px;

line-height:29px;

font-size:12px;

padding-left:30px;

background-repeat: no-repeat;

}

#article a:HOVER {

color:#ff832c;

}

#contact {

margin-top:1px;

height: 240px;

background-color: #eee;

}

#footer {

margin-top:15px;

height: 120px;

}

#footer ul {

height: 40px;

background-color: #eee;

}

#footer li {

font-size:12px;

float: left;

margin-top: 15px;

margin-right: 10px;

}

#footer a {

color: #888;

}

#footer a:HOVER {

color:#ff832c;

}

#footer address {

font-family: Microsoft Yahei, SimHei, sans-serif;

font-size: 12px;

margin-top: 12px;

}

第六章附录

第50课色彩的表示

第51课尺寸的表示

像素表示

百分比表示：占父元素的百分比

<!DOCTYPE html>

<html>

<head>

<title>study51.html</title>

#parent {

font-size: 10px;

}

#p1 {

font-size: 20px;

}

#p2 {

font-size: 1.5em;

}

</style>

</head>

<body>

父div

<p id="p1">我用px表示文字大小</p>

<p id="p2">我用em表示文字大小。em是相对大小。是指其父元素中的1个"M"的大小，简单理解为父元素的font-size就是一个emd单位</p>

</div>

</body>

</html>

ex (x-height，字母 "x" 的高度)
cm (厘米，1厘米=10毫米)
mm (米)
pt (点，1点=1/72英寸)

pc(12点活字，1pc=12点)

CSS中的单位有9种。他们是百分比（%）、英寸（in）、厘米（cm）、毫米（mm）、磅数（pt）、12点活字（pc）、字母高度一半（ex）、字体高度（em）和像素（px）。网页制做时最经常使用的四个尺寸单位是：px、%、em、pt。但在使用时也需要依据不一样的状况进行选择。

比方字体的大小经常使用px、em和pt，元素的宽度经常使用%、px、em。

第52课 CSS画圆角

<!DOCTYPE html>

<html>

<head>

<title>study52.html</title>

#test1 {

width:300px;

height:300px;

border:1px solid blue;

border-radius:15px;

}

#test2 {

width:300px;

height:300px;

border:1px solid red;

border-radius:150px;

}

</style>

</head>

<body>

<div id="test1">CSS画圆角。眼下的主流浏览器都已经支持</div>

<div id="test2">CSS画一个圆</div>

</body>

</html>

第53课相对定位与绝对定位

<!DOCTYPE html>

<html>

<head>

<title>study53.html</title>

#test1 {

width: 300px;

height: 300px;

background-color: green;

}

p {

margin: 0;

padding: 0;

}

#p1 {

width: 100px;

height: 100px;

background-color: gray;

position: relative;

/* top: 20px;

left: 20px; */

right: 20px;

bottom: 20px;

}

#p2 {

width: 100px;

height: 100px;

background-color: orange;

}

#test2 {

width: 300px;

height: 300px;

background-color: pink;

position: relative;

}

#p3 {

width: 100px;

height: 100px;

background-color: yellow;

position: absolute;

right:20px;

bottom: 30px;

z-index: 1000;

}

#p4 {

width: 100px;

height: 100px;

background-color: gray;

position: absolute;

right:30px;

bottom: 40px;

}

</style>

</head>

<body>

<p id="p1">我是p1。相对定位是指元素在其正常的位置，偏移某些像素</p>

<p id="p2">我是p2，相对定位是指元素在其正常的位置，偏移某些像素</p>

</div>

用绝对定位时，父元素要求有position属性才行，不然将根据父的父，父的父的父……body,<br>

哪一个祖先有position就相对哪一个。不然相对body

<p id="p3">我是p3，绝对定位是指相对于父元素的top,right,bottom,left来定位</p>

</div>

</body>

</html>

第54课 overflow溢出处理

overflow 属性规定当内容溢出元素框时发生的事情。

visible 默认值。内容不会被修剪，会呈现在元素框以外。

hidden 内容会被修剪。并且其他内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动栏以便查看其他的内容。

auto 假设内容被修剪，则浏览器会显示滚动栏以便查看其他的内容。

inherit 规定应该从父元素继承overflow 属性的值。

清楚浮动的方法：1. 使用空div。这仅仅其div

css{clear:both;}。

2.经过:after伪类来清理浮动，淘宝、腾讯使用的清除浮动的代码：

.allCon {}.allCon:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}

<!DOCTYPE html>

<html>

<head>

<title>study54.html</title>

div {

width: 200px;

height: 200px;

border: 1px solid blue;

overflow: auto;

}

p {

border: 1px solid red;

}

</style>

</head>

<body>

<p>内容很是多，会不会溢出越过山和大海前端是近几年发展起来的职业，很是多人对前端的认识比較模糊，所以开篇我有必要介绍一番，前端（这里的前端是大众口中的前端）偏美工是视觉设计，前端偏用户是用户体验，前端偏目标导向是交互设计，前端偏技术才是你们口中的前端。和前端有关系的几样技术：PS，DW。FL，HTML+CSS+JS，看过很是多人给前端的建议也差点儿相同是学习这几种软件和HTML+CSS+JS等等了。只是我却认为你们在把前端往一个误区引导。

为何呢？听我慢慢解释。

先来讲说和前端有联系的几个职位：前端project师、视觉设计师、用户研究project师、交互设计师。我用一个简单的样例来分析：咱们都经常在一些社区评论留言，留言的表面过程：打开留言页面——输入留言内容——点击提交button——留言显示在留言列表上。

我这里不解释这个过程的实现原理。

---2012年10月12日改动--- 前端project师：留言框代码怎么写？留言框的显示、一些JS动态效果的显示（可能涉及异步请求）。

视觉设计师：什么样的留言框最美丽？怎么布局？用什么色彩仍是需要作一些纹理？

用户研究project师：用户怎么留言最舒服？很是多人可能会和用户体验师混淆在一块儿，事实上这两种人有着本质的差异，用户研究更側重的是方法论。注重问卷调查訪谈等等行为来了解用户的潜在行为习惯，而用户体验是一种行为，更側重的是体验以后的实际感觉。

交互设计师：留言过程当中的反馈？输入错误后的提示。留言成功后的反馈等等。交互设计可以理解为人机对话。交互设计側重和用户交流以后，引导用户有效操做。比方鼠标放在超连接上字体变颜色。有title提示，用户点击超连接，咱们就可以称此次交互是成功的，所以交互设计的重点在于目标向导。

---改动结束---

这些分工十分细微，假设留言本是一个项目的话，需要从几个不一样的角度来分析留言框。一个大型的项目比方社交站点、门户站点、行业站点这些职位都必须明白分工才干把整个项目作好，但是实际上即便条理清晰在项目开展过程当中还会出现诸多意想不到的问题，什么问题呢？不在本文讨论范畴。回到话题。现在你还以为你理解意义上的前端是前端吗？我曾经觉得前端是美工。但是后来我发现很是多前端博客都在研究一个技术JS的各大框架，我更加肯定前端并不是我理解意义上的前端，我更喜欢视觉设计，但是我依然也是一个前端，所曾经端是模糊的，甚至包含了一切。

前端没什么很差

假设你认为前端没有前（钱）途。那我劝你干别的行业吧。假设你肯定你喜欢前端，那就听听个人一些见解，固然也纯属主观臆断，你可以拍砖。逛过一些前端博客，大部分文章都是在分享JS的几大框架技术，Jquery占很是多数，那其它框架呢？因此我也有个疑问。前端难道就是JS吗？最后个人答案：是的，假设你想成为纯粹意义上的前端，JS很是大部分上表明了前端。

程序猿眼中的前端（后端程序猿和前端project师的不一样）

真正意义上学习编程是在大学的时候，那时候个人一个师长。他现在是Javaproject师，他给个人建议是HTML+CSS随便玩玩就行了，我不太认同他的观点仍是玩了很是久，我并无停留在HTML上。而是了解了不少其它技术，HTML是很是多技术人都不耻的语言，甚至在一些人看来HTML连编程语言都不是，这个我在大学招新时候很是有感触，他们认为HTML不值钱又是小儿科的东西，连PHP他们都认为2个小时就能上手，那HTML他们不用看就懂了，甚至在一些无知的人看来站点开发不算真正意义上的程序，所以也就不是程序猿了。因为他们的眼中仅仅有C/C++，很是多前人的建议也是学编程从C開始学起，我现在再来看这样的回答，真可笑，无知的人在骗无知的人罢了。

尤为再看看那些人在作着二级、三级试卷，我当时就想说哥们儿你醒醒吧，但是我仍是忍住了，因为他跟我无关。因此不要以程序猿的思惟来看待前端，前端是快乐的。不是挑战各类技术。前端的出发点也是用户（体验等等），程序猿是以电脑为核心（算法等等）。千万要记住前端是以用户为出发点的。而在很是多公司面试前端project师时，仅仅考察了前端project师的编程技巧。

假设你肯定你想作一个优秀的前端，个人我的建议：首先。了解HTTP协议（HTTP

1.1）。玩弄各大浏览器于鼓掌之中。你是前端project师不要跟我说你仅仅知道IE核心的浏览器。IE系列。Firefox。Chrome，Opera。Safari都应该是你平时常用的浏览器，我常用chrome，当中elements，Resources。Network。Script，....这些你了解多少？仍是你历来都不知道？那赶忙去了解吧。

其次。很熟悉HTML+CSS+JS。我把学习技术放到了第二位。因为你必须首先了解整个网络，你才会更快捷和全面的了解前端技术。

以前说过很是多技术人都不耻学HTML，那我来解释为何要先学HTML？

先和你们一块儿梳理各种编程语言。大体分为了六大类：网页语言、解析型语言、混合型语言、编译型语言、汇编语言和机器语言，依次愈来愈苦逼，无论从用户仍是开发人员角度看待。越深刻越不能让人理解，用户体验越差，固然开发人员也是用户。因此也就能理解为何会有PHP、Python，Ruby之类的解释型语言了。

假设你仅仅想学习好前端技术的话。仅仅需要了解前两层的东西。也就是网页语言和解析型语言，网页语言HTML。解析型语言PHP，Python。Ruby至少要学会一种。假设你有不少其它的精力，你可以跳到更高层次，学习混合型语言C#或者Java。对于编译型语言C和C++假设你想作好前端工做，你可以不用懂得的。

为何前端project师需要了解这些编程语言呢？

一个WEB项目需要三种人：项目经理、前端project师和后端程序猿，他们之间需要沟通，不懂得怎样沟通？怎样说服？懂得能让项目进展的更顺利一些。咱们回到刚才的样例——留言本，过程可以參照PHP的CGI（请求和响应等等）。假设你不懂或者仍是很是模糊的话。我以为你还不是一个合格的前端project师。固然你可以说你更偏向于视觉设计、用户体验之类的了。个人这样的说法并不绝对，甚至假设你以为你需要鼓舞才干进步？那很差意思了，我仅仅知道这是残酷的招聘法则，你可以去看看各公司对招聘前端的要求。

最后HTML5很是重要，就宛如空气。看似不存在，好似不重要，但是缺乏了空气。人类就没法生存。因此HTML是根本。

再次，艺术品的赞扬能力。

PS、切图等等这些仅仅是工具。工具仅仅要经常用就会的，但是赞扬能力，或者仅仅能说是天生的了，但是也要多培养本身的艺术赞扬能力，或者说让本身时髦起来。学会赞扬学会鉴别，其它的很少说了。

最后。关注前端们都在作什么？国外的我不推荐。我认为国外的天空没那么蔚蓝。腾讯、新浪、淘宝、网易、百度……很是多公司都有前端体验中心，他们的前端博客你知道不？他们在干什么？这些你了解吗。去了解他们在干什么吧，慢慢你就能培养出你的前端嗅觉了。

学会思考，本身去辨别真伪，每个人都有本身的体验，本篇文章纯属一家之言。主观臆断的说法，你可以參考并本身去验证，这也是前端project师需要学会的东西。

</p>

</div>

</body>

</html>

第55课表单

<!DOCTYPE html>

<html>

<head>

<title>study55.html</title>

</head>

<body>

<div>

在用户注冊，在线报名等场合时<br>

需要把用户的信息。填写并提交，这时要用到表单来收集用户的信息

</div>

<p>

username：<input type="text" name="username" value="lisi">

</p>

<p>

password：<input type="password" name="password">

</p>

<p>

性别：男<input type="radio" name="gender" value="male" checked="checked">

女<input type="radio" name="gender" value="female">

</p>

<p>

爱好：篮球<input type="checkbox" name="hobby" value="basketball">

足球<input type="checkbox" name="hobby" value="football">

乒乓球<input type="checkbox" name="hobby" value="pingpang">

游泳<input type="checkbox" name="hobby" value="swimming" checked="checked">

</p>

<p>

</select>

</p>

<p>

<textarea rows="" cols="" name="intro">nimanaoiabkjgslfdghfdlskjghsld</textarea>

</p>

<p>

上传头像：<input type="file" name="pic">

</p>

<p>

隐藏域：<input type="hidden" name="IP" value="192.168.1.100">

</p>

<p>

</p>

</form>

</body>

</html>

第56课框架集

Element (frameset) is obsolete. Its use isdiscouraged in HTML5 documents.

第57课结课做业

<!DOCTYPE html>

<html>

<head>

<title>study57.html</title>

</head>

<body>

<pre>

做业提交：论坛

有疑问：论坛

结课实习做业--作一个仿照京东商城主页。

作出首页，栏目页，商品页

</pre>

</body>

</html>

HTML, CSS学习笔记（完整版）

第一章 div布局

前几课内容

第二章 盒模型

第12课 首页布局实战之margin设置

第13课 盒模型之border设置

第14课 用css控制border画三角形

第15课 padding具体解释

第16课 padding与背景

第17课 padding美化首页

第18课 盒子模型的总结

第19课 利用margin实现水平居中

第20课 margin重叠现象

第21课 inline内联（行内元素）

第22课 内联与块状的转化

第三章 CSS

第23课 CSS控制段落文本

第24课 文字控制

第25课 字体控制精讲

第26课 背景图片

第27课 大图片背景

第28课 CSS选择器

第29课 CSS优先级

第30课 CSS引入方式

第31课 CSS初始化

第四章 HTML语义标签

第32课HTML学习思惟导图

第33课 h标签与p标签

第34课 img标签

第35课 图片是内联仍是块状

第36课 有序列表和无序列表

第37课 整齐的表格

第38课 超连接

第39课 锚点

第40课 css伪类

第41课 字符实体

第五章 公司网页开发实战

第42课 公司站点开发之首页布局

第43课 首页实战导航制做

第44课 首页实战之main区开发

第45课 首页实战之main区(2)

第46课 首页实战之footer区域开发

第47课 首页实战之色彩微调

第48课 利用行高实现文字居中

第49课 IE浏览器兼容

第六章 附录

第50课 色彩的表示

第51课 尺寸的表示

第52课 CSS画圆角

第53课 相对定位与绝对定位

第54课 overflow溢出处理

第55课 表单

第56课 框架集

第57课 结课做业

第二章盒模型

第12课首页布局实战之margin设置

第13课盒模型之border设置

第14课用css控制border画三角形

第18课盒子模型的总结

第19课利用margin实现水平居中

第22课内联与块状的转化

第24课文字控制

第25课字体控制精讲

第26课背景图片

第27课大图片背景

第35课图片是内联仍是块状

第36课有序列表和无序列表

第37课整齐的表格

第38课超连接

第39课锚点

第41课字符实体

第五章公司网页开发实战

第42课公司站点开发之首页布局

第43课首页实战导航制做

第44课首页实战之main区开发

第45课首页实战之main区(2)

第46课首页实战之footer区域开发

第47课首页实战之色彩微调

第48课利用行高实现文字居中

第六章附录

第50课色彩的表示

第51课尺寸的表示

第53课相对定位与绝对定位

第55课表单

第56课框架集

第57课结课做业