Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 0506作业
Blogger Information
Blog 10
fans 0
comment 0
visits 9511
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0506作业
Tyrrell
Original
411 people have browsed it

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>
Correcting teacher：PHPzPHPz

Correction status：unqualified

Teacher's comments：内容写的挺好的，注意博文标题符合实际内容 ，最好把第一个简历也能配上效果图
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post