<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<
html
lang=
"en"
>
<
head
>
<
meta
http-equiv=
"Content-Type"
content=
"text/html;charset=UTF-8"
>
<
title
>baidu_task2_1
</
title
>
<
style
type=
"text/css"
>
body {
margin:
0;
padding:
0;
}
#top {
margin:
0;
height:
60px;
background-color: #363636;
}
#image {
float: left;
}
#link {
float: right;
}
#top img {
width:
50px;
height:
40px;
margin:
10px auto;
}
#top ul {
text-align: left;
list-style: none;
}
#top ul li {
float: left;
margin-right:
20px;
}
#top a {
color: white;
text-decoration: none;
}
#top .import {
color: #b0b0b0;
}
p {
text-indent:
2em;
font-family:
"楷书";
font-size:
16;
font-weight: bold;
}
#title1,
#title2,
#title3,
#title4,
#title5,
#bottom {
margin: auto;
padding:
30px
30px;
}
#title1 {
border:
20px solid #b0b0b0;
}
#title2,
#title3,
#title4,
#title5,
#bottom {
border-top-width:
0;
border-bottom-width:
20px;
border-left-width:
20px;
border-right-width:
20px;
border-style: solid;
border-color: #b0b0b0;
}
#title1 p image {
margin:
0
20px;
}
#title2 p image {
margin:
0
20px;
}
#title2 ul li {
list-style: none;
}
#title3 #img {
margin:
20px;
width:
200px;
height:
200px;
text-align: center;
border:
1px solid black;
}
ol li,
#title4 lable {
font-weight: bold;
}
#title4 table {
border-collapse: collapse;
width:
100%;
}
#title4 table th {
background-color: black;
color: white;
}
#sum {
background-color: #b0b0b0;
color: black;
}
#title5 table {
font-size:
12;
font-family:
"仿宋";
margin-left:
400px;
font-weight: bold;
}
#submit {
width:
100%;
background-color: gray;
height:
40px;
color: white;
border-radius:
12px;
}
textarea {
width:
300px;
height:
200px;
}
#word {
text-align: right;
}
#reminder {
text-align: center;
color: red;
}
#bottom {
clear: both;
margin-bottom:
0;
border:
0;
background-color: #363636;
text-align: center;
}
#header {
padding:
10px;
border-left:
4px solid darkgary;
}
<
/
style
>
</
head
>
<
body
>
<
div
id=
"top"
>
<
div
id=
"image"
>
<
img
src=
"G:\大三下Java代码\前端引用的图片\baidu_task1\3.jpg"
></
img
>
</
div
>
<
div
id=
"link"
>
<
ul
>
<
li
><
a
href=
"http://ife.baidu.com"
>导航链接一
</
a
></
li
>
<
li
><
a
href=
"http://ife.baidu.com"
>导航链接二
</
a
></
li
>
<
li
><
a
href=
"http://ife.baidu.com"
>导航链接三
</
a
></
li
>
<
li
><
a
href=
"http://ife.baidu.com"
class=
"import"
>导航链接四
</
a
></
li
>
</
ul
>
</
div
>
</
div
>
<
div
id=
"title1"
>
<
h2
>生活日志
</
h2
>
<
h3
>简单记录最近的状态
</
h3
>
<
lable
>邱晨 2017.05.24
</
lable
>
<
p
>本来是想说可以写点自己的状态啥的,但是我觉得还是写这是一个很长很长的段落来的更快捷简单,所以接下来就是...
<
br
>换行了
<
br
> 这是一个很长很长的段落,这是一个很长很长的段落,换行了
<
br
> 这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,
<
a
href=
"http://ife.baidu.com"
>这是一个连接到百度前端学院的链接
</
a
>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,应该已经够长了吧.
<
br
>
<
image
src=
"G:\大三下Java代码\前端引用的图片\baidu_task1\2.jpg"
height=
"300px"
width=
"300px"
></
image
><
br
> 继续很长的段落话题,这是一个很长很长的段落, 这是一个很长很长的段落这是一个很长很长的段落, 这是一个很长很长的段落这是一个很长很长的段落, 这是一个很长很长的段落
</
p
>
</
div
>
<
div
id=
"title2"
>
<
h2
>另一篇文章
</
h2
>
<
h3
>继续我的胡说八道
</
h3
>
<
lable
>邱晨 2017-05-24
</
lable
>
<
p
>继续这是一个很长很长的段落之旅....
<
br
>换行了
<
br
> 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落,换行了
<
br
><
strong
>这是加粗了的字体
</
strong
> 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落
<
a
href=
"http://ife.baidu.com"
>这是一个连接到百度前端学院的链接
</
a
>这是一个很长很长的段落, 这是一个很长很长的段落
</
p
>
<
image
src=
"G:\大三下Java代码\前端引用的图片\baidu_task1\3.jpg"
height=
"300px"
width=
"300px"
></
image
>
<
ul
>
<
li
>序号1
</
li
>
<
li
>序号2
</
li
>
<
li
>序号3
</
li
>
</
ul
>
</
div
>
<
div
id=
"title3"
>
<
div
>
<
h2
>图片
</
h2
>
</
div
>
<
div
id=
"img"
>
<
h3
>好看的图片
</
h3
>
<
image
src=
"G:\大三下Java代码\前端引用的图片\baidu_task1\1.jpg"
height=
"100px"
width=
"100px"
></
image
><
br
>
</
div
>
<
div
id=
"img"
>
<
h3
>好看的图片
</
h3
>
<
image
src=
"G:\大三下Java代码\前端引用的图片\baidu_task1\3.jpg"
height=
"100px"
width=
"100px"
></
image
>
</
div
>
</
div
>
<
div
id=
"title4"
>
<
h2
>最后一篇文章
</
h2
>
<
h3
>继续我的胡说八道
</
h3
>
<
ol
>
<
li
>考试排名1
</
li
>
<
li
>考试排名2
</
li
>
<
li
>考试排名3
</
li
>
</
ol
>
<
lable
>下面是一个表格,我这里给表格添加了"borfer=1"好让你看出十个表格
</
lable
>
<
table
border=
"1"
>
<
tr
>
<
th
>姓名
</
th
>
<
th
>工资
</
th
>
<
th
>操作
</
th
>
</
tr
>
<
tr
>
<
td
>小明
</
td
>
<
td
>2000
</
td
>
<
td
><
a
href=
"http://ife.baidu.com"
>修改
</
a
></
td
>
</
tr
>
<
tr
>
<
td
>小红
</
td
>
<
td
>3000
</
td
>
<
td
><
a
href=
"http://ife.baidu.com"
>修改
</
a
></
td
>
</
tr
>
<
tr
id=
"sum"
>
<
td
>总计
</
td
>
<
td
colspan=
"2"
>5000
</
td
>
</
tr
>
</
table
>
</
div
>
<
div
id=
"title5"
>
<
div
id=
"header"
>
<
h2
>这里以后是一个侧栏,这是侧栏的标题
</
h2
>
</
div
>
<
form
>
<
table
>
<
tr
>
<
td
id=
"word"
>请输入邮箱地址:
</
td
>
<
td
>
<
input
type=
"text"
value=
"这是一个文本输入框"
/></
td
>
</
tr
>
<
tr
>
<
td
colspan=
"2"
id=
"reminder"
>邮箱地址请按要求格式输入
</
td
>
</
tr
>
<
tr
>
<
td
id=
"word"
>请输入密码:
</
td
>
<
td
><
input
type=
"text"
value=
"这是一个文本输入框"
/></
td
>
</
tr
>
<
tr
>
<
td
id=
"word"
>请重复输入密码:
</
td
>
<
td
><
input
type=
"text"
value=
"这是一个文本输入框"
/></
td
>
</
tr
>
<
tr
>
<
td
colspan=
"2"
id=
"reminder"
> 密码请为6-16位英文数字
</
td
>
</
tr
>
<
tr
>
<
td
id=
"word"
>性别:
</
td
>
<
td
><
input
type=
"radio"
name=
"sex"
value=
"0"
checked=
"checked"
/>男
<
input
type=
"radio"
name=
"sex"
value=
"1"
/>女
</
td
>
</
tr
>
<
tr
>
<
td
id=
"word"
>城市:
</
td
>
<
td
>
<
select
>
<
option
> --请选择--
</
option
>
<
option
>北京
</
option
>
<
option
>南京
</
option
>
<
option
>上海
</
option
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
id=
"word"
>爱好:
</
td
>
<
td
>
<
input
type=
"checkbox"
/>运动
<
input
type=
"checkbox"
/>艺术
<
input
type=
"checkbox"
/>科学
</
td
>
</
tr
>
<
tr
>
<
td
id=
"word"
>个人描述:
</
td
>
<
td
>
<
textarea
value=
""
>这是一个输入框,请输入你的个人描述
</
textarea
><
br
></
td
>
</
tr
>
</
table
>
<
input
type=
"submit"
value=
"确认提交"
id=
"submit"
/>
</
form
>
</
div
>
<
div
id=
"bottom"
>
<
lable
>版权所属---阿晨
</
lable
>
</
div
>
</
body
>
</
html
>