search

博客列表 >转变思路学习HTML的标签、页面背景图定位、css选择器

转变思路学习HTML的标签、页面背景图定位、css选择器

凝思
凝思原创
2022年05月08日 22:17:45431浏览

个人简历HTML表格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>个人简历</title>
  6.     <style>
  7.         body{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         div{
  12.             width: 800px;
  13.             alignment: center;
  14.             margin: auto;
  15.         }
  16.         table{
  17.             border-collapse:collapse;
  18.         }
  19.         td{
  20.             text-align: left;
  21.             border: 1px solid black;
  22.             width: 20%;
  23.         }
  24.         table td:hover{
  25.             color: white;
  26.             background: #747474;
  27.         }
  28.         .h2{
  29.             height: 30px;
  30.             background: #a3c4ef;
  31.         }
  32.         .h3{
  33.             font-weight: bold;
  34.             background: #e6edfd;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div>
  40.         <table>
  41.             <tr class="h2">
  42.                 <td colspan="5"></td>
  43.             </tr>
  44.             <tr class="h3">
  45.                 <td colspan="5">------- 基本资料 -------</td>
  46.             </tr>
  47.             <tr>
  48.                 <td>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</td>
  49.                 <td>马小姐</td>
  50.                 <td>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</td>
  51.                 <td>女</td>
  52.                 <td rowspan="7">
  53.                     <img src="" width="" alt="">
  54.                 </td>
  55.             </tr>
  56.             <tr>
  57.                 <td>学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：</td>
  58.                 <td>中专</td>
  59.                 <td>身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高：</td>
  60.                 <td>165CM</td>
  61.             </tr>
  62.             <tr>
  63.                 <td>籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯：</td>
  64.                 <td>广东</td>
  65.                 <td>出生年月：</td>
  66.                 <td>1991-12-01</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>毕业院校：</td>
  70.                 <td colspan="3">汕头市林百欣科技中专</td>
  71.             </tr>
  72.             <tr>
  73.                 <td>主修专业：</td>
  74.                 <td colspan="3">管理学 => 会计学</td>
  75.             </tr>
  76.             <tr>
  77.                 <td>工作经验：</td>
  78.                 <td>未知</td>
  79.                 <td>目前年薪：</td>
  80.                 <td>保密/年</td>
  81.             </tr>
  82.             <tr>
  83.                 <td>有效证件：</td>
  84.                 <td>身份证</td>
  85.                 <td>证件号码：</td>
  86.                 <td>*****************</td>
  87.             </tr>
  88.             <tr class="h2">
  89.                 <td colspan="5"></td>
  90.             </tr>
  91.             <tr class="h3">
  92.                 <td colspan="5">------- 求职意向 -------</td>
  93.             </tr>
  94.             <tr  class="h2">
  95.                 <td>寻求职位：</td>
  96.                 <td colspan="4">出纳员，会计文员</td>
  97.             </tr>
  98.             <tr>
  99.                 <td>求职地区：</td>
  100.                 <td colspan="2">罗湖区 福田区</td>
  101.                 <td>工资待遇：</td>
  102.                 <td>面议</td>
  103.             </tr>
  104.             <tr>
  105.                 <td>自我评价：</td>
  106.                 <td colspan="4">
  107.                     本人对待工作认真负责，谨慎、细心。与人相处融洽，任劳任怨，是一个有亲和力的人。
  108.                     乐于助人，有良好的团队精神，能吃苦耐劳，积极配合领导的每一项工作，深的领导和同事的欢迎，业余时间喜欢看些书充实自己。
  109.                     目前状态：处于离职状态，可立即上岗。
  110.                 </td>
  111.             </tr>
  112.             <tr class="h2">
  113.                 <td colspan="5"></td>
  114.             </tr>
  115.             <tr class="h3">
  116.                 <td colspan="5">------- 教育培训 -------</td>
  117.             </tr>
  118.             <tr>
  119.                 <td>起止时间</td>
  120.                 <td colspan="2">院校名称</td>
  121.                 <td>主修专业</td>
  122.                 <td>学历</td>
  123.             </tr>
  124.             <tr class="tr_center">
  125.                 <td>2009.09~2012.07</td>
  126.                 <td colspan="2">汕头市林百欣科技中专</td>
  127.                 <td>会计电算化</td>
  128.                 <td>中专</td>
  129.             </tr>
  130.             <tr class="h2">
  131.                 <td colspan="5"></td>
  132.             </tr>
  133.             <tr class="h3">
  134.                 <td colspan="5">------- 工作经验（1） -------</td>
  135.             </tr>
  136.             <tr>
  137.                 <td>就职公司：</td>
  138.                 <td colspan="2">深圳市安鹏电器有限公司</td>
  139.                 <td>公司行业：</td>
  140.                 <td>其他</td>
  141.             </tr>
  142.             <tr>
  143.                 <td>就职时间：</td>
  144.                 <td colspan="2">2011年12月到如今</td>
  145.                 <td>就职部门：</td>
  146.                 <td>财务部</td>
  147.             </tr>
  148.             <tr>
  149.                 <td>公司性质：</td>
  150.                 <td colspan="2">其他</td>
  151.                 <td>就职职位：</td>
  152.                 <td>出纳员</td>
  153.             </tr>
  154.             <tr>
  155.                 <td>工作描述：</td>
  156.                 <td colspan="4">
  157.                     1.负责办理现金收、付款业务<br>2.银行存款、收款、付款工作<br>
  158.                     3.负责日常费用报销，员工借款给付。保证各项收支手续完整、金额准确。
  159.                 </td>
  160.             </tr>
  161.             <tr class="h2">
  162.                 <td colspan="5"></td>
  163.             </tr>
  164.             <tr class="h3">
  165.                 <td colspan="5">------- 联系方式 -------</td>
  166.             </tr>
  167.             <tr>
  168.                 <td>联系电话：</td>
  169.                 <td colspan="4">134*******</td>
  170.             </tr>
  171.             <tr>
  172.                 <td>联系手机：</td>
  173.                 <td colspan="4">134*******</td>
  174.             </tr>
  175.             <tr>
  176.                 <td>电子邮件：</td>
  177.                 <td colspan="4">***********@163.com</td>
  178.             </tr>
  179.         </table>
  180.     </div>
  181. </body>
  182. </html>

简历效果图

简历效果图

九宫格背景图定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>九宫格</title>
  6.         <style>
  7.             body{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             div{
  12.                 margin: auto;
  13.                 width: 330px;
  14.                 height: 110px;
  15.                 background-image: url("./a.jpg");
  16.             }
  17.             .one{
  18.                 background-position: -3px;
  19.             }
  20.             .two{
  21.                 background-position: -333px
  22.             }
  23.             .three{
  24.                 background-position: -663px;
  25.             }
  26.         </style>
  27. </head>
  28. <body>
  29. <div>
  30.     <div class="one"></div>
  31.     <div class="two"></div>
  32.     <div class="three"></div>
  33. </div>
  34. </body>
  35. </html>

九宫格效果图

九宫格效果图

HTML+CSS边框样式

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

CSS边框属性效果图

CSS边框属性效果图

头部导航条设计

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>导航条</title>
  6.       <style>
  7.         body{
  8.           margin: 0;
  9.           padding: 0;
  10.         }
  11.         div{
  12.           margin: auto;
  13.           width: 900px;
  14.           height: 40px;
  15.         }
  16.         li{
  17.           width: 120px;
  18.           height: 40px;
  19.           float: left;
  20.           line-height: 40px;
  21.           background-color: red;
  22.           list-style-type:none;
  23.         }
  24.         a{
  25.           color: white;
  26.           display: block;
  27.           text-align: center;
  28.           text-decoration: none;
  29.         }
  30.         a:hover{
  31.           color: red;
  32.           font-weight: bold;
  33.           background-color: white;
  34.         }
  35.       </style>
  36. </head>
  37. <body>
  38.   <div>
  39.     <ul>
  40.       <li><a href="">首页</a></li>
  41.       <li><a href="">前期</a></li>
  42.       <li><a href="">前端</a></li>
  43.       <li><a href="">后端</a></li>
  44.       <li><a href="">云计算</a></li>
  45.       <li><a href="">产品设计</a></li>
  46.       <li><a href="">关于我们</a></li>
  47.     </ul>
  48.   </div>
  49. </body>
  50. </html>

头部导航条设计效果图

头部导航条设计效果图

网页导航区块布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>导航区块</title>
  6.     <style>
  7.         body{
  8.             margin: 0;
  9.             padding: 0;
  10.             font-size: 14px;
  11.             background-color: #f4f4f4;
  12.         }
  13.         .nav{
  14.             margin: 20px auto;
  15.             width: 230px;
  16.             background-color: white;
  17.         }
  18.         ul{
  19.             padding: 1px 0;
  20.         }
  21.         ul li{
  22.             padding-left: 10px;
  23.             height: 26px;
  24.             line-height: 26px;
  25.             list-style-type:none;
  26.         }
  27.         a{
  28.             text-decoration: none;
  29.             padding: 2px;
  30.             color: #333333;
  31.         }
  32.         li:hover{
  33.             background: #D9D9D9;
  34.         }
  35.         ul li a:hover{
  36.             color: red;
  37.             font-weight: bold;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div class="nav">
  43.         <ul>
  44.             <li><a href="">家用电器</a></li>
  45.             <li>
  46.                 <a href="">手机</a>/
  47.                 <a href="">运营商</a>/
  48.                 <a href="">数码</a>
  49.             </li>
  50.             <li>
  51.                 <a href="">电脑</a>/
  52.                 <a href="">办公</a>
  53.             </li>
  54.             <li>
  55.                 <a href="">家居</a>/
  56.                 <a href="">家具</a>/
  57.                 <a href="">家装</a>/
  58.                 <a href="">厨具</a>
  59.             </li>
  60.             <li>
  61.                 <a href="">男装</a>/
  62.                 <a href="">女装</a>/
  63.                 <a href="">童装</a>/
  64.                 <a href="">内衣</a>
  65.             </li>
  66.             <li>
  67.                 <a href="">美妆</a>/
  68.                 <a href="">个护清洁</a>/
  69.                 <a href="">宠物</a>
  70.             </li>
  71.             <li>
  72.                 <a href="">女鞋</a>/
  73.                 <a href="">箱包</a>/
  74.                 <a href="">钟表</a>/
  75.                 <a href="">珠宝</a>
  76.             </li>
  77.             <li>
  78.                 <a href="">男鞋</a>/
  79.                 <a href="">运动</a>/
  80.                 <a href="">户外</a>
  81.             </li>
  82.             <li>
  83.                 <a href="">房产</a>/
  84.                 <a href="">汽车</a>/
  85.                 <a href="">汽车用品</a>
  86.             </li>
  87.             <li>
  88.                 <a href="">母婴</a>/
  89.                 <a href="">玩具乐器</a>
  90.             </li>
  91.             <li>
  92.                 <a href="">食品</a>/
  93.                 <a href="">酒类</a>/
  94.                 <a href="">生鲜</a>/
  95.                 <a href="">特产</a>
  96.             </li>
  97.             <li>
  98.                 <a href="">艺术</a>/
  99.                 <a href="">礼品鲜花</a>/
  100.                 <a href="">农资绿植</a>
  101.             </li>
  102.             <li>
  103.                 <a href="">医药保健</a>/
  104.                 <a href="">计生情趣</a>
  105.             </li>
  106.             <li>
  107.                 <a href="">图书</a>/
  108.                 <a href="">文娱</a>/
  109.                 <a href="">教育</a>/
  110.                 <a href="">电子书</a>
  111.             </li>
  112.             <li>
  113.                 <a href="">机票</a>/
  114.                 <a href="">酒店</a>/
  115.                 <a href="">旅游</a>/
  116.                 <a href="">生活</a>
  117.             </li>
  118.             <li>
  119.                 <a href="">理财</a>/
  120.                 <a href="">众筹</a>/
  121.                 <a href="">白条</a>/
  122.                 <a href="">保险</a>
  123.             </li>
  124.             <li>
  125.                 <a href="">安装</a>/
  126.                 <a href="">维修</a>/
  127.                 <a href="">清洗</a>/
  128.                 <a href="">二手</a>
  129.             </li>
  130.             <li>
  131.                 <a href="">工业品</a>
  132.             </li>
  133.         </ul>
  134.     </div>
  135. </body>
  136. </html>

网页导航区块布局效果图

网页导航区块布局效果图

上一条：表格个人简历、背景图定位属性、列表雪碧图、导航条实例代码下一条：MVC学习小结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多