博主信息
博文 30
粉丝 2
评论 3
访问量 25539
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
3月22日作业
jackallen的博客
原创
673人浏览过

代码:


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8" />
   <title>Document</title>
   <style type="text/css">
       table{
           /* border:1px solid #000; */
           text-align:center;
           border-collapse: collapse;
           margin:auto;
           width:100%;
           box-shadow:9px 7px 5px #888;
       }
      table caption{
           text-align:center;
       }
       thead {
           background-color:#36A8FF;
           border-top-left-radius:30px;
       }
       #conter1{
           width:800px;
           height:600px;
           margin:auto;
           /* background-color:#868686; */
       }
       .tborder{
           background-color:#CCCCCC;
           border-bottom-right-radius:30px;
           border-bottom-left-radius:30px;
       }
       th,td{
           border-bottom:1px solid #fff;
           padding:10px;
       }
       tr th{
           /* padding:4px; */
           width:120px;
           /* height:30px; */
           color:#fff;
       }
       td img{
           border-radius:50%;
       }
       h2{
           text-align:left;
       }
   </style>
</head>
<body>
<div id="conter1">
   <fieldset>
   <legend><h2>就业喜报</h2></legend>
       <div>
           <table >
                   <thead>
                       <tr>
                           <th>姓名</th>
                           <th>学历</th>
                           <th>专业</th>
                           <th>薪资</th>
                           <th>入职公司</th>
                       </tr>
                   </thead>

                   <tbody>
                       <tr>
                           <td>苍**</td>
                           <td>本科</td>
                           <td>动漫制作</td>
                           <td>12000元</td>
                           <td><img src="imgages/wy.png" alt=""></td>
                       </tr>
                       <tr>
                           <td>麻**</td>
                           <td>本科</td>
                           <td>电子信息工程</td>
                           <td>16000元</td>
                           <td><img src="imgages/lc.png" alt=""></td>
                       </tr>
                       <tr>
                           <td>李**</td>
                           <td>本科</td>
                           <td>网络工程</td>
                           <td>11000元</td>
                           <td><img src="imgages/qq.png" alt=""></td>
                       </tr>
                        <tr>
                           <td>王**</td>
                           <td>本科</td>
                           <td>软件工程</td>
                           <td>18000元</td>
                           <td>阿里</td>
                       </tr>
               </tbody>
           </table>
       </div>
   </fieldset>
</div>
</body>
</html>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        table{
            /* border:1px solid #000; */
            text-align:center;
            border-collapse: collapse;
            margin:auto;
            width:100%;
            box-shadow:9px 7px 5px #888;
        }
       table caption{
            text-align:center;
        }
        thead { 
            background-color:#36A8FF;
            border-top-left-radius:30px;
        }
        #conter1{
            width:800px;
            height:600px;
            margin:auto;
            /* background-color:#868686; */
        }
        .tborder{
            background-color:#CCCCCC;
            border-bottom-right-radius:30px;
            border-bottom-left-radius:30px;
        }
        th,td{
            border-bottom:1px solid #fff;
            padding:10px;
        }
        tr th{
            /* padding:4px; */
            width:120px;
            /* height:30px; */
            color:#fff;
        }
        td img{
            border-radius:50%;
        }
        h2{
            text-align:left;
        }
    </style>
</head>
<body>
<div id="conter1">
    <fieldset>
    <legend><h2>就业喜报</h2></legend>
        <div class="tborder">
            <table >
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>学历</th>
                            <th>专业</th>
                            <th>薪资</th>
                            <th>入职公司</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>苍**</td>
                            <td>本科</td>
                            <td>动漫制作</td>
                            <td>12000元</td>
                            <td><img src="imgages/wy.png" alt=""></td>
                        </tr>
                        <tr>
                            <td>麻**</td>
                            <td>本科</td>
                            <td>电子信息工程</td>
                            <td>16000元</td>
                            <td><img src="imgages/lc.png" alt=""></td>
                        </tr>
                        <tr>
                            <td>李**</td>
                            <td>本科</td>
                            <td>网络工程</td>
                            <td>11000元</td>
                            <td><img src="imgages/qq.png" alt=""></td>
                        </tr>
                         <tr>
                            <td>王**</td>
                            <td>本科</td>
                            <td>软件工程</td>
                            <td>18000元</td>
                            <td>阿里</td>
                        </tr>
                </tbody>
            </table>
        </div>
    </fieldset>
</div>
</body>
</html>

运行实例 »

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

手写代码:

1521785772(1).jpg

微信图片_20180323140957.jpg

微信图片_20180323140945.jpg

批改状态:合格

老师批语:作业已检查! 完成的依旧很不错!
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学