ASCII码 ASCII码

0506作业

发布于：2022-05-09 09:32:45  栏目：技术文档

1.创建一个html页面、编写html代码实现自己的‘个人简历

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       table {
  10.         border: 1px #9A9997 solid;
  11.       }
  13.       td {
  14.         border: 1px #9A9997 solid;
  15.         height: 1.8rem;
  16.         width: 10rem;
  17.       }
  18.       th {
  19.         border: 1px #9A9997 solid;
  20.         text-align: left;
  21.       }
  22.       .jz{
  23.         text-align: center;
  24.       }
  26.       .zwpj,
  27.       .gzms {
  28.         height: 11rem;
  29.         text-align:left;
  30.         vertical-align: top;
  31.       }
  32.       table .Lightblue {
  33.         background: #a5c6ed;
  34.       }
  35.       table .Light {
  36.         background-color: #e7eefb;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <table cellspacing="0" cellpadding="5px">
  42.       <!-- 基本资料 -->
  43.       <tr class="Lightblue">
  44.         <td colspan="5"></td>
  45.         <!-- <td></td>
  46.         <td></td>
  47.         <td></td>
  48.         <td></td> -->
  49.       </tr>
  50.       <tr>
  51.         <th colspan="5" class="Light">------ 基本资料 ------</th>
  52.         <!-- <td></td>
  53.         <td></td>
  54.         <td></td>
  55.         <td></td> -->
  56.       </tr>
  57.       <tr>
  58.         <td>姓名：</td>
  59.         <td>马晓旭</td>
  60.         <td>性&nbsp;&nbsp;&nbsp;别：</td>
  61.         <td>女</td>
  62.         <td rowspan="7"></td>
  63.       </tr>
  64.       <tr>
  65.         <td>学历：</td>
  66.         <td>中专</td>
  67.         <td>身&nbsp;&nbsp;&nbsp;高：</td>
  68.         <td>168CM</td>
  69.         <!-- <td></td> -->
  70.       </tr>
  71.       <tr>
  72.         <td>籍贯：</td>
  73.         <td>广东</td>
  74.         <td>出生年月：</td>
  75.         <td>1991-1-1</td>
  76.         <!-- <td></td> -->
  77.       </tr>
  78.       <tr>
  79.         <td>毕业学校：</td>
  80.         <td colspan="2">汕头科技中学</td>
  81.         <!-- <td></td> -->
  82.         <td></td>
  83.         <!-- <td></td> -->
  84.       </tr>
  85.       <tr>
  86.         <td>主修专业：</td>
  87.         <td colspan="2">管理学 => 会计学</td>
  88.         <!-- <td></td> -->
  89.         <td></td>
  90.         <!-- <td></td> -->
  91.       </tr>
  92.       <tr>
  93.         <td>工作经验：</td>
  94.         <td>无</td>
  95.         <td>目前年薪：</td>
  96.         <td>保密/年</td>
  97.         <!-- <td></td> -->
  98.       </tr>
  99.       <tr>
  100.         <td>有效证件：</td>
  101.         <td>身份证</td>
  102.         <td>证件号码：</td>
  103.         <td>**********</td>
  104.         <!-- <td></td> -->
  105.       </tr>
  106.       <tr class="Lightblue">
  107.         <td colspan="5"></td>
  108.         <!-- <td></td>
  109.         <td></td>
  110.         <td></td>
  111.         <td></td> -->
  112.       </tr>
  114.       <!-- 求职意向 -->
  115.       <tr>
  116.         <th colspan="5" class="Light">------ 求职意向 ------</th>
  117.         <!-- <td></td>
  118.         <td></td>
  119.         <td></td>
  120.         <td></td> -->
  121.       </tr>
  122.       <tr class="Lightblue">
  123.         <td>寻求职位：</td>
  124.         <td colspan="4">出纳员，会计文员</td>
  125.         <!-- <td></td>
  126.         <td></td>
  127.         <td></td> -->
  128.       </tr>
  129.       <tr>
  130.         <td>求职地区：</td>
  131.         <td colspan="2">罗湖区 福旺区</td>
  132.         <!-- <td></td> -->
  133.         <td>工资待遇：</td>
  134.         <td>面议</td>
  135.       </tr>
  136.       <tr>
  137.         <td >自我评价：</td>
  138.         <td  colspan="4" class="zwpj">自我评价</td>
  139.         <!-- <td></td>
  140.         <td></td>
  141.         <td></td> -->
  142.       </tr>
  143.       <tr class="Lightblue">
  144.         <td colspan="5"></td>
  145.         <!-- <td></td>
  146.         <td></td>
  147.         <td></td>
  148.         <td></td> -->
  149.       </tr>
  151.       <!-- 培训教育 -->
  152.       <tr>
  153.         <th colspan="5" class="Light">------ 教育培训 -----</th>
  154.         <!-- <td></td>
  155.         <td></td>
  156.         <td></td>
  157.         <td></td> -->
  158.       </tr>
  159.       <tr class="jz">
  160.         <td>起止时间：</td>
  161.         <td colspan="2">就读院校名称：</td>
  162.         <!-- <td></td> -->
  163.         <td>主修专业：</td>
  164.         <td>学历：</td>
  165.       </tr>
  166.       <tr class="jz">
  167.         <td>2009.09-2012.07</td>
  168.         <td colspan="2">汕头百欣科技中专</td>
  169.         <!-- <td></td> -->
  170.         <td>会计电算化</td>
  171.         <td>中专</td>
  172.       </tr>
  173.       <tr>
  174.         <td colspan="5" class="Lightblue"></td>
  175.         <!-- <td></td>
  176.         <td></td>
  177.         <td></td>
  178.         <td></td> -->
  179.       </tr>
  181.       <!-- 工作经验(1) -->
  182.       <tr>
  183.         <th colspan="5" class="Light">------ 工作经验()1 ------</th>
  184.         <!-- <td></td>
  185.         <td></td>
  186.         <td></td>
  187.         <td></td> -->
  188.       </tr>
  189.       <tr class="jz">
  190.         <td>就职公司：</td>
  191.         <td colspan="2">深圳XX电器有些公司</td>
  192.         <!-- <td></td> -->
  193.         <td>公司行业：</td>
  194.         <td>其他</td>
  195.       </tr>
  196.       <tr class="jz">
  197.         <td>就职时间：</td>
  198.         <td colspan="2">2011年12月到如今</td>
  199.         <!-- <td></td> -->
  200.         <td>就职部门：</td>
  201.         <td>财务部</td>
  202.       </tr>
  203.       <tr class="jz">
  204.         <td>公司性质：</td>
  205.         <td colspan="2">其他</td>
  206.         <!-- <td></td> -->
  207.         <td>就职职位：</td>
  208.         <td>出纳员</td>
  209.       </tr>
  210.       <tr>
  211.         <td>工作描述：</td>
  212.         <td colspan="4" class="gzms">工作描述XXX</td>
  213.         <!-- <td></td>
  214.         <td></td>
  215.         <td></td> -->
  216.       </tr>
  217.       <tr>
  218.         <td colspan="5" class="Lightblue"></td>
  219.         <!-- <td></td>
  220.         <td></td>
  221.         <td></td>
  222.         <td></td> -->
  223.       </tr>
  225.       <!-- 联系方式 -->
  226.       <tr>
  227.         <td colspan="5" class="Light">----- 联系方式 -----</td>
  228.         <!-- <td></td>
  229.         <td></td>
  230.         <td></td>
  231.         <td></td> -->
  232.       </tr>
  233.       <tr>
  234.         <td>联系电话：</td>
  235.         <td colspan="4">134*******</td>
  236.         <!-- <td></td>
  237.         <td></td>
  238.         <td></td> -->
  239.       </tr>
  240.       <tr>
  241.         <td>联络手机：</td>
  242.         <td colspan="4">134*******</td>
  243.         <!-- <td></td>
  244.         <td></td>
  245.         <td></td> -->
  246.       </tr>
  247.       <tr>
  248.         <td>电子邮件：</td>
  249.         <td colspan="4">*******@163.com</td>
  250.         <!-- <td></td>
  251.         <td></td>
  252.         <td></td> -->
  253.       </tr>
  254.       </tr>
  255.     </table>
  256.   </body>
  257. </html>

2.使用背景图定位属性，实现如下效果、提供格式本身代码、

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       .jgg div {
  10.         width: 100px;
  11.         height: 100px;
  12.       }
  13.       .jgg .jgg-top div:first-of-type {
  14.         background: url("jgg.jpg") -10px -8px;
  15.       }
  16.       .jgg .jgg-top div:nth-of-type(2) {
  17.         background: url("jgg.jpg") -340px -8px;
  18.       }
  19.       .jgg .jgg-top div:last-of-type {
  20.         background: url("jgg.jpg") -670px -8px;
  21.       }
  23.       .jgg .jgg-middle {
  24.         position: relative;
  25.         left: 100px;
  26.         top: -100px;
  27.       }
  28.       .jgg .jgg-middle div:first-of-type {
  29.         background: url("jgg.jpg") -120px -8px;
  30.       }
  31.       .jgg .jgg-middle div:nth-of-type(2) {
  32.         background: url("jgg.jpg") center;
  33.       }
  34.       .jgg .jgg-middle div:last-of-type {
  35.         background: url("jgg.jpg") -780px -8px;
  36.       }
  38.       .jgg .jgg-bottom {
  39.         position: relative;
  40.         top: -200px;
  41.         left: 200px;
  42.       }
  43.       .jgg .jgg-bottom div:first-of-type {
  44.         background: url("jgg.jpg") -230px -8px;
  45.       }
  46.       .jgg .jgg-bottom div:nth-of-type(2) {
  47.         background: url("jgg.jpg") -560px -8px;
  48.       }
  49.       .jgg .jgg-bottom div:last-of-type {
  50.         background: url("jgg.jpg") -890px -8px;
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <div class="jgg">
  56.       <div class="jgg-top">
  57.         <div></div>
  58.         <div></div>
  59.         <div></div>
  60.       </div>
  61.       <div class="jgg-middle">
  62.         <div></div>
  63.         <div></div>
  64.         <div></div>
  65.       </div>
  66.       <div class="jgg-bottom">
  67.         <div></div>
  68.         <div></div>
  69.         <div></div>
  70.       </div>
  71.     </div>
  72.   </body>
  73. </html>

3.使用html列表标签、配合css列表属性实现如下效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       div {
  10.         width: 600px;
  11.       }
  12.       h1 {
  13.         text-align: center;
  14.         color: #eb118b;
  15.       }
  16.       ul {
  17.         color: #eb118b;
  18.         font-weight: bolder;
  19.       }
  20.       li:first-of-type {
  21.         height: 50px;
  22.         border-top: 3px solid #000;
  23.       }
  24.       li {
  25.         height: 50px;
  26.         border-bottom: 1px solid #958e8e;
  27.         line-height: 50px;
  28.         list-style: inside url("lbtb.png");
  29.       }
  30.       li:last-of-type {
  31.         border: none;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div>
  37.       <h1>学习猿地</h1>
  38.       <ul>
  39.         <li>老师都是大型互联网公司的总监以上职位，名校毕业，老司机</li>
  40.         <li>课程是最全的，有着一套精品，不需要再找任何其他学习资料弥补</li>
  41.         <li>集中精力在这一套全栈课程中，做好每一节课，不断迭代打造精品</li>
  42.         <li>课程以项目贯穿式讲解需要的技术，知其然知其所以然</li>
  43.         <li>课程是专门为零基础到精通的目标设计，有基础的可选择内容学习</li>
  44.         <li>学习系统模拟面授的过程，通关式学习效果却超过面授几倍</li>
  45.         <li>服务号，有大牛指导，有同学之间互动，有全面的资料下载</li>
  46.         <li>最好的课程价格却是行业最低的，低几倍甚至几十倍</li>
  47.       </ul>
  48.     </div>
  49.   </body>
  50. </html>

4.制作如下效果 并且实现鼠标移动时变换背景颜色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       nav {
  10.         width: 100%;
  11.         height: 40px;
  12.         background: red;
  13.       }
  14.       nav a {
  15.         color: #fff;
  16.         line-height: 40px;
  17.         padding: 11.5px 20px;
  18.         text-decoration: none;
  19.       }
  20.       nav a:hover {
  21.         background: rgb(126, 126, 126);
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <nav>
  27.       <a href="" target="_blank">首页</a>
  28.       <a href="" target="_blank">前沿</a>
  29.       <a href="" target="_blank">前端</a>
  30.       <a href="" target="_blank">后端</a>
  31.       <a href="" target="_blank">云计算</a>
  32.       <a href="" target="_blank">产品设计</a>
  33.       <a href="" target="_blank">关于我们</a>
  34.     </nav>
  35.   </body>
  36. </html>

4.2制作如下效果 并且实现鼠标移动时变换背景颜色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       ul li {
  10.         height: 30px;
  11.         width: 250px;
  12.         list-style: none inside;
  13.         line-height: 30px;
  14.         text-indent: 1rem;
  15.       }
  16.       ul li:hover {
  17.         background: #b9b9b9;
  18.         color: #c81c29;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <ul>
  24.       <li>家用电器</li>
  25.       <li>手机/运营商/数码</li>
  26.       <li>电脑/办公</li>
  27.       <li>家居/家具/家装/厨具</li>
  28.       <li>男装/女装/童装/内衣</li>
  29.       <li>美妆/个护清洁/宠物</li>
  30.       <li>女鞋/箱包/钟表/珠宝</li>
  31.       <li>男鞋/运动/户外</li>
  32.       <li>房产/汽车/汽车用品</li>
  33.       <li>母婴/玩具乐器</li>
  34.       <li>食品/酒类/生鲜/特产</li>
  35.       <li>艺术/礼品鲜花/农资绿植</li>
  36.       <li>医药保健/计生情趣</li>
  37.       <li>图书/文娱/教育/电子书</li>
  38.       <li>机票/酒店/旅游/生活</li>
  39.       <li>理财/众筹/白条/保险</li>
  40.       <li>安装/维修/清洗/二手</li>
  41.       <li>工业品</li>
  42.     </ul>
  43.   </body>
  44. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行