精通CSS 源代码
<!DOCTYPE
html PUBLIC "-//W3C//DTD X
HTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/x
html1-strict.dtd">
<
html xmlns="http://www.w3.org/1999/x
html">
<head>
<meta http-equiv="Content-Type" content="text/
html; charset=utf-8" />
<title>Faux Three Column Liquid Layout</title>
<style type="text/
css">
<!--
/* Pretty Stuff
================================== */
/* Zero down margin
and paddin on all elements */
* {
margin: 0;
padding: 0;
}
body {
font: 62.5%/1.6 "Lucida Gr
ande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
background-color:#D4D4D4;
}
h1 {
font-size: 2.4em;
font-weight: normal;
}
h2 {
font-size: 2.0em;
font-weight: normal;
}
p, li {
font-size: 1.4em;
}
h1, h2, p {
margin: 1em 0;
}
.br
anding h1 {
margin: 0;
}
.wrapper {
background-color: #fff;
}
.header {
height: 5em;
background-color:#b0b0b0;
padding: 20px;
margin-top: 20px;
}
.nav {
list-style: none;
padding: 20px;
}
.content .secondary .promo {
padding-left: 20px;
}
.footer {
background-color:#b0b0b0;
padding: 1px 20px;
}
/* The Core Technique
================================= */
body {
text-align: center;
}
.wrapper {
width: 76.8%;
margin: 0 auto;
text-align: left;
max-width: 125em;
min-width: 76em;
background: #fff url(img/secondary-faux-col.gif) repeat-y 25% 0;
}
.inner-wrapper {
background: url(img/primary-faux-col.gif) repeat-y 71.73% 0;
}
.content {
overflow: hidden;
}
.content .primary {
width: 72.82%;
float: right;
}
.content .secondary {
width: 25%;
float: left;
}
.content .primary .primary {
width: 59.7%;
float: left;
}
.content .primary .secondary {
width: 34.33%;
padding-right: 2.63%;
float: right;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<div class="inner-wrapper">
<div class="header">
<h1>Br
anding</h1>
</div>
<div class="content">
<div class="primary">
<div class="primary">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui bl
andit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui bl
andit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
</div>
<div class="secondary">
<h2>Magna aliquam erat volutpat</h2>
<p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui bl
andit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="secondary">
<ul class="nav">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Case Studies</a></li>
</ul>
<div class="promo">
<p>Promo item goes here</p>
</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</div>
</body>
</
html>
博客涉及设计模式和CSS相关内容，但具体信息较少。设计模式是程序设计方法中的重要概念，CSS则是前端开发常用技术，二者结合可能会有独特应用。
扫一扫
675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
