<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3档案纸质效果 - 网页模板</title>
<style>
*{
margin:0;
padding:0;
}
body{
background:url(img/bg-image.jpg);
}
.clear{
clear:both;
}
.paper{
background:url(img/btn_tryit.png) no-repeat 10px 0 #FFF;
position:relative;
height:auto;
width:860px;
margin:30px auto;
padding:15px;
border:1px solid #CCC;
box-shadow:2px 1px 4px 2px rgba(0,0,0,0.3);
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;
}
.paper:hover{
border-top-right-radius:140px 30px;
}
.paper:before, .paper:after{
content: "";
background:url(images/linen-lt.png);
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */
background:#FFF;
border:1px solid #CCC;
position: absolute;
z-index: -1;
box-shadow:2px 1px 4px 2px rgba(0,0,0,0.3);
}
.paper:before {
height:96%;
width:96%;
top:-20px;
left:20px;
}
.paper:after {
height:96%;
width:98%;
top:-10px;
left:10px;
}
.header,.content,footer{
float:left;
width:100%;
}
.header{
height:70px;
border-bottom:1px dashed #CCC;
}
.content{
height:auto;
min-height:760px;
}
footer{
height:70px;
}
.guide{
float:left;
font:20px Georgia, "Times New Roman", Times, serif;
line-height:60px;
color:#CCC;
margin-left:120px;
}
.search {
background: transparent url(img/support_search.png) no-repeat;
width: 195px;
height: 35px;
border: 0;
outline: none;
padding: 3px 15px 0 39px;
line-height:35px;
font-size:18px;
float:right;
margin:10px;
}
.search:focus {
background-position: 0 -38px;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.avatar{
float:right;
background:#FFF;
margin:5px;
border:1px solid #CCC;
box-shadow:2px 1px 4px 1px rgba(0,0,0,0.3);
}
h1{
font:32px "Trebuchet MS", Arial, Helvetica, sans-serif;
margin:10px 0 0;
}
table{
float:left;
width:600px;
font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;
list-style:none;
margin:10px 0;
padding:10px;
border:1px dashed #CCC;
}
tr{
height:30px;
line-height:30px;
}
.discription{
float:left;
width:600px;
height:auto;
margin:5px;
font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height:20px;
}
.discription p{
margin:10px 0;
letter-spacing:2px;
}
</style>
</head>
<body>
<!--=============paper===============-->
<div class="paper">
<div class="header">
<div class="guide">search for your requset info</div>
<input type="text" value="" name="s" class="search">
</div>
<div class="content">
<h1>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</h1>
<table>
<tr><td>Name:</td> <td>Barack Hussein Obama II</td></tr>
<tr><td>Sex :</td> <td>male</td></tr>
<tr><td>Nationality :</td> <td>U.S</td></tr>
<tr><td>Career : </td><td>President</td></tr>
</table>
<div class="avatar"><img src="img/FileOfficial_portrait_of_Barack_Obama.jpg" /></div>
<div class="discription">
<p>
Barack Hussein Obama II (i/bəˈrɑːk huːˈseɪn oʊˈbɑːmə/; born August 4, 1961) is the 44th and current President of the United States. He is the first African American to hold the office. In January 2005, Obama was sworn in as a U.S. Senator in the state of Illinois. He would hold this office until November 2008, when he resigned following his victory in the 2008 presidential election.
</p>
<p>
Born in Honolulu, Hawaii, Obama is a graduate of Columbia University and Harvard Law School, where he was the president of the Harvard Law Review. He was a community organizer in Chicago before earning his law degree. He worked as a civil rights attorney in Chicago and taught constitutional law at the University of Chicago Law School from 1992 to 2004. He served three terms representing the 13th District in the Illinois Senate from 1997 to 2004.
</p>
</div>
</div>
<div class="footer"></div>
<div class="clear"></div>
</div>
<div style="text-align:center;clear:both">
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
css3档案纸质效果.zip
版权申诉
164 浏览量
2022-11-16
21:21:29
上传
评论
收藏 864KB ZIP 举报
css3档案纸质效果.zip （6个子文件） 
css3档案纸质效果 jiaoben794 img 
FileOfficial_portrait_of_Barack_Obama.jpg 16KB
btn_tryit.png 7KB bg-image.jpg 732KB support_search.png 6KB
index.html 5KB css3档案纸质效果.jpg 112KB资源评论
