使用HTML 和CSS 开发商业站点
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用HTML 和CSS 开发商业站点相关的知识，希望对你有一定的参考价值。
第一章html 基础
1.html 的基本结构？
解析：
2.HTML 全称
Hyper Text Markup Language（超文本标记语言）
扩展XML:Extendsible Markup Language(可扩展性标记语言)
3.高级记事本
Ue（UltraEdit）
nodepad++
Editplus
快捷键用熟一个即可。
4.编写html 文档的注意点
01.所有标签字母均小写。
02.有开始就要有闭合标签
03.每个层次的标签有一定程度的缩进。
解析：如果发现body 内书写了内容，用浏览器打开后发现没有内容，那么
就需要检查下title 标签有没有闭合。
5.三种文档类型
严格类型，过渡类型，框架类型
6.编码方式
gb2312
Gbk
Gb2312 和gbk 的区别
GB2312 是中国规定的汉字编码，也可以说是简体中文的字符集编码;GBK 是GB2312 的
扩展,除了兼容GB2312 外，它还能显示繁体中文，还有日文的假名
utf-8:全球通用编码
用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
7.W3C：组织
解析：是一个组织，专门用来给各个浏览器厂商等指定规范的。
8.标签
01.h 标签：从h1 到h6 字体逐渐减小。
效果：自身加粗，并且可以控制字号。
02.p 标签：和其他的内容行之间有一个空行。
03.br 换行标签：是自身闭合标签。<br/>
04.hr 水平线标签，是自身闭合标签。
05.strong（加粗）、06.em（倾斜）
07.特殊符号：所有的特殊符号都是包括在&;中
空格：
大于号：>
小于号:<
双引号:"
版权符号:©
林徽因：冰心(谢婉莹)，小桔灯() 99
你是人间的四月天
9.图像标签
夏洛特的网
html 中两种路径：
第一种：绝对路径，就是挂着盘符的路径形式，例如：c:\\123\\01.jpg
相对路径：相对的对象时当前你访问的html 文档。符号是../(上一级目录)
注意问题：相对路径../：去该html 文件对应的上层文件夹
一般不会使用绝对路径：D:\\1.html
<img src=”美女.jpg” alt=“网络异常的时候，显示的文本” title=”鼠标悬浮在图片上
显示的文字”/>
自身闭合标签
10.超链接
分类：页面间链接，锚链接，功能性链接。
页面间链接：
<a href=”http://www.baidu.com”>去百度</a>
锚链接：
01.同页面间锚链接
分两步：第一步：在页面目标位置设置一个锚记。<a name=”star”><img src=”01.jpg”
/></a>
第二步：在另一处创建出一个超链接：<a href=”#star”>去看明星的隐私信
息吧</a>
02.跨页面的锚链接
功能性链接：
<a href=”mailto:[email protected]”>站长信箱</a>
<a href="tencent://message/?uin=QQ">打开QQ</a>
迅雷
电驴
ek2k://
QQ 旋风
第二章列表、表格与框架
第二章列表、表格与框架
收作业
听写
补充a 标签的一个属性target
1._blank:在新选项卡中打开
2._self:如果没有设置target 属性，默认取值是_self
01.列表
001.无序列表：
<ul>
<li></li>
</ul>
002.有序列表
<ol>
<li></li>
</ol>
003.定义描述标签：应用场景：在图文混编的情况下使用
<dl>
<dt>放置图片</dt>
<dd></dd>
....
</dl>
02.表格
<html>
<head>
<title>表格</title>
</head>
<body>
<table border="1px">
<tr>
<td>北京</td>
<td>上海</td>
<td>广州</td>
</tr>
<tr>
<td>北京</td>
<td>上海</td>
<td>广州</td>
</tr>
<tr>
<td>北京</td>
<td>上海</td>
<td>广州</td>
</tr>
</table>
</body>
</html>
重点：表格的跨行跨列
步骤：1、有几行几列？
解析：3 行两列
2.该跨行的跨行(rospan)，该跨列的跨列(cospan)
3.核心原则：跨行和跨列只能出现在td 中
一定要注意的是：所有的跨行和跨列操作都出现在td 中。
表格跨行跨列步骤：
01.确定表格的行和列
02.搭建出表格架构
03.根据需求，删除多余的td(单元格)
3.框架集和内嵌框架
再来一遍Frameset
作用：当我们需要将一个比较大的页面切割成多个小页面的时候，可以使用FrameSet，它
一般用于后台管理员布局方式。
重要内容：FrameSet 和body 不能共存。
实现：
首先：创建出top.html, left.html right.html 三个子页面
然后，在主页面index.html 中通过frameset 标签来引入三个子页面
<!--如何将3 个小页面整合到一个index 大页面中-->
<frameset rows="20%,*">
<!--顶部的top 页面-->
<frame src="top.html"/>
<!--下半部分对应的框架-->
<frameset cols="20%,*">
<!--左半部分页面left.html-->
<frame src="left.html"/>
<!--有半部分的页面right.html-->
<frame src="right.html" name="rightFrame"/>
</frameset>
</frameset>
注释：01.border 可以设置边框的宽度，如果是20，那么代表边框宽度是20px，如果设置为
0，代表无边框。
02.noresize=”noresize”不允许用户拖动框架
03.scrolling=”no” 不显示滚动条
Iframe 用法：
应用场景：链接外部的页面，实现样式的代码重用。
FrameSet:
01.不能和body 共存
02.将index 页面用三个页面组合起来，将一个大
页面Index 切成3 小块，每一个小块儿对应一个页面
top.html
left.html
right.html
04.框架集Frameset 和内嵌框架iframe
frameset 用于进行网页布局，对多个页面进行组
合。比较复杂，而iframe 一般用于引入站外链接，天气预
报
frameset 关键属性：
border：设置边框：可以取值100
frameborder:0 和1
borderColor:颜色
frame:noresize srcolling
iframe：noresize srcolling width height
第三章表单
第三章表单
01.什么是表单？？
解析：表单就是form
<form action=”http://www.baidu.com”
method=”post”>
重置按钮必须放入到表单中，才能发挥到作用
</form>
注意点：
02.表单元素？
解析：在表单中的标签就是表单元素
03.老湿：你说get 和post 提交方式有什么区别？
解析：get 在地址栏显示提交的数据（危险）
2k
1byte=8bit(位)）
（1kb=1024byte(字节)
1mb=1024kb
1Gb=1024mb
1Tb=1024Gb
4M: 4m/s 512k/s
post 在表单，通过开发人员工具可以看到（安
全）没有上限
要想让表单元素中的value 值提交到服务器，
表单元素必须有name 属性
重置和清空？？
解析：
表单元素：
input: type="text" 文本框
type="passsword" 密码框
type="radio" 单选框
type="checkbox" 复选框
type="submit" 提交按钮
type="reset" 重置按钮
type="button" 普通按钮
type="image" 图片按钮
type="file"文件域
type="hidden" 隐藏域
下拉框
select ---option 下拉框
多行文本域
<textarea>多行文本域</textarea>
属性
：只读readonly="readonly"
禁用： disabled="disabled"
-->
第四章初识CSS
1.任务
1.第三章和第四章单词
2.考试
3.前三章总结
4.第四章内容讲解
引入dreamweaver 工具使用
2.内容：
1.使用css 的意义：为了实现代码和样式的分离
01.什么是CSS：(Cascading Stylesheet)层叠样式表
02.CSS 在页面中的应用：
解析：
<style type=”text/css”>
P{
font-size:20px;
Color:red;
}
</style>
03.CSS 的优势
CSS 的基本语法
01.CSS 基本语法结构
02.认识<style>标签
03.CSS 选择器
标签选择器:通过标签名来设置元素的样式。
类选择器
解析：两步：第一步：在要设置样式的目标标签中起一个名字为class 的属性名
第二步：在style 标签中，通过.属性名{}设置
ID 选择器
解析：
第一步：在要设置样式的标签中起一个名称为id 的属性，
第二步：在style 标签中通过#属性名{}设置
在HTML 中引入CSS 样式
01.行内样式
解析：直接在html 代码的标签中设置style 属性，这种方式缺点做不到代码和样式分离。
02.内部样式表
解析：直接在style 标签中书写样式代码，但是真正在项目发布的时候，还是最好将样式
单独出一个文件，这样会提高网站的性能。
03.外部样式表
解析：通过link 标签引入当前网站css 文件夹中某一个后缀名是.css 的文件，
<link href="site.css" rel="stylesheet" type="text/css" />
04.样式优先级
规律：
行内>内部样式表>外部样式表
也就是遵循的是就近原则。
CSS 高级应用
01.CSS 复合选择器
A.后代选择器
B.交集选择器
C.并集选择器
02.CSS 继承特性
A.继承关系
B.继承的应用
注意点：
01.如何调整dreamweaver 中代码视图的字体大小。
.
2.问：
声明：下次课的预习大家一定要好好预习，因为里面的东东很多很杂，所以需要大家多用点
心。
总结：
1.为什么使用CS
2.CSS 语法
<style type=”text/css”>
标签类ID 选择器
</style>
3.选择器的优先级
近者优点
4.三种引入样式表方式
第一种：行内样式
第二种：内部样式表
第三种：外部样式表
5. 复合选择器
01.后代选择器空格
02.并集选择器，，，，
03.交集选择器连接写，第一个只能是标签，后续跟的是类样式，ID
6.CSS 当中的继承
作业：
1.预习第五章（难点，希望大家好好预习）
第五章CSS 美化网页元素
内容回顾：
01.CSS：让网页看起来更加美观，可以实现页面样式的复用。层叠样式表
02.CSS 选择器：ID 类选择器标签
03.复合选择器：交集，并集，后代
现阶段，大家所用的选择器，只要能满足题目要求即可，没有必要刻意去使用复合选择器，
等到有一天，你发觉使用常见3 种选择器，定位某一个标签特别麻烦的时候，思路可以往这
个方向偏移。
交集选择器：p.name div#name
并集选择器：p,div
后代选择器: p ul li
04 选择器的.优先级
ID>类选择器>标签选择器
05.CSS 中的继承
子标签可以继承父标签的样式
CSS 美化网页元素
1.span 标签引入
老师说了，通过span 标签，我们学了一个知识点，就是行级标签和块级标签。
行级标签：；所有的行级标签都显示在同一行（span，img）
块级标签：独占一行（p ，div）
2.字体样式
大家教了我一点，就是如果font-family 属性值有多个，用逗号
隔开。如果英文字体和中文字体同时出现，英文位于前面。
02.如果字体属性值有空格，必须有””,
03.如果字体属性是中文，也要有””
分开设置属性：
设置字体类型:font-family:到底是楷体呢还是宋体”楷体_GB2312”
设置字体大小:font-size：设置字体大小
设置字体风格:font-style;倾斜：font-style:italic
设置字体粗细font-weight:bold; 700px
整体设置属性：font:字体风格字体的粗细字体大小字体类型;
<div>----------------------------------------------------</div>
水变油
3.文本样式
设置文本颜色:color:前景色
设置元素水平对齐方式:text-align:center left
设置文本缩进:text-indent:20px;
设置文本的行高line-height:20px;如果我们将line-height 和height 设置成一样的高度，那么
就相当于对盒子中内容作了垂直居中，这是一个布局技巧
设置文本的装饰:text-decoration:underline;
图片和文字垂直对齐方式
设置图片Vetical-align:middle;
4.超链接伪类
去除a 标签中的img 标签外围的边框，有两种方案：
01.img{border:0px;}
02.img{border:none;}
伪类：选择器(#div .div div):状态值(link,visited,hover,active)
a:link:大家的小手还没有点击超链接时的样式
A:visited：大家的大手已经点击过了某个超链接的样式
A:hover：大家的小脚悬停在超链接上的样式
A:active：大家的大脚踩在超链接上，但是还未弹起的样式
设置鼠标形状
Cursor:pointer;设置成小手
Cursor:wait:小沙漏忙碌图标
5.Div
Div 咱们一直在用，知道它是一个块级标签，以后布局的
时候会经常用到它。
6.背景样式：背景偏移技术！
div {
background-color: pink;//给箱子设置背景颜色。
background-image: url(image/02.jpg);//给某一个标签，或者说的直白
一些就是给html页面上的一个箱子，设置背景图
background-repeat: no-repeat;//图片比标签宽高小的时候，只显示一
张背景图片
background-repeat:repeat-x;在水平方向上平铺
background-repeat:repeat-y:在垂直方向上平铺
background-position:-104px 0px;
//position代表位置：有两个值，
第一个代表的是水平方向上做偏移，如果需要图片左移，那么取负值
第二个代表的是垂直方向上的偏移，如果需要图片上移动，取值为负值。
width: 300px;
height: 300px;
}
鉴于以上四个属性写起来代码过多，可以将其合成一个属性，并且严重十分非常特别及
其建议要用合写形式。
Background:pink url(image/美女.jpg) 0px 0px no-repeat;
7.列表样式
List-style-image:url(image/02.jpg)
List-style:none;将默认的标记去除
List-style:circle:空心圆
List-style:square;方块
List-style:decimal;实现了从无序列表到有序列表的转换。
第六章盒子模型
第六章盒子模型
1.盒子模型
盒子模型包括内容和盒子属性(border,padding,margin)
盒子模型的真实宽度：内容宽度+左右两侧的padding 值+左右两侧的border 值
盒子的真实高度：内容高度+上下的padding 值+上下的border
2.盒子模型常见考题
/*
border:设置颜色后跟参数个数含义
1 个参数:四个边框颜色都是该颜色
2 个参数(red blue):上下颜色为红色,左右为蓝色
3 个参数(red blue yellow):上边线颜色为红色,
左右为蓝色,下边线为黄色
4 个参数()按照上/右/下/左的规律设置颜色
*/
盒子模型对网页布局的重要性：
注意：对一个容器设置内边距，会改变该容器本身的尺寸，所以在布局的时候要特别小
心。另外能通过margin 实现的功能，尽量不要用padding。
Ul 中的li 是超不出ul 的包围的。这是一个特例。就是对ul 设置了内边距，ul 本身的尺
寸不会改变。
2.标准文档流
块级标签和行级标签
注意：块级标签可以和行级标签转换
通过display 属性
display:block;
display:inline;
display 属性的三个取值：
01.none:将某个元素隐藏display: none;*将div 隐藏*
02.block：将某个元素显示
03.inline:将某个块级标签转换成了行级标签
3.鼠标单击到img 行的时候图片隐藏方案
<!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/xhtml">
<head>
<title></title>
<style type="text/css">
a:hover img{
display:none;
}
</style>
</head>
<body>
<a href="#">悬停到我身上有惊喜，点坏不用赔！
<br /><br /><br />
<img src="image/pig.jpg" />
</a>
</body>
</html>
第七章浮动
第七章浮动
1.常见的网页布局
浮动：简单理解就是为了布局网页，让两个div 可以在同一行显示
清除浮动必须遵循一个重要的原则，就是如果想要清除浮动，那么原来盒子div 浮动的方
向就决定了清除浮动的方向值。
2.overflow:解决div 的高度塌陷问题
高度塌陷是如何引起的？
解析：当一个div 中所有的子div 都进行了浮动后，那么会出现该问题，那么解决方就是在
父div 中设置器overflow:hidden：即可解决高度塌陷问题
方式二：在父div 结束标签前添加一个子的div，给该div 设置一个id，然后通过样式清除
浮动。代码如下:#littlediv{clear:left;}
3.如何将ul 中最后一个li 前提到第一个li 之上?
解析：用的思路就是给ul 设置相对定位:position:reletive ; 给最后一个li 起一个id，设置
其绝对定位:position:absolute: top:-15px;
1.网页中浮动的应用
浮动就是为了配合网页布局中常见的布局方式，将两个div 显示到同一行
01.横向导航菜单
02.图文混编
1.大div 叫container 360px
2.两个小div，一个承载标题，。另一个承载视频列表
3.定义列表来写。
01.将dl 进行左浮动，让多个dl 可以在同一行显示
02 设置dl 宽度保证两个dl 之前出现一定间隔。
03..通过text-align:center:来居中dl 中内容
04.如果网页中部分元素应用了浮动，可能会引起高度塌陷，这个时候解决方案
通过在body 中加多一个空的div，然后给该div 设置浮动属性为both
4.网页元素三种常见的定位机制
普通流，浮动和绝对定位
1）普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个
词。如果把文档流直译为英文就是document flow ，但标准里只有另一个词，叫做普通流
（normal flow)，或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译
的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流normal flow
（普通流） 这一词，从来没出现过document flow （文档流）
2）浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。
浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影
响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动
框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”
现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其
他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所
希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局；
恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指windows
平台的IE 浏览器）。
也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什
么？
本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。
一、清除浮动还是闭合浮动（Enclosing float or Clearing float）？
很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。
我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。
1）清除浮动：清除对应的单词是clear，对应CSS 中的属性是clear：left | right | both | none；
2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。
两者的区别请看优雅的Demo
通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮
动，
在footer 上设置clear：both 清除浮动并不能解决warp 高度塌陷的问题。
结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。
二、为何要清除浮动？
要解答这个问题，我们得先说说CSS 中的定位机制：普通流，浮动，绝对定位
（其中"position:fixed" 是"position:absolute" 的一个子类）。
1）普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。
如果把文档流直译为英文就是document flow ，但标准里只有另一个词，叫做普通流
（normal flow)，
或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。
比如《CSS Mastery》，英文原书中至始至终都只有普通流normal flow（普通流） 这一词，
从来没出现过document flow （文档流）
2）浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。
浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影
响内联框（通常是文本）的排列，
文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会
出现包含框不会
自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮
云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其
他普通流元素了，
也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要
闭合浮动元素，
使其包含框表现出正常的高度。
第八章定位网页元素
第八章定位网页元素
01.只有块级标签才可以浮动
02.定位网页元素的方案
Static：默认
Absolute：绝对定位
Reletive：相对定位，相对的对象是自身
Fixed：固定的，类似于空间的Top 效果
重点中的重点：
绝对定位：
01.涉及到两个标签，并且标签有嵌套
关系。
02.一般给外层标签设置为相对定位
Position:relative，不需要设置left，top 等
偏移量。
03. 给内层标签设置绝对定位，
position:absolute;，需要设置left 和top
项目阶段
01.经济半小时
02.当当图书榜
03.当当畅销排行
004.淘宝导航
005.开心网
006.V+首页
007.晒新货页面
008.商品详细页
009.家纺页面
010.帮助中心
011.注册和登陆页
以上是关于使用HTML 和CSS 开发商业站点的主要内容，如果未能解决你的问题，请参考以下文章
S1/使用HTML语言和CSS开发商业站点/10-项目案例：制作V+网站