div+css浮在右上角的布局示例

2022-07-15 80酷酷网 80kuku.com

div+css浮在右上角的布局示例

以下是代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Free CSS Template 8</title>
<style type="text/css" media="screen"></style>
</head>
<body><div id="content">
<div id="navi">
<h2>MENU</h2>
<pre>
#content #navi {
border-left:1px dotted #000;
border-bottom:1px dotted #000;
float:right;
width:250px;
background-color:#ff99cc;
margin:0px 0px 20px 20px;
}
</pre>
<p>
<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>
<h2>CONTENT</h2>
<p>All templates are XHTML 1.0 and CSS2/ tableless.</p>
<p>MENU floating<br />
layout grid with a floating menu on the left.<br />
The menu is fixed in it’s width. The height adjusts to the content.<br />
<a href="/">more nice and free css templates</a>
<br /></p>
<pre>
html {
padding:0px;
margin:0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px 20px;
margin:0px;
}
#content {
border:1px solid #564b47;
background-color:#fff;
}
</pre>
<br />
</div>
</body>
</html>

以下是HTML脚本特效代码，点击运行按钮可查看效果：以下是程序代码<font face=Verdana><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title>Free CSS Template 8</title><style type="text/css" media="screen"></style></head><body><div id="content"><div id="navi"><h2>MENU</h2><pre>#content #navi {border-left:1px dotted #000;border-bottom:1px dotted #000;float:right;width:250px;background-color:#ff99cc;margin:0px 0px 20px 20px;}</pre><p><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><h2>CONTENT</h2><p>All templates are XHTML 1.0 and CSS2/ tableless.</p><p>MENU floating<br />layout grid with a floating menu on the left.<br />The menu is fixed in it's width. The height adjusts to the content.<br /><a href="/">more nice and free css templates</a><br /></p><pre>html {padding:0px;margin:0px;}body {background-color: #e1ddd9;font-size: 12px;font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;color:#564b47;padding:0px 20px;margin:0px;}#content {border:1px solid #564b47;background-color:#fff;}</pre><br /></div></body></html></font><a href="http://www.alixixi.com/web/HTML/jsrun/">欢迎访问阿里西西网页脚本特效集</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]