一、页面布局有两种方式:<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>
-->