博客列表 >3-22作业 [css基础样式]

3-22作业 [css基础样式]

虞者自愚的博客
虞者自愚的博客原创
2018年03月24日 19:25:40574浏览

3-22作业

代码


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>销售榜</title>
    <style type="text/css">
        .bg {
            margin:20px auto;
            background-image:url(https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/bg.jpg);
            height:480px;
            width:960px;
            box-shadow:0 0 5px 2px #aeb7b7;
        }
        .logo {
            padding:15px 0 0 20px;
        }
        .rt {
            font-family:微软雅黑;
            font-size:1em;
            color:#fff;
            float:right;
            padding:10px 20px 0 0 ;
        }
        .tab {
            width:480px;
            height:320px;
            background:#fff;
            margin-top:80px;
            margin-right:40px;
            float:right;
            border-radius:2%;
        }
        table {
            width:480px;
            border:0px solid #333;
            text-align:center;
            padding:3px;
            margin:18px auto;
        }
        td img {
            width:65px;
            height:95px;
            box-shadow: 1px 1px 1px 1px #d2d2d2;
        }
        td span {
            font-size:8px;
            color:#9e9b9b;
        }
        .tds {
            width:390px;
            height:370px;
           margin-left:30px;
        }
    </style>
</head>
<body>
    <div class="bg">
<div class="logo">
  <img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/logo.png" alt="logo">
<div class="rt">
    2018年1月1日
</div></div>
<div>
   <span  class="tds"> <img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/td.png" alt=""></span>

    <div class="tab">
    <table>
        <tr>
            <td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/1.jpg" alt=""><br>
            <span>姓名:周一</span><br>
            <span>职务:销售</span></td>
            <td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/2.jpg" alt="">
            <br><span>姓名:孙二</span><br>
            <span>职务:销售</span></td>
            <td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/3.jpg" alt="">
            <br><span>姓名:李三</span><br>
            <span>职务:销售</span></td>
            <td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/4.jpg" alt="">
            <br><span>姓名:小四</span><br>
            <span>职务:销售</span></td>
            <td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/5.jpg" alt="">
            <br><span>姓名:赵五</span><br>
            <span>职务:销售</span></td>
        </tr>
        <tr>
            <td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/6.jpg" alt="">
            <br><span>姓名:刘六</span><br>
            <span>职务:销售</span></td>
            <td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/7.jpg" alt="">
            <br><span>姓名:秦七</span><br>
            <span>职务:销售</span></td>
            <td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/8.jpg" alt="">
            <br><span>姓名:王八</span><br>
            <span>职务:销售</span></td>
            <td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/9.jpg" alt="">
            <br><span>姓名:钱九</span><br>
            <span>职务:销售</span></td>
            <td><img src="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/3.22/10.jpg" alt="">
            <br><span>姓名:吴十</span><br>
            <span>职务:销售</span></td>
        </tr>
    </table>
    </div>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



手写

23.jpg

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议