论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准，xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

div+css教程_DIV+CSS实现网页布局实例代码(1)

文章类别：div+css | 发表日期:2011-4-29 9:33:03

div+css教程_DIV+CSS实现网页布局实例代码(1)

 

div+css视频教程共三课,57集。由“21视频教程网”www.21shipin.com 精心打造,每个知识点都对应着实例进行贯通巩固，并提供了对应实例的源码示例下载，及作业的讲解视频，老师答疑等;
   视频教程内容主要包括：web,Css语法基础及代码瘦身,div+css布局实例讲解,xml+css布局的讲解等。

课程总目标 课程目标 Web标准概论
Web标准中标记应用思路 检测网站符合web标准 学习div+css的相关学习工具
xhtml语法及与html区别 div标签 Dreamweaver中css的使用
新建CSS规则面板的介绍 css类型面板介绍 css背景面板介绍
css区块面板介绍 css方框面板介绍 css边框面板介绍
css列表面板介绍 Div+css布局流程 Div+css布局实例操作-切片
布局实例操作-定义布局层 布局实例操作-逐步定义每个层(body) 布局实例操作-逐步定义每个层(top)
布局实例操作-逐步定义每个层(contents) 布局实例操作-逐步定义每个层(left) 布局实例操作-逐步定义每个层(foot)
布局实例操作-逐步定义每个层(left) 布局实例操作-逐步定义每个层(main) 布局实例操作-逐步定义每个层(right)
定义全文文字样式 定义指定层里文字样式(使文字垂直居中) 定义标题样式(h1,h2,h3,h4)等
定义全页链接样式 定义指定层里链接样式 定义ul的项目符号
导航栏设置1 导航栏设置2

 

我们将通过一个代码实例实现网页布局，具体效果如图：

本文我们只是简单的实现了页面的布局。在下一文中我们将完成整个页面。

本文代码如下： 

<html>
<head>
 <title>div+css实现网页布局实例代码</title>

<style>
<!--
 body{
  margin:0px;
  text-align:center;
  background:#ffffcc;
 } 

 #container {
  width:800px;
  height:1000px;
  margin:auto 0px;
 }

 #header {
          float:left;
           width:800px;
           height: 100px;
         margin:auto 0px;
            background:red;
          clear:both;
       
 }

 #logo {
  float:left;
  width:250px;
  height:90px;
  background:green;
  clear:right;
   margin:opx;
 }

 #banner{
  float:right;
  width:540px;
  height:90px;
  margin:0px;
  clear:left;
  background:blue;
 }
 
 #menu {
    width:800px;
     height:35px;
     margin:auto 0px;
   clear: both;
 
 }
 
 
 .nav {
 margin:auto 0px;
  width:800px;
  height:10px;
   clear:both;
   background:#ffffff;
    line-height:10px;
 }

 .nav_a {
 float:left;
 margin:0px;
  width:610px;
   height:10px;
   clear:both;
   background:#ffffff;
    line-height:10px;
 }
 
 .left_main {
   margin:0px;
   float:left;
   width:610px;
   height:420px;
   background:red;

 }

 .right_main{
  margin:0px;
  float:right;
  width:180px;
  height:420px;
  background:green;
  clear:left;
 }

 .left_a {
  margin:0px;
  float:left;
  width:300px;
  height:205px;
  background:blue;

 }


 .left_b {
  margin:0px;
  float:right;
  width:300px;
  height:205px;
  background:blue;
  clear:left;
 }
 
 .con {
  margin:auto 0px;
   width:800px;
   height:200px;
  background:green;
  clear:both; 
 
 }
 
 .one {
  float:left;
  width:200px;
  height:200px;
  background:#ff99f0;
  clear:right;
 }

  .two{
  float:left;
  width:200px;
  height:200px;
  background:#ffcc00;
 }

  .three {
  float:left;
  width:200px;
  height:200px;
  background:#0ffff0;
 }

 .four {
  float:right;
  width:190px;
  height:200px;
  background:#f0fff0;
 }

 #footer {
  width:800px;
  height:100px;
  background:red;
  margin:auto 0px;
  padding-top: 30px;
  color: #ffffff;
 }
//--> 
</style>
</head>


<body>
<div  id="container" >
 <div id="header">
  <div id="logo"></div>

  <div id="banner"></div>
 </div>

 <div id="menu"></div>
 <div class="nav">nav</div>
 
 <div class="left_main">
  <div class="left_a"> </div>
  <div class="left_b"></div>

  <div class="nav_a">nav_left</div>

  <div class="left_a"></div>
  <div class="left_b"> </div>
 </div>
 <div class="right_main"></div> 
 <div class="nav">nav</div>


 <div class="con">
  <div class="one"></div>

  <div class="two"> </div>

  <div class="three"> </div>
 
  <div class="four"> </div>

 </div>

<div class="left_main">


  <div class="left_a"></div>
  <div class="left_b"></div>
  <div class="nav_a">nav_left</div>


 </div>


 <div class="right_main"></div> 
 <div class="nav">nav</div>

<div id="footer"></div>


</div>

</body>

</html>

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058