首页  >  文章  >  web前端  >  div+css网页布局设计新开端(1)

div+css网页布局设计新开端(1)

黄舟
黄舟原创
2016-12-29 14:11:021217浏览

DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式,可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。XHTML基于可扩展标记语言(XML),是一种在HTML 基础上优化和改进的的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。在XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。 

以前都是table布局。。现在已经基本不用了(table只用来显示数据)
div中文里是区域的意思,css则是层叠样式表的意思,可见核心是布局,而不是样式

在学习DIV+CSS之前,一定要熟悉HTML,DIV+CSS要在HTML的基础上学习

好了,现在是用什么工具,一般用记事本就可以了 也就是记事本+浏览器就OK,服务器都不需要,也可以用dreamweaver cs5,这个有提示,帮助文档最好下个中文版的CSS样式表手册,这样就齐活啦

以上东西网上很容易找到,也可以在群 web编程开发:197132320 下载,当然也欢迎热爱web编程的朋友加入

下面开始学,首先熟悉下html的基本结构,创建一个html文件test.html

<html>
<head>
<title>这是HTML基本结构</title>
<head>
<body>
hello!
</body>
</html>

当然,你直接在html文件直接输入hello也能正常显示,但这不符合标准
下面认识下div,其实可以把他看作一个容器,或者一个盒子,他是专门盛放内容的

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div>这是一个div</div>
</body>
</html>

但是你在网页上是看不到这个div的,因为他还是透明的
我们需要给他样式让他显示,首先让他的边框显示,宽高度100px,背景色为红色

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div>
</body>
</html>

每一个html标签都有style属性,div当然也不例外
border:solid 1px border表示css边框属性 solid 1px 是它的两个值 注意要空格
solid 表示边框实现显示 1px表示边框宽度为1像素 
什么是像素 看这里http://baike.baidu.com/view/575.htm

width:100px;height:100px;是设置div的宽度和高度 注意每个属性给值用: 属性之间隔开用;
background:red 背景设置红色

如上代码在浏览器显示如下

586.jpg

关闭边栏

CSS主页 > web编程 > CSS >

大中小

div+css网页布局设计新开端(1)

时间:2014-03-09 20:49    点击:709次

DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式,可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。XHTML基于可扩展标记语言(XML),是一种在HTML 基础上优化和改进的的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。在XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。 

以前都是table布局。。现在已经基本不用了(table只用来显示数据)
div中文里是区域的意思,css则是层叠样式表的意思,可见核心是布局,而不是样式

在学习DIV+CSS之前,一定要熟悉HTML,DIV+CSS要在HTML的基础上学习

好了,现在是用什么工具,一般用记事本就可以了 也就是记事本+浏览器就OK,服务器都不需要,也可以用dreamweaver cs5,这个有提示,帮助文档最好下个中文版的CSS样式表手册,这样就齐活啦

以上东西网上很容易找到,也可以在群 web编程开发:197132320 下载,当然也欢迎热爱web编程的朋友加入

下面开始学,首先熟悉下html的基本结构,创建一个html文件test.html

<html>
<head>
<title>这是HTML基本结构</title>
<head>
<body>
hello!
</body>
</html>

当然,你直接在html文件直接输入hello也能正常显示,但这不符合标准
下面认识下div,其实可以把他看作一个容器,或者一个盒子,他是专门盛放内容的

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div>这是一个div</div>
</body>
</html>

但是你在网页上是看不到这个div的,因为他还是透明的
我们需要给他样式让他显示,首先让他的边框显示,宽高度100px,背景色为红色

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div>
</body>
</html>

每一个html标签都有style属性,div当然也不例外
border:solid 1px border表示css边框属性 solid 1px 是它的两个值 注意要空格
solid 表示边框实现显示 1px表示边框宽度为1像素 
什么是像素 看这里http://baike.baidu.com/view/575.htm

width:100px;height:100px;是设置div的宽度和高度 注意每个属性给值用: 属性之间隔开用;
background:red 背景设置红色

如上代码在浏览器显示如下


还得提一下,浏览器最好用IE8 谷歌浏览器,火狐浏览器,360的也可以
因为他们支持css标准还算兼容,别的浏览器就说不准了,你看的结果可能不一样
css浏览器兼容日后再说



引入css样式除了上面一种,还有两种
一种是外部样式引入,特别推荐这种,一种是内部样式

外部样式引入需要在head标签里加
c9fb859d959b7211a7c60496e32f8558
另外还的在html文件相同目录下创建mystyle.css文件

内部样式是直接在head写入,由于贴子特殊性,本贴全部用内部样式,这样看的舒服点,但在实际中最好用外部样式引入

这是内部样式

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
</body>
</html>

这比之前要规范多了,body里也看的简单多了,要多多用这种样式与内容分离模式



如果是这种

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div style="border:solid 1px;width:200px;height:200px;background:green">这是一个div</div>
</body>
</html>

两种样式你觉得它会采用哪个?
style属性这种是内联样式
这就是优先级问题,它会采用离它最近的那个,也就是style属性里的
同样,如果外部样式与内部样式相同,它会优先采用内部样式的
如果不是全部都相同,它会把不同的合并起来,相同的就优先采用内部样式的
优先级
内联》内部》外部

 以上就是div+css网页布局设计新开端(1)的内容,更多相关内容请关注PHP中文网(www.php.cn)!


声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn