打印

一个纯CSS+DIV的液态布局代码

junstudio

管理员

Rank: 9 Rank: 9 Rank: 9

1^# 大中小发表于 2007-6-23 21:12 只看该作者

一个纯CSS+DIV的液态布局代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Bold Blue Rounded Layout 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="key<span href="tag.php?name=word" onclick="tagshow(event)" class="t_tag">word</span>s" content="Layout2, 404 creative studios" />
<meta name="description" content="simple <span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span> driven <span href="tag.php?name=layout" onclick="tagshow(event)" class="t_tag">layout</span>" />
<style type="text/<span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span>">
<!--
body {margin:0px; background-color:#D8D8D8;}
body,td {font-family:verdana,arial,sans-serif; font-size:11px; }
h1,h2,h3,h4,h5,h6 {font-family:"Trebuchet MS",helvetica,sans-serif; color:#FF8000; letter-spacing:1px;  }
h1 {font-size:22px;}
h2 {font-size:20px;}
h3 {font-size:18px;}
h4 {font-size:16px;}
h5 {font-size:14px;}
h6 {font-size:14px;}
blockquote {font-family:"Trebuchet MS",helvetica,sans-serif; color:#004A66; font-size:16px; font-style:italic; font-weight:bold; border-top:1px dashed #CCC; border-bottom:1px dashed #CCC; margin:10px; padding:30px 10px 30px 10px; text-align:center; background-color:#EEE; margin-left:0px; }
/* styles for tabbed navigation */
#navlist { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px "Trebuchet MS", sans-serif; text-align:center; }
#navlist li { list-style: none; margin: 0; display: inline; }
#navlist li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #EEE; text-decoration: none; }
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover { color: #FFF; background: #336699; border-color: #227; }
#navlist li a#current { background: white; border-bottom: 1px solid white; }
#navlist li a:hover#current { background: white; border-bottom: 1px solid white; color:#448; }
#pageHeader {height:50px; line-height:50px; color:#80FF00; font-family:"Trebuchet MS",helvetica,sans-serif; font-size:24px; padding:10px 16px 10px 16px; background-color:#004A66;  border-bottom:1px solid #FFF; }
#topNav {background-color:#0f0;}
#divBaseLinks {height:30px; background-color:#004A66;  border-top:1px solid #FFF; padding:0px 10px 0px 10px; line-height:30px; color:#FFF;}
#divBaseLinks a:link {color:#FFF; text-decoration:none;}
#divBaseLinks a:visited {color:#FFF; text-decoration:none;}
#divBaseLinks a:hover {color:#FFF; text-decoration:none;}
#divBaseLinks a:active {color:#FFF; text-decoration:none;}
#container {margin:20px; background-color:#FFF; min-width:760px;}
#divPageContent {border-top:3px solid #FF8000; border-bottom:3px solid #FF8000; padding:0px 0px 10px 0px;  }
#sideBarNewsContent {background-color:#EEE; padding:10px; }
#newsHeader {height:22px; line-height:22px; color:#80FF00; font-family:"Trebuchet MS",helvetica,sans-serif; font-size:14px; padding:0px 5px 0px 5px; background-color:#004A66;  border-bottom:1px solid #FFF; }
.leftColumn { padding:0p 5px 0px 5px; width:170px;}
.rightColumn {padding:0px 10px 10px 10px; border-left:1px dashed #CCC;}
.subHeader {font-family:"Trebuchet MS",helvetica,sans-serif; color:#004A66; font-size:16px; letter-spacing:1px; font-weight:bold; margin:10px 0px 10px 0px; border-bottom:1px solid #004A66;}
.note {font-weight:bold; color:#800000; font-style:italic; background-color: #FFF0B7; padding:5px; border:1px solid #FFB96C; }
.newsItem {margin-bottom:5px; font-size:9px; }
.readNewsLink {margin-bottom:10px; font-size:9px; }
/* styles for rounded corners */
b.rtop, b.rbottom{display:block;background: #D8D8D8}
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #004A66}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

-->
</style>
</head>
<body>
<div id="container">
  
  <b class="rtop"><b class="r1"></b><b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
  
  <div id="pageHeader">Bold Blue Rounded Layout 2</div>
  <div id="divPageContent">
    <div id="navcontainer">
      <ul id="navlist">
        <li id="active"><a href="index.html" id="current">Item one</a></li>
        <li><a href="index.html">Item two</a></li>
        <li><a href="index.html">Item three</a></li>
        <li><a href="index.html">Item four</a></li>
        <li><a href="index.html">Item five</a></li>
        <li><a href="index.html">Item six</a></li>
        <li><a href="index.html">Item seven</a></li>
        <li><a href="index.html">Item eight</a></li>
      </ul>
    </div>
    <table border="0" cellpadding="5" cellspacing="0">
      <tr>
        <td valign="top" class="leftColumn"><div id="sideBarNews">
            <div id="newsHeader">News</div>
            <div id="sideBarNewsContent">
              <div class="newsItem">A re-engineering of your current world view will reaffirm your online presence enabling a more effervescent solution.</div>
              <div class="readNewsLink"><a href="index.html">Read More</a></div>
              <div class="newsItem">A re-engineering of your current world view will reaffirm your online presence enabling a more effervescent solution.</div>
              <div class="readNewsLink"><a href="index.html">Read More</a></div>
              <div class="newsItem">A re-engineering of your current world view will reaffirm your online presence enabling a more effervescent solution.</div>
              <div class="readNewsLink"><a href="index.html">Read More</a></div>
            </div>
          </div></td>
        <td valign="top" class="rightColumn"><h2>Welcome to Bold Blue Rounded Layout 2</h2>
          <p class="subHeader">Subheading</p>
          <p>This <span href="tag.php?name=layout" onclick="tagshow(event)" class="t_tag">layout</span> includes the index.html file and a supporting <span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span> file. The size for both is only 9k. A re-engineering of your current world view will reaffirm your online presence enabling a more effervescent solution. Upscaling voluminous networking exchange solutions will result in your achieving an <span href="tag.php?name=excel" onclick="tagshow(event)" class="t_tag">excel</span>lent systemic electronic data interchange synchronization, thereby exploiting technical environments for mission critical broad-based capacity-constrained systems. This will fundamentally cause a morphing into a well designed and actionable information infrastructure whose semantic content is downright null. To more fully clarify the current concept, a few aggregate issues will require addressing to facilitate a distributed communication venue. In integrating non-aligned structures into existing legacy systems, an even more effervescent (bubbly) gateway blueprint in a backward compatible package of tangible and immeasurable strategic value will result in right-sizing the conceptual <span href="tag.php?name=framework" onclick="tagshow(event)" class="t_tag">framework</span>s, but only when thinking outside the box. This being said, the ownership issues inherent in dominant thematic implementations cannot be understated vis-a vis David Bowie, for instance.</p>
          <blockquote>“Designers must do two seemingly contradictory things at the same time: They must design for perfection, and they must design as though errors are inevitable. And they must do the second without compromising the first..”<br />
            Bob Colwell</blockquote>
          <p>A re-engineering of your current world view will reaffirm your online presence enabling a more effervescent solution. Upscaling voluminous networking exchange solutions will result in your achieving an <span href="tag.php?name=excel" onclick="tagshow(event)" class="t_tag">excel</span>lent systemic electronic data interchange synchronization, thereby exploiting technical environments for mission critical broad-based capacity-constrained systems. This will fundamentally cause a morphing into a well designed and actionable information infrastructure whose semantic content is downright null. To more fully clarify the current concept, a few aggregate issues will require addressing to facilitate a distributed communication venue. In integrating non-aligned structures into existing legacy systems, an even more effervescent (bubbly) gateway blueprint in a backward compatible package of tangible and immeasurable strategic value will result in right-sizing the conceptual <span href="tag.php?name=framework" onclick="tagshow(event)" class="t_tag">framework</span>s, but only when thinking outside the box. This being said, the ownership issues inherent in dominant thematic implementations cannot be understated vis-a vis David Bowie, for instance.</p>
          <p><a href="http://validator.w3.org/check?uri=referer">This page validates as XHTML 1.0 Transitional</a></p>
          <div class="note">While this <span href="tag.php?name=layout" onclick="tagshow(event)" class="t_tag">layout</span> is free for use. A link back to the author's website would be apprceciated. [url]www.404creative.com[/url]</div></td>
      </tr>
    </table>
  </div>
  <div id="divBaseLinks"><a href="index.html">Home</a> | <a href="index.html">Sitemap</a></div>
  
  <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
  
</div>
<div class="spacer"> </div>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

霹雳火

新手上路

Rank: 1

2^# 大中小发表于 2007-7-4 15:16 只看该作者

从去年起, 偶所切割的网页全部都是div+css的了.

TOP

DeadFire

新手上路

Rank: 1

3^# 大中小发表于 2007-7-10 08:32 只看该作者

嗯，不错不错。

一个问题是如果这种称为液态布局，那么那种随着窗口分辨率大小而会自动浮动布局的那种是什么布局？有那样的例子代码么？（就是那种一般最右侧会有一些小块的栏目，然后分辨率小的时候会跑到下面排成一行，分辨率大的时候会在右侧成一列的那种。不用javascript，就是纯css的。）

霹雳火：div＋css的页面在改版的时候或者随时调整的时候方便么？就是今天要去一个栏目了，然后后天又要加一个栏目了，之类的。div＋css的页面工时比table 的真的节省呢还是费时？

TOP

393张高清晰web2.0站点截图	425款精品毛笔墨迹+38款墨迹底纹..	10位Master级别的Photoshop高手	绝对漂亮的笔刷
Soul 近期新作品欣赏..	熟女养成日志—长草	魔幻抽象/吸血鬼传说！！	photoshop仿CG滤镜