console
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title>我的简介</title>
<style type="text/css">
td { padding:5px; width:70px; text-align:center; font-family:Verdana; }
th { background-color:#333; color:#FFF; padding:6px; }
#idel span { font-weight:bold; color:#FFF; }
#container { width:100%; float:left; border:0px; overflow:hidden; margin:0px;}
#idel { height:35px; width:100%; margin:10px 0px 0px 0px; background-color:#333; font-family:Verdana; padding:7px; overflow:hidden; }
.intro span { font-size:18px; font-family:微软雅黑; font-weight:bold; }
.intro { width:70%; border:1px solid #333; float:left; margin:10px 0px 0px 10px;; background:#FFF; text-align:center; padding:10px; }
.content { width:100%; border-top:1px solid #666; text-align:left; padding:10px; font-size:14px; line-height:200%; color:#222; overflow:hidden;}
#score { width:25%; border:0px; float:left; margin:10px;}
</style>
</head>
<body style="margin:0px;background:url( http://t1.baidu.com/it/u=2825100109,2756115135&fm=0&gp=20.jpg);">
<div id="container">
<div id="idel">
<span >人生信条 |</span>
<marquee width="70%" behavior="scroll" scrollamount="3" scrolldelay="-1" style="color:#FFF; font-size:12px; ">人生是一个怎样的世界? 1、每一个成功者都有一个开始。勇于开始，才能找到成功的路。 </marquee>
</div>
<div class="intro">
<span>我的简介</span>
<div class="content">我会用自己的脚步去走自己的人生,不管这条路是泥泞还是平地,这是我的选择,我坚信,无论走过的路是艰辛或是快乐,我的人生终究会是幸福的.问我读过什么学校?
我说不完,太多了,我来来回回的转学.其实我也不想,但是没办法.陈年旧事也不想提了
问我最喜欢的书籍是什么?
其实没有特别喜欢的,,就随便说个吧,那就是人生,其实这本书每个人都正在读,直到老去,直到生命的结束,人生落下帷幕.那时才会真正的领悟到人生的真谛.
</div>
</div>
<div id="score">
<table border="1" style="border-collapse:collapse; border:1px solid #000;width:100%; background:#FFF;" cellspacing="0" cellpadding="0">
<tr>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td>英语</td>
<td>90</td>
</tr>
<tr>
<td>语文</td>
<td>95</td>
</tr>
<tr>
<td>数学</td>
<td>73</td>
</tr>
</table>
</div>
<div class="intro" style="background:url( http://www.x7qq.cn/uploads/allimg/080920/2358434.gif);height:50px;"></div>
<div class="intro">
<span>我喜欢的格言</span>
<div class="content">
· 格言1:<br />
· 格言2:<br />
· 格言3:<br />
· 格言4:<br />
· 格言5:<br />
</div>
</div>
</div><bgsound src=" http://cdn1-16.projectplaylist.com/e1/static10/349/2334810.mp3" loop="1"></bgsound>
</body>
</html>
<style>
.intro{
display: block;
width: 700px;
height: 150px;
background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 200% 100%;
animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
</style>
@charset "utf-8";
*{margin:0px;padding:0px}
/* h5*/
body{
background-color:#eceddd;
font-family:Arial, Verdana,'Lucida Grande', Helvetica, sans-serif;
text-align: center;
color: #333333;
}
header{
background: url(Img/bgheader.jpg) no-repeat #85D0ED;
width: 902px;
height: 203px;
padding-top: 0px;
margin: 0px auto;
color: #000000;
}
header h1 {
float:left;
font-size:2.9em;
padding-top:60px;
padding-left:37px;
font-family:Arial,verdana, sans-serif;
color:#37210c;
font-weight:bolder;
letter-spacing:-1px;
}
.orange{
color:#e67e1f;
}
nav{
list-style-type:none;
margin:0px auto;
width:902px;
background-color:#303;
clear:both;
}
nav ul{
list-style:none;
margin-bottom:0px;
margin-top:0px;
margin-left:0px;
width:902px;
}
nav ul li{
text-align:center;
float:left;
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
width:150px;
}
nav ul li a{
display:block;
background-color:#37210c;
border-right:1px solid #fff;
line-height:2.5em;
margin-right:0px;
padding:8px 14px 8px 14px;
color: #ecf9ff;
font-weight:normal;
font-size: 0.8em;
text-decoration: none;
}
nav li a:hover{
color: #000;
background-color:#ecf9ff;
}
nav ul li .selected{
color: #ecf9ff;
background-color:#e67e1f;
}
aside{
float:left;
list-style:none;
margin-left:10px;
height:50%;
}
aside ul{
list-style:none;
margin-bottom:20px;
margin-top:20px;
margin-left:0px;
}
aside li{
text-align:left;
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
border-bottom:1px solid #eaeada;
}
aside ul li a{
background-image: url(Img/bullet.gif);
background-repeat:no-repeat;
background-position:left center;
display:block;
background-color:#ffffff;
line-height:1.7em;
margin-right:0px;
padding-top:6px;
padding-bottom:6px;
padding-left:22px;
color: #666666;
font-weight:normal;
font-size: 0.8em;
text-decoration: none;
width:165px;
}
aside li a:hover{
color: #37210c;
background-color:#f7f7f2;
}
aside .selected{
color: #37210c;
background-color:#f7f7f2;
}
#{
margin:0 auto;
width:902px;
background-color:#dfeef9;
height:290px;
clear:both;
}
section{
float:left;
width:75%;
margin-right:0px;
margin-top:15px;
background-color:#FFF;
text-align:left;
font-size:0.9em;
padding:5px;
}
section h1{
display:block;
font-size:0.9em;
width:50px;
font-family: arial;
text-align:left;
font-weight:bold;
color:#403f3b;
font-family:arial;
font-weight:bold;
padding:5px;
margin-top:5px;
margin-left:12px;
}
section p{
font: normal 0.9em Arial, Verdana, Helvetica, sans-serif;
font-size:0.9em;
color: #000000;
padding:10px;
text-align:left;
}
footer {
width:902px;
height: 85px;
clear:both;
margin-top: 10px;
background-color:#dfeef9;
color:#666666;;
margin-left:auto;
margin-right:auto;
margin-bottom: 0px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
{
font-size:0.7em;
font-family:arial;
font-weight:normal;
line-height: 1.4em;
color:#555555;
padding:25px 0 0 10px;
text-align:center;
}
{
font-size:1em;
text-decration:none;
font-weight:normal;
color:#467AA7;
text-align:center;
}
footer a:hover{
text-decoration:underline;
font-weight:normal;
color:#467AA7;
text-align:center;
}