用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - css代码库

PerfectFluidWidthLayout

2014-11-19 作者: 云代码会员举报

[css]代码库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>The Perfect Fluid Width Layout</title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="style-ie.css" />
	<![endif]-->
</head>

<body>

	<div id="page-wrap">
		<div id="inside">
			
			<div id="header">
				<a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a>
			</div>
		
			<div id="left-sidebar">
				<p>Ii putamus mutationem wisi laoreet eros. Quinta processus saepius facer consequat fiant. Adipiscing ea possim vulputate quarta quam. Molestie dolor sed suscipit quis qui. Et feugait claritatem soluta est duis. Mutationem augue typi dynamicus dolore placerat. Lius typi dynamicus gothica per futurum.</p>

			</div>
	
			<div id="main-content">
						
				<h2>Why is this layout "perfect"?</h2>
				<ul>
					<li>Works in all major browsers</li>
					<li><strong>Shrinks</strong> to 780px<br />This accomodates users with 800x600 resolution, with no horizontal scroll!</li>
					<li><strong>Grows</strong> to 1260px<br />This accomodates users with 1280x768 resolution and everything in between.</li>
					<li>This accomodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.</li>
					<li>The left sidebar is of "equal height" to the main content</li>
				</ul>
				
				<br /><br />
				
				<p>
				Litterarum vero at tincidunt adipiscing vel. Dolore quod in lectores littera iis. Dolor lobortis sequitur nobis per soluta. Dignissim fiant diam option facer decima. Facilisis est in erat ullamcorper eodem. Mirum veniam quam luptatum ut anteposuerit. Commodo luptatum qui parum humanitatis lobortis. Molestie feugiat hendrerit dolor nam sed. Insitam feugait te wisi doming quam. Nostrud formas in augue dolore sit. 
				</p>
				
				<p>
				Hendrerit lectorum et notare legentis nulla. Habent clari commodo claram mazim magna. Vulputate nihil Investigationes sequitur humanitatis claritatem. Assum exerci molestie nobis feugait eodem. Aliquam delenit cum sed me veniam. Nunc eodem facilisi iis iriure commodo. Tempor typi illum velit consuetudium zzril. Tation liber claritas minim iis nobis. Claritatem placerat delenit iusto iis facilisis. Veniam tempor dolore congue mazim esse. 
				</p>
				
				<p>
				In possim luptatum seacula est claram. Legere molestie quinta nibh erat ut. Vel feugait nostrud commodo esse delenit. Amet elit lectorum dolor vel blandit. Velit qui est tation legere at. Notare tincidunt te dynamicus in legere. Liber typi dynamicus legunt nulla est. Nunc option quod est formas legere. Dynamicus accumsan mutationem quinta in iis. Quis quam facilisis iusto eodem possim. 
				</p>
				
				<p>
				Ut in dignissim iriure dolore feugiat. Claritas ut non anteposuerit te vero. Et facit amet at vero sequitur. Eros exerci non et ut facilisis. Suscipit consectetuer accumsan quam nonummy illum. Ullamcorper ea legunt volutpat me consuetudium. Qui littera nonummy delenit modo eorum. Facilisi hendrerit et typi lorem non. Tempor doming in iriure facit eleifend. Ii magna consectetuer consuetudium qui adipiscing. 
				</p>
				
				<p>
				Videntur wisi dolore parum quinta in. Te in aliquip nihil dynamicus gothica. Nunc possim legunt molestie modo wisi. In zzril vero zzril dolore augue. Facilisi lectores nihil exerci doming demonstraverunt. Typi qui sequitur notare modo magna. Accumsan facer Investigationes qui eum fiant. Me habent cum est eu feugait.
				</p>
			
			</div>
			
			<div style="clear: both;"></div>
			
			<div id="footer">
				<p>Footer stuff.</p>
			</div>
		
		</div>
		
		<div style="clear: both;"></div>
	
	</div>

</body>

</html>

[源代码打包下载]




网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...