Lesson_for_java_day02---htm中页面布局、样式、css选择器和框架

最新推荐文章于 2022-06-03 14:49:09 发布

记得要幸福56

最新推荐文章于 2022-06-03 14:49:09 发布

阅读量977

点赞数

分类专栏： lessonForJava 文章标签： html 布局样式 css 框架

本文链接：https://blog.csdn.net/u013233075/article/details/22986735

版权

lessonForJava 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

一、页面布局有两种方式：<div>和<table>

第一种：<div>布局：

布局效果：

源码：

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			div#container{width:500px;margin-left:20px;}
			div#header {background-color:#99bbbb;}
			div#menu {background-color:#ffff99;height:200px; width:200px; float:left}
			div#content {background-color:#EEEEEE;height:200px; width:300px; float:left;}
			div#footer {background-color:#99bbbb;clear:both; text-align:center;}
			h1 {margin-bottom:0;}
			h2 {margin-bottom:0; font-size:14px;}
			ul {margin:0;}
			li {list-style:none;}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<h1>Main Title of Web Page</h1>
			</div>
			<div id="menu">  <!--容器向左浮动-->
				<h2>Menu</h2>
				<ul><li>HTML</li><li>CSS</li><li >JavaScript</li></ul>
			</div>
			<div id="content">Content goes here</div><!--两个容器必须同时向左浮动-->
			<div id="footer">Copyright W3School.com.cn</div><!--clear：取消向左浮动-->
		</div>
	</body> 
</html>

<table>布局：源码：

<!DOCTYPE html>
<html>
	<body>
		<table width="500" border="0">
			<tr>
				<td colspan="2" style="background-color:#99bbbb;">
					<h1>Main Title of Web Page</h1>
				</td>
			</tr>
			<tr valign="top">
				<td style="background-color:#ffff99;width:100px;text-align:top ;">
					<b>Menu</b><br />
					HTML<br />
					CSS<br />
					JavaScript
				</td>
				<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
					Content goes here</td>
			</tr>
			<tr>
				<td colspan="2" style="background-color:#99bbbb;text-align:center;">
					Copyright W3School.com.cn</td>
			</tr>
		</table>
	</body>
</html>

二、常用标签及解释：

<!--
----------------------------页面布局-----------------------------------------

	页面布局：
		<div></div>
		<table></table>
	
--------------------------------样式---------------------------------------

	怎样引用样式：		
		1、外部样式表：
			<head>s
				<link rel="stylesheet" type="text/css" href="mystyle.css">
			</head>
		2、外部样式表：
			<head>
				<style type="text/css">
					body {background-color: red}
					p {margin-left: 20px}
				</style>
			</head>
		3、内联样式：
			<p style="color: red; margin-left: 20px">
				This is a paragraph
			</p>
		注释格式：/*   */	
		
--------------------------CSS的选择器------------------------------------		

	CSS的选择器：
		1、html标签：<p> <div> <h1>...<h6> <a> <input> <select>....
		2、id选择器：
			<div id="email">内容</div>
			--样式: #email{colour:red;}
		3、class选择器：
			<div class="div1">内容</div>
			--样式：.div1 {background:#FFC0CB;}
	
	浮动：
		float="";  --left/right/none/both
		用于设置标签对象（如：<div>、<span>、<a>、<em>等html标签）的浮动布局.
		
	单位：px--像素。px就是表示pixel，像素，是屏幕上显示数据的最基本的点。 pixel是相对大小。 
		  pt--磅。pt就是point，是印刷行业常用单位，等于1/72英寸。point是绝对大小。
		   
	间距：
		内边距：padding    内容与容器之间的间距
			分别有上、下、左、右边距。padding-top/padding-bottom/padding-left/padding-right
		外边距：margin   容器与容器之间的间距
			分别有上、下、左、右边距。margin-top/margin-bottom/margin-left/margin-right

	边框：
		每个容器都可以设置边框。边框用border设置。
			border:thick double yellow;     border-style: solid; --实现边框
			border-color:red; --红色边框   border-style:none --无边框
			border-width:midium  --默认边框   border-top-color:blue --上边框显红色
	
	定位：position
		1、绝对定位：position:absolute;left:20px; top:20px;  针对于顶层容器而言
		2、相对定位：position:relative;left:20px;top:200px;  针对于父级容器而言
		3、固定定位：position:fixed;top:20px;  定位后，不随滚动条滚动

	常用属性：背景：background --背景    background-colour --颜色值   background-image:url --背景图
					background-repeat; --背景平铺
			  文本：text-index：5px --段落的首行缩进  text-align：Middle --水平对齐
					vertical-align: --垂直对齐      letter-spacing:  --字间距：      
			  文本装饰：line-height  --行高：（如果想在行中垂直居中，建议height的值跟行高一样）
			  字体：字体大小：font-size    字体颜色：color   字体系列：font-family  
					字体风格：font-style  字体加粗：font-weight
					
	链接:
		a:link {color:#FF0000;}		/* 未被访问的链接 */
		a:visited {color:#00FF00;}	/* 已被访问的链接 */
		a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
		a:active {color:#0000FF;}	/* 正在被点击的链接 */
	
	
---------------------------思考题--------------------------------------------------

	思考：HTMl与XHTML的区别？
		XHTML 与 HTML 4.01 标准没有太多的不同。主要区别在于
			1、XHTML 元素必须被正确地嵌套。
			2、XHTML 元素必须被关闭。
			3、标签名必须用小写字母。
			4、XHTML 文档必须拥有根元素。	  
//-->

三、框架

<!--
框架：
	通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。
		每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
	使用框架的坏处：
		1、开发人员必须同时跟踪更多的HTML文档。
		2、很难打印整张页面。
	框架分为：
		1、水平框架：
			<html>
				<frameset rows="25%,50%,25%">
				  <frame src="/example/html/frame_a.html">
				  <frame src="/example/html/frame_b.html">
				  <frame src="/example/html/frame_c.html">
				</frameset>
			</html>
		2、垂直框架：
			<html>
				<frameset cols="25%,50%,25%">
				  <frame src="/example/html/frame_a.html">
				  <frame src="/example/html/frame_b.html">
				  <frame src="/example/html/frame_c.html">
				</frameset>
			</html>
	提示：
		假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，
			可以在 <frame> 标签中加入：noresize="noresize"。为不支持框架的浏览器添加 <noframes> 标签。
		重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！
			不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
	内联框架：
		<html>
			<body>
				<iframe src="/i/eg_landscape.jpg"></iframe>
				<p>一些老的浏览器不支持 iframe。</p>
				<p>如果得不到支持，iframe 是不可见的。</p>
			</body>
		</html>

-->