【麦子学院】02.web前端开发之HTML+CSS基础入门
2017-03-28 19:18
1106 查看
1.课程介绍
2.HTML的语法
1)什么是HTML标记语言
表示网页信息的符号标记语言。
特点:
l 可以设置文本的格式、比如标题、字号、文字颜色、段落等
l 可以创建列表
l 可以插入图像和媒体
l 可以创建表格
l 超链接、可以使用鼠标点击超链接来 首先页面之间的跳转。
2)HTML的标记和它的属性
HTML文档的保存格式:.html,.htm,.html
标记和被标记的内容构建出HTML文档格式:<标记>内容</标记>
标记的属性:用来控制我们的内容(图像、文本等的)如何的显示
标记的属性格式:<标记 属性1=属性值 属性2=属性值 属性3=属性值>内容</标记>,例如<body bgcolor=’red’>内容</body>以上的属性是用来控制我们的网页的背景颜色,bgcolor就是body的属性,它的值是red(红色)
3)语法不区分大小写<html>、<HTML>都是定义相同的标记,但是在编写网页的时候尽量使用小写
4)文档的注释:注释一段内容时使用<!—“开始”,以”--!>”结束
例如<!—就是这个网页的作者,我的名字叫大神--!>
5)代码格式:空格键和回车键在网页中都不会起到任何效果,我们是为了让清晰易读,可以使用空格和回车键进行编排。注意缩进时保持严格的规则,“Tab”键进行缩进。
6)字符实体:比如我们想在网页中显示一个“<”小于符号,但是“<”在HTML中是文档标记的开始语言,如果我们没有直接使用“<”会出现差错,所以我们会用一些实体名称来代替。常见的字符实体如图
注意:实体名称对大小写敏感!
3.HTML的基本结构
a) <html>内容</html>:HTML文档的文档标记,也称为HTML的开始标记。位于网页的最前端和最后端。<html>在最前端表示网页的开始,</html>在最后端表示网页的结束
b) <head>内容</head>:HTML文件头标记,也称为HTML头信息开始标记。用来包含文件的基本信息,比如网页的标题、关键字、在<head></head>内可以放<title></title>,<meta></meta>,<style></style>等等标记。注意在<head></head>标记内的内容在浏览器中显示
c) <title>内容</title>:HTML文件的标题标记。网页的主题,显示在浏览器窗口的左上边。注意;网页的标题不能过长,要短小精悍,能具体反应页面的内容,<title></title>标记中不能包含其他标记。
d) <body></body>:html文档的主题标记。<body>..</body>是网页的主体部分,在此标记之间可以包含<p></p>,<h1></h1>、<hr/>,等标记,正是由这些内容构成我们所见的网页。
body标记的常见属性:
1. bgcolor:设置背景颜色 <bodybgcolor=“red”></body>
2. text:设置文本颜色 <body text =“green”></body>
3. link:设置链接颜色 <body link =“blue”></body>
4. vlink:已经访问了的链接颜色 <bodybgcolor=“yellow”></body>
5. alink:正是被点击的链接颜色 <body alink=“red”></body>
6)<meta>内容</meta>:页面的元信息(meta-information)提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。必须的属性: content 值:some_text 定义与http-equiv 或 name 属性相关的元信息。
常见的name属性:author、keywords、description、others都是把content关联到一个名称,比如描绘出网页的关键词:<meta name="keywords" content="麦子学院,IT在线培训">
注意: 注意meta标记必须放在head元素里面
4.HTML的文档设置标记上(格式标记)
<br />:强制换行标记。让后面的文字、图片、表格等等,显示在下一行
<p>:换段落标记。换段落,由于多个空格和回车在HTML中会被等效为一个空格,所以HTML中要换段落就要用<p>,<p>段落中也可以包含<p>段落!
<center>:居中对齐标记. 让段落或者是文字相对于父标记居中显示
<pre>:预格式化标记. 保留预先编排好的格式
<li>:列表项目标记。每一个列表使用一个<li>标记
<ul>:无序列表标记。<ul>声明这个列表没有序号
<ol>:有序列表标记。可以显示特定的一些顺序。
格式: <ol type="符号类型">
<litype="符号类型"></li>
<litype="符号类型"></li>
</ol>
有序列表的type属性值
1 阿拉伯数字1.2.3等等,默认type属性值
A 大小字母A、B、C等等
a 小写字母a、b、c等等
Ⅰ 大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
ⅰ 小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等
Value 指定一个新的序列数字起始值
列表可以进行嵌套
<dl><dt><dd>:使用场所:对列表条目进行简短的说明
格式:
<dl>
<dt>软件说明</dt>
<dd>简单介绍软件的功能及基本应用</dd>
<dt>软件界面</dt>
<dd>用于选择软件的外观</dd>
</dl>
<hr />:水平线分割标记。段落之间的分割线
<div>:分区显示标记,也称之为层标记。常用来编排一大段的HTML段落,也可以用于格式化表,和<p>很相似。层可以多层嵌套使用。
5.html的文档设置标记下(文本标记)
1) Hn:段落标记。共有6个级别,n的范围1~6,不同级别对应显示大小不同的标题,h1最大,h6最小
2) Font:字体设置标记.设置字体的格式的三个常用属性。
a) .size(字体大小) <fontsize="14px">
b) color(颜色) <font color="red">
c) face(字体) <font face="微软雅黑">
3) b:粗字体标记
4) I 斜字体标记
5) Sub文字下标字体标记
6) Sup文件上标字体标记
7) tt打印字体标记
8) cite引用方式的字体,通常是斜体
9) em表示强调,通常显示为斜体字
10)strong 表示强调,通常显示为粗体字
11)small 小型字体标记
12)big 大型字体标记
13)u 下划线字体标记
6.HTML图像标记
1)使用方法
<img src="路径/文件名.图片格式"width="属性值" height="属性值" border="属性值" alt="属性值">
2) <img>标记的属性
src属性: 指定我们要加载的图片的路径和图片的名称以及图片格式
width属性: 指定图片的宽度,单位px、em、cm、mm
height属性: 指定图片的高度,单位px、em、cm、mm
border属性: 指定图标的边框宽度,单位px、em、cm、mm
alt属性:
当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字
如果图像没有下载或者加载失败,会用文字来代替图像显示
搜索引擎可以通过这个属性的文字来抓取图片
注意:<img>为单标记,不需要使用</img>闭合, 在加载图像文件的时候,文件的路径或者文件名文件格式错误,将无法加载图片.
7.html超链接的使用
1)基本语法
<a href="" target="打开方式" name="页面锚点名称" >链接文字或者图片</a>
2)属性
Href属性: 链接的地址,链接的地址可以是一个网页,也可以是一个视频、图片、音乐等等
Target属性: 定义超链接的打开方式。
属性值:
_blank 在一个新的窗口中打开链接
seif(默认值) 在当前窗口中打开链接
_parent 在父窗口中打开页面(框架中使用较多)
_top 在顶层窗口中打开文件(框架中使用较多)
name属性:指定页面的锚点名称
<ahref="http://www.baidu.com">百度</a><!--外部链接-->
<!--
<ahref="demo2.html" target="_blank">demo2的页面</a>-->
<ahref="#dibu">到页面底部</a>
<ahref="#zhongbu">到中部</a>
<aname="dingbu"></a>
<ahref="http://www.baidu.com" target="_blank"><imgsrc="https://www.baidu.com/img/bdlogo.png"></a>
<a href="#dingbu">到页面顶部</a>
<a href="#zhongbu">到中部</a>
8.html表格相关的标记
1.表格的基本结构
1)<table>标记
基本格式:<table 属性1="属性值1" 属性2="属性值2" ... ... >表格内容</table>
2.table标记的属性
a) width属性:表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分百(%)
b) height属性:表示表格的高度,他的值可以是像素(px)也可以是父级元素的百分百(%)
c) border属性:表示表格外边框的宽度
d) align属性:表格的显示位置
值left 居左显示 center居中显示 right居右显示
默认值left
e) cellspacing属性:单元格之间的间距,默认是2px,单位像素
f) cellpadding属性:单元格内容与单元格边框的显示距离,单位像素
g) frame属性
1.作用
控制表格边框最外层的四条线框
2.属性值
1.void(默认值) 表示无边框
2.above 表示仅顶部有边框
3.below 表示仅有底部边框
4.hsides表示仅有顶部边框和底部边框
5.lhs表示仅有左侧边框
6.rhs表示仅有右侧边框
7.vsides表示仅有左右侧边框
8.box包含全部4个边框
9.border包含全部4个边框
h) rules属性
1.作用
控制是否显示以及如何显示单元格之间的分割线
2.属性值
1.none(默认值) 表示无分割线
2.all表示包括所有分割线
3.rows表示仅有行分割线
4.clos表示仅有列分割线
5.groups表示仅在行组和列组之间有分割线
2)<caption>标记
1.什么时候使用
什么时候使用如果表格需要使用标题,那么就可以使用<caption>标记
2.如何正确使用
<caption>属性的插入位置,直接位于<table>属性之后,<tr>表格行之前
align属性
属性值
1.top标题放在表格的上部
2.bottom标题放在表格的下部
3.left标题放在表格的左部
4.right标题放在表格的右部
3)<tr>标记
定义表格的一行,对于每一个表格行,都是由一对<tr>...</tr>标记表示,每一行<tr>标记内可以嵌套多个<td>或者<th>标记
可选属性
1.bgcolor属性 设置背景颜色
格式 bgcolor="颜色值"
2.align属性
设置垂直方向对齐方式
格式align="值"
值
1.bottom靠顶端对齐
2.top 靠底部对齐
3.middle 居中对齐
3.valign属性 设置水平方向对齐方式
格式
valign="值"
值
1.left靠左对齐
2.right靠右对齐
3.center居中对齐
4)<td>和<th>
1.<td>和<th>都是单元格的标记,其必须嵌套在<tr>标签内,是成对出现
2.两者的区别
<th>是表头标记,通常位于首行或者首列,<th>中的文字默认会被加粗,而<td>不会
<td>是数据标记,表示该单元格的具体数据
3.共同之处
两者的标记属性都是一样的
4.属性
bgcolor 设置单元格背景
align 设置单元格对齐方式
valign 设置单元格垂直对齐方式
width 设置单元格宽度
height 设置单元格高度
rowspan 设置单元格所占行数
colspan 设置单元格所占列数
9.HTML表格实战《简单的表格布局》
10.HTML框架详解与框架布局实战
1)什么是框架
框架将浏览器划分成不同的部分,每一部分加载不同的网页,实现在同一浏览器窗口中加载多个页面的效果
2) <frameset>划分框架标记
a) 语法格式
<frameset>....</frameset>
b) 属性
cols: 使用“像素数”和%分割左右窗口,“*”表示剩余部分, 如果使用“*”,“*”表示框架平均分成2个, 如果使用“*”,“*”,“*”表示框架平均分成3个
rows: 使用“像素数”和%分割上下窗口,“*”表示剩余部分
frameborder: 指定是否显示边框,0不显示,1显示
border: 设置边框的大小,默认值5像素
c) <frame>子窗口标记
<frame>标记是一个单标记,该标记必须放在<frameset>中使用,在<frameset>中设置了几个窗口,就必须对应使用几个<frame>框架,而且还必须使用src属性指定一个网页
属性:
src: 加载网页文件的URL地址
name: 框架名称,是链接标记的target所要参数
noresize: 表示不能调整框架大小,没有设置时就可以调整
scrolling:是否需要滚动条
值: auto根据需要自动出现
Yes:有 no:无
Frameborder:是否需要边框
值:(1) 显示边框(0) 不显示边框
11.HTML表单设计(上)
1)表单标记
<form>...</form>
<form></form>定义表单的开始位置和结束位置,表单提交时的内容就是<form>表单中的内容
基本格式: <form action="服务器端地址(接受表单内容的地址)" name="表单名称" method="post|get">...</form>
常用属性:
name:表单名称
method:
post: post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理,没有数据大小限制
get: get方式提交时,会将表单的内容附加在URL地址的后面,所以限制了提交的内容的长度,不超过8192个字符,且不具备保密性
action: 表单数据的处理程序的URL地址,如果为空则使用当前文档的URL地址,如果表单中不需要使用action属性也要指定其属性为“no”
enctype: 设置表单的资料的编码方式
target: 和超链接的属于类似,用来指定目标窗口
2)文本域和密码
<input>标记: <input>标记没有结束标记
基本语法: <input type="" name=""value="" size="" maxlength="">
属性介绍:
type属性:
text: 当type="text"时,<input>表示一个文本输入域
password: 当type="password"时,<input>表示一个密码输入域
name属性: 定义控件的名称
value属性: 初始化值,打开浏览器时,文本框中的内容
size属性:设置控件的长度
maxlength: 输入框中最大允许输入的字符数
3) 提交、重置、普通按钮
1.提交按钮:当<input type="submit">时,为提交按钮
2.重置按钮:当<inputtype="reset">时,为重置按钮
3.普通按钮:当<inputtype="button">时,为普通按钮
4)单选框和复选框
单选按钮:当<inputtype="radio">时,为单选按钮
复选按钮:当<inputtype="checkbox">时,为复选框
注意: 单选框和复选框都可以使用”cheked“属性来设置
默认选中项
5)隐藏域
当<input type="hidden">时,为隐藏表单域
6)多行文本域
使用<textarea>标记可以实现一个,能够输入多行文本的区域
语法格式: <textarea name="name"rows="value" cols="value" value="value"> ...... <textarea>
rows属性和cols属性分别用来指定,显示的行数和列数,单位是字符个数
7)菜单下拉列表域
<select>标记
语法格式:
<selectname="" size="value" multiple>
<option value="value"selected>选项1</option>
<optionvalue="value">选项2</option>
<optionvalue="value">选项3</option>
...... ...
</select>
属性:
multiple属性: multiple属性不用赋值,其作用是,表示用可以多选的下来列表,如果没有这个属性就只能单选
size属性: 设置列表的高度
name属性:定义列表的名称
option标记:
<option>标记用来指定列表中的一个选项,需要放在<select></select>之间
值:
value: 给选项赋值,指定传送到服务器上面的值
selected: selected指定默认的选项
13.使用CSS样式的方式
1) HTML<!DOCTYPE> 声明标签
a.定义和用法
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中,<!DOCTYPE>声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML,所以不需要引用 DTD。
b.各版本声明
HTML5:
<!DOCTYPEhtml>
<metacharset="utf-8">
HTML 4.01:
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
<meta http-equiv=Content-Typecontent="text/html;charset=utf-8">
注意的规则:
单标记必须闭合比如<br>必须写为<br /> <input />
单属性必须添加属性值:<input typr="radio" checked >必须写为<input typr="radio" checked="checked" />
标记和属性必须使用小写:<Body><BODY>是错的必须写为<body>
属性的属性值必须使用"":在HTML4.01之前可以使用<body bgcolor=red>,HTML4.01必须写为<bodybgcolor="red">
2) CSS层叠样式表
内嵌样式表:<bodystyle="background-color:green; margin:0; padding:0;"></body>
嵌入样式表: <style type="text/css"></style>,需要将样式放在<head></head>中
引入式样式表: <link rel="StyleSheet"type="text/css" href="style.css">
14.定义CSS样式(CSS选择器)
Ø HTML标记定义
p>...</p>
p { 属性:属性值 ;属性1:属性值1 }
p可以叫做选择器,定义那个标记中的内容执行其中的样式
一个选择器可以控制若干个样式属性,他们之间需要用英语的“;”隔开,最后一个可以不应加“;”
Ø Class定义
<p class="p">...</p>
class定义是以“.”开始
.p { 属性:属性值 ;属性1:属性值1 }
Ø ID定义
<p id="p">...</p>
ID定义是“#”开始的
#p { 属性:属性值 ;属性1:属性值1 }
Ø 优先级问题
ID>Class>HTML
同级时选择离元素最近的一个的
Ø 组合选择器(同时控制多个元素)
h1,h2,h3 { font-size: 14px; color: red; }
选择器组合可以使用“,”隔开
Ø 伪元素选择器
1.a:link 正常连接的样式
2.a:hover鼠标放上去的样式
3.a:active选择链接时的样式
4.a:visited已经访问过的链接的样式
15.CSS常用属性(颜色属性)
颜色属性
color属性定义文本的颜色
color:green
color:#ff6600 简写成color:#f60
color:rgb(255,255,255)
红(R)、绿(G)、蓝(B) 每个的取值范围0~255
color:rgba(255,255,255,1)
RGBA是代表Red(红色) Green(绿色)Blue(蓝色)和 Alpha的(色彩空间)透明度
16.CSS常用属性(字体属性)
1.font-size 字体大小font-size:14px
2.font-family 定义字体font-family:微软雅黑,serif;
可以使用“,”隔开,以确保当字体不存在的时候直接使用下一个
3.font-weight 字体加粗normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细) 100、200、300~900 400 = normal,而 700 = bold
17.CSS常用属性(背景相关属性)
1.背景颜色 background-color
2.背景图片 background-image background-image:url(图片路径)background-image:none
3.背景重复 background-repeat
repeat 重复平铺满
repeat-x向Y轴重复
repeat-y向Y轴重复
no-repeat不重复
4.背景位置background-position
横向(left,center,right)
纵向(top,center,bottom)
简写方式background:背景颜色 url(图像) 重复 位置background:#f60 url(images/bg,jpg)no-repeat top center
18.CSS常用属性(文本属性)
1)text-align:横向排列left,center,right
2) line-height 文本行高
%基于字体大小的百分比行高
数值 来设置固定值
3)text-indent 首行缩进
4)letter-spacing 字符间距
normal 默认,length设置具体的数值(可以设置负值),inherit 继承
19.CSS常用属性(边框属性)
1)边框属性
a.边框风格 border-style
统一风格(简写风格)border-style
单独定义某一方向的边框样式
ü border-bottom-style 下边边框样式
ü border-top-style 上边边框样式
ü border-left-style 左边边框样式
ü border-right-style 右边边框样式
边框风格样式的属性值
u none 无边框
u solid 直线边框
u dashed 虚线边框
u dotted 点状边框
u double 双线边框
u groove 凸槽边框
u ridge 垄状边框
u inset inset边框
u outset outset边框
u inherit继承
依托border-color的属性值:(6、groove 凸槽边框, 7、ridge 垄状边框, 8、insetinset边框, 9、outset outset边框)
b)边框宽度 border-width
n 统一风格 border-width:
n 单独风格:
u border-top-width 上边边框宽度
u border-bottom-width 下边边框宽度
u border-left-width 左边边框宽度
u border-right-width 右边边框宽度
n 边框宽度的属性值:
u 1、thin 细边框
u 2、medium 中等边框
u 3、thick 粗边框
u 4、px 固定值的边框
u 5、inherit继承
c)边框颜色 border-color
n 统一风格border-color
n 单独风格
u border-top-color 上边边框颜色
u border-bottom-color 下边边框颜色
u border-left-color 左边边框颜色
u border-right-color 右边边框颜色
n 属性值
u 颜色值的名称red、green
u RGB rgb(255,255,0)
u RGBA rgba(255,255,0,0.1)
u 十六位进制 #ff0、#ff0000
u 继承inherit
n 属性值的四种情况
一个值:border-color:(上、下、左、右);
两个值:border-color:(上下) (左右);
三个值:border-color:(上) (左、右) (下);
四个值:border-color:(上)(右)(下)(左);
简写方式border:solid2px #f60
20.CSS常用属性(列表属性)
1)标记的类型 list-style-type:
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b,c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B,C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
2)标记的位置 list-style-position
ü inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
ü outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
ü inherit 规定应该从父元素继承 list-style-position 属性的值。
3)设置图像列表标记 list-style-image
ü URL 图像的路径。
ü none 默认。无图形被显示。
ü inherit 规定应该从父元素继承 list-style-image 属性的值。
4)简写方式 list-style
list-style:square inside url('/i/arrow.jpg');
21.div+CSS布局(div+span以及盒模型)
1)div和span
DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式
DIV和span的区别在与,span是内联元素,div是块级元素
2)盒模型
margin:盒子外边距
padding:盒子内边距
border:盒子边框宽度
width:盒子宽度
height:盒子高度
22.div+CSS布局(布局相关的属性)
1)position的定位方式
正常定位:relative
绝对定位:根据父元素进行定位
根据浏览器窗口进行定位:fixed
没有定位:static
继承: inherit
2)定位
left(左),right(右),top(上),bottom(下)离页面顶点的距离
3)z-index
z-index层覆盖先后顺序(优先级),值越大,显示的层则在最上面
4)display显示属性
display:none 不显示
display:block: 块状显示,在元素后面换行,显示下一个块元素
display:inline 内联显示,多个块可以显示在一行内
23.div+css布局(浮动及溢出处理)
1)float浮动属性
Left:左浮动,right:右浮动
2)clear清除浮动
clear: both
3)overflow溢出处理
hidden 隐藏超出层大小的内容
scroll无论内容是否超出层大小都添加滚动条
auto 超出时自动添加滚动条
24.IE兼容性测试工具与高效开发工具
1) 兼容性测试工具
IE Tester
Multibrowser
2)常用浏览器
Google chrome、Firefox、opera
3)高效开发工具
轻量级的: Notepad++、sbulimeText、记事本
重量级的: WebStorm、Dreamweaver
以上工具根据自己喜好选择
4)网页设计工具
Fireworks、photoshop
5)判断IE的方法
条件判断格式:<!--[if 条件 版本]> 那么显示 <![endif]-->
不等于:[if !IE 8] 除了IE8都可以显示
小于 [if lt IE 5.5] 如果IE浏览器版本小于5.5的显示
大于 [if gt IE 5] 如果IE浏览器版本大于5的显示
小于或者等于 [if lte IE 6] 如果IE浏览器版本小于6的显示
大于或等于 [if gte IE 7]如果IE浏览器版本小于7的显示
大于和小于之间 [if (gt IE 5)&(lt IE 7)] 如果IE浏览器版本大于IE5小于7的显示
或[if (IE 6)|(IE 7)] 如果是IE6或者IE7显示
仅<!--[if IE 8]> 如果是IE8
注意:条件注释只有在IE浏览器下才能执行,这样就达到了我们的效果!
(条件判断格式, 不等于, 小于, 大于, 小于或者等于, 大于或等于, 大于和小于之间, 或, 仅)
25.实战项目(麦子商城)
2.HTML的语法
1)什么是HTML标记语言
表示网页信息的符号标记语言。
特点:
l 可以设置文本的格式、比如标题、字号、文字颜色、段落等
l 可以创建列表
l 可以插入图像和媒体
l 可以创建表格
l 超链接、可以使用鼠标点击超链接来 首先页面之间的跳转。
2)HTML的标记和它的属性
HTML文档的保存格式:.html,.htm,.html
标记和被标记的内容构建出HTML文档格式:<标记>内容</标记>
标记的属性:用来控制我们的内容(图像、文本等的)如何的显示
标记的属性格式:<标记 属性1=属性值 属性2=属性值 属性3=属性值>内容</标记>,例如<body bgcolor=’red’>内容</body>以上的属性是用来控制我们的网页的背景颜色,bgcolor就是body的属性,它的值是red(红色)
3)语法不区分大小写<html>、<HTML>都是定义相同的标记,但是在编写网页的时候尽量使用小写
4)文档的注释:注释一段内容时使用<!—“开始”,以”--!>”结束
例如<!—就是这个网页的作者,我的名字叫大神--!>
5)代码格式:空格键和回车键在网页中都不会起到任何效果,我们是为了让清晰易读,可以使用空格和回车键进行编排。注意缩进时保持严格的规则,“Tab”键进行缩进。
6)字符实体:比如我们想在网页中显示一个“<”小于符号,但是“<”在HTML中是文档标记的开始语言,如果我们没有直接使用“<”会出现差错,所以我们会用一些实体名称来代替。常见的字符实体如图
注意:实体名称对大小写敏感!
3.HTML的基本结构
a) <html>内容</html>:HTML文档的文档标记,也称为HTML的开始标记。位于网页的最前端和最后端。<html>在最前端表示网页的开始,</html>在最后端表示网页的结束
b) <head>内容</head>:HTML文件头标记,也称为HTML头信息开始标记。用来包含文件的基本信息,比如网页的标题、关键字、在<head></head>内可以放<title></title>,<meta></meta>,<style></style>等等标记。注意在<head></head>标记内的内容在浏览器中显示
c) <title>内容</title>:HTML文件的标题标记。网页的主题,显示在浏览器窗口的左上边。注意;网页的标题不能过长,要短小精悍,能具体反应页面的内容,<title></title>标记中不能包含其他标记。
d) <body></body>:html文档的主题标记。<body>..</body>是网页的主体部分,在此标记之间可以包含<p></p>,<h1></h1>、<hr/>,等标记,正是由这些内容构成我们所见的网页。
body标记的常见属性:
1. bgcolor:设置背景颜色 <bodybgcolor=“red”></body>
2. text:设置文本颜色 <body text =“green”></body>
3. link:设置链接颜色 <body link =“blue”></body>
4. vlink:已经访问了的链接颜色 <bodybgcolor=“yellow”></body>
5. alink:正是被点击的链接颜色 <body alink=“red”></body>
6)<meta>内容</meta>:页面的元信息(meta-information)提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。必须的属性: content 值:some_text 定义与http-equiv 或 name 属性相关的元信息。
常见的name属性:author、keywords、description、others都是把content关联到一个名称,比如描绘出网页的关键词:<meta name="keywords" content="麦子学院,IT在线培训">
注意: 注意meta标记必须放在head元素里面
4.HTML的文档设置标记上(格式标记)
<br />:强制换行标记。让后面的文字、图片、表格等等,显示在下一行
<p>:换段落标记。换段落,由于多个空格和回车在HTML中会被等效为一个空格,所以HTML中要换段落就要用<p>,<p>段落中也可以包含<p>段落!
<center>:居中对齐标记. 让段落或者是文字相对于父标记居中显示
<pre>:预格式化标记. 保留预先编排好的格式
<li>:列表项目标记。每一个列表使用一个<li>标记
<ul>:无序列表标记。<ul>声明这个列表没有序号
<ol>:有序列表标记。可以显示特定的一些顺序。
格式: <ol type="符号类型">
<litype="符号类型"></li>
<litype="符号类型"></li>
</ol>
有序列表的type属性值
1 阿拉伯数字1.2.3等等,默认type属性值
A 大小字母A、B、C等等
a 小写字母a、b、c等等
Ⅰ 大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
ⅰ 小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等
Value 指定一个新的序列数字起始值
列表可以进行嵌套
<dl><dt><dd>:使用场所:对列表条目进行简短的说明
格式:
<dl>
<dt>软件说明</dt>
<dd>简单介绍软件的功能及基本应用</dd>
<dt>软件界面</dt>
<dd>用于选择软件的外观</dd>
</dl>
<hr />:水平线分割标记。段落之间的分割线
<div>:分区显示标记,也称之为层标记。常用来编排一大段的HTML段落,也可以用于格式化表,和<p>很相似。层可以多层嵌套使用。
5.html的文档设置标记下(文本标记)
1) Hn:段落标记。共有6个级别,n的范围1~6,不同级别对应显示大小不同的标题,h1最大,h6最小
2) Font:字体设置标记.设置字体的格式的三个常用属性。
a) .size(字体大小) <fontsize="14px">
b) color(颜色) <font color="red">
c) face(字体) <font face="微软雅黑">
3) b:粗字体标记
4) I 斜字体标记
5) Sub文字下标字体标记
6) Sup文件上标字体标记
7) tt打印字体标记
8) cite引用方式的字体,通常是斜体
9) em表示强调,通常显示为斜体字
10)strong 表示强调,通常显示为粗体字
11)small 小型字体标记
12)big 大型字体标记
13)u 下划线字体标记
6.HTML图像标记
1)使用方法
<img src="路径/文件名.图片格式"width="属性值" height="属性值" border="属性值" alt="属性值">
2) <img>标记的属性
src属性: 指定我们要加载的图片的路径和图片的名称以及图片格式
width属性: 指定图片的宽度,单位px、em、cm、mm
height属性: 指定图片的高度,单位px、em、cm、mm
border属性: 指定图标的边框宽度,单位px、em、cm、mm
alt属性:
当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字
如果图像没有下载或者加载失败,会用文字来代替图像显示
搜索引擎可以通过这个属性的文字来抓取图片
注意:<img>为单标记,不需要使用</img>闭合, 在加载图像文件的时候,文件的路径或者文件名文件格式错误,将无法加载图片.
7.html超链接的使用
1)基本语法
<a href="" target="打开方式" name="页面锚点名称" >链接文字或者图片</a>
2)属性
Href属性: 链接的地址,链接的地址可以是一个网页,也可以是一个视频、图片、音乐等等
Target属性: 定义超链接的打开方式。
属性值:
_blank 在一个新的窗口中打开链接
seif(默认值) 在当前窗口中打开链接
_parent 在父窗口中打开页面(框架中使用较多)
_top 在顶层窗口中打开文件(框架中使用较多)
name属性:指定页面的锚点名称
<ahref="http://www.baidu.com">百度</a><!--外部链接-->
<!--
<ahref="demo2.html" target="_blank">demo2的页面</a>-->
<ahref="#dibu">到页面底部</a>
<ahref="#zhongbu">到中部</a>
<aname="dingbu"></a>
<ahref="http://www.baidu.com" target="_blank"><imgsrc="https://www.baidu.com/img/bdlogo.png"></a>
<a href="#dingbu">到页面顶部</a>
<a href="#zhongbu">到中部</a>
8.html表格相关的标记
1.表格的基本结构
1)<table>标记
基本格式:<table 属性1="属性值1" 属性2="属性值2" ... ... >表格内容</table>
2.table标记的属性
a) width属性:表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分百(%)
b) height属性:表示表格的高度,他的值可以是像素(px)也可以是父级元素的百分百(%)
c) border属性:表示表格外边框的宽度
d) align属性:表格的显示位置
值left 居左显示 center居中显示 right居右显示
默认值left
e) cellspacing属性:单元格之间的间距,默认是2px,单位像素
f) cellpadding属性:单元格内容与单元格边框的显示距离,单位像素
g) frame属性
1.作用
控制表格边框最外层的四条线框
2.属性值
1.void(默认值) 表示无边框
2.above 表示仅顶部有边框
3.below 表示仅有底部边框
4.hsides表示仅有顶部边框和底部边框
5.lhs表示仅有左侧边框
6.rhs表示仅有右侧边框
7.vsides表示仅有左右侧边框
8.box包含全部4个边框
9.border包含全部4个边框
h) rules属性
1.作用
控制是否显示以及如何显示单元格之间的分割线
2.属性值
1.none(默认值) 表示无分割线
2.all表示包括所有分割线
3.rows表示仅有行分割线
4.clos表示仅有列分割线
5.groups表示仅在行组和列组之间有分割线
2)<caption>标记
1.什么时候使用
什么时候使用如果表格需要使用标题,那么就可以使用<caption>标记
2.如何正确使用
<caption>属性的插入位置,直接位于<table>属性之后,<tr>表格行之前
align属性
属性值
1.top标题放在表格的上部
2.bottom标题放在表格的下部
3.left标题放在表格的左部
4.right标题放在表格的右部
3)<tr>标记
定义表格的一行,对于每一个表格行,都是由一对<tr>...</tr>标记表示,每一行<tr>标记内可以嵌套多个<td>或者<th>标记
可选属性
1.bgcolor属性 设置背景颜色
格式 bgcolor="颜色值"
2.align属性
设置垂直方向对齐方式
格式align="值"
值
1.bottom靠顶端对齐
2.top 靠底部对齐
3.middle 居中对齐
3.valign属性 设置水平方向对齐方式
格式
valign="值"
值
1.left靠左对齐
2.right靠右对齐
3.center居中对齐
4)<td>和<th>
1.<td>和<th>都是单元格的标记,其必须嵌套在<tr>标签内,是成对出现
2.两者的区别
<th>是表头标记,通常位于首行或者首列,<th>中的文字默认会被加粗,而<td>不会
<td>是数据标记,表示该单元格的具体数据
3.共同之处
两者的标记属性都是一样的
4.属性
bgcolor 设置单元格背景
align 设置单元格对齐方式
valign 设置单元格垂直对齐方式
width 设置单元格宽度
height 设置单元格高度
rowspan 设置单元格所占行数
colspan 设置单元格所占列数
9.HTML表格实战《简单的表格布局》
10.HTML框架详解与框架布局实战
1)什么是框架
框架将浏览器划分成不同的部分,每一部分加载不同的网页,实现在同一浏览器窗口中加载多个页面的效果
2) <frameset>划分框架标记
a) 语法格式
<frameset>....</frameset>
b) 属性
cols: 使用“像素数”和%分割左右窗口,“*”表示剩余部分, 如果使用“*”,“*”表示框架平均分成2个, 如果使用“*”,“*”,“*”表示框架平均分成3个
rows: 使用“像素数”和%分割上下窗口,“*”表示剩余部分
frameborder: 指定是否显示边框,0不显示,1显示
border: 设置边框的大小,默认值5像素
c) <frame>子窗口标记
<frame>标记是一个单标记,该标记必须放在<frameset>中使用,在<frameset>中设置了几个窗口,就必须对应使用几个<frame>框架,而且还必须使用src属性指定一个网页
属性:
src: 加载网页文件的URL地址
name: 框架名称,是链接标记的target所要参数
noresize: 表示不能调整框架大小,没有设置时就可以调整
scrolling:是否需要滚动条
值: auto根据需要自动出现
Yes:有 no:无
Frameborder:是否需要边框
值:(1) 显示边框(0) 不显示边框
11.HTML表单设计(上)
1)表单标记
<form>...</form>
<form></form>定义表单的开始位置和结束位置,表单提交时的内容就是<form>表单中的内容
基本格式: <form action="服务器端地址(接受表单内容的地址)" name="表单名称" method="post|get">...</form>
常用属性:
name:表单名称
method:
post: post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理,没有数据大小限制
get: get方式提交时,会将表单的内容附加在URL地址的后面,所以限制了提交的内容的长度,不超过8192个字符,且不具备保密性
action: 表单数据的处理程序的URL地址,如果为空则使用当前文档的URL地址,如果表单中不需要使用action属性也要指定其属性为“no”
enctype: 设置表单的资料的编码方式
target: 和超链接的属于类似,用来指定目标窗口
2)文本域和密码
<input>标记: <input>标记没有结束标记
基本语法: <input type="" name=""value="" size="" maxlength="">
属性介绍:
type属性:
text: 当type="text"时,<input>表示一个文本输入域
password: 当type="password"时,<input>表示一个密码输入域
name属性: 定义控件的名称
value属性: 初始化值,打开浏览器时,文本框中的内容
size属性:设置控件的长度
maxlength: 输入框中最大允许输入的字符数
3) 提交、重置、普通按钮
1.提交按钮:当<input type="submit">时,为提交按钮
2.重置按钮:当<inputtype="reset">时,为重置按钮
3.普通按钮:当<inputtype="button">时,为普通按钮
4)单选框和复选框
单选按钮:当<inputtype="radio">时,为单选按钮
复选按钮:当<inputtype="checkbox">时,为复选框
注意: 单选框和复选框都可以使用”cheked“属性来设置
默认选中项
5)隐藏域
当<input type="hidden">时,为隐藏表单域
6)多行文本域
使用<textarea>标记可以实现一个,能够输入多行文本的区域
语法格式: <textarea name="name"rows="value" cols="value" value="value"> ...... <textarea>
rows属性和cols属性分别用来指定,显示的行数和列数,单位是字符个数
7)菜单下拉列表域
<select>标记
语法格式:
<selectname="" size="value" multiple>
<option value="value"selected>选项1</option>
<optionvalue="value">选项2</option>
<optionvalue="value">选项3</option>
...... ...
</select>
属性:
multiple属性: multiple属性不用赋值,其作用是,表示用可以多选的下来列表,如果没有这个属性就只能单选
size属性: 设置列表的高度
name属性:定义列表的名称
option标记:
<option>标记用来指定列表中的一个选项,需要放在<select></select>之间
值:
value: 给选项赋值,指定传送到服务器上面的值
selected: selected指定默认的选项
13.使用CSS样式的方式
1) HTML<!DOCTYPE> 声明标签
a.定义和用法
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中,<!DOCTYPE>声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML,所以不需要引用 DTD。
b.各版本声明
HTML5:
<!DOCTYPEhtml>
<metacharset="utf-8">
HTML 4.01:
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
<meta http-equiv=Content-Typecontent="text/html;charset=utf-8">
注意的规则:
单标记必须闭合比如<br>必须写为<br /> <input />
单属性必须添加属性值:<input typr="radio" checked >必须写为<input typr="radio" checked="checked" />
标记和属性必须使用小写:<Body><BODY>是错的必须写为<body>
属性的属性值必须使用"":在HTML4.01之前可以使用<body bgcolor=red>,HTML4.01必须写为<bodybgcolor="red">
2) CSS层叠样式表
内嵌样式表:<bodystyle="background-color:green; margin:0; padding:0;"></body>
嵌入样式表: <style type="text/css"></style>,需要将样式放在<head></head>中
引入式样式表: <link rel="StyleSheet"type="text/css" href="style.css">
14.定义CSS样式(CSS选择器)
Ø HTML标记定义
p>...</p>
p { 属性:属性值 ;属性1:属性值1 }
p可以叫做选择器,定义那个标记中的内容执行其中的样式
一个选择器可以控制若干个样式属性,他们之间需要用英语的“;”隔开,最后一个可以不应加“;”
Ø Class定义
<p class="p">...</p>
class定义是以“.”开始
.p { 属性:属性值 ;属性1:属性值1 }
Ø ID定义
<p id="p">...</p>
ID定义是“#”开始的
#p { 属性:属性值 ;属性1:属性值1 }
Ø 优先级问题
ID>Class>HTML
同级时选择离元素最近的一个的
Ø 组合选择器(同时控制多个元素)
h1,h2,h3 { font-size: 14px; color: red; }
选择器组合可以使用“,”隔开
Ø 伪元素选择器
1.a:link 正常连接的样式
2.a:hover鼠标放上去的样式
3.a:active选择链接时的样式
4.a:visited已经访问过的链接的样式
15.CSS常用属性(颜色属性)
颜色属性
color属性定义文本的颜色
color:green
color:#ff6600 简写成color:#f60
color:rgb(255,255,255)
红(R)、绿(G)、蓝(B) 每个的取值范围0~255
color:rgba(255,255,255,1)
RGBA是代表Red(红色) Green(绿色)Blue(蓝色)和 Alpha的(色彩空间)透明度
16.CSS常用属性(字体属性)
1.font-size 字体大小font-size:14px
2.font-family 定义字体font-family:微软雅黑,serif;
可以使用“,”隔开,以确保当字体不存在的时候直接使用下一个
3.font-weight 字体加粗normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细) 100、200、300~900 400 = normal,而 700 = bold
17.CSS常用属性(背景相关属性)
1.背景颜色 background-color
2.背景图片 background-image background-image:url(图片路径)background-image:none
3.背景重复 background-repeat
repeat 重复平铺满
repeat-x向Y轴重复
repeat-y向Y轴重复
no-repeat不重复
4.背景位置background-position
横向(left,center,right)
纵向(top,center,bottom)
简写方式background:背景颜色 url(图像) 重复 位置background:#f60 url(images/bg,jpg)no-repeat top center
18.CSS常用属性(文本属性)
1)text-align:横向排列left,center,right
2) line-height 文本行高
%基于字体大小的百分比行高
数值 来设置固定值
3)text-indent 首行缩进
4)letter-spacing 字符间距
normal 默认,length设置具体的数值(可以设置负值),inherit 继承
19.CSS常用属性(边框属性)
1)边框属性
a.边框风格 border-style
统一风格(简写风格)border-style
单独定义某一方向的边框样式
ü border-bottom-style 下边边框样式
ü border-top-style 上边边框样式
ü border-left-style 左边边框样式
ü border-right-style 右边边框样式
边框风格样式的属性值
u none 无边框
u solid 直线边框
u dashed 虚线边框
u dotted 点状边框
u double 双线边框
u groove 凸槽边框
u ridge 垄状边框
u inset inset边框
u outset outset边框
u inherit继承
依托border-color的属性值:(6、groove 凸槽边框, 7、ridge 垄状边框, 8、insetinset边框, 9、outset outset边框)
b)边框宽度 border-width
n 统一风格 border-width:
n 单独风格:
u border-top-width 上边边框宽度
u border-bottom-width 下边边框宽度
u border-left-width 左边边框宽度
u border-right-width 右边边框宽度
n 边框宽度的属性值:
u 1、thin 细边框
u 2、medium 中等边框
u 3、thick 粗边框
u 4、px 固定值的边框
u 5、inherit继承
c)边框颜色 border-color
n 统一风格border-color
n 单独风格
u border-top-color 上边边框颜色
u border-bottom-color 下边边框颜色
u border-left-color 左边边框颜色
u border-right-color 右边边框颜色
n 属性值
u 颜色值的名称red、green
u RGB rgb(255,255,0)
u RGBA rgba(255,255,0,0.1)
u 十六位进制 #ff0、#ff0000
u 继承inherit
n 属性值的四种情况
一个值:border-color:(上、下、左、右);
两个值:border-color:(上下) (左右);
三个值:border-color:(上) (左、右) (下);
四个值:border-color:(上)(右)(下)(左);
简写方式border:solid2px #f60
20.CSS常用属性(列表属性)
1)标记的类型 list-style-type:
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b,c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B,C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
2)标记的位置 list-style-position
ü inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
ü outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
ü inherit 规定应该从父元素继承 list-style-position 属性的值。
3)设置图像列表标记 list-style-image
ü URL 图像的路径。
ü none 默认。无图形被显示。
ü inherit 规定应该从父元素继承 list-style-image 属性的值。
4)简写方式 list-style
list-style:square inside url('/i/arrow.jpg');
21.div+CSS布局(div+span以及盒模型)
1)div和span
DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式
DIV和span的区别在与,span是内联元素,div是块级元素
2)盒模型
margin:盒子外边距
padding:盒子内边距
border:盒子边框宽度
width:盒子宽度
height:盒子高度
22.div+CSS布局(布局相关的属性)
1)position的定位方式
正常定位:relative
绝对定位:根据父元素进行定位
根据浏览器窗口进行定位:fixed
没有定位:static
继承: inherit
2)定位
left(左),right(右),top(上),bottom(下)离页面顶点的距离
3)z-index
z-index层覆盖先后顺序(优先级),值越大,显示的层则在最上面
4)display显示属性
display:none 不显示
display:block: 块状显示,在元素后面换行,显示下一个块元素
display:inline 内联显示,多个块可以显示在一行内
23.div+css布局(浮动及溢出处理)
1)float浮动属性
Left:左浮动,right:右浮动
2)clear清除浮动
clear: both
3)overflow溢出处理
hidden 隐藏超出层大小的内容
scroll无论内容是否超出层大小都添加滚动条
auto 超出时自动添加滚动条
24.IE兼容性测试工具与高效开发工具
1) 兼容性测试工具
IE Tester
Multibrowser
2)常用浏览器
Google chrome、Firefox、opera
3)高效开发工具
轻量级的: Notepad++、sbulimeText、记事本
重量级的: WebStorm、Dreamweaver
以上工具根据自己喜好选择
4)网页设计工具
Fireworks、photoshop
5)判断IE的方法
条件判断格式:<!--[if 条件 版本]> 那么显示 <![endif]-->
不等于:[if !IE 8] 除了IE8都可以显示
小于 [if lt IE 5.5] 如果IE浏览器版本小于5.5的显示
大于 [if gt IE 5] 如果IE浏览器版本大于5的显示
小于或者等于 [if lte IE 6] 如果IE浏览器版本小于6的显示
大于或等于 [if gte IE 7]如果IE浏览器版本小于7的显示
大于和小于之间 [if (gt IE 5)&(lt IE 7)] 如果IE浏览器版本大于IE5小于7的显示
或[if (IE 6)|(IE 7)] 如果是IE6或者IE7显示
仅<!--[if IE 8]> 如果是IE8
注意:条件注释只有在IE浏览器下才能执行,这样就达到了我们的效果!
(条件判断格式, 不等于, 小于, 大于, 小于或者等于, 大于或等于, 大于和小于之间, 或, 仅)
25.实战项目(麦子商城)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>麦子学院</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="header"> <div class="top"> <div class="wp"> <div class="z"> <span><a href="#">设为首页</a></span> <span><a href="#">收藏本站</a></span> </div> <div class="y"> <span>2015年5月1日</span> <span class="mr_0">多云16°/30°</span> </div> </div> </div> <div class="wp"> <div class="logos"> <div class="logo z"> <h1><a href="index.html"><img src="img/logo.jpg" alt="HTML+CSS实战" /></a></h1> </div> <div class="dianhua y"> <span>客服热线:400-000-000</span> </div> <div class="sousuo y"> <form action="index.html" method="get"> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td class="s_z z"></td> <td class="s_c z"> <input type="text" name="text" id="s_c_txt" /> </td> <td class="s_y z"> <button type="submit" name="submit"></button> </td> </tr> </tbody> </table> </form> </div> </div> </div> <div class="nav"> <div class="wp"> <ul> <li class="a"> <a href="index.html">网站首页</a> </li> <li> <a href="index.html">公司简介</a> </li> <li> <a href="index.html">业务描述</a> </li> <li> <a href="index.html">服务范围</a> </li> <li> <a href="index.html">产品中心</a> </li> <li> <a href="index.html">人才管理</a> </li> <li> <a href="index.html">在线留言</a> </li> <li> <a href="index.html">联系我们</a> </li> </ul> </div> </div> </div> <div class="center"> <div class="wp"> <div class="ad"> <img src="img/ad.jpg" alt="" /> </div> <div class="jianjie z"> <div class="tit"> <img src="img/jianjie.jpg" alt="" /> <span><a href="">More</a></span> </div> <div class="jj_c"> <img src="img/jianjie_img.jpg" alt="" /> <p> 麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台,目前已有30万注册用户,10万以上APP下载量,5000小时视频内容。 我们从不说空话,专注于IT在线教育,脱离传统教育的束缚,让你走哪学哪,想学就学。逗比的老师,贴心的助教,在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度! </p> <p> 什么都不会没关系,想跳槽想加薪都可以,提升自己更不在话下。 只要你愿意,绝对为你找到一份相当靠谱的工作!成就你,我能行! </p> <p> 那么多的梦想,你不想实现?买的起大奔的人会天天挤公交吗? 想成为成功人士,脑袋里必须要有知识。一切不以要付出为目的的梦想都是耍流氓! LPS系统、每周直播课、学习作业快速批改、保就业、班主任助教全程跟踪。 你看,离你完成梦想的道路是不是近了很多。 </p> </div> </div> <div class="xinwen z"> <div class="tit"> <img src="img/xinwen.jpg" alt="" /> <span><a href="">More</a></span> </div> <div class="xw_c"> <ul> <li class="a"> <a href=""> <img src="img/list_img.jpg" alt="" /> <h3>Web前端开发之HTML+CSS基础入门</h3> <p>麦子学院朱朝兵老师带领大家从HTML语法,基本结构到CSS入门DIV+Css布局,通俗易懂 ... ...</p> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> </ul> </div> </div> <div class="chanpin z"> <div class="tit"> <img src="img/chanpin.jpg" alt="" /> <span><a href="">More</a></span> </div> <div class="cp_c"> <ul> <li><a href=""><img src="img/chanpin_img.jpg" alt="" /><span>Web前端开发之HTML+CSS基础入门</span></a></li> <li><a href=""><img src="img/chanpin_img.jpg" alt="" /><span>Web前端开发之HTML+CSS基础入门</span></a></li> <li><a href=""><img src="img/chanpin_img.jpg" alt="" /><span>Web前端开发之HTML+CSS基础入门</span></a></li> <li><a href=""><img src="img/chanpin_img.jpg" alt="" /><span>Web前端开发之HTML+CSS基础入门</span></a></li> <li><a href=""><img src="img/chanpin_img.jpg" alt="" /><span>Web前端开发之HTML+CSS基础入门</span></a></li> <li class="mr_0"><a href=""><img src="img/chanpin_img.jpg" alt="" /><span>Web前端开发之HTML+CSS基础入门</span></a></li> <li><a href=""><img src="img/chanpin_img.jpg" alt="" /><span>Web前端开发之HTML+CSS基础入门</span></a></li> <li><a href=""><img src="img/chanpin_img.jpg" alt="" /><span>Web前端开发之HTML+CSS基础入门</span></a></li> <li><a href=""><img src="img/chanpin_img.jpg" alt="" /><span>Web前端开发之HTML+CSS基础入门</span></a></li> <li><a href=""><img src="img/chanpin_img.jpg" alt="" /><span>Web前端开发之HTML+CSS基础入门</span></a></li> <li><a href=""><img src="img/chanpin_img.jpg" alt="" /><span>Web前端开发之HTML+CSS基础入门</span></a></li> <li class="mr_0"><a href=""><img src="img/chanpin_img.jpg" alt="" /><span>Web前端开发之HTML+CSS基础入门</span></a></li> </ul> </div> </div> </div> </div> <div class="cl"></div> <div class="footer"> <div class="wp"> <div class="footer_top"> <span class="z"> <a href="">关于我们</a> | <a href="">联系我们</a> | <a href="">加入我们</a> | <a href="">给我留言</a> </span> <span class="y"> © 2015 麦子学院版权所有 ICP证:蜀ICP备13000000号-1 </span> </div> <div class="footer_bottom"> <p> 友情连接:<a href="http://www.maiziedu.com" target="_blank">麦子学院</a><a href="http://www.dz7.com.cn" target="_blank">DZ起点网</a><a href="http://www.maiziedu.com" target="_blank">麦子学院</a><a href="http://www.maiziedu.com" target="_blank">教育部</a><a href="http://www.maiziedu.com" target="_blank">新闻网</a> </p> </div> </div> </div> </body> </html> Style.css *{margin:0;padding:0} body{font:14px/24px 'Microsoft YaHei','宋体’.'"Helvetica Neue",Helvetica,Arial,sans-serif''} .wp{width:960px;margin:0 auto} .z{float:left} .y{float:right} .cl{clear:both} .mr_0{margin:0} img{border:none} .top{width:100%;height:24px;line-height:24px;background:#303030;color:#d8d8d8} .top span{margin-right:15px} .top span.mr_0{margin:0} .top a{color:#d8d8d8;text-decoration:none} .top a:hover{color:#f60} .logos{height:59px;margin:15px 0} .sousuo{width:330px;height:41px;margin-top:8px} .sousuo td{height:41px} .s_z{width:6px;background:url(../images/s_z.jpg) no-repeat} .s_c{width:240px;background:url(../images/s_c.jpg) repeat-x} .s_y{width:78px;background:url(../images/s_r.jpg) no-repeat} .s_c input{height:35px;line-height:35px;border:none;margin-top:2px;width:200px} .s_y button{width:78px;height:41px;background:0 0;border:0;cursor:pointer} .dianhua{height:59px;line-height:59px;margin-left:15px} .dianhua span{font-size:26px;color:#8b0000} .nav{height:39px;width:100%;background:url(../images/nav_bg.jpg) repeat-x} .nav li{list-style:none;float:left;line-height:39px;padding:0 28px} .nav li.a,.nav li:hover{background:url(../images/nav_hover.jpg) repeat-x} .nav a{color:#fff;font-size:16px;text-decoration:none} .ad{margin-bottom:10px} .tit{padding-bottom:8px;border-bottom:1px solid #8b0000;position:relative;margin-bottom:10px} .tit span{position:absolute;right:0;bottom:0} .tit a{color:#8b0000;text-decoration:none} .jianjie{width:540px;height:360px;margin-right:20px} .jj_c img{float:left;margin:0 10px 10px 0} .jj_c p{color:#616161;text-indent:24px} .xinwen{width:400px;height:360px} .chanpin{width:100%;height:300px} .xw_c li{list-style:none;height:24px;line-height:24px;position:relative;padding-left:15px;margin-bottom:6px;background:url(../images/list_bg.jpg) no-repeat center left} .xw_c li.a{background:0 0;padding:0;height:76px} .xw_c li img{float:left;margin:0 10px 10px 0} .xw_c span{position:absolute;right:0;bottom:0;font-size:12px;color:#888} .xw_c h3{font-weight:400;font-size:14px} .xw_c a{color:#616161;text-decoration:none} .xw_c p{font-size:12px;color:#888;text-indent:24px} .cp_c li{float:left;list-style:none;margin:0 10px 10px 0;width:151px;height:96px;overflow:hidden;position:relative} .cp_c span{display:none;position:absolute;bottom:0;left:0;font-size:14px;height:20px;width:131px;padding:0 10px;color:#fff;background:#8b0000;overflow:hidden} .cp_c li a:hover span{display:block} .cp_c li img{float:left} .cp_c li.mr_0{margin-right:0} .footer{height:103px;width:100%;background:url(../img/footer_bg.jpg) repeat-x} .footer_top{height:80px;line-height:80px;color:#fff} .footer_top .z{font-size:16px} .footer_top a{color:#fff;text-decoration:none} .footer_bottom p{color:#f60} .footer_bottom a{color:#888;text-decoration:none;margin-right:10px} .footer_bottom a:hover{color:#f60}
相关文章推荐
- 【从入门到放弃】WEB前端之HTML+CSS基础02
- Web前端开发精品课HTML CSS JavaScript基础教程第二十三章课后编程题答案
- Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
- 20150726 Web前端开发基础html+css
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
- 前端开发入门:html和css基础知识回顾
- 前端开发入门:html和css基础知识回顾2
- Web前端开发精品课HTML CSS JavaScript基础教程第四章课后编程题答案
- Web前端开发精品课HTML CSS JavaScript基础教程第六章课后编程题答案
- 【从入门到放弃】WEB前端之HTML+CSS基础01
- Web前端开发精品课HTML CSS JavaScript基础教程第九章课后编程题答案
- Web前端开发精品课HTML CSS JavaScript基础教程第十六章课后编程题答案
- Web前端开发基础 第一天(Html和CSS)
- 【麦子学院】03.web前端开发之HTML5+CSS3快速入门之基本HTML5元素介绍
- Web前端开发工具(html+css基础)
- Web前端开发精品课HTML CSS JavaScript基础教程第十三章课后编程题答案
- Web前端开发精品课HTML CSS JavaScript基础教程第五章课后编程题答案
- Web前端开发精品课HTML CSS JavaScript基础教程第十四章课后编程题答案
- Html与CSS快速入门02-HTML基础应用
- 学习网站开发必备推荐!30天学会HTML和CSS基础入门视频教程 (免费精品课程)