后盾网css+div教程
后盾网css+div教程课程介绍:
DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来,不再发布新版本,原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化,用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展,适合自动数据交换,并且更加规整。在XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。
为了让更多的朋友通过互联网平台学到专业的技术知识,后盾网于2010年10月开始录制视频教程,课程含盖DEDE 织梦CMS视频教程,jquery框架视频教程,PHP视频教程,Mysql视频教程,ThinkPHP视频教程,ECMS帝国视频教程,Dreamweaver CS5视频教程,html视频教程,DivCss网页标准化布局视频教程,只为让大家通过后盾网视频能得学到有用的知识。
每天一小步,人生一大步!
视频地址:http://www.verycd.com/topics/2894813/
第二节课后作业
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>浮动作业提交</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
</head>
<style>
#iside{
width: 20px;
height:100px;
background:green;
float:left;
}
#rside{
width: 20px;
height:150px;
background:blue;
float:left;
}
#common{
width:300px;
height:300px;
background:orange;
}
</style>
<body>
<div id="iside">我是左面</div>
<div id="rside">我是右面</div>
<div id="common">我是普通div</div>
</body>
</html>
学习课后作业01
本帖最后由 网页学习者 于 2014-10-1 20:20 编辑网页学习第一课后作业,我自己写的代码,嘿嘿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>用div来进行页面的布局,加入css样式来表达。</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
div{
height:300px;
background:blue;
}
#main{
background: green;
}
#footer{
background: gray;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html> 求指导,简单的div+cssdiv布局 css来装饰(控制)效果如下:
在设置padding的数值的时候,padding的内边距会增大div的面积。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>16课padding的设置与背景的关系</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="道勤教育 http://www.daoqin.net" />
<style>
div{
width:200px;
height:200px;
background:gray;
border:10px solid blue;
padding:20px;
}
</style>
</head>
<body>
<div>
hahahh
</div>
</body>
</html>
当已经设置好了div的数值,这个时候,如果增加paddding的数值,这个时候一定要注意可能会引起div的数值发生变化,所以一定要修改div其本身的height 和width的数值来保证这个padding的数值的正确性!
例如:
.four{
width:300px;
height:260px;
background:white;
float:left;
margin:10px;
padding:10px;
}
页:
[1]