search

博客列表 >表格个人简历、背景图定位属性、列表雪碧图、导航条实例代码

表格个人简历、背景图定位属性、列表雪碧图、导航条实例代码

赵大叔
赵大叔原创
2022年05月08日 21:27:10880浏览

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>

上一条：新用户注册、登录、退出下一条：转变思路学习HTML的标签、页面背景图定位、css选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多