html5练习2

最新推荐文章于 2020-11-19 21:04:55 发布

清月晨光

最新推荐文章于 2020-11-19 21:04:55 发布

阅读量889

点赞数

分类专栏： JavaWeb 文章标签： html

本文链接：https://blog.csdn.net/ztt_1119/article/details/42368655

版权

JavaWeb 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<style type="text/css">
#navigation ul li {
 display: inline-block;
 *display: inline;
}
#content {
float: right;
}
#sidebar {
 float: left;
}
.sideBlock {
 width: 100%;
}
.sideBlock img {
 max-width: 45%;
 float:left;
}
.footer {
 float: left;
}
</style>
<script type="text/javascript">
document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';
</script>
<link href="tool/columnal.css" rel='stylesheet' type="text/css"/>
<link href="tool/custom.css" rel="stylesheet" type="text/css" />
</HEAD>

<BODY>
<div id="wrapper" class="container">
	 <!-- the header and navigation -->
	 <div id="header" class="row">
		 <div id="logo" class="col_12">And the winner is<span>n't...</span></div>
		 <div id="navigation" class="row">
			 <ul>
			 <li><a href="#">Why?</a></li>
			 <li><a href="#">Synopsis</a></li>
			 <li><a href="#">Stills/Photos</a></li>
			 <li><a href="#">Videos/clips</a></li>
			 <li><a href="#">Quotes</a></li>
			 <li><a href="#">Quiz</a></li>
			 </ul>
		 </div>
	 </div>
	 <div class="row">
		 <!-- the content -->
		 <div id="content" class="col_9 alpha omega">
		 <img class="oscarMain col_3" src="img/oscar.png" alt="atwi_oscar" />
		 <div class="col_6 omega"
			 <h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>
			 <p>that films like King Kong, Moulin Rouge and Munich get the statue whilst
			 the real cinematic heroes lose out. Not very Hollywood is it?</p>
			 <p>We're here to put things right. </p>
		 </div>
		 <a href="#">these should have won »</a>
		 </div>
		 <!-- the sidebar -->
		 <div id="sidebar" class="col_3">
		 <div class="sideBlock unSung">
		 <h4>Unsung heroes...</h4>
		 <a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
		 <a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt
		 Earp" /></a>
		 </div>
		 <div class="sideBlock overHyped">
		 <h4>Overhyped nonsense...</h4>
		 <a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
		 <a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
		图灵社区会员 lemoggy(lemoggy@foxmail.com) 专享 尊重版权
		 </div>
		 </div>
	 </div>
	 <!-- the footer -->
	 <div id="footer" class="row">
		 <p>Note: our opinion is absolutely correct. You are wrong, even if you think
		 you are right. That's a fact. Deal with it.</p>
	 </div>
</div>
</BODY>
</HTML>

清月晨光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html5练习2

New Document #navigation ul li { display: inline-block; *display: inline;}#content {float: right;}#sidebar { float: left;}.sideBlock { width: 100%;}.sideBlock img { max-width: 45%;
复制链接

扫一扫