php版本divcss html

最新推荐文章于 2021-03-13 01:49:02 发布

luyuncsd123

最新推荐文章于 2021-03-13 01:49:02 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/luyuncsd123/article/details/8248226

版权

1. html (hypertext mark-up language)是超文本标记语言, 主要的用处是做网页, 可以在网页上显示文字、图像、视频、声音…

☞ 标记==元素

简单说明一下动态网页的示意图:

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>

</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>

<body>

<font color="red">远近高低各不同</font><br/>

<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)

超链接的案例:

<a href="http://www.baidu.com">跳转到百度</a><br/>

<a href="mailto: hanshunping@tsinghua.org.cn">联系管理员</a>

图片:

u Html的表格元素

l 在以前对网页布局要求不高的情况下，使用 table 布局(即使用表格来显示数据，同时用于布局)

快速入门:

<html>

<body>

</tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

应用案例：

1. 确定行

代码如下:

<html>

<body>

<!--

<!--tr表示一行

</tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>-->

</table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

课堂练习:

<html>

<title>俺第一个实例</title>

<head>

</head>

<body>

成绩表

</center>

<br/>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

<td rowspan="2"

>下午</td>

</tr>

</tr>

</table>

</body>

</html>

u 无序列表

<ul>

</ul>

案例:

代码:

</ul>

☞ type 可以取 disc 、 circle 、 square

u 有序列表

代码:

</ol>

☞ type用于指定用什么来显示, start 表示从第几开始计算.

u Frameset框架集

用途主要是用于分割显示多个页面

☞ framest 和 frame 配合使用，一般讲是用于后台页面

快速入门:

代码

A2.html 页面用于保护其它页面

</frameset>

☞ 该页面不能有body和body体

b.html

</body>

☞ target 属性值有四个

_blank : 表示打开一个全新的页面

_self: 替换本页面

_top:

_parent:

* 还有一个就是在 target 值中直接写对应的那个 frame的名字.

c.html:

歌词大全

</body>

其它页面

Frameset的综合小案例:

结构示意图:

案例

All.html

</frameset>

Top.html

Left.html

<ul>

</ul>

</body>

Right.html

歌词大全

</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/>

</body>

</html>

u 表单元素

为什么需要？

看一个图:

从上图可以看出，我们需要把一些数据提交给服务器处理,比如注册用户,发帖…,这样就需要使用到表单元素( 常见输入框、单选框、复选框、文本域、密码框、上传文件。。。)

基本结构

一般说，表单元素通常是被 <form> 包含起来的

入门案例:

<html>

<head>

</head>

<body>

用户名:<input type="text" name="username"/><br/>

密　码:<input type="password" name="password"/><br/>

</form>

</body>

</html>

Ok.html

Ok,登录成功

原理图:

请考虑：如果我们希望偷偷的提交数据,不要影响节目效果，可以考虑使用隐藏域

案例代码:

<html>

<body>

您最喜欢哪些城市:

<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">男

隐藏域的使用

下拉列表<br/>

请选择您的出生地:

</select><br/>

</textarea><br/>

</form>

</body>

</html>

课堂练习:

u 多媒体

<html>

<head>

<title>我的电影网站</title>

</head>

<body>

<!--

</body>

</html>

u 照着html文档，我们对html在加强一把

图像映射技术:

案例:

<html>

<head>

<!--

function show(){

window.alert('点击了矩形区域');

}

-->

</script>

</head>

<body>

</map>

</body>

</html>

代码:

<html>

<body>

<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>

</head>

<body>

</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>

<body>

</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>

a:link img{

filter:gray;

}

a:hover img{

filter:"";

}

</style>

</head>

<body>

</body>

</html>

u Css中常用的四种选择器

1. 类选择器(class选择器)

基本使用

.类选择器{

属性名: 属性值;

….

}

2. id选择器

基本使用

#id选择器{

属性名: 属性值;

….

}

案例:

/*id选择器的使用*/

#id1{

background-color:silver;

font-size:40px;

}

3. html元素选择器

某个html元素{

属性名:属性值;

…

}

Table{

}

Button{

}

//对html元素样式分类

P:cls{

}

需求人员(技术+行业背景)

财务软件(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的样式就是。。。。

<span>xxxxx</span>

</div>

</div>

#id1 span span {

color:green;

}

#id1 span span a{

color:blue;

}

通过上面总结:

① 父子选择器可以有多级(但是在实际开发中不要过三层)

② 父子选择器有严格的层级关系

③ 父子选择器不局限于什么类型选择器

比如

#id span span

.s1 #id span

div #id .s2

2. 一个元素可以同时有id选择器和class选择器

案例:

3. 一个元素最多有一个id选择器，但是可以有多个类选择器

使用方法如下:

<元素 class=”类选择器1 类选择器2” />

Html部分

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>

</head>

<body>

<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>

</head>

<body>

</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>

</ul>

</div>

Html文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</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>

内容1

</div>

内容3

</div>

内容4

</div>

内容2

</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.解决办法一是在父层里面，最后一个子层后面加一个块状元素，然后给这个块状元素清除浮动；二是给父层进行浮动，让它认识子层，高度会自动撑开

luyuncsd123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫