search

博客列表 >lesson4作业

lesson4作业

Amesu
Amesu原创
2022年05月09日 15:06:21330浏览

个人简历

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>个人简历</title>
  6.     </head>
  7.     <style>
  8.         body{margin: 0;padding: 0; font-size:16px;}
  9.         #page{
  10.              width: 1200px;
  11.              height: auto;
  12.              margin: 0 auto;
  14.         }
  15.         .red{
  16.             background: darkred;
  17.         }
  18.         .yellow{
  19.             background: lightyellow;
  20.         }
  21.         .head{
  22.             height: 20px;
  23.         }
  24.         table{
  25.             width: 1200px;
  26.         }
  27.         td{
  29.             text-align: center;
  30.             height: 51px;
  31.         }
  33.         .pic{
  34.             width: 200px;
  35.             height: 200px;
  36.         }
  37.         td h3{
  38.             padding-left: 15px;            
  39.         }
  40.         .left{
  41.             text-align: left;
  42.             padding: 1%;
  43.         }
  44.     </style>
  45.     <body>
  46.         <div id="page">
  47.         <table border="1px" cellspacing="0" cellpadding="10px">
  48.         <thead>
  49.         <caption ><b><font size="5">个人简历表</font></b></caption>
  50.         </thead>
  51.         <tbody>
  52.         <tr><td class="red head" colspan="10"></td></tr>
  53.         <tr><td colspan="10" class="yellow left"><h3>---基本资料---</h3></td></tr>
  54.         <tr>
  55.             <th >姓名:</th>
  56.             <td> 孙海洋</td>
  57.             <th >性别:</th>
  58.             <td>男</td>
  59.             <th >民族:</th>
  60.             <td>汉</td>
  61.             <td rowspan="4" width="100" align="center"><img class="pic" src="https://img0.baidu.com/it/u=1040225459,210273596&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=400"/></td>
  62.         </tr>
  64.         <tr>
  65.             <th >出生日期:</th>
  66.             <td>1999.09.17</td>
  67.             <th >政治面貌:</th>
  68.             <td>清白</td>
  69.             <th >学历:</th>
  70.             <td>本科</td>
  71.         </tr>
  73.         <tr>
  74.             <th >专业:</th>
  75.             <td>计算机科学</td>
  76.             <th >毕业学校:</th>
  77.             <td>厦门大学</td>
  78.             <th >邮编:</th>
  79.             <td>未知</td>
  80.         </tr>
  82.         <tr>
  83.              <th >爱好:</th>
  84.              <td>11222</td>
  85.              <th >籍贯:</th>
  86.              <td>福建</td>
  87.              <th >e-mail:</th>
  88.              <td >575941@qq.com</td>
  89.         </tr>
  90.         <tr><td class="red head" colspan="10"></td></tr>
  91.         <tr><td colspan="10" class="yellow left"><h3>---求职意向---</h3></td></tr>
  92.         <tr>
  93.             <th>寻求职位：</th>
  94.             <td colspan="10" class="left">网页前端</td>
  95.         </tr>
  96.         <tr>
  97.             <th>求职地区：</th>
  98.             <td>厦门</td>
  99.             <th>工资待遇：</th>
  100.             <td colspan="10">面议</td>            
  101.         </tr>
  102.         <tr>
  103.             <th>自我评价：</th>
  104.             <td colspan="10" class="left">个人工作勤奋，认真负责，能吃苦耐劳，尽职尽责.<br>个人工作勤奋，认真负责，能吃苦耐劳，尽职尽责.<br>个人工作勤奋，认真负责，能吃苦耐劳，尽职尽责.<br>个人工作勤奋，认真负责，能吃苦耐劳，尽职尽责.<br>个人工作勤奋，认真负责，能吃苦耐劳，尽职尽责.<br>个人工作勤奋，认真负责，能吃苦耐劳，尽职尽责.<br>个人工作勤奋，认真负责，能吃苦耐劳，尽职尽责.<br></td>
  105.         </tr>
  106.           </table>
  107.           <table border="1" cellspacing="0" cellpadding="10px"  >
  108.              <tr><td class="red head" colspan="10"></td></tr>
  109.              <tr><td colspan="10" class="yellow left"><h3>---教育培训---</h3></td></tr>
  110.              <tr>
  111.              <th colspan="3">起止时间</th>
  112.              <th colspan="3">就读院校名称</th>
  113.              <th colspan="3">主修专业</th>
  114.              <th colspan="3">学历</th>
  115.              </tr> 
  116.              <tr>
  117.                  <td colspan="3">2016~2020</td>
  118.                  <td colspan="3">厦门大学</td>
  119.                  <td colspan="3">计算机科学</td>
  120.                  <td colspan="3">本科</td>
  121.              </tr>
  122.           </table>
  123.          <table border="1" cellspacing="0" cellpadding="10px"  >
  124.              <tr><td class="red head" colspan="10"></td></tr>
  125.              <tr><td colspan="10" class="yellow left"><h3>---工作经历---</h3></td></tr>
  126.              <tr>
  127.                 <th>就职公司：</th>
  128.                  <td >厦门多多软件有限公司</td>
  129.                  <th>公司行业：</th>
  130.                  <td >软件开发</td>
  131.              </tr>
  132.              <tr>
  133.                  <th>就职时间：</th>
  134.                  <td>2020~2021</td>
  135.                  <th>就职部门：</th>
  136.                  <td>研发部</td>
  137.              </tr>
  138.              <tr>
  139.                  <th>工作描述：</th>
  140.                  <td colspan="10" class="left">本人！222 <br />本人！222 <br />本人！222 <br />本人！222 <br />本人！222 <br /></td>
  141.              </tr>
  142.          </table>
  143.         <table border="1" cellspacing="0" cellpadding="10px"  >
  144.              <tr><td class="red head" colspan="10"></td></tr>
  145.              <tr><td colspan="10" class="yellow left"><h3>---联系方式---</h3></td></tr>
  146.              <tr>
  147.                  <td width="20%">联系手机：</th>
  148.                  <td colspan="9" class="left">139xxxxxxx</td>
  149.              </tr>     
  150.         </table>
  152. </tbody>
  154.         </div>
  155.     </body>
  156. </html>
  157. 雪碧图
  158. ```html
  159. <!DOCTYPE html>
  160. <html>
  161.     <head>
  162.         <meta charset="utf-8">
  163.         <title>雪碧图</title>
  164.     </head>
  165.     <style>
  166.         body{margin: 0;padding: 0;}
  167.         ul{
  168.             width: 300px;
  169.             margin: 0 auto;
  170.         }
  171.         ul li{
  172.             list-style: none;
  173.             float: left;
  175.         }
  177.         .one,.two,.three,.four,.five,.six,.seven,.eight,.nine{
  178.             background: url(446475-20160414102623691-66339570.jpg) no-repeat;
  179.             background-position:-9px -8px ;
  180.             width: 100px;
  181.             height: 100px;;
  182.         }
  183.         .two{
  184.             background-position:-120px -8px ;
  185.         }
  186.         .three{
  187.             background-position:-231px -8px ;
  188.         }
  189.         .four{
  190.             background-position: -342px -8px;
  191.         }
  192.         .five{
  193.             background-position: -450px -8px;
  194.         }
  195.         .six{
  196.             background-position: -560px -8px;
  197.         }
  198.         .seven{
  199.             background-position: -671px -8px;
  200.         }
  201.         .eight{
  202.             background-position: -781px -8px;
  203.         }
  204.         .nine{
  205.             background-position: -891px -8px;
  206.         }
  207.     </style>
  208.     <body>
  209.         <ul>
  210.             <li class="one"></li>
  211.             <li class="two"></li>
  212.             <li class="three"></li>
  213.             <li class="four"></li>
  214.             <li class="five"></li>
  215.             <li class="six"></li>
  216.             <li class="seven"></li>
  217.             <li class="eight"></li>
  218.             <li class="nine"></li>
  219.         </ul>
  220.     </body>
  221. </html>

列表

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>列表标签</title>
  6.     </head>
  7.     <style>
  8.         body{margin: 0;padding: 0; font-size: 16px;}
  9.         #page{
  10.             width: 800px;
  11.             margin: 0 auto;
  12.         }
  13.         h1{
  14.             text-align: center;
  15.             color: plum;
  16.             border-bottom: 3px #000 solid;
  18.         }
  20.         li{
  21.             list-style: url(aaaa.png) inside;
  22.             border-bottom: 1px #ccc solid;
  23.             line-height: 25px;
  24.             color: purple;
  25.             padding: 15px;
  26.         }
  27.         li:last-child{border-bottom: none;}
  28.     </style>
  29.     <body>
  30.         <div id="page">
  33.         <h1>学习园地</h1>
  34.         <ul>
  35.         <li>2常态化核酸检测得花多少钱热</li>
  36.         <li>3让青春之花在不懈奋斗中绚丽绽放热</li>
  37.         <li>4快播被吊销营业执照新</li>
  38.         <li>5新冠疫苗引发肝炎？辉瑞摊上事了</li>
  39.         <li>6男子上海就医病逝 妻子流落街头</li>
  40.         <li>79岁女孩打性抑制针半年花十万</li>
  41.         <li>8男子坠江爬上桥墩啃水草撑四五天</li>
  42.         <li>韦东奕商标遭抢注新</li>
  43.         </ul>
  44.         </div>
  45.     </body>
  46. </html>

导航

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>导航</title>
  6.         <style>
  7.             body,ul,li,a{margin: 0; padding:0;font: 16px;list-style: none;text-decoration: none;}
  8.             #page{        
  9.                 width: 1200px;
  10.                 margin: 0 auto;
  11.             }
  12.             ul{
  13.                 background: #8B0000;            
  14.             }
  15.             ul>li{
  16.                 float: left;
  17.                 }
  18.             ul>li>a{
  19.                 line-height: 25px;
  20.                 color: #fff;
  21.                 width: 60px;
  22.                 height: 30px;            
  23.             }
  24.             ul>li>a:hover{
  25.                 background: #fff;
  26.                 color: #8B0000;
  27.             }
  28.         </style>
  29.     </head>
  31.     <body>
  32.         <div id="page">        
  33.     <nav>
  34.         <ul>
  35.             <li><a href="">首页</a></li>
  36.             <li><a href="">产品1</a></li>
  37.             <li><a href="">产品2</a></li>
  38.             <li><a href="">新闻</a></li>
  39.             <li><a href="">关于我们</a></li>
  40.             <li><a href="">留言版</a></li>
  41.         </ul>
  42.     </nav>
  43.       </div>
  44.     </body>
  45. </html>
上一条：CSS权重计算与伪类下一条：云开发两周年庆 — 游戏畅玩领好礼
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议