亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 10
粉絲 0
評論 0
訪問量 12212
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
0506作業(yè)
Tyrrell
原創(chuàng)
582人瀏覽過

1.創(chuàng)建一個html頁面、編寫html代碼實現(xiàn)自己的‘個人簡歷

  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>Document</title>
  8.     <style>
  9.       table {
  10.         border: 1px #9A9997 solid;
  11.       }
  13.       td {
  14.         border: 1px #9A9997 solid;
  15.         height: 1.8rem;
  16.         width: 10rem;
  17.       }
  18.       th {
  19.         border: 1px #9A9997 solid;
  20.         text-align: left;
  21.       }
  22.       .jz{
  23.         text-align: center;
  24.       }
  26.       .zwpj,
  27.       .gzms {
  28.         height: 11rem;
  29.         text-align:left;
  30.         vertical-align: top;
  31.       }
  32.       table .Lightblue {
  33.         background: #a5c6ed;
  34.       }
  35.       table .Light {
  36.         background-color: #e7eefb;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <table cellspacing="0" cellpadding="5px">
  42.       <!-- 基本資料 -->
  43.       <tr class="Lightblue">
  44.         <td colspan="5"></td>
  45.         <!-- <td></td>
  46.         <td></td>
  47.         <td></td>
  48.         <td></td> -->
  49.       </tr>
  50.       <tr>
  51.         <th colspan="5" class="Light">------ 基本資料 ------</th>
  52.         <!-- <td></td>
  53.         <td></td>
  54.         <td></td>
  55.         <td></td> -->
  56.       </tr>
  57.       <tr>
  58.         <td>姓名：</td>
  59.         <td>馬曉旭</td>
  60.         <td>性&nbsp;&nbsp;&nbsp;別：</td>
  61.         <td>女</td>
  62.         <td rowspan="7"></td>
  63.       </tr>
  64.       <tr>
  65.         <td>學歷：</td>
  66.         <td>中專</td>
  67.         <td>身&nbsp;&nbsp;&nbsp;高：</td>
  68.         <td>168CM</td>
  69.         <!-- <td></td> -->
  70.       </tr>
  71.       <tr>
  72.         <td>籍貫：</td>
  73.         <td>廣東</td>
  74.         <td>出生年月：</td>
  75.         <td>1991-1-1</td>
  76.         <!-- <td></td> -->
  77.       </tr>
  78.       <tr>
  79.         <td>畢業(yè)學校：</td>
  80.         <td colspan="2">汕頭科技中學</td>
  81.         <!-- <td></td> -->
  82.         <td></td>
  83.         <!-- <td></td> -->
  84.       </tr>
  85.       <tr>
  86.         <td>主修專業(yè)：</td>
  87.         <td colspan="2">管理學 => 會計學</td>
  88.         <!-- <td></td> -->
  89.         <td></td>
  90.         <!-- <td></td> -->
  91.       </tr>
  92.       <tr>
  93.         <td>工作經(jīng)驗：</td>
  94.         <td>無</td>
  95.         <td>目前年薪：</td>
  96.         <td>保密/年</td>
  97.         <!-- <td></td> -->
  98.       </tr>
  99.       <tr>
  100.         <td>有效證件：</td>
  101.         <td>身份證</td>
  102.         <td>證件號碼：</td>
  103.         <td>**********</td>
  104.         <!-- <td></td> -->
  105.       </tr>
  106.       <tr class="Lightblue">
  107.         <td colspan="5"></td>
  108.         <!-- <td></td>
  109.         <td></td>
  110.         <td></td>
  111.         <td></td> -->
  112.       </tr>
  114.       <!-- 求職意向 -->
  115.       <tr>
  116.         <th colspan="5" class="Light">------ 求職意向 ------</th>
  117.         <!-- <td></td>
  118.         <td></td>
  119.         <td></td>
  120.         <td></td> -->
  121.       </tr>
  122.       <tr class="Lightblue">
  123.         <td>尋求職位：</td>
  124.         <td colspan="4">出納員，會計文員</td>
  125.         <!-- <td></td>
  126.         <td></td>
  127.         <td></td> -->
  128.       </tr>
  129.       <tr>
  130.         <td>求職地區(qū)：</td>
  131.         <td colspan="2">羅湖區(qū) 福旺區(qū)</td>
  132.         <!-- <td></td> -->
  133.         <td>工資待遇：</td>
  134.         <td>面議</td>
  135.       </tr>
  136.       <tr>
  137.         <td >自我評價：</td>
  138.         <td  colspan="4" class="zwpj">自我評價</td>
  139.         <!-- <td></td>
  140.         <td></td>
  141.         <td></td> -->
  142.       </tr>
  143.       <tr class="Lightblue">
  144.         <td colspan="5"></td>
  145.         <!-- <td></td>
  146.         <td></td>
  147.         <td></td>
  148.         <td></td> -->
  149.       </tr>
  151.       <!-- 培訓教育 -->
  152.       <tr>
  153.         <th colspan="5" class="Light">------ 教育培訓 -----</th>
  154.         <!-- <td></td>
  155.         <td></td>
  156.         <td></td>
  157.         <td></td> -->
  158.       </tr>
  159.       <tr class="jz">
  160.         <td>起止時間：</td>
  161.         <td colspan="2">就讀院校名稱：</td>
  162.         <!-- <td></td> -->
  163.         <td>主修專業(yè)：</td>
  164.         <td>學歷：</td>
  165.       </tr>
  166.       <tr class="jz">
  167.         <td>2009.09-2012.07</td>
  168.         <td colspan="2">汕頭百欣科技中專</td>
  169.         <!-- <td></td> -->
  170.         <td>會計電算化</td>
  171.         <td>中專</td>
  172.       </tr>
  173.       <tr>
  174.         <td colspan="5" class="Lightblue"></td>
  175.         <!-- <td></td>
  176.         <td></td>
  177.         <td></td>
  178.         <td></td> -->
  179.       </tr>
  181.       <!-- 工作經(jīng)驗(1) -->
  182.       <tr>
  183.         <th colspan="5" class="Light">------ 工作經(jīng)驗()1 ------</th>
  184.         <!-- <td></td>
  185.         <td></td>
  186.         <td></td>
  187.         <td></td> -->
  188.       </tr>
  189.       <tr class="jz">
  190.         <td>就職公司：</td>
  191.         <td colspan="2">深圳XX電器有些公司</td>
  192.         <!-- <td></td> -->
  193.         <td>公司行業(yè)：</td>
  194.         <td>其他</td>
  195.       </tr>
  196.       <tr class="jz">
  197.         <td>就職時間：</td>
  198.         <td colspan="2">2011年12月到如今</td>
  199.         <!-- <td></td> -->
  200.         <td>就職部門：</td>
  201.         <td>財務部</td>
  202.       </tr>
  203.       <tr class="jz">
  204.         <td>公司性質(zhì)：</td>
  205.         <td colspan="2">其他</td>
  206.         <!-- <td></td> -->
  207.         <td>就職職位：</td>
  208.         <td>出納員</td>
  209.       </tr>
  210.       <tr>
  211.         <td>工作描述：</td>
  212.         <td colspan="4" class="gzms">工作描述XXX</td>
  213.         <!-- <td></td>
  214.         <td></td>
  215.         <td></td> -->
  216.       </tr>
  217.       <tr>
  218.         <td colspan="5" class="Lightblue"></td>
  219.         <!-- <td></td>
  220.         <td></td>
  221.         <td></td>
  222.         <td></td> -->
  223.       </tr>
  225.       <!-- 聯(lián)系方式 -->
  226.       <tr>
  227.         <td colspan="5" class="Light">----- 聯(lián)系方式 -----</td>
  228.         <!-- <td></td>
  229.         <td></td>
  230.         <td></td>
  231.         <td></td> -->
  232.       </tr>
  233.       <tr>
  234.         <td>聯(lián)系電話：</td>
  235.         <td colspan="4">134*******</td>
  236.         <!-- <td></td>
  237.         <td></td>
  238.         <td></td> -->
  239.       </tr>
  240.       <tr>
  241.         <td>聯(lián)絡手機：</td>
  242.         <td colspan="4">134*******</td>
  243.         <!-- <td></td>
  244.         <td></td>
  245.         <td></td> -->
  246.       </tr>
  247.       <tr>
  248.         <td>電子郵件：</td>
  249.         <td colspan="4">*******@163.com</td>
  250.         <!-- <td></td>
  251.         <td></td>
  252.         <td></td> -->
  253.       </tr>
  254.       </tr>
  255.     </table>
  256.   </body>
  257. </html>

2.使用背景圖定位屬性，實現(xiàn)如下效果、提供格式本身代碼、

  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>Document</title>
  8.     <style>
  9.       .jgg div {
  10.         width: 100px;
  11.         height: 100px;
  12.       }
  13.       .jgg .jgg-top div:first-of-type {
  14.         background: url("jgg.jpg") -10px -8px;
  15.       }
  16.       .jgg .jgg-top div:nth-of-type(2) {
  17.         background: url("jgg.jpg") -340px -8px;
  18.       }
  19.       .jgg .jgg-top div:last-of-type {
  20.         background: url("jgg.jpg") -670px -8px;
  21.       }
  23.       .jgg .jgg-middle {
  24.         position: relative;
  25.         left: 100px;
  26.         top: -100px;
  27.       }
  28.       .jgg .jgg-middle div:first-of-type {
  29.         background: url("jgg.jpg") -120px -8px;
  30.       }
  31.       .jgg .jgg-middle div:nth-of-type(2) {
  32.         background: url("jgg.jpg") center;
  33.       }
  34.       .jgg .jgg-middle div:last-of-type {
  35.         background: url("jgg.jpg") -780px -8px;
  36.       }
  38.       .jgg .jgg-bottom {
  39.         position: relative;
  40.         top: -200px;
  41.         left: 200px;
  42.       }
  43.       .jgg .jgg-bottom div:first-of-type {
  44.         background: url("jgg.jpg") -230px -8px;
  45.       }
  46.       .jgg .jgg-bottom div:nth-of-type(2) {
  47.         background: url("jgg.jpg") -560px -8px;
  48.       }
  49.       .jgg .jgg-bottom div:last-of-type {
  50.         background: url("jgg.jpg") -890px -8px;
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <div class="jgg">
  56.       <div class="jgg-top">
  57.         <div></div>
  58.         <div></div>
  59.         <div></div>
  60.       </div>
  61.       <div class="jgg-middle">
  62.         <div></div>
  63.         <div></div>
  64.         <div></div>
  65.       </div>
  66.       <div class="jgg-bottom">
  67.         <div></div>
  68.         <div></div>
  69.         <div></div>
  70.       </div>
  71.     </div>
  72.   </body>
  73. </html>


3.使用html列表標簽、配合css列表屬性實現(xiàn)如下效果

  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>Document</title>
  8.     <style>
  9.       div {
  10.         width: 600px;
  11.       }
  12.       h1 {
  13.         text-align: center;
  14.         color: #eb118b;
  15.       }
  16.       ul {
  17.         color: #eb118b;
  18.         font-weight: bolder;
  19.       }
  20.       li:first-of-type {
  21.         height: 50px;
  22.         border-top: 3px solid #000;
  23.       }
  24.       li {
  25.         height: 50px;
  26.         border-bottom: 1px solid #958e8e;
  27.         line-height: 50px;
  28.         list-style: inside url("lbtb.png");
  29.       }
  30.       li:last-of-type {
  31.         border: none;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div>
  37.       <h1>學習猿地</h1>
  38.       <ul>
  39.         <li>老師都是大型互聯(lián)網(wǎng)公司的總監(jiān)以上職位，名校畢業(yè)，老司機</li>
  40.         <li>課程是最全的，有著一套精品，不需要再找任何其他學習資料彌補</li>
  41.         <li>集中精力在這一套全棧課程中，做好每一節(jié)課，不斷迭代打造精品</li>
  42.         <li>課程以項目貫穿式講解需要的技術，知其然知其所以然</li>
  43.         <li>課程是專門為零基礎到精通的目標設計，有基礎的可選擇內(nèi)容學習</li>
  44.         <li>學習系統(tǒng)模擬面授的過程，通關式學習效果卻超過面授幾倍</li>
  45.         <li>服務號，有大牛指導，有同學之間互動，有全面的資料下載</li>
  46.         <li>最好的課程價格卻是行業(yè)最低的，低幾倍甚至幾十倍</li>
  47.       </ul>
  48.     </div>
  49.   </body>
  50. </html>


4.制作如下效果 并且實現(xiàn)鼠標移動時變換背景顏色

  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>Document</title>
  8.     <style>
  9.       nav {
  10.         width: 100%;
  11.         height: 40px;
  12.         background: red;
  13.       }
  14.       nav a {
  15.         color: #fff;
  16.         line-height: 40px;
  17.         padding: 11.5px 20px;
  18.         text-decoration: none;
  19.       }
  20.       nav a:hover {
  21.         background: rgb(126, 126, 126);
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <nav>
  27.       <a href="" target="_blank">首頁</a>
  28.       <a href="" target="_blank">前沿</a>
  29.       <a href="" target="_blank">前端</a>
  30.       <a href="" target="_blank">后端</a>
  31.       <a href="" target="_blank">云計算</a>
  32.       <a href="" target="_blank">產(chǎn)品設計</a>
  33.       <a href="" target="_blank">關于我們</a>
  34.     </nav>
  35.   </body>
  36. </html>

4.2制作如下效果 并且實現(xiàn)鼠標移動時變換背景顏色

  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>Document</title>
  8.     <style>
  9.       ul li {
  10.         height: 30px;
  11.         width: 250px;
  12.         list-style: none inside;
  13.         line-height: 30px;
  14.         text-indent: 1rem;
  15.       }
  16.       ul li:hover {
  17.         background: #b9b9b9;
  18.         color: #c81c29;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <ul>
  24.       <li>家用電器</li>
  25.       <li>手機/運營商/數(shù)碼</li>
  26.       <li>電腦/辦公</li>
  27.       <li>家居/家具/家裝/廚具</li>
  28.       <li>男裝/女裝/童裝/內(nèi)衣</li>
  29.       <li>美妝/個護清潔/寵物</li>
  30.       <li>女鞋/箱包/鐘表/珠寶</li>
  31.       <li>男鞋/運動/戶外</li>
  32.       <li>房產(chǎn)/汽車/汽車用品</li>
  33.       <li>母嬰/玩具樂器</li>
  34.       <li>食品/酒類/生鮮/特產(chǎn)</li>
  35.       <li>藝術/禮品鮮花/農(nóng)資綠植</li>
  36.       <li>醫(yī)藥保健/計生情趣</li>
  37.       <li>圖書/文娛/教育/電子書</li>
  38.       <li>機票/酒店/旅游/生活</li>
  39.       <li>理財/眾籌/白條/保險</li>
  40.       <li>安裝/維修/清洗/二手</li>
  41.       <li>工業(yè)品</li>
  42.     </ul>
  43.   </body>
  44. </html>
批改老師：PHPzPHPz

批改狀態(tài)：不合格

老師批語：內(nèi)容寫的挺好的，注意博文標題符合實際內(nèi)容 ，最好把第一個簡歷也能配上效果圖
本博文版權歸博主所有，轉(zhuǎn)載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學