• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

两栏DIV+CSS标准布局代码

前端 搞代码 3年前 (2018-06-17) 129次浏览 已收录 0个评论

一款两栏式DIV+css标准布局代码,详细如下:

代码如下:
<html>
<head>
<title>Nice and Free CSS Template 1</title>
<style type=”text/css” media=”screen”><!–
/*  body und schrift deffinitionen */

http://www.gaodaima.com/37611.html两栏DIV+CSS标准布局代码

html, body{
padding:0px;
margin:0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
}
a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}
pre {
color: #564b47;
font-size: 11px;
background-color:transparent;
font-family: Courier, Monaco, Monospace;
}
h1 {
font-size:14px;
padding-top:50px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}
p,h1,pre {
margin:0px 30px 10px 30px;
}
/*  positioning-layers dynamisch  */
#content {
float:left;
width:70%;
left: 0px;
background:#fff;
border-right:2px solid #564b47;
border-bottom:2px solid #564b47;
margin-right:15px;
}
#menu {
}
#menu p {
font-size:11px;
margin-left:0px;/* fuer den geliebten ie */
}
–></style>
</head>
<body>
<div id=”content”>
<h1>left column</h1>
<p>All templates are XHTML 1.0 and CSS2/ tableless.</p>
<p><b>2 columns / menu and content dynamic</b><br />
2 column layout grid. Both columns are dynamic and adjust themselves procentually to the browser window.</p>
<br />
<p><a href=”/”>more nice and free css templates</a></p>
<br />
<pre>
body {
background-color: #8b4513;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
padding:0px;
margin:0px;
}
#content {
float:left;
width:70%;
background:#fff;
border-right:2px solid #996666;
border-bottom:2px solid #996666;
margin-right:15px;
padding-bottom:20px;
}</pre>
<br />
<br />
</div>
<div id=”menu”>
<h1>right column</h1>
<p>the most known site with this layout is<br />
<a href=”../../../www.alistapart.com/stories/journey/default.htm”>www.alistapart.com</a>.
oh, that site has changed its layout. Nevertheless is the site a very important resource and should be mentioned.
</p>
<p>more info and templates can be found <br />
<a href=”/”>here</a><br />
<br/>
<img src=”xhtml10.gif” alt=”” width=”80″ height=”15″ border=”0″/><br/>
<img src=”css.gif” alt=”css” width=”80″ height=”15″ border=”0″/><br />
</p>
</div>
</body>
</html>

以下是HTML脚本特效代码,点击运行按钮可查看效果:

两栏DIV+CSS标准布局代码 以下是程序代码

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址