论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: 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实现网页布局实例代码(2)

文章类别:div+css | 发表日期:2011-4-29 9:32:22

div+css教程_简述CSS Selector的优先级

 

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

 

首先我们来介绍一下页面设计的时候需要注意的一些问题。做一个网站主页面最好不要超过三屏,如果内容太多的话利用选项卡来代替。标题用<h3>比较容易符合搜索引擎优化。
  我们完成的效果图:

 


该布局完整代码:

   <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;
 
 }
 
 #menu  ul {
  float:left;
  list-style:none;
  margin:0px;
 }

 #menu ul li {
  float:left;
  dispaly:block;
  line-height:35px;
  margin:0 10px;
 }

 .menuDiv {
  width:1px;
  height:35px;
  background:green;
 }

 #menu ul li a:link, #menu ul li a:visited {

 font-weight:bold; color:blue;
 }

 #menu ul li a:hover {

  font-width:800;
  color:red;
 }

 .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;
 }
  #footer a:link, #footer a:visited,{
    text-decoration:none;
    color: #ffffff;
 }
 #footer a:hover{
    text-decoration:underline;
    color: #ffffff;
  }
 
 .tab1  h3{
  float:left;
  width:300px;
  height:20px;
  line-height:20px;
  margin:0px;
  font-size:13px;
  text-align:left;
  color:red;
  background:green;
  padding-left:10px;
 }

 .tab2{
          width:300px;
          height:180px;
       
         background:yellow;
      
 }

 .tab2  ul {
  margin: 4px 0 0;
  list-style:none;
  padding:0;
 }
 
 .tab2 li
 {
  float:left;
  width:50%;
 }

 .tab2 li a {
  display:block;
  width:84%;
  height:25px;
  line-height:25px;
  margin-left:8%;
  font-size:12px;
  text-decoration:none;
  color:#333;

 }

 #tab {
  float:left;
  margin:0px;
  width:600px;
  height:260px;
  position:relative;
  background:green;
 }

 #tab h3{
  float:left;
  width:120px;
  height:26px;
 
  line-height:26px;
  margin:0 -1px 0 0 ;
  font-size:12px;
  cursor:pointer;
  text-align:center;
  color:#ff00ff;
  background:#aacc33;
 }
 
 #tab div {
  display:none;
 }
 
 #tab .block {

  display:block;
 }

 #tab .up {

  background:blue;
 }
 #tab  div {
              float:left;
              top:26px;
              left:0px;
              width:600px;
              height:230px;
             border:solid #eee;
             border-width:0 1px 1px;
             background:#0f0f0f;
 }

 #tab ul{
  float:left;
  margin:15px 0 0;
  list-style:decimal;
  padding:0;
  clear:right;
 }
 
 #tab li {
  float:left;
  width:50%;
  background:#123456;
 }
 #tab li a{
  display:block;
  width:90%;
   height:25px;
  line-height:25px;
  margin-left:8%;
  font-size:12px;
  text-decoration:none;
  color:#ffffff;
 }

 #tab li a:hover {
  text-decoration:underline;
  color:red;

 }
 
//-->
</style>
</head>


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

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

 <div id="menu">
  <ul>
  <li><a href="#">网站首页</a></li>
  <li class="menuDiv"></li>
  <li><a href="#">关于我们</a></li>
  <li class="menuDiv"></li>
  <li><a href="#">网站首页</a></li>
  <li class="menuDiv"></li>
  <li><a href="#">关于我们</a></li>
  <li class="menuDiv"></li>
  <li><a href="#">网站首页</a></li>
  <li class="menuDiv"></li>
  <li><a href="#">关于我们</a></li>
  <li class="menuDiv"></li>
  </ul>
 </div>
 <div class="nav">
  nav
 </div>
 
 <div class="left_main">
  <div class="left_a">
   <div class="tab1">
    <h3>第一个栏目</h3> 
   </div>

   <div class="tab2">
    <ul>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
 
    </ul>
   </div>

  </div>
  <div class="left_b">
   <div class="tab1">
    <h3>第一个栏目</h3> 
   </div>

   <div class="tab2">
    <ul>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
 
    </ul>
   </div>

  </div>

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

  <div class="left_a">
   <div class="tab1">
    <h3>第一个栏目</h3> 
   </div>

   <div class="tab2">
    <ul>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
 
    </ul>
   </div>

  </div>
  <div class="left_b">
   <div class="tab1">
    <h3>第一个栏目</h3> 
   </div>

   <div class="tab2">
    <ul>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
 
    </ul>
   </div>

  </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 id="tab">
   <h3  onclick="go_to(1)">选择一</h3>
   <h3 onclick="go_to(2)">选择二</h3>
   <h3 onclick="go_to(3)">选择三</h3>
   <h3 onclick="go_to(4)">选择四</h3>
   <h3 onclick="go_to(5)">选择五</h3>

   <div class="block">
    <ul>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
    </ul>
   </div>
  
   <div>
    <ul>
   <li><a href="#">222222222222</a></li>
   <li><a href="#">22222222222</a></li>
   <li><a href="#">222222222222</a></li>
   <li><a href="#">22222222222</a></li>
   <li><a href="#">222222222222</a></li>
   <li><a href="#">22222222222</a></li>
   <li><a href="#">222222222222</a></li>
   <li><a href="#">22222222222</a></li>
   <li><a href="#">222222222222</a></li>
   <li><a href="#">22222222222</a></li>

    </ul>
   </div>

  
   <div>
    <ul>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>
   <li><a href="#">3333333333</a></li>

    </ul>
   </div>
  
   <div>
    <ul>
   <li><a href="#">444444444444</a></li>
   <li><a href="#">4444444444</a></li>
   <li><a href="#">444444444444</a></li>
   <li><a href="#">4444444444</a></li>
   <li><a href="#">444444444444</a></li>
   <li><a href="#">4444444444</a></li>
   <li><a href="#">444444444444</a></li>
 
    </ul>
   </div>
  
   <div>
    <ul>
   <li><a href="#">555555555</a></li>
   <li><a href="#">555555555</a></li>
   <li><a href="#">555555555</a></li>
   <li><a href="#">555555555</a></li>
   <li><a href="#">555555555</a></li>
   <li><a href="#">555555555</a></li>
 
    </ul>
   </div>
  </div>
 </div>
 <div class="right_main">

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

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

<script>
<!--
 var h=document.getElementById("tab").getElementsByTagName("h3");
 var  d=document.getElementById("tab").getElementsByTagName("div");

 function go_to(ao)
 {
  for(var i=0; i<h.length; i++)
  {
   if(ao-1==i)
   {
    d[i].className+=" block";
    h[i].className+=" up";
   }else
   {
    h[i].className=" ";
    d[i].className=" ";
   }
  }
 }
 
//-->
</script>
</body>

</html>      

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