php版本divcss html
2012-12-02 12:41
141 查看
1. html (hypertext mark-up language)是 超文本标记语言, 主要的用处是做网页, 可以在网页上显示 文字、图像、视频、声音…
<input type=”text” name=”xxx”/>
☞ 标记==元素
简单说明一下动态网页的示意图:
u Html历史
1999 html-- xhtml (xhtml 可以理解成就是html的加强版) -àxml
|
2008 html5.0
u W3c的介绍
是一个制定标准的组织 ( 比如 给 html ,xhtml ,css ,xml , wml…制定标准)
☞ 不同的浏览器,去访问同一个网页,可能看到的效果是有差别!->hack
u Html的运行原理
Hello.html
Html的运行有两种方式
Html文件的基本结构
<html>
<head></head>
<body></BODY>
</html>
1.本地运行
所谓本地运行就是直接用 浏览器打开
2. 远程访问
l 何为协议? 计算机互相通信(网络)的规则. ftp smtp pop http
远程访问的原理示意图:
☞ 这里我们涉及到http协议,这里我们没有深入讲解, 但是这是一个非常重要的知识点.
Html的基本结构
<html>
<head>
<元素 属性1=”值” …./>
</head>
<body>
<元素 属性1=”属性值” 属性2=“属性值” …>内容</元素>
<元素 属性=”属性值”/>
</body>
</html>
说明
1. 标记通常是成对出现 <head></head>
2. 单标记 <br/>
案例:
Demo1.htm
<html>
<head></head>
<body>
<b>横看成林</b><br/><br/>
<font color="red">远近高低各不同</font><br/>
<!--size 值可以取 1..7 -->
<font style="font-size:30px;">不知庐山真面目</font><br/>
</body>
</html>
面试: 请问 后缀 html 和 htm 有什么区别?
答: 1. 如果一个网站有 index.html 和 index.htm 默认情况下,优先访问 .html
3. htm 后缀是为了兼容以前的dos 系统 8.3的命名规范
u html符号实体
说明:当我们在网页中有一些特殊字符时候,可以考虑使用字符实体(char entity)
超链接的案例:
<br/>*****************<br/>
<a href="a.html" target=”_self,_blank,_top,_parent”>连接到a.html</a><br/>
<!--如果我们希望在点击该超链接后,就跳转到外网的某个地址,则应当写完整的url-->
<!--url 统一资源定位-->
<a href="http://www.baidu.com">跳转到百度</a><br/>
<a href="mailto: hanshunping@tsinghua.org.cn">联系管理员</a>
图片:
<img src=”图片的路径/该图片也可是一个url” width=”宽度” heigth=”高度”/>
u Html的表格元素
l 在以前对网页布局要求不高的情况下,使用 table 布局(即使用表格来显示数据,同时用于布局)
快速入门:
<html>
<body>
<table align="center" height="10px" bgcolor="yellow" border="3px" width="400px">
<!--tr表示一行-->
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr align="right">
<td>2</td>
<td align="center">4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>3</td>
<td>9</td>
<td>10</td>
</tr>
</table>
</body>
</html>
应用案例 :
1. 确定行
代码 如下:
<html>
<body>
<!--
<table align="center" height="10px" bgcolor="yellow" border="3px" width="400px">
<!--tr表示一行
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr align="right">
<td>2</td>
<td align="center">4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>3</td>
<td>9</td>
<td>10</td>
</tr>
</table>-->
<table height="150px">
<tr><td></td></tr>
</table>
<!--显示菜单-->
<table border="1" align="center" bordercolor="#E76BFF" height="225px" cellpadding="1px" cellspacing="0px" width="400px" >
<tr>
<!--colspan="3" 表该列要占用三列-->
<td align="center" colspan="3">菜谱</td>
</tr>
<tr>
<td rowspan="2">素菜</td>
<td>青草茄子</td>
<td>花椒扁豆</td>
</tr>
<tr>
<td>小炒韭菜</td>
<td>白豆腐</td>
</tr>
<tr>
<td rowspan="2">荤菜</td>
<td>清蒸龙</td>
<td>鱼香肉丝</td>
</tr>
<tr>
<td>小炒肉 <img src="dog.jpg" width="70px" /></td>
<td>水煮肉片</td>
</tr>
</table>
</body>
</html>
课堂练习:
<html>
<title>俺第一个实例</title>
<head>
</head>
<body>
<Center>
成绩表
</center>
<br/>
<!--表格-->
<table align="center" align="center" bordercolor="579AFE" height="10px" border="3px" width="500px">
<tr align="center">
<td>项目</td>
<td colspan="5" align="center">上课</td>
<td colspan="2" align="center">休息</td>
</tr>
<tr bgcolor="pink" align="center">
<th>星期</b></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr align="center">
<td rowspan="4" align="center">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4" align="center">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>政治</td>
<td>英语</td>
<td>体育</td>
<td>历史</td>
<td>地理</td>
<td>计算机1</td>
</tr>
<tr></tr>
<tr align="center" >
<td rowspan="2"
>下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="2">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>
u 无序列表
<ul>
<li></li>
</ul>
案例:
代码:
<ul type="circle">
<li>英雄</li>
<li>精武门</li>
<li>西游记</li>
</ul>
☞ type 可以取 disc 、 circle 、 square
u 有序列表
代码:
<ol type="I" >
<li>卢俊义</li>
<li>吴用</li>
<li>林冲</li>
</ol>
☞ type用于指定用什么来显示, start 表示从第几开始计算.
u Frameset框架集
用途主要是用于分割显示多个页面
☞ framest 和 frame 配合使用,一般讲是用于后台页面
快速入门:
代码
A2.html 页面用于保护其它页面
<frameset cols="30%,*">
<frame name="frame1" src="b.html" noresize frameborder="0"/>
<frame name="frame2" src="c.html" frameborder="0"/>
</frameset>
☞ 该页面不能有body和body体
b.html
<body bgcolor="pink">
<!--target表示我们点击后,目标指向谁-->
<a href="zjl.html" target="frame2">周杰伦</a><br/>
<a href="qq.html" target="frame2">齐秦</a><br/>
</body>
☞ target 属性值有四个
_blank : 表示打开一个全新的页面
_self: 替换本页面
_top:
_parent:
* 还有一个就是在 target 值中直接写对应的那个 frame的名字.
c.html:
<body bgcolor="silver">
歌词大全
</body>
其它页面
Frameset的综合小案例:
结构示意图:
案例
All.html
<frameset rows="20%,*">
<frame src="top.html" scrolling="no"/>
<frameset cols="20%,*">
<frame src="left.html" noresize frameborder="0" />
<frame src="right.html" name="myframe" frameborder="0"/>
</frameset>
</frameset>
Top.html
<img src="title.JPG"/>
Left.html
<body bgcolor="pink">
<ul>
<li><a href="zjl.html" target="myframe">青花瓷</a></li>
<li><a href="qq.html" target="myframe">当兵的人</a></li>
</ul>
</body>
Right.html
<body bgcolor="silver">
歌词大全
</body>
u Iframe的使用
? 有时我们需要,在一个含有<body>的页面嵌入另外一个页面,形成画中画的效果,怎么处理->iframe元素(浮动窗口)
入门案例
Iframe.html
<html>
<body>
<h1>hello,world</h1>
<a href="http://www.taobao.com.cn" target="iframe1" >连接到taobao</A><br/>
<a href="kk.html" target="iframe1" >连接到kk.html</A><br/>
<iframe name="iframe1" src="http://www.baidu.com" width="500px" height="400px" />
<iframe src="http://g.cn" width="400px" height="400px" />
</body>
</html>
u 表单元素
为什么需要 ?
看一个图:
从上图可以看出,我们需要把一些数据提交给服务器处理,比如注册用户,发帖…,这样就需要使用到表单元素( 常见 输入框、单选框、复选框、文本域、密码框、上传文件。。。)
基本结构
<input type=”类型” name=”名字”/>
一般说,表单元素通常是被 <form> 包含起来的
入门案例:
Login.html
<html>
<head>
<title>登录页面</title>
</head>
<body>
<!--action的值应当是提交哪个页面(url)-->
<!--method 方法指定提交数据的方式,常用的有两种 get / post -->
<form action="ok.html" method="post">
<!--name 的值可以任意,但是不要使用关键字-->
用户名:<input type="text" name="username"/><br/>
密 码:<input type="password" name="password"/><br/>
<input type="submit" value="登录系统"/>
<input type="reset" value="重新填写"/>
</form>
</body>
</html>
Ok.html
Ok,登录成功
原理图:
请考虑: 如果我们希望偷偷的提交数据,不要影响节目效果,可以考虑使用隐藏域
案例代码:
<html>
<head><title>表单元素</title></head>
<body>
<form action="ok.html" method="get">
您最喜欢哪些城市:
<input type="checkbox" name="cities" value="beijing">北京
<input type="checkbox" name="cities" value="shanghai">上海
<input type="checkbox" name="cities" value="伦敦">伦敦
<br/>
您的性别是:
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女<br/>
隐藏域的使用
<input type="hidden" name="data" value="ok"/><br/>
下拉列表<br/>
请选择您的出生地:
<select name="address" size=3 multiple>
<option value="sichuan">四川</option>
<option value="beijing">北京</option>
<option value="xizang">西藏</option>
</select><br/>
<!--文本域,-->
<textarea name="mytextarea" cols="40" rows="10">
</textarea><br/>
<!--文件上传的控件-->
<input type="file" name="myfile">上传文件<br/>
<input type="submit" value="测试"/>
<!--这是一个图片按钮-->
<input type="image" src="image1.png"/>
</form>
</body>
</html>
课堂练习:
u 多媒体
<html>
<head>
<title>我的电影网站</title>
</head>
<body>
<!--
<embed src="一起走到.MPG"/>-->
<img src="F.GIF" dynsrc="clock.avi" loop="2" start="mouseover"/>
</body>
</html>
u 照着html文档,我们对html在加强一把
图像映射技术:
案例:
<html>
<head>
<script language="javascript">
<!--
function show(){
window.alert('点击了矩形区域');
}
-->
</script>
</head>
<body>
<img src="mapimg.gif" usemap="#abc" />
<!--映射区域-->
<map name="abc">
<area shape="rect" onclick="show();" href="#" coords="140,20,280,60"/>
</map>
</body>
</html>
代码:
<html>
<body>
<fieldset style="width:300px">
<legend><font color="blue">★ 审核状态</font></legend>
<form>
<input type="radio" name="state">已经审核
<input type="radio" name="state">没有审核
<input type="radio" name="state">全部
</form>
</fieldset>
</body>
</html>
Div+css的开山篇
Div+css 是什么?
Div+css 是一种目前比较流行的网页布局技术
Div 来存放需要显示的数据(文字,图表..) , css 就是用来指定怎样显示, 从而做到数据和显示相互的效果
原理图如下 :
有时后,我们也可能把css直接嵌入到html文件中,这种方式称为内联css
基本语法:
<style>
选择器{
属性: 属性值;
…
}
</style>
我们可以简单的这样理解div+css:
div 是用于存放内容(文字,图片,元素)的容器。
css 是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.
快速入门案例(体验案例)
Demo.html
<html>
<head>
<title>css入门小案例</title>
<!--引入我们的css-->
<link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<div class="style1">
<img src="2.jpg"/>
</div>
</body>
</html>
My.css
.style1{
/*宽度 */
width: 400px;
height: 300px; /*一定要写一个分号*/
background-color:silver;
border:1px solid red;
margin-left:400px;
margin-top:250px;
padding-top:20px;
padding-left:40px;
}
u 网页设计的三个时期
① table 网页设计
② table+css 网页设计
③ div+css 网页设计
u css使用必要性
1. 可以很好的统一网站的显示风格.
css使用的基本语法
选择器{
属性1: 属性值;
属性2: 属性值;
….
}
Html文件:
<html>
<!--css 部分可以单写一个文件,然后引入,也可以直接嵌入到该html文件-->
<link rel="stylesheet" type="text/css" href="demo2.css"/>
<body>
<!--span元素通常用于存放小块内容-->
<span class="s1">栏目一</span>
<span class="s1">栏目二</span>
<span class="s1">栏目三</span>
<span class="s1">栏目四</span>
<span class="s1">栏目五</span>
</body>
</html>
Css文件 :
/*.s1 用术语 类选择器*/
.s1{
color: blue;
font-size: 30px;
font-style:italic;
text-decoration:underline;
}
.s2{
color:yellow;
font-size:12px;
}
.s3{
color:blue;
font-style:italic;
}
.s4{
color:green;
font-weight:bold;
}
.s5{
color:#9C3131;
}
Css必要性2 可以使用滤镜
<html>
<head>
<!--如何把css直接嵌入到html文件(内联css)-->
<style type="text/css">
a:link img{
filter:gray;
}
a:hover img{
filter:"";
}
</style>
</head>
<body>
<a href="3"><img src="2.jpg"/></a>
<a href="3"><img src="3.jpg"/></a>
<a href="3"><img src="4.jpg"/></a>
<a href="3"><img src="cat1.jpg"/></a>
</body>
</html>
u Css中常用的四种选择器
1. 类选择器(class选择器)
基本使用
.类选择器{
属性名: 属性值;
….
}
2. id选择器
基本使用
#id选择器{
属性名: 属性值;
….
}
案例:
/*id选择器的使用*/
#id1{
background-color:silver;
font-size:40px;
}
3. html元素选择器
某个html元素{
属性名:属性值;
…
}
Table{
}
P{
}
Button{
}
//对html元素样式分类
P:cls{
}
<p class=”cls”></P>
需求人员(技术+行业背景)
财务软件(php,c++)->用友[]
4. 通配符选择器
☞ css 文件可以使用在各种文件(php,html,jsp,asp…)
*{
}
案例:
再比如,我们希望所有的超链接
(1)默认样式是 黑色,24px,没有下划线
(2)当鼠标移动到超链接时,自动出现下划线
(3)点击后,超链接变成 红色。这又该怎么实现呢? [test.html]
a:link{
color:black;
text-decoration:none;
font-size:24px;
}
a:hover{
text-decoration:underline;
font-size:40px;
color:green;
}
a:visited{
color:red;
}
/*对同一中html元素分类*/
p.cls1{
color:blue;
font-size:30px;
}
p.cls2{
color:red;
font-size:20px;
}
u 通配符选取器
该选择器可以用到所有的html元素,但是其优先权最低
*{
属性名:属性值;
….
}
☞ 四个选取器优先权
Id选择器> class选择器> html选择器> 通配符选则器
了解->细节->深入了解->应用项目
u 选择器的细节问题!
1. 父子选择器使用:
/*父子选择器*/
#id1 span{
color:red;
font-style:italic;
}
☞ 上面选择器的含义是:
在 id选择器为 id1 的子 元素 span的样式就是。。。。
<div id=”id1”>
<span>xxxxx</span>
</div>
<div class=”cls”>
<span>xx</span>
</div>
#id1 span span {
color:green;
}
#id1 span span a{
color:blue;
}
通过上面总结:
① 父子选择器可以有多级(但是在实际开发中不要过三层)
② 父子选择器有严格的层级关系
③ 父子选择器不局限于什么类型选择器
比如
#id span span
.s1 #id span
div #id .s2
2. 一个元素可以同时有id选择器和class选择器
案例:
<span class="s1" id="news_specail">新闻一</span>
3. 一个元素最多有一个id选择器,但是可以有多个类选择器
使用方法如下:
<元素 class=”类选择器1 类选择器2” />
Html部分
<span class="cls1 s1">新闻三</span>
Css部分:
/*给新闻三再配置一个class选择器*/
.cls1{
font-style:italic;
text-decoration:underline;
color:blue;
background-color:silver;
}
.s1{
background-color:pink;
font-weight:bold;
font-size:16px;
color:black;
}
特别注意: 当两个类选择器发生冲突了,则以写在css文件中的后面的那个类选择器为准 !
4. 我们可以把某个css文件中的 选择器共有的部分,独立出来写一份比如:
.ad_stu {
width: 136px;
height: 196px;
background-color: #FC7E8C;
margin: 5px 0 0 6px;
float: left;
}
/*广告2*/
.ad_2 {
background: #7CF574;
height: 196px;
width: 457px;
float: left;
margin: 5px 0 0 6px;
}
/*房地产广告*/
.ad_house {
background: #7CF574;
height: 196px;
width: 152px;
float: left;
margin: 5px 0 0 6px;
}
//上面的css 可以写成:
/*招生广告*/
.ad_stu {
width: 136px;
background-color: #FC7E8C;
}
/*广告2*/
.ad_2 {
background: #7CF574;
width: 457px;
}
/*房地产广告*/
.ad_house {
background: #7CF574;
width: 152px;
}
.ad_stu , .ad_2, .ad_house{
height: 196px;
float:left;
margin: 5px 0 0 6px;
}
5. 说明css文件本身也会被浏览器从服务器下载到本地,才能显示效果.
u 行内元素和块元素
快速入门案例:
从案例我们看出,行内元素它只占能显示自己内容的宽度,而且他不会占据整行
块元素它不管自己的内容有多少,会占据整行,而且会换行显示
l 常见的行内元素有 <a> <span> <inpu type=”xxx”>
l 常见块元素有<div> <p>
<html>
<head>
<link rel="stylesheet" type="text/css" href="element.css"/>
</head>
<body>
<span class="s1">span1</span>
<span class="s1">span2</span><input type="text" name="username"/>
<div class="s2">div1</div>
<div class="s2">div2</div><input type="text" name="username"/>
<p style="background-color:silver">这是一个段落</p>
</body>
</html>
u 行内元素和块元素可以转换
使用
Display: inline 表示使用行内元素方式显示
Display: block 表示使用块元素方式显示
u Css文件之间的相互引用指令(mvc)
u 标准流和非标准流
流: html元素在网页中显示的顺序.
标准流: 在html文件中,写在前面的元素在前面显示,写在后面的html元素在后面显示.
非标准流:在html 文件中,当某个元素脱离的标准流,那么它就处于非标准流
u Css中的盒子模型
盒子模型的示意图:
盒子模型的经典案例:
Html文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>盒子模型案例</title>
<link rel="stylesheet" type="text/css" href="box1.css"/>
</head>
<body>
<div class="div1">
<img src="aa.bmp"/>
</div>
</body>
</html>
Css文件 :
body{
border:1px solid red;/* 1px 表示边框的宽度 solid 实线 red 表示颜色*/
width: 500px;
height: 500px;
/*如果让body自动居中*/
margin:0 auto; /*第一个用于上-下,第二个用于左-右。auto表示自动居中*/
}
/*盒子模型的概念 : margin, padding, border content */
.div1{
width:50px;
height:52px;
border:1px solid blue;
/* margin-top:5px;
margin-left:5px;*/
margin: 5px 0px 0px 5px;
/*padding-top:35px;*/
}
.div1 img{
width:40px;
height:40px;
margin-top:5px;
margin-left:5px;
}
盒子模型的综合案例2
分析:思路
基本结构
<div>
<ul>
<li><img src=””/></li>
</ul>
</div>
Html文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="box2.css"/>
</head>
<body>
<!--div在布局起到一个控制整个内容显示的位置-->
<div class="div1">
<!--ul在布局中作用是可以控制显示内容多少-->
<ul class="faceul">
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
</ul>
</div>
</body>
</html>
Css文件
.div1{
width:500px;
height:300px;
border:1px solid gray;
margin-left:200px;
}
.faceul{
width:400px;
height:250px;
border:1px solid red;
padding-left:5px;
margin-left:10px;
}
.faceul li{
list-style-type:none;
float:left;/*左浮动,这个知识点后面说*/
width:50px;
height:52px;
border:1px solid red;
margin-right:15px;
margin-top:15px;
}
.faceul li img{
margin-left:5px;
margin-top:5px;
width: 40px;
height:40px;
}
u 浮动
在div+css中浮动分为 左浮动,右浮动,清除浮动
① 右浮动
所谓右浮动 ,指 一个块元素向右移动,让出自己空间, 向右移动直到碰到包含自己的父元素的最右边的边框.
② 左浮动
快速入门 :
.div1{
width:150px;
height:100px;
border:1px solid blue;
background: pink;
margin-top:5px;
float:left;/*左浮动*/
}
从这个案例我们可以看出,所谓左浮动就是指: 某个块元素尽量向左边移动,这样就让出它右面的空间,让别的块元素显示.
浮动的特别说明:
如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮
动元素“卡住”:直到有足够空间.
Zij: 一般是向后找
☞ 如果使用浮动属性 : 则该元素不管是不是块元素,(l浏览器)都会按照 display: block来显示.
小总结:
你可以这么理解浮动:如果一个元素右/左浮动则:
①它本身会尽可能向右/左移动,直到碰到边框或者
别的浮动元素,特别强调浮动对块元素和行内元素都
生效!
②元素向右/左浮动,就相当于让出自己的左/右边,别
的元素就会在它的左/右边排列。
再一个案例:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<img style="float:left;margin-right:5px;" src="2.jpg"/>爱克发kadlkaflksaflkas;lfkaslfksa;lfksafkas;lf爱克发
</body>
</html>
如何清除浮动,我们在项目中说明
网上有一个站点 ;禅意花园 -> csdn 网页论坛
开源之祖 sourceforeg .net
Php 开源 http://www.php-open.com 模仿->()创新
u 定位
常见的定位有四种
1. static 定位 (默认值)
2. relative 相对定位
3. absolute 绝对定位
4. fixed 固定定位.
相对定位:
这里我们看出,所谓相对定位是指,相对该元素应当显示的左上角重新定位,虽然它脱离的标准流,但是它的空间,不能被占用.
绝对定位:
从上图看,所谓绝对定位是指,对该元素最近的那个脱离了标准流的元素定位,如果没有父元素(或者有父元素,但是父元素没有脱离标准流),则相对body左上角定位.
怎么理解 上面标红的字
代码:
Html:
<body>
<div class="div1">
内容1
</div>
<div class="div1">
内容3
</div>
<div class="div1">
内容4
</div>
<div class="div2">
<div id="spe" class="div1">
内容2
</div>
</div>
</body>
Css文件:
.div2{
position:relative;
left:100px;
top:100px;
width:200px;
height:150px;
background:pink;
float:left;
}
u Fixed定位
所谓fixed定位就是不管怎样,总是以视窗的左上角定位.
☞ left top 属性 对 static 没有效果 , static 定位是靠 margin-left margin-top 来移动位置的.
u z-index
用于设置对象(div) 显示时候,层叠的属性, z-index值越小,则越在下层显示!!
☞ 当父层不设置高度,而子层进行了float,因为父层是标准流,会不认识子层的存在,所以高度会自动变成0.解决办法一是在父层里面,最后一个子层后面加一个块状元素,然后给这个块状元素清除浮动;二是给父层进行浮动,让它认识子层,高度会自动撑开
<input type=”text” name=”xxx”/>
☞ 标记==元素
简单说明一下动态网页的示意图:
u Html历史
1999 html-- xhtml (xhtml 可以理解成就是html的加强版) -àxml
|
2008 html5.0
u W3c的介绍
是一个制定标准的组织 ( 比如 给 html ,xhtml ,css ,xml , wml…制定标准)
☞ 不同的浏览器,去访问同一个网页,可能看到的效果是有差别!->hack
u Html的运行原理
Hello.html
Html的运行有两种方式
Html文件的基本结构
<html>
<head></head>
<body></BODY>
</html>
1.本地运行
所谓本地运行就是直接用 浏览器打开
2. 远程访问
l 何为协议? 计算机互相通信(网络)的规则. ftp smtp pop http
远程访问的原理示意图:
☞ 这里我们涉及到http协议,这里我们没有深入讲解, 但是这是一个非常重要的知识点.
Html的基本结构
<html>
<head>
<元素 属性1=”值” …./>
</head>
<body>
<元素 属性1=”属性值” 属性2=“属性值” …>内容</元素>
<元素 属性=”属性值”/>
</body>
</html>
说明
1. 标记通常是成对出现 <head></head>
2. 单标记 <br/>
案例:
Demo1.htm
<html>
<head></head>
<body>
<b>横看成林</b><br/><br/>
<font color="red">远近高低各不同</font><br/>
<!--size 值可以取 1..7 -->
<font style="font-size:30px;">不知庐山真面目</font><br/>
</body>
</html>
面试: 请问 后缀 html 和 htm 有什么区别?
答: 1. 如果一个网站有 index.html 和 index.htm 默认情况下,优先访问 .html
3. htm 后缀是为了兼容以前的dos 系统 8.3的命名规范
u html符号实体
说明:当我们在网页中有一些特殊字符时候,可以考虑使用字符实体(char entity)
超链接的案例:
<br/>*****************<br/>
<a href="a.html" target=”_self,_blank,_top,_parent”>连接到a.html</a><br/>
<!--如果我们希望在点击该超链接后,就跳转到外网的某个地址,则应当写完整的url-->
<!--url 统一资源定位-->
<a href="http://www.baidu.com">跳转到百度</a><br/>
<a href="mailto: hanshunping@tsinghua.org.cn">联系管理员</a>
图片:
<img src=”图片的路径/该图片也可是一个url” width=”宽度” heigth=”高度”/>
u Html的表格元素
l 在以前对网页布局要求不高的情况下,使用 table 布局(即使用表格来显示数据,同时用于布局)
快速入门:
<html>
<body>
<table align="center" height="10px" bgcolor="yellow" border="3px" width="400px">
<!--tr表示一行-->
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr align="right">
<td>2</td>
<td align="center">4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>3</td>
<td>9</td>
<td>10</td>
</tr>
</table>
</body>
</html>
应用案例 :
1. 确定行
代码 如下:
<html>
<body>
<!--
<table align="center" height="10px" bgcolor="yellow" border="3px" width="400px">
<!--tr表示一行
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr align="right">
<td>2</td>
<td align="center">4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>3</td>
<td>9</td>
<td>10</td>
</tr>
</table>-->
<table height="150px">
<tr><td></td></tr>
</table>
<!--显示菜单-->
<table border="1" align="center" bordercolor="#E76BFF" height="225px" cellpadding="1px" cellspacing="0px" width="400px" >
<tr>
<!--colspan="3" 表该列要占用三列-->
<td align="center" colspan="3">菜谱</td>
</tr>
<tr>
<td rowspan="2">素菜</td>
<td>青草茄子</td>
<td>花椒扁豆</td>
</tr>
<tr>
<td>小炒韭菜</td>
<td>白豆腐</td>
</tr>
<tr>
<td rowspan="2">荤菜</td>
<td>清蒸龙</td>
<td>鱼香肉丝</td>
</tr>
<tr>
<td>小炒肉 <img src="dog.jpg" width="70px" /></td>
<td>水煮肉片</td>
</tr>
</table>
</body>
</html>
课堂练习:
<html>
<title>俺第一个实例</title>
<head>
</head>
<body>
<Center>
成绩表
</center>
<br/>
<!--表格-->
<table align="center" align="center" bordercolor="579AFE" height="10px" border="3px" width="500px">
<tr align="center">
<td>项目</td>
<td colspan="5" align="center">上课</td>
<td colspan="2" align="center">休息</td>
</tr>
<tr bgcolor="pink" align="center">
<th>星期</b></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr align="center">
<td rowspan="4" align="center">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4" align="center">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>政治</td>
<td>英语</td>
<td>体育</td>
<td>历史</td>
<td>地理</td>
<td>计算机1</td>
</tr>
<tr></tr>
<tr align="center" >
<td rowspan="2"
>下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="2">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>
u 无序列表
<ul>
<li></li>
</ul>
案例:
代码:
<ul type="circle">
<li>英雄</li>
<li>精武门</li>
<li>西游记</li>
</ul>
☞ type 可以取 disc 、 circle 、 square
u 有序列表
代码:
<ol type="I" >
<li>卢俊义</li>
<li>吴用</li>
<li>林冲</li>
</ol>
☞ type用于指定用什么来显示, start 表示从第几开始计算.
u Frameset框架集
用途主要是用于分割显示多个页面
☞ framest 和 frame 配合使用,一般讲是用于后台页面
快速入门:
代码
A2.html 页面用于保护其它页面
<frameset cols="30%,*">
<frame name="frame1" src="b.html" noresize frameborder="0"/>
<frame name="frame2" src="c.html" frameborder="0"/>
</frameset>
☞ 该页面不能有body和body体
b.html
<body bgcolor="pink">
<!--target表示我们点击后,目标指向谁-->
<a href="zjl.html" target="frame2">周杰伦</a><br/>
<a href="qq.html" target="frame2">齐秦</a><br/>
</body>
☞ target 属性值有四个
_blank : 表示打开一个全新的页面
_self: 替换本页面
_top:
_parent:
* 还有一个就是在 target 值中直接写对应的那个 frame的名字.
c.html:
<body bgcolor="silver">
歌词大全
</body>
其它页面
Frameset的综合小案例:
结构示意图:
案例
All.html
<frameset rows="20%,*">
<frame src="top.html" scrolling="no"/>
<frameset cols="20%,*">
<frame src="left.html" noresize frameborder="0" />
<frame src="right.html" name="myframe" frameborder="0"/>
</frameset>
</frameset>
Top.html
<img src="title.JPG"/>
Left.html
<body bgcolor="pink">
<ul>
<li><a href="zjl.html" target="myframe">青花瓷</a></li>
<li><a href="qq.html" target="myframe">当兵的人</a></li>
</ul>
</body>
Right.html
<body bgcolor="silver">
歌词大全
</body>
<title>企业信息管理系统</title> </head> <frameset rows="98,*,8" frameborder="no" border="0" framespacing="0"> <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" /> <frame src="center.html" name="mainFrame" id="mainFrame" /> <frame src="down.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" /> </frameset> <noframes><body> </body> </noframes></html>
u Iframe的使用
? 有时我们需要,在一个含有<body>的页面嵌入另外一个页面,形成画中画的效果,怎么处理->iframe元素(浮动窗口)
入门案例
Iframe.html
<html>
<body>
<h1>hello,world</h1>
<a href="http://www.taobao.com.cn" target="iframe1" >连接到taobao</A><br/>
<a href="kk.html" target="iframe1" >连接到kk.html</A><br/>
<iframe name="iframe1" src="http://www.baidu.com" width="500px" height="400px" />
<iframe src="http://g.cn" width="400px" height="400px" />
</body>
</html>
u 表单元素
为什么需要 ?
看一个图:
从上图可以看出,我们需要把一些数据提交给服务器处理,比如注册用户,发帖…,这样就需要使用到表单元素( 常见 输入框、单选框、复选框、文本域、密码框、上传文件。。。)
基本结构
<input type=”类型” name=”名字”/>
一般说,表单元素通常是被 <form> 包含起来的
入门案例:
Login.html
<html>
<head>
<title>登录页面</title>
</head>
<body>
<!--action的值应当是提交哪个页面(url)-->
<!--method 方法指定提交数据的方式,常用的有两种 get / post -->
<form action="ok.html" method="post">
<!--name 的值可以任意,但是不要使用关键字-->
用户名:<input type="text" name="username"/><br/>
密 码:<input type="password" name="password"/><br/>
<input type="submit" value="登录系统"/>
<input type="reset" value="重新填写"/>
</form>
</body>
</html>
Ok.html
Ok,登录成功
原理图:
请考虑: 如果我们希望偷偷的提交数据,不要影响节目效果,可以考虑使用隐藏域
案例代码:
<html>
<head><title>表单元素</title></head>
<body>
<form action="ok.html" method="get">
您最喜欢哪些城市:
<input type="checkbox" name="cities" value="beijing">北京
<input type="checkbox" name="cities" value="shanghai">上海
<input type="checkbox" name="cities" value="伦敦">伦敦
<br/>
您的性别是:
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女<br/>
隐藏域的使用
<input type="hidden" name="data" value="ok"/><br/>
下拉列表<br/>
请选择您的出生地:
<select name="address" size=3 multiple>
<option value="sichuan">四川</option>
<option value="beijing">北京</option>
<option value="xizang">西藏</option>
</select><br/>
<!--文本域,-->
<textarea name="mytextarea" cols="40" rows="10">
</textarea><br/>
<!--文件上传的控件-->
<input type="file" name="myfile">上传文件<br/>
<input type="submit" value="测试"/>
<!--这是一个图片按钮-->
<input type="image" src="image1.png"/>
</form>
</body>
</html>
课堂练习:
u 多媒体
<html>
<head>
<title>我的电影网站</title>
</head>
<body>
<!--
<embed src="一起走到.MPG"/>-->
<img src="F.GIF" dynsrc="clock.avi" loop="2" start="mouseover"/>
</body>
</html>
u 照着html文档,我们对html在加强一把
图像映射技术:
案例:
<html>
<head>
<script language="javascript">
<!--
function show(){
window.alert('点击了矩形区域');
}
-->
</script>
</head>
<body>
<img src="mapimg.gif" usemap="#abc" />
<!--映射区域-->
<map name="abc">
<area shape="rect" onclick="show();" href="#" coords="140,20,280,60"/>
</map>
</body>
</html>
代码:
<html>
<body>
<fieldset style="width:300px">
<legend><font color="blue">★ 审核状态</font></legend>
<form>
<input type="radio" name="state">已经审核
<input type="radio" name="state">没有审核
<input type="radio" name="state">全部
</form>
</fieldset>
</body>
</html>
Div+css的开山篇
Div+css 是什么?
Div+css 是一种目前比较流行的网页布局技术
Div 来存放需要显示的数据(文字,图表..) , css 就是用来指定怎样显示, 从而做到数据和显示相互的效果
原理图如下 :
有时后,我们也可能把css直接嵌入到html文件中,这种方式称为内联css
基本语法:
<style>
选择器{
属性: 属性值;
…
}
</style>
我们可以简单的这样理解div+css:
div 是用于存放内容(文字,图片,元素)的容器。
css 是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.
快速入门案例(体验案例)
Demo.html
<html>
<head>
<title>css入门小案例</title>
<!--引入我们的css-->
<link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<div class="style1">
<img src="2.jpg"/>
</div>
</body>
</html>
My.css
.style1{
/*宽度 */
width: 400px;
height: 300px; /*一定要写一个分号*/
background-color:silver;
border:1px solid red;
margin-left:400px;
margin-top:250px;
padding-top:20px;
padding-left:40px;
}
u 网页设计的三个时期
① table 网页设计
② table+css 网页设计
③ div+css 网页设计
u css使用必要性
1. 可以很好的统一网站的显示风格.
css使用的基本语法
选择器{
属性1: 属性值;
属性2: 属性值;
….
}
Html文件:
<html>
<!--css 部分可以单写一个文件,然后引入,也可以直接嵌入到该html文件-->
<link rel="stylesheet" type="text/css" href="demo2.css"/>
<body>
<!--span元素通常用于存放小块内容-->
<span class="s1">栏目一</span>
<span class="s1">栏目二</span>
<span class="s1">栏目三</span>
<span class="s1">栏目四</span>
<span class="s1">栏目五</span>
</body>
</html>
Css文件 :
/*.s1 用术语 类选择器*/
.s1{
color: blue;
font-size: 30px;
font-style:italic;
text-decoration:underline;
}
.s2{
color:yellow;
font-size:12px;
}
.s3{
color:blue;
font-style:italic;
}
.s4{
color:green;
font-weight:bold;
}
.s5{
color:#9C3131;
}
Css必要性2 可以使用滤镜
<html>
<head>
<!--如何把css直接嵌入到html文件(内联css)-->
<style type="text/css">
a:link img{
filter:gray;
}
a:hover img{
filter:"";
}
</style>
</head>
<body>
<a href="3"><img src="2.jpg"/></a>
<a href="3"><img src="3.jpg"/></a>
<a href="3"><img src="4.jpg"/></a>
<a href="3"><img src="cat1.jpg"/></a>
</body>
</html>
u Css中常用的四种选择器
1. 类选择器(class选择器)
基本使用
.类选择器{
属性名: 属性值;
….
}
2. id选择器
基本使用
#id选择器{
属性名: 属性值;
….
}
案例:
/*id选择器的使用*/
#id1{
background-color:silver;
font-size:40px;
}
3. html元素选择器
某个html元素{
属性名:属性值;
…
}
Table{
}
P{
}
Button{
}
//对html元素样式分类
P:cls{
}
<p class=”cls”></P>
需求人员(技术+行业背景)
财务软件(php,c++)->用友[]
4. 通配符选择器
☞ css 文件可以使用在各种文件(php,html,jsp,asp…)
*{
}
案例:
再比如,我们希望所有的超链接
(1)默认样式是 黑色,24px,没有下划线
(2)当鼠标移动到超链接时,自动出现下划线
(3)点击后,超链接变成 红色。这又该怎么实现呢? [test.html]
a:link{
color:black;
text-decoration:none;
font-size:24px;
}
a:hover{
text-decoration:underline;
font-size:40px;
color:green;
}
a:visited{
color:red;
}
/*对同一中html元素分类*/
p.cls1{
color:blue;
font-size:30px;
}
p.cls2{
color:red;
font-size:20px;
}
u 通配符选取器
该选择器可以用到所有的html元素,但是其优先权最低
*{
属性名:属性值;
….
}
☞ 四个选取器优先权
Id选择器> class选择器> html选择器> 通配符选则器
了解->细节->深入了解->应用项目
u 选择器的细节问题!
1. 父子选择器使用:
/*父子选择器*/
#id1 span{
color:red;
font-style:italic;
}
☞ 上面选择器的含义是:
在 id选择器为 id1 的子 元素 span的样式就是。。。。
<div id=”id1”>
<span>xxxxx</span>
</div>
<div class=”cls”>
<span>xx</span>
</div>
#id1 span span {
color:green;
}
#id1 span span a{
color:blue;
}
通过上面总结:
① 父子选择器可以有多级(但是在实际开发中不要过三层)
② 父子选择器有严格的层级关系
③ 父子选择器不局限于什么类型选择器
比如
#id span span
.s1 #id span
div #id .s2
2. 一个元素可以同时有id选择器和class选择器
案例:
<span class="s1" id="news_specail">新闻一</span>
3. 一个元素最多有一个id选择器,但是可以有多个类选择器
使用方法如下:
<元素 class=”类选择器1 类选择器2” />
Html部分
<span class="cls1 s1">新闻三</span>
Css部分:
/*给新闻三再配置一个class选择器*/
.cls1{
font-style:italic;
text-decoration:underline;
color:blue;
background-color:silver;
}
.s1{
background-color:pink;
font-weight:bold;
font-size:16px;
color:black;
}
特别注意: 当两个类选择器发生冲突了,则以写在css文件中的后面的那个类选择器为准 !
4. 我们可以把某个css文件中的 选择器共有的部分,独立出来写一份比如:
.ad_stu {
width: 136px;
height: 196px;
background-color: #FC7E8C;
margin: 5px 0 0 6px;
float: left;
}
/*广告2*/
.ad_2 {
background: #7CF574;
height: 196px;
width: 457px;
float: left;
margin: 5px 0 0 6px;
}
/*房地产广告*/
.ad_house {
background: #7CF574;
height: 196px;
width: 152px;
float: left;
margin: 5px 0 0 6px;
}
//上面的css 可以写成:
/*招生广告*/
.ad_stu {
width: 136px;
background-color: #FC7E8C;
}
/*广告2*/
.ad_2 {
background: #7CF574;
width: 457px;
}
/*房地产广告*/
.ad_house {
background: #7CF574;
width: 152px;
}
.ad_stu , .ad_2, .ad_house{
height: 196px;
float:left;
margin: 5px 0 0 6px;
}
5. 说明css文件本身也会被浏览器从服务器下载到本地,才能显示效果.
u 行内元素和块元素
快速入门案例:
从案例我们看出,行内元素它只占能显示自己内容的宽度,而且他不会占据整行
块元素它不管自己的内容有多少,会占据整行,而且会换行显示
l 常见的行内元素有 <a> <span> <inpu type=”xxx”>
l 常见块元素有<div> <p>
<html>
<head>
<link rel="stylesheet" type="text/css" href="element.css"/>
</head>
<body>
<span class="s1">span1</span>
<span class="s1">span2</span><input type="text" name="username"/>
<div class="s2">div1</div>
<div class="s2">div2</div><input type="text" name="username"/>
<p style="background-color:silver">这是一个段落</p>
</body>
</html>
u 行内元素和块元素可以转换
使用
Display: inline 表示使用行内元素方式显示
Display: block 表示使用块元素方式显示
u Css文件之间的相互引用指令(mvc)
u 标准流和非标准流
流: html元素在网页中显示的顺序.
标准流: 在html文件中,写在前面的元素在前面显示,写在后面的html元素在后面显示.
非标准流:在html 文件中,当某个元素脱离的标准流,那么它就处于非标准流
u Css中的盒子模型
盒子模型的示意图:
盒子模型的经典案例:
Html文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>盒子模型案例</title>
<link rel="stylesheet" type="text/css" href="box1.css"/>
</head>
<body>
<div class="div1">
<img src="aa.bmp"/>
</div>
</body>
</html>
Css文件 :
body{
border:1px solid red;/* 1px 表示边框的宽度 solid 实线 red 表示颜色*/
width: 500px;
height: 500px;
/*如果让body自动居中*/
margin:0 auto; /*第一个用于上-下,第二个用于左-右。auto表示自动居中*/
}
/*盒子模型的概念 : margin, padding, border content */
.div1{
width:50px;
height:52px;
border:1px solid blue;
/* margin-top:5px;
margin-left:5px;*/
margin: 5px 0px 0px 5px;
/*padding-top:35px;*/
}
.div1 img{
width:40px;
height:40px;
margin-top:5px;
margin-left:5px;
}
盒子模型的综合案例2
分析:思路
基本结构
<div>
<ul>
<li><img src=””/></li>
</ul>
</div>
Html文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="box2.css"/>
</head>
<body>
<!--div在布局起到一个控制整个内容显示的位置-->
<div class="div1">
<!--ul在布局中作用是可以控制显示内容多少-->
<ul class="faceul">
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
<li>
<img src="aa.bmp" />
</li>
</ul>
</div>
</body>
</html>
Css文件
.div1{
width:500px;
height:300px;
border:1px solid gray;
margin-left:200px;
}
.faceul{
width:400px;
height:250px;
border:1px solid red;
padding-left:5px;
margin-left:10px;
}
.faceul li{
list-style-type:none;
float:left;/*左浮动,这个知识点后面说*/
width:50px;
height:52px;
border:1px solid red;
margin-right:15px;
margin-top:15px;
}
.faceul li img{
margin-left:5px;
margin-top:5px;
width: 40px;
height:40px;
}
u 浮动
在div+css中浮动分为 左浮动,右浮动,清除浮动
① 右浮动
所谓右浮动 ,指 一个块元素向右移动,让出自己空间, 向右移动直到碰到包含自己的父元素的最右边的边框.
② 左浮动
快速入门 :
.div1{
width:150px;
height:100px;
border:1px solid blue;
background: pink;
margin-top:5px;
float:left;/*左浮动*/
}
从这个案例我们可以看出,所谓左浮动就是指: 某个块元素尽量向左边移动,这样就让出它右面的空间,让别的块元素显示.
浮动的特别说明:
如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮
动元素“卡住”:直到有足够空间.
Zij: 一般是向后找
☞ 如果使用浮动属性 : 则该元素不管是不是块元素,(l浏览器)都会按照 display: block来显示.
小总结:
你可以这么理解浮动:如果一个元素右/左浮动则:
①它本身会尽可能向右/左移动,直到碰到边框或者
别的浮动元素,特别强调浮动对块元素和行内元素都
生效!
②元素向右/左浮动,就相当于让出自己的左/右边,别
的元素就会在它的左/右边排列。
再一个案例:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<img style="float:left;margin-right:5px;" src="2.jpg"/>爱克发kadlkaflksaflkas;lfkaslfksa;lfksafkas;lf爱克发
</body>
</html>
如何清除浮动,我们在项目中说明
网上有一个站点 ;禅意花园 -> csdn 网页论坛
开源之祖 sourceforeg .net
Php 开源 http://www.php-open.com 模仿->()创新
u 定位
常见的定位有四种
1. static 定位 (默认值)
2. relative 相对定位
3. absolute 绝对定位
4. fixed 固定定位.
相对定位:
这里我们看出,所谓相对定位是指,相对该元素应当显示的左上角重新定位,虽然它脱离的标准流,但是它的空间,不能被占用.
绝对定位:
从上图看,所谓绝对定位是指,对该元素最近的那个脱离了标准流的元素定位,如果没有父元素(或者有父元素,但是父元素没有脱离标准流),则相对body左上角定位.
怎么理解 上面标红的字
代码:
Html:
<body>
<div class="div1">
内容1
</div>
<div class="div1">
内容3
</div>
<div class="div1">
内容4
</div>
<div class="div2">
<div id="spe" class="div1">
内容2
</div>
</div>
</body>
Css文件:
.div2{
position:relative;
left:100px;
top:100px;
width:200px;
height:150px;
background:pink;
float:left;
}
u Fixed定位
所谓fixed定位就是不管怎样,总是以视窗的左上角定位.
☞ left top 属性 对 static 没有效果 , static 定位是靠 margin-left margin-top 来移动位置的.
u z-index
用于设置对象(div) 显示时候,层叠的属性, z-index值越小,则越在下层显示!!
☞ 当父层不设置高度,而子层进行了float,因为父层是标准流,会不认识子层的存在,所以高度会自动变成0.解决办法一是在父层里面,最后一个子层后面加一个块状元素,然后给这个块状元素清除浮动;二是给父层进行浮动,让它认识子层,高度会自动撑开
相关文章推荐
- 用php脚本给html中引用的js和css路径打上版本
- Excel表头转html表头(PHP版本)
- php不同版本htmlspecialchars函数过滤GBK编码时中文为空
- php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
- html(对php也有效)页面自动刷新和跳转(简单版本)
- 商务通跳转代码(php和html两个版本)
- 都是 htmlspecialchars的错,解决 织梦cms dedecms 标题不能为空 不支持php5.3 php5.4 php5.5版本
- 都是 htmlspecialchars的错,解决 织梦cms dedecms 标题不能为空 不支持php5.3 php5.4 php5.5版本
- php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
- PHP版本的区别
- HTML 代码判断ie版本
- snappy压缩工具的PHP拓展版本介绍[译]
- 关于最新版apache24版本和php7.0版本的安装以及V14运行库的安装
- Php学习之Html内容简介
- php 正则去除 html 标签
- php动态网页实现页面静态化 通过在初次被访问时生成html文件保存起来,下次该PHP程序被访问时就直接找到以前被访问过的html页面
- html asp php java 清除缓存
- PHP 截取指定字数,中英文带html均可使用
- PHP实例——输出安全的HTML代码