37. •
•
•
<title></title>
38. •
<title> Web </title>
40. •
<p
id="p1"> Web </p>
44. <!doctype
html>
<html>
<head>
<title> Web </title>
</head>
<body>
<h1>Hello,
HTML
and
CSS!</h1>
</body>
</html>
47. <ol>
<li><h1>It’s
All
Right
Now</h1></li>
<li><h1>KIM
NEWMAN
JAGO</h1></li>
<li>The
Season
Ticket</li>
</ol>
51. <!DOCTYPE
HTML
PUBLIC
"-‐//W3C//DTD
HTML
4.01//
EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta
http-‐equiv="Content-‐Type"
content="text/
html;
charset=gb2312">
<title>web </title>
</head>
<body>
</body>
</html>
52. <body>
<div
id="wrapper">
<!-‐-‐
begin
-‐-‐>
<div
id="header"></div>
<!-‐-‐
end
-‐-‐>
<!-‐-‐
begin
-‐-‐>
<div
id="content"></div>
<!-‐-‐
end
-‐-‐>
<!-‐-‐
begin
-‐-‐>
<div
id="footer">©
2011
Baidu</div>
<!-‐-‐
end
-‐-‐>
</div>
</body>
55. <div
id="content">
<!-‐-‐
begin
-‐-‐>
<div
id="main"></div>
<!-‐-‐
end
-‐-‐>
<!-‐-‐
begin
-‐-‐>
<div
id="aside"></div>
<!-‐-‐
end
-‐-‐>
</div>
58. <div
id="main">
<dl
class="info">
<dt
class="t"> </dt>
<dd></dd>
</dl>
</div>
60. •
•
<dl>
<dt> 1</dt>
<dd> 1</dd>
<dt> 2</dt>
<dd> 2</dd>
</dl>
61. <dd>
<div
class="holder">
<div
class="photos">
<a
href="#">
<img
src="img/a1.jpg">
</a>
</div>
</div>
</dd>
63. •
•
<a
href=“http://www.baidu.com”>
</a>
64. •
•
<img
src="pic.jpg"
/>
70. <div
class="holder">
<div
class="photos">...</div>
<div
class="btn">
<div
class="mask"></div>
<p>
<a
href="#"
class="show">1</a>|
<a
href="#">2</a>|
<a
href="#">3</a>|
<a
href="#">4</a>
</p>
</div>
</div>
71. <ol>
<li
class="show">
<h3><a
href="#">title</a></h3>
<p>web </p>
</li>
<li>
<h3><a
href="#">title</a></h3>
<p>web </p>
</li>
...
</ol>
73. •
•
<ol>
<li></li>
<li></li>
</ol>
76. <dl
class="members">
<dt
class="t"> </dt>
<dd>
<ul
class="tab_t
f14">
<li
class="first
show"> </li>
<li> </li>
<li> </li>
</ul>
</dd>
</dl>
77. <ul
class="tab_con">
<li
class="show">
<div
class="intro">
<div
class="pic">
<img
/>
</div>
<div
class="about">
<h3><a
href="#"> </a></h3><p> </p>
</div>
<p
class="others">
<br>
Email
changqi@baidu.com</p>
</div>
<div
class="map></div>
</li>
</ul>
80. <dl
class="search">
<dd>
<form>
<input
type="text"
class="ipt">
<input
type="submit"
value=" "
class="btn">
</form>
</dd>
</dl>
84. <dl
class="course
fl">
<dt
class="t">css </dt>
<dd>
<ul>
<li><a
href="#"> </a></
li>
<li><a
href="#"> ie6 </
a></li>
...
</ul>
</dd>
</dl>
95. body
{
background-‐color:
gray;
text-‐align:center;
}
h1
{
font-‐size:30px;
color:white;
}
97. •
•
•
h1
{color:blue;}
100. •
•
<link
type="text/css"
rel="stylesheet"
href="style_1.css"
/>
102. body{font:12px
" ";color:#333;background:#fff}
body,form,p,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6
{margin:0;padding:0}
ul{list-‐style:none}
table,img{border:0}
a{color:#0057a7;text-‐decoration:none}
a:hover{color:#c00000;text-‐decoration:underline}
103. •
<div>content</div>
<p></p>
div{color:black;}
110. #wrapper{width:960px;margin:0
auto;overflow:hidden}
#header{height:119px;background:url(img/
banner.jpg)}
#content{margin-‐top:10px}
#main{width:640px;float:left}
#footer{color:#aeaeae;text-‐align:center;padding:
20px
0}
#aside{width:310px;border-‐top:3px
solid
#7d7d7d;float:right}
111. •
<div
id="main"></div>
<div
id="content"></div>
#main{width:300px}
115. 1px
background-‐repeat:repeat-‐x
127. /*
/
.info{border:1px
solid
#e0e0e0;margin-‐bottom:
10px;padding:1px;zoom:1}
.info
dt{height:30px;line-‐height:30px;
background:#f7f7f7}
.info
.holder{width:400px;float:left;
position:relative}
.info
.photos
img{vertical-‐align:top}
129. •
•
<div
class="f"></div>
<div
class="f"></div>
<div></div>
.f{color:white}
130. •
<div
id="main">
<p
class="normal"></p>
<p></p>
</div>
<p
class="normal"></p>
#main
.normal{color:red}
131. /*
/
.info
.btn{width:100px;position:absolute;left:295px;top:
188px}
.info
.btn
a{width:20px;height:20px;display:inline-‐
block;color:#9d9d9d;text-‐decoration:none}
.info
.btn
a:hover{text-‐decoration:underline}
.info
.btn
a.show{color:#fff}
.info
.btn
.mask{height:20px;background:#000;opacity:
0.5;filter:alpha(opacity=50)}
.info
.btn
p{width:100%;color:#8b8b8b;line-‐height:
20px;text-‐align:center;position:absolute;top:0}
137. /*
/
.info
ol{width:180px;float:left;padding-‐left:
35px}
.info
li{padding:8px
0}
.info
li
h3{font-‐size:14px;font-‐weight:normal}
.info
li
p{line-‐height:18px;padding-‐top:
5px;display:none}
.info
li.show
p{display:block}
142. /*
/
.members
.tab_t{height:30px;text-‐align:center;border-‐
bottom:1px
solid
#e0e0e0;background:#f7f7f7}
.members
.tab_t
li{width:120px;height:22px;padding-‐top:
8px;color:#0059a7;background:url(img/bg.gif)
no-‐repeat
0
8px;float:left;cursor:pointer}
.members
.tab_t
.first{background:none}
.members
.tab_t
li.show{height:
23px;color:#000;background:#fff;border-‐left:1px
solid
#e0e0e0;border-‐right:1px
solid
#e0e0e0;position:relative;margin:0
-‐2px
-‐1px
-‐1px}
143. /*
/
.search{text-‐align:center;border:1px
solid
#e0e0e0;margin-‐
bottom:10px;padding:20px
0}
.search
.ipt,.search
.btn{font-‐size:14px;background:url
(img/i.png)}
.search
.ipt{width:400px;height:18px;padding:6px
7px;font:
16px
arial;margin-‐right:6px;border:1px
solid
#cdcdcd;border-‐color:#9a9a9a
#cdcdcd
#cdcdcd
#9a9a9a;vertical-‐align:top;*vertical-‐align:1px}
.search
.btn{width:97px;height:34px;border:0;background-‐
position:0
-‐41px;cursor:pointer}
.search
.btn_h{background-‐position:-‐102px
-‐41px}
148. /*
/
.search{text-‐align:center;border:1px
solid
#e0e0e0;margin-‐
bottom:10px;padding:20px
0}
.search
.ipt,.search
.btn{font-‐size:14px;background:url
(img/i.png)}
.search
.ipt{width:400px;height:18px;padding:6px
7px;font:
16px
arial;margin-‐right:6px;border:1px
solid
#cdcdcd;border-‐color:#9a9a9a
#cdcdcd
#cdcdcd
#9a9a9a;vertical-‐align:top;*vertical-‐align:1px}
.search
.btn{width:97px;height:34px;border:0;background-‐
position:0
-‐41px;cursor:pointer}
.search
.btn_h{background-‐position:-‐102px
-‐41px}
150. /*
/
.course{width:300px;border-‐top:1px
solid
#e0e0e0;padding-‐
top:1px}
.course
dt{height:30px;line-‐height:
30px;background:#f7f7f7;border-‐bottom:1px
solid
#e0e0e0}
.course
dd{font-‐size:14px;padding:10px}
.course
li{line-‐height:28px;background:url(img/dot.gif)
no-‐
repeat
0px
center;padding-‐left:15px}
