后盾网css+div教程

quanshiyinian · 发表于 2014-8-6 00:38:05

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

后盾网css+div教程
课程介绍：
html" target="_blank" class="relatedlink">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/

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！

网页学习者 · 发表于 2014-10-1 20:52:22

第二节课后作业

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

复制代码

网页学习者 · 发表于 2014-10-1 20:17:48

本帖最后由网页学习者于 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+css div布局 css来装饰（控制）效果如下：

网页学习者 · 发表于 2014-10-3 08:23:47

在设置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>