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

后盾网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/   

网页学习者 发表于 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

学习课后作业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来装饰(控制)效果如下:

网页学习者 发表于 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>

网页学习者 发表于 2014-10-3 08:33:57

当已经设置好了div的数值,这个时候,如果增加paddding的数值,这个时候一定要注意可能会引起div的数值发生变化,所以一定要修改div其本身的height 和width的数值来保证这个padding的数值的正确性!
例如:
.four{
                width:300px;
                height:260px;
                background:white;
                float:left;
                margin:10px;
                padding:10px;
        }

页: [1]
查看完整版本: 后盾网css+div教程