当前位置: 网站建设 > 网页设计 > 建站经验 >

DIV+CSS实现网页布局实例代码(2)

时间:2013-03-02 03:47来源:未知 作者:admin 点击:

标签:DIV+CSS实现网页布局实例代码(2) 布局(72)代码(82)实例(55)实现(100)网站建设(1202)DIV+CSS(51)Di(5)网页(168)
--> [网站建设之]DIV+CSS实现网页布局实例代码(2) #tab { float:left; margin:0px; width:600px; height:260px; position:relative; background:green; } div class=left_a div class=tab1 h3第一个栏目/h3 /div .menuDiv { width:1px; height:35px; backgrou
DIV+CSS实现网页布局实例代码(2)》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335132013.htm
--> [网站建设之]DIV+CSS实现网页布局实例代码(2)

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

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

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

  </div>

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

 }

  background:blue;
 }
 #tab  div {
              float:left;
              top:26px;
              left:0px;
  ,DIV+CSS实现网页布局实例代码(1);            width:600px;
              height:230px;
             border:solid #eee;
             border-width:0 1px 1px;
   ,DIV+css完美实现Textarea效果;          background:#0f0f0f;
 }

  font-width:800;
  color:red;
 }

 #menu ul li a:hover {

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

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

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

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

    </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">

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

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

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

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

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

</html>      

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

  display:block;
 }

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

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

 #tab .up {

 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>

 .nav {
 margin:auto 0px;
  width:800px;
  height:10px;
   clear:both;
   background:#ffffff;
    line-height:10px;
 }

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

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

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

 #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 {

 </div>

   <div class="tab2">
    <ul>
   <li><a href="#">我是中国人</a><,div+css多浏览器测试方法;/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>,Div+Css基础知识点总结;</li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
  ,DIV+css初学者需要引起重视的10个问题与技巧; <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
   <li><a href="#">我是中国人</a></li>
 
    </ul>
   </div>

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

 #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;
 }

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

 }
 .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;
 }

 

   <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><,div+CSS 兼容小摘;a href="#">22222222222</a></li>


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

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

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

<div class="left_main">
  <div class="left_a"></div>
  <div class="left_b"></div>

 }

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

 </div>
 <div class="nav">nav
 </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>

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

<style>
<!--
 body{
  margin:0px,DIV+CSS 全屏垂直居中的一个办法;
  text-align:center;
  background:#ffffcc;
 }

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

首先咱们来先容一下页面设计的时候须要留神的一些问题。做一个网站主页面最好不要超过三屏,假如内容太多的话应用选项卡来取代。题目用<h3>比拟轻易合乎搜寻引擎优化。
  我们实现的后果图:

 #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;
 }

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

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

  </div>
  <div class="left_b">
   <div class="tab1">
    <h3>第一个栏目</h3> 
   </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">,div 实现长英文字母自动换行CSS;</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 css表单布局的五个小技巧;
   </div>

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


该布局完全代码:

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

Tag:实例代码   网页布局  ,DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义; CSS   DIV     实例代码   网页布局   CSS   DIV    

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

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

 #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;
 }

    </ul>
   </div>

 .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;

 font-weight:bold; color:blue;
 }


(责任编辑:网站建设)
DIV+CSS实现网页布局实例代码(2)相关文章
上一篇:DIV+CSS实现网页布局实例代码(1) 下一篇:div+css实现鼠标经过背景变色
回到顶部