index.html:
<!-- 声明位于文档中的最前面位置,可告知浏览器文档使用哪种HTML或XHTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<!-- html可告知浏览器自身是一个html文档,限定了文档的开始点和结束点。 -->
<html>
<!-- head标签用于文档的头部,头部描述了文档的各种属性和信息,包括标题,在Web中位置以及和其他文档关系。 -->
<head>
<!-- title 定义文档的标题,它是head部分中唯一必需的元素 -->
<title>Basic layout</title>
<!-- link 标签定义文档与外部资源的关系,最常见的用途是链接样式表,此处链接style.css样式表 -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- body 元素定义文档的主体,包括文档所有内容。 -->
<body>
<!-- div标签可以把文档分割为独立的、不同的部分,div是一个块级元素。 -->
<div id="wrapper">
<div id="header" >This is header !!!</div>
<div id="main">
<div id="sidebar-left">
<!-- a元素最重要的属性是href属性,它指定链接的目标 -->
<a href="http://www.baidu.com">baidu</a><br />
<a href="http://www.sina.com">sina</a><br />
<a href="http://www.taobao.com">taobao</a><br />
<a href="http://www.wu.com">where</a><br />
<a href="http://www.yi.com">yi.com</a><br />
<a href="http://www.er.com">er.com</a><br />
</div>
<div id="sidebar-right">
<a href="http://www.baidu.com">baidu</a><br />
<a href="http://www.sina.com">sina</a><br />
<a href="http://www.taobao.com">taobao</a><br />
<a href="http://www.wu.com">where</a><br />
<a href="http://www.yi.com">yi.com</a><br />
<a href="http://www.er.com">er.com</a><br />
</div>
<div id="content">
This is content<br />
<!-- <p>标签定义段落 -->
<p>
<!-- <br /> 换行 -->
nizhidaowozaidengnima<br />
nizhidaowozaidengnima<br />
nizhidaowozaidengnima<br />
</p>
<!-- <form>标签用于为用户输入创建html表单,表单能够包含input元素等,用于向服务器传输数据 -->
<form>
<!-- <input>根据不同type属性值,输入字段拥有多种形式。type="text" 文本输入框-->
<p>Username:<input type="text"></p>
<p>Password:<input type="text"></p>
<!-- <label>标签为input元素定义标注 for属性应当与相关元素id相同 -->
<label for="male">Male</label>
<!-- type="radio" 单选按钮 -->
<input type="radio" name="sex" id="male"></input>
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female"></input>
<br />
<!-- type="submit" 提交按钮 -->
<input type="submit" value="Submit">
</form>
<!-- table 表格 border规定表格边框的宽度 -->
<table border="1" align="center">
<!-- tr元素定义表格行 th元素定义表头 td元素定义表格单元 -->
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100000</td>
</tr>
</table>
<!-- ul标签定义无序列表 -->
<ul>
<!-- li标签定义列表项目 -->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<!-- ol定义有序列表 -->
<ol>
<li>NBA</li>
<li>CBA</li>
<li>ABA</li>
</ol>
</div>
</div>
<div id="footer">Contact us , Thank you !</div>
</div>
</body>
</html>
style.css:
/*General*/
/*所有的<a>都使用这个样式*/
a{
background-color:black;
color:white;
}
/* 定义wrapper的样式 */
#wrapper{
/* background 简写属性在一个生命中设置所有背景属性。
repeat 属性设置是否及如何重复背景图像 y为垂直方向重复
attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动 scroll 默认值 背景图像会随着其余部分滚动而移动
position 属性设置背景图像起始位置 第一个center是水平位置 第二个top是垂直位置
color 属性设置元素的背景颜色
*/
background:repeat-y scroll center top red;
/* margin 属性设置元素的外边距 auto为自动调整*/
margin:0 auto;
/* padding 简写属性在一个声明中设置所有内边距属性 auto为自动调整*/
padding:0 auto;
/* width 设置元素宽度 */
width: 90%;
}
#header{
background:green;
/* height 设置元素高度 */
height:100px;
/* text-align 设置元素中文本的水平对齐方式 */
text-align: center;
/* font 设置字体样式 */
font:300% "arial black"
}
#main{
height:800px;
width:100%;
}
#sidebar-left{
/* float 属性定义元素在哪个方向浮动 left为左 */
float: left;
width: 20%;
height:800px;
background: yellow;
}
#sidebar-right{
float: right;
width: 20%;
height:800px;
background: purple;
}
#content{
background: grey;
text-align:center;
height:800px;
/* margin-left 属性设置元素的左外边距 right设置右外边距 */
margin-left: 20%;
margin-right: 20%;
}
#footer{
background:blue;
height:100px;
text-align:center;
font:300% "arial black"
}