- 课外天地 李树青 (http://njcie.com/bbs/index.asp)
-- Web技术 (http://njcie.com/bbs/list.asp?boardid=28)
---- 第三次Web作业参考：南财学生证布局 (http://njcie.com/bbs/dispbbs.asp?boardid=28&id=1765)
-- 发布时间：2016/11/3 10:14:29
-- 第三次Web作业参考：南财学生证布局
此主题相关图片如下：演示效果.png
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
.body{
float:left;
width: 780px;
height:480px;
border: solid;
border-width: 1px;
border-radius: 25px;
}
.left{
float: left;
width:400px;
height:480px;
border: none;
}
.right{
float: left;
width:375px;
height:480px;
border: none;
}
.left > .top {
width: 100%;
height: 100px;
border: none;
}
.img1{
clear: both;
display: block;
margin:auto;
height:70px;
margin-top: 30px;
vertical-align:middle;
}
.left > .bottom{
text-align: center;
line-height: 60px;
background-image:url("图章.gif");
background-repeat: no-repeat;
background-position-x: 90px;
background-position-y: 45px;
background-size: 200px;
margin-top: 10px;
}
.left > .bottom > a{
font-size: 50px;
font-family:楷体;
letter-spacing: 25px;
font-weight: bold;
}
.right > .top{
width:100%;
height:180px;
border:none;
}
.right > .bottom{
text-align:left;
word-spacing: 120px;
padding-right: 20px;
padding-left: 40px;
}
.photo{
width:135px;
height: 160px;
border: solid;
border-width: 1px;
margin: auto;
margin-top:50px ;
}
.text{
margin-top: 5px;
margin-bottom: 15px;
border-bottom: solid;
border-bottom-width: 1px;
}
</style>
<title></title>
</head>
<body>
<div class="body">
<div class="left">
<div class="top">
<img class="img1" src="南京财经大学.png">
</div>
<div class="bottom">
<a>自谦<br>自信<br>务实<br>超越</a>
</div>
</div>
<div class="right">
<div class="top">
<div class="photo"></div>
</div>
<div class="bottom">
<div class="text">姓名 性别</div>
<div class="text">学号 学制</div>
<div class="text">院系</div>
<div class="text">专业</div>
<div class="text">班级 生源</div>
<div class="text">身份证号码</div>
<div class="text">入学年月</div>
</div>
</div>
</div>
</body>
</html>
完整附件：
| 下载信息 [文件大小： 下载次数： ] | |
 点击浏览该文件:desktop.zip |