ASCII码 ASCII码

使用HTML标记语言编写个人简历,配合css列表实现其他效果

发布于：2022-05-08 10:44:02  栏目：技术文档

学习如何用html标记语言编写个人简历与css使用方法

  1. 个人简历
  2. CSS 定位
  3. 学习猿地
  4. html+css制作网站导航栏
  5. html+css制作仿京东分类菜单栏

一、个人简历效果

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>个人简历</title>
  6.         <style>
  7.             table{
  8.                 border: 1px solid #000000;
  9.                 border-collapse: collapse;
  10.             }
  11.             tr{
  12.                 /*height: 100px;*/
  13.                 /*width: 100px;*/
  14.                 border: 1px solid #000000;
  15.                 text-align:center;
  16.             }
  17.             td{
  18.                 /*height: 80px;*/
  19.                 text-align:center;
  20.                 width: 100px;
  21.                 border: 1px solid #000000;
  22.             }
  23.             img{
  24.                 height:300px;
  25.                 width: 200px;
  26.             }
  27.             .bt{
  28.                 height: 15px;
  29.                 background: #A6C5F0;
  30.             }
  31.             .bt1{
  32.                 background: #E7EEFE;
  33.             }
  35.         </style>
  36.     </head>
  37.     <body>
  38.         <table align="center">
  39.             <tr>
  40.                 <td class="bt" colspan="5" ></td>
  41.             </tr>
  42.             <tr>
  43.                 <td class="bt1" colspan="5">----基本资料----</td>
  44.             </tr>
  45.             <tr>
  46.                 <td>姓名</td>
  47.                 <td>马小姐</td>
  48.                 <td>性别</td>
  49.                 <td>女</td>
  50.                 <td rowspan="7">
  51.                     <img src=".//images/0001.jpg" >
  52.                 </td>
  54.             </tr>
  55.             <tr>
  56.                 <td>学历</td>
  57.                 <td>中专</td>
  58.                 <td>身高</td>
  59.                 <td>170cm</td>
  60.             </tr>
  61.             <tr>
  62.                 <td>籍贯</td>
  63.                 <td>广东</td>
  64.                 <td>出生年月</td>
  65.                 <td>1991-12-01</td>
  66.             </tr>
  67.             <tr>
  68.                 <td>毕业院校</td>
  69.                 <td colspan="3">汕头市科技中学</td>
  70.             </tr>
  71.             <tr>
  72.                 <td>主修专业</td>
  73.                 <td  colspan="3">管理学=>会计学</td>
  74.             </tr>
  75.             <tr>
  76.                 <td>工作经验</td>
  77.                 <td>未知</td>
  78.                 <td>目前年薪</td>
  79.                 <td>保密/年</td>
  80.             </tr>
  81.             <tr>
  82.                 <td>有效证件</td>
  83.                 <td>身份证</td>
  84.                 <td>证件号码</td>
  85.                 <td>121111111125211111</td>
  86.             </tr>
  87.             <tr>
  88.                 <td class="bt" colspan="5"></td>
  89.             </tr>
  90.             <tr>
  91.                 <td class="bt1" colspan="5">----求职意向----</td>
  92.             </tr>
  93.             <tr>
  94.                 <td>寻求职位</td>
  95.                 <td colspan="4">出纳员,会计专员</td>
  96.             </tr>
  97.             <tr>
  98.                 <td>求职地区</td>
  99.                 <td colspan="2">罗湖区 福田区</td>
  100.                 <td>工资待遇</td>
  101.                 <td>面议</td>
  102.             </tr>
  103.             <tr>
  104.                 <td>自我评价</td>
  105.                 <td colspan="4">本人追求上进，思想觉悟有了很大的提高。我热爱祖国，热爱人民，坚决拥护领导和社会主义制度。我觉得一个人的价值是由他对社会对别人所做的贡献来衡量的，我加入中国的原因也是要努力实现自我价值。我认真学习党的各种理论，并努力把他们付之于实践，对党有了更加清晰的认识。</td>
  106.             </tr>
  107.             <tr>
  108.                 <td class="bt" colspan="5"></td>
  109.             </tr>
  110.             <tr>
  111.                 <td class="bt1" colspan="5">----培训教育----</td>
  112.             </tr>
  113.             <tr>
  114.                 <td>起止时间</td>
  115.                 <td>就读院校名称</td>
  116.                 <td>主修专业</td>
  117.                 <td colspan="2">学历</td>
  118.             </tr>
  119.             <tr>
  120.                 <td>2009.09~2012.07</td>
  121.                 <td>汕头市科技中学</td>
  122.                 <td>会计电算化</td>
  123.                 <td colspan="2">中专</td>
  124.             </tr>
  125.             <tr>
  126.                 <td class="bt" colspan="5"></td>
  127.             </tr>
  128.             <tr>
  129.                 <td class="bt1" colspan="5">----工作经验----</td>
  130.             </tr>
  131.             <tr>
  132.                 <td>就职公司</td>
  133.                 <td colspan="2">深圳市鹏电器有限公司</td>
  134.                 <td>公司行业</td>
  135.                 <td>其他</td>
  136.             </tr>
  137.             <tr>
  138.                 <td>就职时间</td>
  139.                 <td colspan="2">2011年12月到至今</td>
  140.                 <td>就职部门</td>
  141.                 <td>财务部</td>
  142.             </tr>
  143.             <tr>
  144.                 <td>公司性质</td>
  145.                 <td colspan="2">其他</td>
  146.                 <td>就职职业</td>
  147.                 <td>出纳员</td>
  148.             </tr>
  149.             <tr>
  150.                 <td>工作描述</td>
  151.                 <td colspan="4">办理现金支出，审核审批有据。严格按照国家有关现金管理制度的规定，必须经过会计审核、财务经理复核，总经理签批，方可办理款项收支。收付款后，加盖“收讫”、“付讫”戳记。不允许私自坐支收到的现金及支票，要及时送交银行。不得以“白条”抵充现金，更不得任意挪用现金。如果发现库存现金有短缺或盈余，应查明原因，根据情况分别处理，不得私下取走或补足。如有短缺，要负赔偿责任。要保守保险柜密码的秘密，保管好钥匙，不得任意转交他人。</td>
  152.             </tr>
  153.             <tr>
  154.                 <td class="bt" colspan="5"></td>
  155.             </tr>
  156.             <tr>
  157.                 <td class="bt1" colspan="5">----联系方式----</td>
  158.             </tr>
  159.             <tr>
  160.                 <td>联系电话</td>
  161.                 <td colspan="4">138********</td>
  162.             </tr>
  163.             <tr>
  164.                 <td>联系手机</td>
  165.                 <td colspan="4">135********</td>
  166.             </tr>
  167.             <tr>
  168.                 <td>联系邮箱</td>
  169.                 <td colspan="4">******@qq.com</td>
  170.             </tr>
  171.             <tr>
  172.                 <td class="bt" colspan="5"></td>
  173.             </tr>
  174.         </table>
  176.     </body>
  177. </html>

二、CSS配合列表实现效果

原图与效果图

原图

效果图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>背景定位属性</title>
  6.     <style>
  7.         rq{
  8.             width: 300px;
  9.             height: 300px;
  10.         }
  11.         .a{
  12.             width: 100px;
  13.             height: 100px;
  14.         }
  15.         .a1{
  17.             background-image: url("./images/w4ad.jpg");
  18.             background-position: -11px -8px;
  19.         }
  20.         .a2{
  22.             background-image: url("./images/w4ad.jpg");
  23.             background-position: -121px -8px;
  24.             position: relative;
  25.             top: -100px;
  26.             left: 100px;
  27.         }
  28.         .a3{
  30.             background-image: url("./images/w4ad.jpg");
  31.             background-position: -231px -8px;
  32.             position: relative;
  33.             top: -200px;
  34.             left: 200px;
  35.         }
  36.         .a4{
  38.             background-image: url("./images/w4ad.jpg");
  39.             background-position: -341px -8px;
  40.             position: relative;
  41.             top: -200px;
  42.         }
  43.         .a5{
  45.             background-image: url("./images/w4ad.jpg");
  46.             background-position: -451px -8px;
  47.             position: relative;
  48.             top: -300px;
  49.             left: 100px;
  50.         }
  51.         .a6{
  53.             background-image: url("./images/w4ad.jpg");
  54.             background-position: -561px -8px;
  55.             position: relative;
  56.             top: -400px;
  57.             left: 200px;
  58.         }
  59.         .a7{
  61.             background-image: url("./images/w4ad.jpg");
  62.             background-position: -671px -8px;
  63.             position: relative;
  64.             top: -400px;
  65.         }
  66.         .a8{
  68.             background-image: url("./images/w4ad.jpg");
  69.             background-position: -781px -8px;
  70.             position: relative;
  71.             top: -500px;
  72.             left: 100px;
  73.         }
  74.         .a9{
  76.             background-image: url("./images/w4ad.jpg");
  77.             background-position: -891px -8px;
  78.             position: relative;
  79.             top: -600px;
  80.             left: 200px;
  81.         }
  82.     </style>
  83. </head>
  84. <body>
  85.     <div class="rq">
  86.         <div class="a a1"></div>
  87.         <div class="a a2"></div>
  88.         <div class="a a3"></div>
  89.         <div class="a a4"></div>
  90.         <div class="a a5"></div>
  91.         <div class="a a6"></div>
  92.         <div class="a a7"></div>
  93.         <div class="a a8"></div>
  94.         <div class="a a9"></div>
  95.     </div>
  97. </body>
  98. </html>

三、学习猿地

原图

效果图

代码

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

四、实现网站导航栏

效果图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>网站导航栏</title>
  6.         <style>
  7.             .a{
  8.                 width: 800px;
  9.                 height: 30px;
  10.                 margin: auto;
  11.                 background: #f50c0c;
  13.             }
  14.             .b{
  15.                 padding: inherit;
  16.             }
  17.             li{
  18.                 color:#000000;
  19.                 list-style-type: none;
  20.                 display: inline-block;
  21.                 list-style-position: inside;
  22.                 border-right: 1px solid #a1a1a1;
  23.             }
  24.             li:hover{
  25.                 color: #E7EEFE;
  26.             }
  27.             a{
  28.                 text-decoration: none;
  29.             }
  30.         </style>
  31.     </head>
  32.     <body>
  33.         <div class="a">
  34.             <ul class="b">
  35.                 <li><a>首页</a></li>
  36.                 <li><a>前言</a></li>
  37.                 <li><a>前端</a></li>
  38.                 <li><a>后端</a></li>
  39.                 <li><a>云计算</a></li>
  40.                 <li><a>产品设计</a></li>
  41.                 <li><a>关于我们</a></li>
  43.             </ul>
  44.         </div>
  45.     </body>
  46. </html>

五、仿京东菜单栏

原图

效果图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>仿京东菜单栏</title>
  6.         <style>
  7.             .a{
  8.                 width: 270px;
  9.                 height: 270px;
  10.                 background:#FFFFFF;
  11.                 margin: 10px;
  12.             }
  13.             ul{
  14.                 list-style-type: none;
  15.             }
  16.             a{
  17.                 text-decoration: none;
  18.                 color: #000000;
  19.             }
  20.             a:hover{
  21.                 cursor: pointer;
  22.                 color: #FF3F60;
  23.             }
  24.             li:hover{
  25.                 background: #E4E4E4;
  26.             }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <div class="a">
  31.             <ul>
  32.                 <li>
  33.                     <a href="https://jiadian.jd.com/">家用家电</a>
  34.                 </li>
  35.                 <li>
  36.                     <a href="https://shouji.jd.com/">手机</a>
  37.                     <span>/</span>
  38.                     <a href="https://wt.jd.com/">运营商</a>
  39.                     <span>/</span>
  40.                     <a href="https://shuma.jd.com/">数码</a>
  41.                 </li>
  42.                 <li>
  43.                     <a href="https://diannao.jd.com/">电脑</a>
  44.                     <span>/</span>
  45.                     <a href="https://bg.jd.com/">办公</a>
  46.                 </li>
  47.                 <li>
  48.                     <a href="https://list.jd.com/list.html?cat=1620">家居</a>
  49.                     <span>/</span>
  50.                     <a href="https://channel.jd.com/furniture.html">家具</a>
  51.                     <span>/</span>
  52.                     <a href="https://list.jd.com/list.html?cat=9855">家装</a>
  53.                     <span>/</span>
  54.                     <a href="https://channel.jd.com/kitchenware.html">厨具</a>
  55.                 </li>
  56.                 <li>
  57.                     <a href="https://phat.jd.com/10-603.html">男装</a>
  58.                     <span>/</span>
  59.                     <a href="https://phat.jd.com/10-507.html">女装</a>
  60.                     <span>/</span>
  61.                     <a href="https://phat.jd.com/10-156.html">童装</a>
  62.                     <span>/</span>
  63.                     <a href="https://channel.jd.com/underwear.html">内衣</a>
  64.                 </li>
  65.                 <li>
  66.                     <a href="https://beauty.jd.com/">美妆</a>
  67.                     <span>/</span>
  68.                     <a href="https://phat.jd.com/10-816.html">个护</a>
  69.                     <span>/</span>
  70.                     <a href="https://channel.jd.com/pet.html">宠物</a>
  71.                 </li>
  72.                 <li>
  73.                     <a href="https://phat.jd.com/10-184.html">女鞋</a>
  74.                     <span>/</span>
  75.                     <a href="https://phat.jd.com/10-183.html">箱包</a>
  76.                     <span>/</span>
  77.                     <a href="https://pro.jd.com/mall/active/2BcJPCVVzMEtMUynXkPscCSsx68W/index.html">钟表</a>
  78.                     <span>/</span>
  79.                     <a href="https://channel.jd.com/jewellery.html">珠宝</a>
  80.                 </li>
  81.                 <li>
  82.                     <a href="https://www.jd.com/">男鞋</a>
  83.                     <span>/</span>
  84.                     <a href="https://www.jd.com/">运动</a>
  85.                     <span>/</span>
  86.                     <a href="https://www.jd.com/">户外</a>
  87.                 </li>
  88.                 <li>
  89.                     <a href="https://www.jd.com/">房产</a>
  90.                     <span>/</span>
  91.                     <a href="https://www.jd.com/">汽车</a>
  92.                     <span>/</span>
  93.                     <a href="https://www.jd.com/">汽车用品</a>
  94.                 </li>
  95.                 <li>
  96.                     <a href="https://www.jd.com/">母婴</a>
  97.                     <span>/</span>
  98.                     <a href="https://www.jd.com/">玩具乐器</a>
  99.                 </li>
  100.                 <li>
  101.                     <a href="https://www.jd.com/">食品</a>
  102.                     <span>/</span>
  103.                     <a href="https://www.jd.com/">酒类</a>
  104.                     <span>/</span>
  105.                     <a href="https://www.jd.com/">生鲜</a>
  106.                     <span>/</span>
  107.                     <a href="https://www.jd.com/">特产</a>
  108.                 </li>
  109.                 <li>
  110.                     <a href="https://www.jd.com/">艺术</a>
  111.                     <span>/</span>
  112.                     <a href="https://www.jd.com/">礼品鲜花</a>
  113.                     <span>/</span>
  114.                     <a href="https://www.jd.com/">农资绿植</a>
  115.                 </li>
  116.             </ul>
  117.         </div>
  118.     </body>
  119. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行