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

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

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

标签:DIV+CSS实现网页布局实例代码(1) 布局(72)foo(1)代码(82)网页(168)实现(100)div(47)实例(55)DIV+CSS(51)
} div id=footer/div .four { float:right; width:190px; height:200px; background:#f0fff0; } Tag:代码 网页布局 CSS DIV 代码 网页布局 CSS DIV 本文咱们只是简略的实现了页面的布局。在下一文中我们将实现全部页面。 #banner{ float:right; width:540px
DIV+CSS实现网页布局实例代码(1)》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335122013.htm

 }

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

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

Tag:代码   网页布局   CSS   DIV   代码   网页布局   CSS   DIV  

本文咱们只是简略的实现了页面的布局。在下一文中我们将实现全部页面。

 #banner{
  float:right;
  width:540px;
  height:90px;
  margin:0px;
  clear:left;
  background:blue;
 }
 
 #menu {
    width:800px;
     height:35px;
     margin:auto 0px;
   clear: both;
 
 }
 
 ,DIV+css完美实现Textarea效果;
 .nav {
 margin:auto 0px;
  width:800px;
  height:10px;
   clear:both;
   background:#ffffff;
    line-height:10px;
 }

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

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

 ,div+css多浏览器测试方法;}


 <div class="right_main"></div> 
 <div class="nav">nav<,Div+Css基础知识点总结;/div>

 ,DIV+css初学者需要引起重视的10个问题与技巧;#container {
  width:800px;
  height:1000px;
  margin:auto 0px;
 }

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


</div>

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


 .left_b {
  margin:0px;
  float:right;
  width:300px;
  height:205px;
  background:blue,div+CSS 兼容小摘;
  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;
 }

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

</body>

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

 .nav_a {
 float:left;
 margin:0px,DIV+CSS 全屏垂直居中的一个办法;
  width:610px;
   height:10px;
   clear:both;
   background:#ffffff;
    line-height:10px;
 }
 
 .left_main {
   margin:0px;
   float:left;
   width:610px;
   height:420px;
   background:red;


 </div>

 #header {
          float:left;
    ,div 实现长英文字母自动换行CSS;       width:800px;
           height: 100px;
         margin:auto 0px;
       ,div css表单布局的五个小技巧;     background:red;
          clear:both;
       
 }

<div class="left_main">

我们将通过一个代码实例实现网页布局,详细后果如图:

</html>

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

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

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

--> [网站建设之]DIV+CSS实现网页布局实例代码(1)

  <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 id="menu"></div>
 <div class="nav">nav</div>
 
 <div class="left_main">
  <div class="left_a"> </div>
  <div class="left_b"></div>


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

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

 #logo {
  ,DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义;float:left;
  width:250px;
  height:90px;
  background:green;
  ,DIV CSS样式在SEO中的命名规则;clear:right;
   margin:opx;
 }

 </div>

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


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


(责任编辑:网站建设)
DIV+CSS实现网页布局实例代码(1)相关文章
上一篇:DIV+css完美实现Textarea效果 下一篇:DIV+CSS实现网页布局实例代码(2)
回到顶部