Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表格个人简历、背景图定位属性、列表雪碧图、导航条实例代码
Blogger Information
Blog 119
fans 3
comment 1
visits 94578
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
表格个人简历、背景图定位属性、列表雪碧图、导航条实例代码
赵大叔
Original
881 people have browsed it

1、表格个人简历

  • 主要知识：表格跨行、跨列、单元格选择
  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>个人简历</title>
  8.     <style>
  9.         /* 主要知识：表格跨行、跨列； */
  10.         tr{
  11.             height: 38px;
  12.         }
  13.         td:nth-of-type(4){
  14.             width:146px;
  15.         }
  16.         thead tr:first-of-type {
  17.             background-color: rgb(164, 197, 237);
  18.         }
  19.         td[colspan="5"] {
  20.             background-color: rgb(202, 216, 248);
  21.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <table border="1" cellspacing="0" width="780" Cellpadding="5" style="margin: auto;">
  27.         <thead>
  28.             <tr>
  29.                 <th colspan="5">--------个人简历--------</th>
  30.                 <!-- <th>111</th>
  31.                 <th>111</th>
  32.                 <th>111</th>
  33.                 <th>111</th> -->
  34.             </tr>
  36.         </thead>
  37.         <tbody>
  38.             <tr>
  39.                 <td colspan="5">--------基本资料--------</td>  
  40.                 <!-- <td>1</td>  
  41.                 <td>1</td>  
  42.                 <td>1</td>  
  43.                 <td>1</td>   -->
  44.             </tr>
  45.             <tr>
  46.                 <td>姓名</td>  
  47.                 <td></td>  
  48.                 <td>性别</td>  
  49.                 <td></td>  
  50.                 <td rowspan="5" width="138px"></td> 
  51.             </tr>
  52.             <tr>
  53.                 <td>学历</td>  
  54.                 <td></td>  
  55.                 <td>身高</td>  
  56.                 <td></td>  
  57.                 <!-- <td>1</td>  -->
  58.             </tr>
  60.             <tr>
  61.                 <td>籍贯</td>  
  62.                 <td></td>  
  63.                 <td>出生年月</td>  
  64.                 <td></td>  
  65.                 <!-- <td>1</td>  -->
  66.             </tr>
  67.             <tr>
  68.                 <td>毕业院校</td>  
  69.                 <td colspan="3"></td>  
  70.                 <!-- <td></td>  
  71.                 <td></td>  
  72.                 <td></td>  -->
  73.             </tr>
  74.             <tr>
  75.                 <td>主修专业</td>  
  76.                 <td colspan="3"></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 colspan="2"></td>   
  86.                 <!-- <td></td>  -->
  87.             </tr>
  88.             <tr>
  89.                 <td>有效证件</td>  
  90.                 <td></td>  
  91.                 <td>证件号码</td>  
  92.                 <td colspan="2"></td>  
  93.                 <!-- <td></td>  -->
  94.             </tr>
  95.             <tr> 
  96.                 <td colspan="5"></td>  
  97.                 <!-- <td></td>  -->
  98.             </tr>
  99.             <tr>
  100.                 <td colspan="5">--------求职意向--------</td>  
  101.                 <!-- <td></td>  
  102.                 <td></td>  
  103.                 <td></td>  
  104.                 <td></td>  -->
  105.             </tr>
  106.             <tr>
  107.                 <td>寻求职位</td>  
  108.                 <td colspan="4"></td>  
  109.                 <!-- <td></td>  
  110.                 <td></td>  
  111.                 <td></td>  -->
  112.             </tr>
  113.             <tr>
  114.                 <td>求职地区</td>  
  115.                 <td></td>  
  116.                 <td>工资待遇</td>  
  117.                 <td colspan="2"></td>  
  118.                 <!-- <td></td>  -->
  119.             </tr>
  120.             <tr>
  121.                 <td>自我评价</td>  
  122.                 <td colspan="4"></td>  
  123.                 <!-- <td></td>  
  124.                 <td></td>  
  125.                 <td></td>  -->
  126.             </tr>
  127.             <tr> 
  128.                 <td colspan="5"></td>  
  129.                 <!-- <td></td>  -->
  130.             </tr>
  131.             <tr>
  132.                 <td colspan="5">--------教育培训--------</td>  
  133.                 <!-- <td></td>  
  134.                 <td></td>  
  135.                 <td></td>  
  136.                 <td></td>  -->
  137.             </tr>
  138.             <tr>
  139.                 <td>起止时间</td>  
  140.                 <td>学校名称</td>  
  141.                 <td>主修专业</td>  
  142.                 <td colspan="2">学历</td>  
  143.                 <!-- <td></td>  -->
  144.             </tr>
  146.             <tr>
  147.                 <td></td>  
  148.                 <td></td>  
  149.                 <td></td>  
  150.                 <td colspan="2"></td>  
  151.                 <!-- <td></td>  -->
  152.             </tr>
  153.             <tr> 
  154.                 <td colspan="5"></td>  
  155.                 <!-- <td></td>  -->
  156.             </tr>
  157.             <tr>
  158.                 <td colspan="5">--------工作经历--------</td>  
  159.                 <!-- <td></td>  
  160.                 <td></td>  
  161.                 <td></td>  
  162.                 <td></td>  -->
  163.             </tr>
  164.             <tr>
  165.                 <td>就职公司</td>  
  166.                 <td></td>  
  167.                 <td>公司行业</td>  
  168.                 <td colspan="2"></td>  
  169.                 <!-- <td></td>  -->
  170.             </tr>
  171.             <tr>
  172.                 <td>就职时间</td>  
  173.                 <td></td>  
  174.                 <td>就职部门</td>  
  175.                 <td colspan="2"></td>  
  176.                 <!-- <td></td>  -->
  177.             </tr>
  178.             <tr>
  179.                 <td>公司性质</td>  
  180.                 <td></td>  
  181.                 <td>就职职位</td>  
  182.                 <td colspan="2"></td>  
  183.                 <!-- <td></td>  -->
  184.             </tr>
  185.             <tr>
  186.                 <td>工作描述</td>  
  187.                 <td colspan="4"></td>  
  188.                 <!-- <td></td>  
  189.                 <td></td>  
  190.                 <td></td>  -->
  191.             </tr>
  192.             <tr> 
  193.                 <td colspan="5"></td>  
  194.                 <!-- <td></td>  -->
  195.             </tr>
  196.             <tr>
  197.                 <td colspan="5">-------- 联系方式 --------</td>  
  198.                 <!-- <td></td>  
  199.                 <td></td>  
  200.                 <td></td>  
  201.                 <td></td>  -->
  202.             </tr>
  203.             <tr>
  204.                 <td>联系电话</td>  
  205.                 <td colspan="4"></td>  
  206.                 <!-- <td></td>  
  207.                 <td></td>  
  208.                 <td></td>  -->
  209.             </tr>
  210.             <tr>
  211.                 <td>联系手机</td>  
  212.                 <td colspan="4"></td>  
  213.                 <!-- <td></td>  
  214.                 <td></td>  
  215.                 <td></td>  -->
  216.             </tr>
  217.             <tr>
  218.                 <td>电子邮件</td>  
  219.                 <td colspan="4"></td>  
  220.                 <!-- <td></td>  
  221.                 <td></td>  
  222.                 <td></td>  -->
  223.             </tr>
  225.         </tbody>
  226.     </table>
  228. </body>
  229. </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>定位属性</title>
  8.     <style>
  9.         /* 背景图片定位 */
  10.         .content {
  11.             position: relative;
  12.         }
  13.         .item {
  14.             width: 128px;
  15.             height: 128px;
  16.             /* border:1px solid red; */
  17.             background-image: url(img1.jpg);
  18.             background-repeat: no-repeat;
  19.             background-size: 1255px 152px;
  20.         }
  21.         .item1 {
  22.             background-position: -13px ;
  23.         }
  24.         .item2 {
  25.             position: absolute;
  26.             top: 0;
  27.             left: 128px;
  28.             background-position: -151px;
  29.         }
  30.         .item3 {
  31.             position: absolute;
  32.             top: 0;
  33.             left: 256px;
  34.             background-position: -289px;
  35.         }
  36.         .item4 {
  37.             position: absolute;
  38.             top: 128px;
  39.             left: 0;
  40.             background-position: -426.5px;
  41.         }
  42.         .item5 {
  43.             position: absolute;
  44.             top: 128px;
  45.             left: 128px;
  46.             background-position: -565px;
  47.         }
  48.         .item6 {
  49.             position: absolute;
  50.             top: 128px;
  51.             left: 256px;
  52.             background-position: -703px;
  53.         }
  54.         .item7 {
  55.         background-image: url(img1.jpg);
  56.             position: absolute;
  57.             top:256px;
  58.             left:0;
  59.             background-position: -840.5px;
  60.         }
  61.         .item8 {
  62.             position: absolute;
  63.             top:256px;
  64.             left:128px;
  65.             background-position: -978px;
  66.         }
  67.         .item9 {
  68.             position: absolute;
  69.             top:256px;
  70.             left:256px;
  71.             background-position: -1117px;
  72.         }
  73.     </style>
  74. </head>
  75. <body>
  76.     <div class="content">
  77.         <div class="item item1"></div>
  78.         <div class="item item2"></div>
  79.         <div class="item item3"></div>
  80.         <div class="item item4"></div>
  81.         <div class="item item5"></div>
  82.         <div class="item item6"></div>
  83.         <div class="item item7"></div>
  84.         <div class="item item8"></div>
  85.         <div class="item item9"></div>
  86.     </div> 
  87. </body>
  88. </html>

3、列表雪碧图

  • 背景图片定位、元素边框设置
  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>列表属性</title>
  8.     <style>
  9.         /* 背景图片、元素边框 */
  10.         .content{
  11.             width: 460px;
  12.             color: rgb(211, 55, 153);
  13.         }
  14.         h3{
  15.             margin-left: 200px;
  17.         }
  19.         li:first-of-type{
  20.             border-top:2px solid #000;
  21.         }
  23.         li{
  24.             padding-left: 24px;
  25.             background-image: url(../lesson04/作业/作业用到的图片/aaaa.png);
  26.             background-repeat: no-repeat;
  27.             background-position: 0 10px;
  28.             border-bottom:1px solid rgb(117, 116, 116);
  29.             height: 38px;
  30.             line-height: 38px;
  31.             list-style:none;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="content">
  37.         <h3>学习猿地</h3>
  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>
  50. </body>
  51. </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>导航条</title>
  8.     <style>
  9.         /* 1、将ul容器做相对定位，使li标签在容器内定位；
  10.         2、把每一个li做绝对定位；
  11.         3、给li设置：hover属性。 */
  12.         ul {
  13.             height: 48px;
  14.             width: 880px;
  15.             line-height: 48px;
  16.             background-color: red;
  17.             position: relative;
  18.         }
  19.         li{
  20.             list-style:none;
  21.             /* background-color: red; */
  22.             /* margin: auto; */
  23.             /* width: 200px; */
  24.         }
  26.         li:hover{
  27.             background-color: #fff;
  28.             color: rgb(249, 6, 6);
  29.         }
  31.         ul li:first-of-type{
  32.             position: absolute;
  33.             left: calc(2* 48px);
  35.         }
  37.         ul li:nth-of-type(2){
  38.             position: absolute;
  39.             left: calc(3* 48px);
  41.         }
  42.         ul li:nth-of-type(3){
  43.             position: absolute;
  44.             left: calc(4* 48px);
  46.         }
  47.         ul li:nth-of-type(4){
  48.             position: absolute;
  49.             left: calc(5* 48px);
  51.         }
  52.         ul li:nth-of-type(5){
  53.             position: absolute;
  54.             left: calc(6* 48px);
  56.         }
  57.         ul li:nth-of-type(6){
  58.             position: absolute;
  59.             left: calc(7* 68px);
  61.         }
  62.         ul li:nth-of-type(7){
  63.             position: absolute;
  64.             left: calc(8* 48px);
  65.         }
  67.     </style>
  68. </head>
  69. <body>
  70.     <ul>
  71.         <li> 首页</li>
  72.         <li> 前言</li>
  73.         <li> 前端</li>
  74.         <li> 后端</li>
  75.         <li> 云计算</li>
  76.         <li> 产品设计</li>
  77.         <li> 关于我们</li>
  78.     </ul>
  80. </body>
  81. </html>

Correcting teacher：PHPzPHPz

Correction status：qualified

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