HTML和CSS课程
今日大纲
● 了解Java Web开发
● HTML常用标签
● CSS的使用
*************************************************************************************************
1. 了解Java Web开发
1.1 C/S 和 B/S程序的区别
1、C/S(Client----Server)程序就是在PC机上需要安装或者绿色版的程序。 QQ、WOW、LOL、CF。
2、B/S(Browser---Server)程序就在浏览器上运行的程序(网站)。Sina,baidu,yahoo
3、C/S程序需要安装,更新麻烦。
4、B/S不需要安装,不需要更新,浏览器刷新即可。
5、APP:Application 目前基本上用来专指手机上面的应用程序。
1.2 web阶段课程简介
1.2.1 第一部分
html:做网页
css:美化网页
javascript:操作网页上元素
xml:主要用于框架技术的配置文件
mysql:数据库,存放网站用户的数据
jdbc:用java语言来操作mysql
servlet:用java语言做网站
session和cookies:主要是用来做用户登录
1.2.2 第二部分
jsp:简化servlet
DBUtil:简化jdbc
jstl和el表达式:简化jsp
过滤器和监听器:增加网站功能
文件上传和下载:增加网站功能
国际化:让不同区域的客户端访问网站显示不同的语言
*************************************************************************************************
2. HTML快速入门
2.1 HTML的概念
HTML(Hyper Text Markup Language 超文本标识语言)
是w3c组织制定的一种用来制作超文本文档的简单标记语言。
w3c组织:万维网联盟。w3c制定了一些列的web相关规范(css,js,xml)。其中包括html。
官网:http://www.w3school.com.cn/ ,在官网中,可以去查看html的相关规范。
1、文本:txt中的内容?没有任何格式的普通的文字信息。普通的字符串。
2、超文本:在html中,通过标记(标签)把文本进行标记,它所展现出来的内容,不在仅仅是文本。可以有,图片,音频,超链接。
3、标记:标签。<标签名> ------标签名是w3c组织定义好的。而我们学习html,就是学习w3c已经定义好的标签。html就是由一系列的标签做组成的。浏览器会把不同的标签(标签名不同的)显示出不同的效果。
HTML文档
用HTML编写的超文本文档称为HTML文档。
HTML 文档包含了HTML 标签及文本内容(html文件本身就是一个文本文档,只不过是后缀名,扩展名不相同。html的扩展名是html、htm、xhtml
我们通常使用html作为扩展名,HTML文档也叫做 web 页面
HTML文档的编写方法:
1、手工直接编写记事本等,存成.htm .html格式
2、使用可视化HTML编辑器Frontpage、Dreamweaver等
3、由Web 服务器(或称HTTP 服务器)一方实时动态地生成。
*************************************************************************************************
2.3 使用记事本编写HTML
2.3.1 HTML示例
1、html本身----文本文件。新建文本文件。
2、更改文本文件的后缀名,html,htm,xhtml =======建议大家:使用html作为扩展名。
3、用文本编辑器编辑这个文件。(html是不需要编译的。)
4、在浏览器中查询效果。
2.3.2 HTML标签
标签分为单标签和双标签。
单标签:<标签名 /> 后面的斜杠表示标签的结束。通常叫做标签的闭合。
双标签:<标签名> 内容(普通的文字,或者其他标签) </ 标签名>
前面的标签,叫做开始标签
后面的标签,叫做结束标签
注意:书写双标签的时候,把开始标签和结束标签同时书写,然后再去书写标签的内容。防止少些结束标签。
在html中。不区分大小写的。建议大家以后都小写。
标签的属性
1.什么是属性
这里的属性指的是标记的属性
2.属性语法
<标记名字属性1 属性2 属性3 .....>
2.3.3 HTML组成
<html> ------理解成html的开始;定义一个html文档。整个页面的开始
<head> -----定义html中头部的信息,不作为浏览器显示的内容。(不会再浏览器的窗体中显示。)
例如:页面的描述,标题等等
</head>
<body>
定义了html 的主体。显示在浏览器的内容。
</body>
</html> ------理解成html的结束
代码:
<html>
<head>
</head>
<body>
<b>Hello</b>World
<hr width='500px;'/>
</body>
</html>
*************************************************************************************************
2.4 使用MyEclipse编写HTML
1、建立web工程
File -> New -> Web Project
选择下一步(Next)、下一步(Next),到下面的界面时候注意:
点击Finish(完成)
2、创建html文件
通常我们会在项目中的WebRoot目录下创建html文件(页面文件)
在WebRoot目录点击右键,选择New -> HTML(Advanced Templates),
如果有的同学没有就在最下面的Other里面找,Other里面的html位置为:
点击Finish,HTML文件创建成功。
如不需要以MyEclipse可视化编辑模式打开,可以参照资料中的《myeclipse配置1.doc》中的 -- 4、更改html的默认打开方式进行修改
MyEclispe生成的HTML模版文件详解:
3、在模版页面基础上编写HTML代码
body中的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>宝宝心里苦</title>
<meta http-equiv="keywords" content="苦闷,免费,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
Hello
<br />
<br />
world
<br />
</body>
</html>
4、运行:
在要运行的HTML文件上点击鼠标右键,选择MyEclispe -》 Open in Explorer
即可快速到达工作台目录,双击HTML文件即可通过浏览器方式打开运行
*************************************************************************************************
3. HTML常用标签
3.1 基本标签
3.1.1 注释
<!-- 注释 -->
注释在页面展现的时候看不见,但是在html源代码中可以看见。
3.1.2 标题
<h1>标题1</h1>
h后面的数字可以1~6,代表不同大小级别的标题
3.1.3 水平线
<hr/>
"/>"表示单标签的闭合----闭合表示结束。
3.1.4 换行
<br/>
html代码中按回车,页面展示并不会真的换行,必需使用<br/>
3.1.5 段落
<p>这里是一个段落</p>
HTML 会自动在段落前后添加一个额外的空行。
3.1.6 字体
定义html中的字体的大小,颜色,以及字体类型(宋体,楷体)
<font id="abc" color="#FECC41" size="7" face="楷体">字体</font>
属性:
size: 定义字体的大小
color: 定义字体的颜色
face: 定义字体的类型-------需要用户的电脑支持。如果不支持,就采用默认的字体。
颜色在网页上有三种表示方法:
1、英语单词
2、三原色 #颜值颜值颜值
3、rgb(0~225,0~225,0~225);
基本标签代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>3.1.0.基本标签.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!-- 这里是注释,
可以单行可以多行 -->
<!-- 标题,1~6是大小,1最大 -->
<h1>用户注册</h1>
<h2>用户注册</h2>
<h6>用户注册</h6>
<!-- 水平线 width表示宽度 align对齐方式 -->
<hr width="300px;" align="left"/>
<!-- 换行 -->
<br/>
<!-- 段落 -->
<p>HTML 会自动在段落前后添加一个额外的空行。</p>
<p>HTML 会自动在段落前后添加一个额外的空行。</p>
<!-- 字体标签 color颜色 size大小 face字体-->
<font color="green" size="7" face="楷体">
定义html中的字体的大小,颜色,以及字体类型(宋体,楷体)
</font>
<font color="#aaaaaa">
定义html中的字体的大小,22222222222
</font>
<font color="rgb(255,255,0)">
定义html中的字体的大小,22222222222
</font>
</body>
</html>
*************************************************************************************************
3.2 图片和多媒体标签
3.2.1 图片
img标签,定义了一个图片。(img是一个单标签)
互联网中存在很多的图片资源,浏览器显示的时候,找到img标签,浏览器就会显示出那个图片
<img src="img/a.jpg" width="400px" alt="这是一只老虎"/>
属性
src:指定图片的位置
width:定义图片的宽度
height :定义图片的高度
如果同时定义高度和宽度可能图片会失真。
定义其中的一个,图片会按照原理的百分比进行缩放
alt:鼠标放上去显示文本,已经过期不能用的方法,现在用title来取代
<img src="img/a.jpg" width="400px" title="这是一只凶猛的老虎"/>
相对路径的写法:
文件名 当前目录
../文件名 上一级目录
目录名/文件名 指定目录内的文件
3.2.2 视频(了解)
语法:<embed src="多媒体文件名称" width=宽度 height=高度 loop=播放次数>
<EMBED SRC="midi.mid" loop="true" width="145" height="60">
3.2.3 背景音乐(了解)
语法:<bgsound src=背景音乐位置 loop=循环次数>
<bgsound src="midi.mp3" loop="true">
图片标签代码:
<!-- 图片 title鼠标放入图片的提示 -->
<img alt="这是一个凶猛老胡" src="img/a.jpg" width="200px;" />
<img title='这是一个凶猛大老虎' src="img/a.jpg" width="200px;" height="200px;" />
<!-- 载入网络上的图片文件 -->
<img src="http://img0.bdstatic.com/img/image/hotbaby-pc.jpg" />
*************************************************************************************************
3.3 超链接标签
3.3.1 基本超链接
语法:<a href=资源地址>链接文字</a>
3.3.2 新开方式超链接
target属性:用于指定打开链接的目标窗口,默认属性为原窗口,如果是打开一个新窗口,可以设置target=_blank。
3.3.3 锚点
通俗简单地说,比如一篇很长的文章,你想按分段精确来看,那就可以用到锚点了。
1、设置锚点:
<a name="mao">bbbbbb</a>
2、指定超链接跳转到锚点:
<a href="#mao">跳转到锚点连接</a>
3、不发生任何跳转
<a href="#">不跳转</a>
超链接代码:
<!-- 超链接 href 连接地址-->
<a href="3.2.1.图片.html">我的链接</a>
<a href="http://www.baidu.com">百度</a>
<!-- 新开页面的超链接 target="_blank" 表示新开 -->
<a target="_blank" href="3.2.1.图片.html">我的链接新开</a>
<!-- 描点定位超链接 指定超链接跳转到锚点:-->
<a href="#mao">点我</a>
<a href="#">点我2</a>
<br /> 很长很长的文章
<br /> 很长很长的文章
<br />很长很长的文章
。。。。
<!-- 1、设置锚点: -->
<a name='mao'>段落标记</a>
。。。。
<br /> 很长很长的文章
<br /> 很长很长的文章
<br />很长很长的文章
*************************************************************************************************
3.4 列表标签
3.4.1 定义列表
基本语法:
<dl>
<dt>名称<dd>说明
</dl>
<dt>定义组成列表项名称部分
<dd>解释说明定义的项目名称
代码:
<!-- 定义列表 -->
<dl>
<dt>联系人
<dd>毛赟
<dt>电话
<dd>17077782591
<dt>住址
<dd>暴风城
</dl>
3.4.2 无序列表
基本语法:
<ul>
<li>名称</li>
</ul>
ul标签的type属性:
type="disc": (默认)实心圆
type="circle" : 空心圆
type="square" : 实心矩形
代码:
<!-- 无序列表 -->
<ul type="square">
<li>第一天</li>
<li>第一天</li>
<li>第一天</li>
</ul>
3.4.3 有序列表
基本语法
<ol type="" start="">
<li>项目名称</li>
</ol>
Type:设定符号类型,属性值有1,A,a,i,I
Start:设定列表的符号从第几项开始
ol标签的type属性:
type="1": (默认)数字
type="a" : 英文字母
type="i" : 罗马字母
代码:
<!-- 有序列表 -->
<ol type="1" start="2" >
<li>第一天</li>
<li>第一天</li>
<li>第一天</li>
</ol>
*************************************************************************************************
3.5 表格标签(重点)
3.5.1 基本表格
基本语法:
<table>
<tr>
<td></td>
</tr>
</table>
语法说明:
<table>: 定义表结构
<tr>: 定义行结构
<td>: 定义列结构
代码:
<!-- 表格 border表示边框-->
<table border="1">
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>大毛</td>
<td>男</td>
</tr>
<tr>
<td>二毛</td>
<td>女</td>
</tr>
</table>
3.5.2 合并单元格
在td标签上有连个属性-----属性值:数字,表示跨行或者跨列的个数。
1、colspan:跨列
代码:
<!-- 表格 border表示边框-->
<table border="1">
<tr>
<!-- colspan跨列 -->
<td colspan="2">姓名加性别</td>
</tr>
<tr>
<td>大毛</td>
<td>男</td>
</tr>
</table>
2、rowspan:跨行
代码:
<!-- 表格 border表示边框-->
<table border="1">
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>大毛</td>
<!-- rowspan跨行 -->
<td rowspan="2">男</td>
</tr>
<tr>
<td>二毛</td>
</tr>
</table>
3.5.3 表头
<th></th> 与td 效果一样,变得粗一些,可以做表格第一行表示列名
代码:
<!-- 表格 border表示边框-->
<table border="1">
<tr>
<!-- th表头 -->
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>大毛</td>
<td>男</td>
</tr>
<tr>
<td>二毛</td>
<td>女</td>
</tr>
</table>
*************************************************************************************************
3.6 布局标签
3.6.1 div标签
使用div去进行页面的布局。后面会讲到 div + css
代码:
<div align="right">你好</div>
<div>你好</div>
<div>你好</div>
div会默认换行
3.6.2 span标签
代码:
<span>你坏</span>
<span>你坏</span>
span不会默认换行
*************************************************************************************************
3.7 表单元素标签(重中之重)
3.7.1 表单标签
基本语法:
<form name=" " method=" " action=" ">
</form>
name:设置表单名称
method:设置表单发送的方法,可以是"post"或者"get"
action:设置表单发送地址
3.7.2 文本框
<input type="text" name="" value=""/>
value="" : 表示元素初始的默认值
3.7.3 密码框
<input type="password" name=""/>
3.7.4 单选按钮
<input type="radio" name="" checked="checked"/>
checked="checked" : 表示该单选按钮选中
3.7.5 复选框
<input type="checkbox" name="" checked="checked"/>
checked="checked" : 表示该复选框选中
3.7.6 文件域
<input type="file" name=""/>
用于上传文件
3.7.7 下列列表
<select>
<option>选项一</option>
<option selected="selected">选项二</option>
<option>选项三</option>
</select>
selected="selected" :表该下拉子选项被选择
3.7.8 文本域
<textarea rows="" cols="">很多文字的,需要多行的时候使用</textarea>
rows="" :占几行
cols="" :占几列
3.7.9 普通按钮
<input type="button" value="按钮一" />
3.7.10 提交按钮
<input type="submit" value="按钮一" />
3.7.11 重置按钮
<input type="reset" value="按钮一" />
表单元素标签代码:
<form action="">
<!-- 文本框 type="text" value表示默认值 -->
用户名:<input type="text" value="maoyun" /><br/>
<!-- 密码框 type="password" -->
密码:<input type="password" /><br/>
<!-- 单选按钮 type="radio" name="sex"具备互斥性 checked="checked" 默认选中-->
性别:
男<input type="radio" name="sex" checked="checked" />
女<input type="radio" name="sex" /> <br/>
<!-- 复选框 type="checkbox" checked="checked" 默认选中 -->
兴趣爱好:
唱歌<input type="checkbox" />
跳舞<input type="checkbox" checked="checked" />
吃饭<input type="checkbox" />
睡觉<input type="checkbox" />
<br/>
<!-- 文件域 -->
用户头像:<input type="file">
<br/>
<!-- 下拉列表框 <select> <option>子选项 -->
所在地:
<select>
<option>上海</option>
<option selected="selected">北京</option>
<option>广州</option>
</select>
<br/>
<!-- 文本域 textarea -->
自我介绍:
<br/>
<textarea rows="5" cols="30">这家伙很懒,什么也没留下</textarea>
<br/>
<!-- 普通按钮 -->
<input type="button" value="注册" />
<!-- 提交按钮 -->
<input type="submit" value="提交" />
<!-- 重置按钮 -->
<input type="reset" value="重置" />
</form>
*************************************************************************************************
3.8 字符实体
最常用的字符实体
显示结果 | 描述 | 实体名称 | 实体编号 |
| 空格 | 半角的不断行的空白格(推荐使用)   半角的空格   全角的空格 |   |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | ' (IE不支持) | ' |
其他字符实体
显示结果 | 描述 | 实体名称 | 实体编号 |
¢ | 分 | ¢ | ¢ |
£ | 镑 | £ | £ |
¥ | 日圆 | ¥ | ¥ |
§ | 节 | § | § |
© | 版权 | © | © |
® | 注册商标 | ® | ® |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
字符实体最主要的作用是可以网页上显示html特定的标签语法字符,比如<br/>
代码:
<br/>
<!-- 转以后的br标签 -->
<br/>
<!-- 空格 -->
2222222 33333333333
2222222    33333333333
*************************************************************************************************
3.9 框架标签(了解)
框架标签:把页面分割成几个部分。并且把其他页面,引入该页面。
frameset标签:把页面分割成若干个部分。负责切割页面
rows属性:把页面分割成若干个行,
rows="10%,90%"
用"逗号"分开,表示分割成几行,并且指定每行的高度
例如 rows="20%,*" 把页面分割成两个部分。(把页面分割成2行)
cols 属性:把页面分割成若干的列。用"逗号"分开,表示分割成几列,表示每一列的宽度
举例:cols=" 20%,*" 表示把页面分割两个部分。左右,左边占有页面的20% 宽度,剩下的右侧的宽度
frame标签:引入其他的页面资源。书写在frameset标签内
frame的属性介绍:
src属性:引入其他页面的资源路径。
注意:不能和body标签一起使用
代码:
<!-- frameset标签:把页面分割成若干个部分。负责切割页面 -->
<!-- rows="20%,*" 把页面分割成两个部分。(把页面分割成2行)*表示占据剩余比例 -->
<frameset rows="20%,*">
<!-- frame标签:引入其他的页面资源。书写在frameset标签内 -->
<frame src="logo.html" />
<frameset cols="20%,*">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>
*************************************************************************************************
4. CSS 快速入门
4.1 CSS简介
CSS(Cascading Style Sheet,层叠样式表)是一种标记性语言,与HTML是"表兄弟"。
样式表技术诞生于1996年,需要浏览器支持,现在大多数浏览器都支持CSS。
它允许在html文档中加入样式,如字体类型、颜色、大小等。
对于设计者来说它是一个非常灵活的工具,可以将所有有关于文档的样式指定内容全部脱离出来,在行内定义、在标题中定义,甚至作为外部样式文件供html调用而不必再把繁杂的样式定义编写在文档结构中
CSS语法规则:
样式符attributes1:values1;attributes2:values2;…
关于样式表的语法,要注意以下几个问题。
1、属性和属性值之间用":"分隔。
2、当有多个属性时,用";"进行区分。
3、在书写属性时属性之间使用空格换行等,并不影响属性的显示。
4、如果一个属性有几个值,则每个属性值之间用空格分隔开。
*************************************************************************************************
4.3 CSS样式加载方式(重点)
4.3.1 行内样式
几乎所有的html标签上都有style属性
在style属性中书写css代码:
代码:
<!-- 行内样式 -->
<span style="color:red;background-color: blue;" >你好</span>
<span style="color:red;background-color: yellow;" >你好</span>
注意:行内样式的作用范围只会影响到当前某行的html的元素
*************************************************************************************************
4.3.2 内部样式
使用上面的行内样式,如果出现了多个标签需要相同的样式,这时会出现css代码严重重复
在<head></head>中编写样式代码,可以影响到整个页面的相关元素
格式:
<style type="text/css">
CSS代码
</style>
<head></head>中的代码:
<!-- 内部样式 -->
<style type="text/css">
div{
color: red;
width: 100px;
height: 100px;
/*solid 实线 CSS的注释*/
border: 1px solid;
}
</style>
<body></body>中的代码:
<div>你好</div>
<br/>
<div>你好</div>
*************************************************************************************************
4.3.3 外部样式
使用上面的内部样式,如果出现了多个页面需要相同的样式,这时会出现css代码严重重复
外部样式:通过外部定义一个css文件,定义全局的样式,然后在html中将css文件引入进来,则会对此页面产生效果。如果其它页面需要,按照此方法即可。
1、编写一个css文件(该文件的扩展名为.css),写入如下内容:
div{
color: blue;
width: 100px;
height: 100px;
/*solid 实线 CSS的注释*/
border: 1px solid;
}
2、在<head></head>中写入:
<!-- 引入外部的样式文件 -->
<link rel="stylesheet" type="text/css" href="css/mao.css" />
注意:也可以通过内部样式的方式来引入外部样式(了解)
<style type="text/css">
@IMPORT url("css/mao.css");
</style>
*************************************************************************************************
4.3.4 加载方式的优先级
就近原则:谁离html元素距离近,就按谁的做
行内样式 > 内部样式 > 外部样式
代码:
div{
color: blue;
width: 100px;
height: 100px;
/*solid 实线 CSS的注释*/
border: 1px solid;
}
head:
<!-- 内部样式 会覆盖外部样式-->
<style type="text/css">
div{
color: yellow;
}
</style>
body:
<!-- 行内样式会覆盖内部样式及外部样式 -->
<div style="color: red">你好</div>
*************************************************************************************************
4.4 CSS样式选择器(重点)
样式选择器是指选择样式的方式,主要运用与内部样式和外部样式。
4.4.1 标签名选择器
通过html标签名来进行选择
写法:
标签名{属性:属性值;。。。。}
标签名:html中标签的名字,例如div,span。。。img,a
作用:会把css代码作用到所有的该标签名的标签。
<head></head>中的代码:
<!-- 标签名选择器 根据标签名来选择 -->
<style type="text/css">
div {
color: red;
width: 100px;
height: 100px;
/*solid 实线 CSS的注释*/
border: 1px solid;
}
input{
color: red;
width: 100px;
height: 100px;
/*solid 实线 CSS的注释*/
border: 1px solid;
}
</style>
<body></body>中的代码:
<div>你好</div>
<br />
<div>你好</div>
<br/>
<input type="text" />
*************************************************************************************************
4.4.2 id选择器
通过html元素标签的id属性来进行选择。
语法:
#id的值{属性:属性值;属性:属性值;。。。。。}
id的值:每个html标签,几乎都有id的属性。(可以唯一的定位到一个具体的标签)。
作用范围:标签中的id值和 css选择器中的id值相同,才会有作用
<head></head>中的代码:
<!-- id选择器,根据id来选择 -->
<style type="text/css">
#div1{
border: 1px solid;
width: 100px;
height: 100px;
border-color: red;
}
#div2{
border: 2px solid;
width: 100px;
height: 100px;
border-color: blue;
}
</style>
<body></body>中的代码:
<div id="div1">div1</div>
<br />
<div id="div2">div2</div>
注意:id="xxx" 千万不要加 "#" 符号
*************************************************************************************************
4.4.3 类选择器
根据html元素标签的class属性进行选择。
语法:
class的值{属性:属性值;。。。。}
class的值:每个html标签几乎都有一个class属性。和选择器中的class的值去对应。
<head></head>中的代码:
<!-- 类选择器 根据class属性来选择 -->
<style type="text/css">
.beauty
{
border: 5px solid;
width: 100px;
height: 100px;
border-color: blue;
}
</style>
<body></body>中的代码:
<div class="beauty">你好</div>
<br />
<div>你好</div>
<br />
<input class="beauty" type="text" />
注意:class="xxx" 千万不要加 "点" 符号
*************************************************************************************************
4.4.4 选择器的优先级别
具体原则:谁表现的更具体,影响的范围越小,就按谁的做。
id > class > 标签名
<head></head>中的代码:
<style type="text/css">
/*标签名选择器*/
div{
color: red;
}
/*class选择器 会覆盖 标签名选择器*/
.beauty
{
color: yellow;
}
/*id选择器 会覆盖 class选择器*/
#div1
{
color: blue;
}
</style>
<body></body>中的代码:
<div class="beauty" id="div1">你好</div>
*************************************************************************************************
5. CSS特殊属性(了解)
5.1 伪类
伪类:根据标签的各种状态,去修饰标签的样式。
语法:
选择器:伪类{属性:属性值;。。。。。}
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link ( 有链接属性的时候显示 -- href 属性 )
a:visited ( 链接地址被访问过 )
a:hover ( 鼠标移动到超链接上面 )
a:active ( 鼠标点击瞬间 )
<head></head>中的代码:
<!-- 内部样式,伪类 -->
<style type="text/css">
a:LINK { /*有链接属性的时候显示 -- href 属性*/
color: black;
text-decoration: none; /*去掉下划线*/
}
a:VISITED { /*链接地址被访问过*/
color: gray;
text-decoration: none; /*去掉下划线*/
}
a:HOVER { /*鼠标移动到超链接上面*/
color: red;
}
a:ACTIVE { /*鼠标点击瞬间 */
color: blue;
}
</style>
<body></body>中的代码:
<a target="_blank" href="2.4.0.使用MyEclipse编写HTML.html">哈哈</a>
*************************************************************************************************
5.2 边框属性
盒子模型:在html中。每一个标签占有一定的空间。这个空间通常是矩形(长方形)的。
边框: border
外边距: margin
内边距: padding
<head></head>中的代码:
<style type="text/css">
#div1 {
width: 400px;
height: 400px;
border: 5px solid;
border-color: red;
}
#div2 {
width: 200px;
height: 200px;
border: 15px solid;
border-color: blue;
margin: 10px;
padding: 10px;
}
#div3 {
width: 80px;
height: 80px;
border: 20px solid;
border-color: yellow;
}
</style>
<body></body>中的代码:
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
*************************************************************************************************
5.3 浮动属性
float属性作用:告诉浏览器该标签是否浮动,以及如何浮动。目的:布局
5.3.1 页面整体布局
float+div 可以做到页面的布局
<head></head>中的代码:
<style type="text/css">
#div1 {
height: 100px;
background-color: red;
}
#div2 {
width: 20%;
float: left;/*从左浮动摆放*/
background-color: green;
height:800px;
}
#div3 {
float: left;/*从左浮动摆放*/
background-color: blue;
height:800px;
width: 80%;
}
</style>
<body></body>中的代码:
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
*************************************************************************************************
5.3.2 制作导航栏
<head></head>中的代码:
li {
list-style-type: none; /*去掉类型标记*/
float: right; /*浮动靠右摆放*/
margin: 10px;/*外边据间隔*/
}
<body></body>中的代码:
<ul>
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">购物车</a></li>
</ul>
*************************************************************************************************
6. 总结