layout.css

利用ajax编写的一个漂亮的个人简历

<!--
/* 顶部LOGO和时间开始 */
#topbar{
  width:100%;
  height:38px;
  overflow:hidden;
}

#logo{
  float:left;
  width:500px;
  height:38px;
}

span#datetime{
  float:right;
  margin-right:15px;
  display:inline;
  padding-top:12px;
  width:280px;
  height:12px;
  text-align:right;
}
/* 顶部LOGO和时间开始 */

/* 滑动门导航条开始 */
#tabsnav {
  float:left;
  margin-left:23px;
  width:770px;
  font-size:12px;
  height:55px;
  overflow:hidden;
}

#tabsnav ul {
  float:left;
  margin:0;
  width:333px;
  height:23px;
  padding:32px 10px 0 0;
}

#tabsnav li {
  display:inline;
  float:left;
  width:82px;
}

#tabsnav a {
  float:left;
  padding:0 2px 0 4px;
  text-decoration:none;
}

#tabsnav a span {
  float:left;
  display:block;
  padding:6px 15px 5px 9px;
  font-weight:bold;
}

/* Hack hides rule from IE5-Mac \*/
#tabsnav a span{float:none;}
/* End IE5-Mac hack */

#tabsnav a:hover {
  background-position:0% -42px;
}

#tabsnav a:hover span {
  background-position:100% -42px;
}

#tabsnav .current a {
  background-position:0% -42px;
}

#tabsnav .current a span {
  background-position:100% -42px;
}
/* 滑动门导航条结束 */

/* 皮肤选择列表开始 */
#tabsnav ul#skin-sample{
  float:right;
  margin:0;
  padding:0;
  display:inline;
  padding-right:230px;
  width:197px;
  height:55px;
}

#tabsnav ul#skin-sample li{
  float:left;
  margin:38px 3px 0 0;
  display:inline;
  width:15px;
  height:10px;
  font-size:1px;
  cursor:pointer;
  text-align:center;
  overflow:hidden;
}

#tabsnav ul#skin-sample li.txt{
  width:62px;
  height:12px;
  font-size:12px;
  border:none;
}

#tabsnav ul#skin-sample li img#pink{
  margin:0;
}

#tabsnav ul#skin-sample li img#gray{
  margin:-11px 0 0 0;
}

#tabsnav ul#skin-sample li img#blue{
  margin-top:-20px;
}

#tabsnav ul#skin-sample li img#pink-white{
  margin:-30px 0 0 0;
}

#tabsnav ul#skin-sample li img#coffee{
  margin:-40px 0 0 0;
}

#tabsnav ul#skin-sample li img#black{
  margin:-50px 0 0 0;
}
/* 皮肤选择列表结束 */

#container{
  float:left;
  margin-left:15px;
  padding:5px;
  width:756px;
  height:446px;
  overflow:auto;
}

#container h2{
  text-align:left;
  padding:5px 0 5px 10px;
  height:12px;
}

#container p{
  margin:0 auto;
  width:720px;
  padding:10px 0 15px 0;
}

/* 详细信息开始 */
.content,
.basic{
  margin:0 auto;
  padding:10px 0 10px 0;
  width:720px;
}

img#my-photo{
  float:right;
  width:127px;
  height:170px;
  padding:1px;
}

#basic-list,
#container p,
.project-intro-list li{
  font-size:14px;
}

#basic-list{
  float:left;
  width:580px;
  height:176px;
}

#basic-list li{
  float:left;
  display:inline;
  padding:4px 0 4px 0;
  width:290px;
  height:14px;
  letter-spacing:1px;
}

#basic-list li.address{
  width:580px;
}

#web-pic-list{
  float:left;
  width:720px;
  height:230px;
  overflow:hidden;
}

#web-pic-list li{
  float:left;
  padding:6px 7px 5px 7px;
  display:inline;
  width:130px;
  height:102px;
  line-height:150%;
  text-align:center;
  overflow:hidden;
}

#web-pic-list li a{
  color:#000;
}

#web-pic-list li img{
  width:126px;
  height:82px;
  border:1px solid #000;
}

#web-pic-list li a:hover img{
  border:1px solid #E276A7; 
}

#container p.project-intro{
  float:right;
  padding:0;
  padding-left:15px;
  width:446px;
  padding-left:7px;
  line-height:170%;
  height:168px;
  overflow:auto;
}

img.project-pic{
  float:left;
  width:254px;
  height:164px;
  padding:1px;
}
/* 详细信息结束 */

.loading{
  margin:0 auto;
  width:100%;
  padding-top:200px;
  text-align:center;
}

.loading img{
  width:280px;
  height:13px;
}

p#copyright{
  float:left;
  width:740px;
  padding:10px 0 8px 0; 
  height:12px;
  font-family:Verdana,Arial,sans-serif;
  font-weight:bold;
  text-align:center;
  overflow:hidden;
}
-->