div+css浮在右上方的布局樣本

來源:互聯網
上載者:User

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"><!--
/*  body and font definitions */
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;
}
p, h2, pre {
margin: 0px;
padding: 10px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
padding:5px 15px;
margin:0px
}
h2 {
font-size:14px;
padding-top:10px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}
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;
}
/*  positioning-layers static and absolute */
#content {
border:1px solid #564b47;
background-color:#fff;
}
#content #navi {
border-left:1px dotted #000;
border-bottom:1px dotted #000;
float:right;
width:250px;
background-color:#ff99cc;
margin:0px 0px 20px 20px;
}
--></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指令碼特效代碼,點擊運行按鈕可查看效果:
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。