课外天地 李树青学习天地Web技术 → 第三次Web作业参考:南财学生证布局


  共有13395人关注过本帖树形打印复制链接

主题:第三次Web作业参考:南财学生证布局

帅哥哟,离线,有人找我吗?
admin
  1楼 博客 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 管理员
等级:管理员 帖子:1939 积分:26594 威望:0 精华:34 注册:2003/12/30 16:34:32
第三次Web作业参考:南财学生证布局  发帖心情 Post By:2016/11/3 10:14:29 [只看该作者]


图片点击可在新窗口打开查看此主题相关图片如下:演示效果.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


 回到顶部