简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >HTML基础知识：HTML中常用的标签、css选择器和属性小结

HTML基础知识：HTML中常用的标签、css选择器和属性小结

Lucas
Lucas原创
2022年05月07日 21:48:05430浏览

一、个人简历

1、创建一个html页面、编写html代码实现自己的‘个人简历’所示的效果如下

index.html 页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>个人简历</title>
  7.     <meta name="keywords" content="个人简历,简历"/>
  8.     <meta name="description" content="我虽然是聋人，但在我的身上看不出丝毫的自卑。善良的我喜欢身边的每一人，也得到了大家的喜爱。由于失去了听力，我的世界没有声音，但我的生活依然充满笑容。" />
  9.     <link rel="icon" type="" href="./img/icon.png"/>
  10.     <link rel="stylesheet" type="text/css" href="./style.css" />
  11. </head>
  12. <body>
  13.     <div class="one">
  14.         <table border="1" width="800" align="center" cellspacing="0" cellpadding="0">
  15.             <caption><h3>自我介绍</h3></caption>
  16.             <tr class="tr_h">
  17.                 <td colspan="5"></td>
  18.             </tr>
  19.             <tr class="tr_tit">
  20.                 <th colspan="5" align="left">------- 基本资料 -------</th>
  21.             </tr>
  22.             <tr>
  23.                 <td width="15%">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</td>
  24.                 <td width="25%">马小组</td>
  25.                 <td width="15%">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</td>
  26.                 <td width="20%">女</td>
  27.                 <td width="25%" rowspan="7" align="center">
  28.                     <img src="./img/touxiang.jpg" width="120" alt="">
  29.                 </td>
  30.             </tr>
  31.             <tr>
  32.                 <td width="15%">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：</td>
  33.                 <td width="25%">中专</td>
  34.                 <td width="15%">身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高：</td>
  35.                 <td width="20%">177CM</td>
  36.             </tr>
  37.             <tr>
  38.                 <td width="15%">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯：</td>
  39.                 <td width="25%">广东</td>
  40.                 <td width="15%">出生年月：</td>
  41.                 <td width="20%">1991-12-01</td>
  42.             </tr>
  43.             <tr>
  44.                 <td width="15%">毕业院校：</td>
  45.                 <td colspan="3" class="left">汕头市林百欣科技中专</td>
  46.             </tr>
  47.             <tr>
  48.                 <td width="15%">主修专业：</td>
  49.                 <td colspan="3" class="left">管理学 => 会计学</td>
  50.             </tr>
  51.             <tr>
  52.                 <td width="15%">工作经验：</td>
  53.                 <td width="25%">未知</td>
  54.                 <td width="15%">目前年薪：</td>
  55.                 <td width="20%">保密/年</td>
  56.             </tr>
  57.             <tr>
  58.                 <td width="15%">有效证件：</td>
  59.                 <td width="25%">身份证</td>
  60.                 <td width="15%">证件号码：</td>
  61.                 <td width="20%">110***************</td>
  62.             </tr>
  63.             <tr class="tr_h">
  64.                 <td colspan="5"></td>
  65.             </tr>
  66.             <tr class="tr_tit">
  67.                 <th colspan="5" align="left">------- 求职意向 -------</th>
  68.             </tr>
  69.             <tr>
  70.                 <td width="15%">寻求职位：</td>
  71.                 <td colspan="4" class="left">出纳员，会计女员</td>
  72.             </tr>
  73.             <tr>
  74.                 <td width="15%">求职地区：</td>
  75.                 <td colspan="2">罗湖区 福田区</td>
  76.                 <td width="15%">工资待遇：</td>
  77.                 <td width="20%">面议</td>
  78.             </tr>
  79.             <tr>
  80.                 <td width="15%">自我评价：</td>
  81.                 <td colspan="4" class="left">
  82.                     本人对将工作认民负责，递憤.细心。与人相处融恰，任劳任品，是一个有聚和力的
  83.                     人。乐千助人。有良好的团队箱神。能吃苦耐芳，积嵌配合领导的每- 项工作。探的
  84.                     领导和同事的欢迎。业余时间要欢看些书充实下自己.并鄱加了西亥交通大学威人高
  85.                     寿疑升自己的学历.勋干单习脆不断提高自身的能力与综合泰成。有上链心，具有铰
  86.                     侮的适度能力。鼎恭办公欷件。自毕业之后一直嵌众业担任出纳的工作，有一尾的工
  87.                     作经输。期望从事职业: 出纳员。 会计文员期塑月崭:面议目前状况:我目前
  88.                     处干离职状者。可立即上岗
  90.                 </td>
  91.             </tr>
  92.             <tr class="tr_h">
  93.                 <td colspan="5"></td>
  94.             </tr>
  95.             <tr class="tr_tit">
  96.                 <th colspan="5" align="left">------- 教育培训 -------</th>
  97.             </tr>
  98.             <tr>
  99.                 <th width="15%">起止时间</th>
  100.                 <th colspan="2">院校名称</th>
  101.                 <th width="15%">主修专业</th>
  102.                 <th width="20%">学历</th>
  103.             </tr>
  104.             <tr class="tr_center">
  105.                 <td width="15%">2009.09~2012.07</td>
  106.                 <td colspan="2">汕头市林百欣科技中专</td>
  107.                 <td width="15%">会计电算化</td>
  108.                 <td width="20%">中专</td>
  109.             </tr>
  110.             <tr class="tr_h">
  111.                 <td colspan="5"></td>
  112.             </tr>
  113.             <tr class="tr_tit">
  114.                 <th colspan="5" align="left">------- 工作经验（1） -------</th>
  115.             </tr>
  116.             <tr>
  117.                 <td width="15%">就职公司：</td>
  118.                 <td colspan="2">深圳市志鹏电器有限公司</td>
  119.                 <td width="15%">公司行业：</td>
  120.                 <td width="20%">其他</td>
  121.             </tr>
  122.             <tr>
  123.                 <td width="15%">就职时间：</td>
  124.                 <td colspan="2">2011年12月到如今</td>
  125.                 <td width="15%">就职部门：</td>
  126.                 <td width="20%">财务部</td>
  127.             </tr>
  128.             <tr>
  129.                 <td width="15%">公司性质：</td>
  130.                 <td colspan="2">其他</td>
  131.                 <td width="15%">就职职位：</td>
  132.                 <td width="20%">出纳员</td>
  133.             </tr>
  134.             <tr>
  135.                 <td width="15%">工作描述：</td>
  136.                 <td colspan="4" class="left">
  137.                     1.负责办崖良金收。付款业务2.象行存款，收款.付款工作3.负责目常费用报情。
  138.                     员工倍款给什.保匪各项枚支手续完整，金詢實瞞4.负賣座存曳金的保管及盘点，每
  139.                     天童记臾金流水账。做到账故相符5，每月准时交水电费，督理費6，协助会计据税，购
  140.                     买发票等7，负责公司能行账号开办。变更，嶽惰工作8.负责公司营业执感,税务登记
  141.                     匪箅正照的年检工作9，负责印章，合同等的保曾工作10.完戚上级领导的其它复锋事
  142.                     项
  143.                 </td>
  144.             </tr>
  145.             <tr class="tr_h">
  146.                 <td colspan="5"></td>
  147.             </tr>
  148.             <tr class="tr_tit">
  149.                 <th colspan="5" align="left">------- 联系方式 -------</th>
  150.             </tr>
  151.             <tr>
  152.                 <td width="15%">联系电话：</td>
  153.                 <td colspan="4" class="left">13456789012</td>
  154.             </tr>
  155.             <tr>
  156.                 <td width="15%">联系手机：</td>
  157.                 <td colspan="4" class="left">13456789012</td>
  158.             </tr>
  159.             <tr>
  160.                 <td width="15%">电子邮件：</td>
  161.                 <td colspan="4" class="left">12345678@163.com</td>
  162.             </tr>
  163.         </table>
  164.     </div>
  165. </body>
  166. </html>

style.css 样式

  1. .one tr th,tr td {
  2.     padding: 10px;
  3.     text-align: center;
  4. }
  5. .one .tr_tit th{
  6.     text-align: left;
  7. }
  8. .one table .tr_h{
  9.     height: 40px;
  10.     background-color: #99ccff;
  11. }
  12. .one table .tr_tit{
  13.     background-color: #e7eefa;
  14. }
  15. .one table .tr_center{
  16.     text-align: center;
  17. }
  18. .one table tr:hover{
  19.     background: #dedede;
  20. }
  21. .left{
  22.     text-align: left;
  23. }

页面效果图

二、背景图定位属性

第一种方法

index.html 页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>背景图定位属性</title>
  6.   <style>
  7.     .content{
  8.       margin: 0 auto;
  9.       width: 300px;
  10.       height: 300px;
  11.     }
  12.     .one, .two, .three, .four, .five, .six, .seven, .eight, .nine{
  13.       position: relative;
  14.       width: 100px;
  15.       height: 100px;
  16.       background-image: url("./img/number.jpg");
  17.       background-repeat: no-repeat;
  18.     }
  19.     .one{
  20.       top:0px;
  21.       left:0px;
  22.       background-position: -11px -8px;
  23.     }
  24.     .two{
  25.       top:-100px;
  26.       left:100px;
  27.       background-position: -121px -8px;
  28.     }
  29.     .three{
  30.       top:-200px;
  31.       left:200px;
  32.       background-position: -231px -8px;
  33.     }
  34.     .four{
  35.       top:-200px;
  36.       left:0px;
  37.       background-position: -341px -8px;
  38.     }
  39.     .five{
  40.       top:-300px;
  41.       left:100px;
  42.       background-position: -451px -8px;
  43.     }
  44.     .six{
  45.       top:-400px;
  46.       left:200px;
  47.       background-position: -561px -8px;
  48.     }
  49.     .seven{
  50.       top:-400px;
  51.       left:0px;
  52.       background-position: -671px -8px;
  53.     }
  54.     .eight{
  55.       top:-500px;
  56.       left:100px;
  57.       background-position: -781px -8px;
  58.     }
  59.     .nine{
  60.       top:-600px;
  61.       left:200px;
  62.       background-position: -891px -8px;
  63.     }
  64.   </style>
  65. </head>
  66. <body>
  67. <div class="content">
  68.   <div class="one"></div>
  69.   <div class="two"></div>
  70.   <div class="three"></div>
  71.   <div class="four"></div>
  72.   <div class="five"></div>
  73.   <div class="six"></div>
  74.   <div class="seven"></div>
  75.   <div class="eight"></div>
  76.   <div class="nine"></div>
  77. </div>
  78. </body>
  79. </html>

效果图如下

第二种方法

index.html 页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>背景图定位属性</title>
  6.     <style>
  7.         .content{
  8.             margin: 0 auto;
  9.             width: 300px;
  10.             height: 300px;
  11.         }
  12.         .public{
  13.             float: left;
  14.             width: 100px;
  15.             height: 100px;
  16.             background-image: url("./img/number.jpg");
  17.             background-repeat: no-repeat;
  18.         }
  19.         .one{
  20.             background-position: -11px -8px;
  21.         }
  22.         .two{
  23.             background-position: -121px -8px;
  24.         }
  25.         .three{
  26.             background-position: -231px -8px;
  27.         }
  28.         .four{
  29.             background-position: -341px -8px;
  30.         }
  31.         .five{
  32.             background-position: -451px -8px;
  33.         }
  34.         .six{
  35.             background-position: -561px -8px;
  36.         }
  37.         .seven{
  38.             background-position: -671px -8px;
  39.         }
  40.         .eight{
  41.             background-position: -781px -8px;
  42.         }
  43.         .nine{
  44.             background-position: -891px -8px;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <div class="content">
  50.         <div class="public one"></div>
  51.         <div class="public two"></div>
  52.         <div class="public three"></div>
  53.         <div class="public four"></div>
  54.         <div class="public five"></div>
  55.         <div class="public six"></div>
  56.         <div class="public seven"></div>
  57.         <div class="public eight"></div>
  58.         <div class="public nine"></div>
  59.     </div>
  60. </body>
  61. </html>

效果图如下

三、html列表标签、配合css列表属性实现

1、使用html列表标签、配合css列表属性实现如下效果

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

效果图如下

2、制作导航栏如下效果并且实现鼠标移动时变换背景颜色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>菜单导航栏1</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         a{
  12.             text-decoration: none;
  13.         }
  14.         .nav{
  15.             margin: 20px auto;
  16.             width: 805px;
  17.             height: 50px;
  18.         }
  19.         ul, li{
  20.             list-style-type:none;
  21.         }
  22.         ul li{
  23.             float: left;
  24.         }
  25.         ul>li>a{
  26.             display: block;
  27.             width: 115px;
  28.             height: 50px;
  29.             line-height: 50px;
  30.             background-color: red;
  31.             color: #fff;
  32.             text-align: center;
  33.         }
  34.         ul>li>a:hover{
  35.             background-color: #fff;
  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><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.         </ul>
  52.     </div>
  53. </body>
  54. </html>

效果图如下

3、制作导航栏第二个如下

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

效果图如下

小总结

学到HTML这类的标记语言，整体对HTML语言的发展和前景有所了解，然后进行基础知识的学习。学习了在WebStorm软件中的固定代码格式，主要有头文件名，网页标题，格式，标签中常用的标签，并学习了一些基础的设置的，添加颜色的代码，还有浮动，图片的操作等， css内外联样式的代码书写，并对所学的各种代码操作加以总结复习。

上一条：Markdown入门下一条：MVC课后练习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多