生活随笔
收集整理的這篇文章主要介紹了
HTML5+CSS——个人在线简历
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
期末作品用DW軟件結合HTML和css來制作一個在線簡歷，成果圖如下：
HTML代碼如下：主要使用表格
來實現頁面布局，頁面中使用了文本溢出隱藏效果、點擊相應的鏈接可以跳轉到另一個網頁等。
<!DOCTYPE html>
<html>
<head><title>我的簡歷
</title><meta charset="utf-8"><link href="../CSS/JL_c.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box">
<table width="100%" height="100%" cellpadding="5px" cellspacing="0" align="center" border="0" ><tr align="center"><th colspan="7" bgcolor="#06B5F0" class="wl2">基本信息
</th></tr><tr><td width="32" align="left"><img src="../img/個人頭像_o.png"></td><td width="100" align="left">姓名
</td><td width="100" align="left">求學者—
</td><td width="32" align="left"><img src="../img/地址 (1).png"/></td><td width="100" align="left">現居
</td><td width="100" align="left">廣西南寧
</td>
<td width="150" rowspan="3" colspan="2" align="center"><img id="tx" width="140" src="../img/頭像 女孩.png"/></td> </td></tr><tr><td width="32" align="left"><img src="../img/學校.png"/></td><td width="100" align="left">畢業院校
</td><td width="150" align="left" >廣西****學院
</td><td width="32" align="left"><img src="../img/專業權威.png"/></td><td width="50" align="left">所學專業
</td><td width="150" align="left">物聯網工程
</td></tr><tr><td width="32" align="left"><img src="../img/職位.png"/></td><td width="32" align="left">意向職位
</td><td width="100" align="center" >嵌入式工程師助理
</td><td width="32" align="left"><img src="../img/電話.png"/></td><td width="100" align="left">電話
</td><td width="100" align="left">1930210401**
</td></tr><tr align="center"><th colspan="7" bgcolor="#06B5F0" class="wl2" >教育背景
</th></tr><tr><td width="100" colspan="2" align="center">起止時間
</td><td width="100" colspan="2" align="center">畢業院校
</td><td width="100" colspan="2" align="center">專業
</td><td width="100" align="center">學歷
</td></tr><tr><td width="100" height="18" colspan="2" align="center">2019.09-2023.06
</td><td width="100" height="18" colspan="2" align="center"><a href="http://www.gxnun.edu.cn/" target="_blank">廣西****學院
</a></td><td width="100" height="18" colspan="2" align="center">物聯網工程專業
</td><td width="100" height="18" align="center">本科
</td></tr><tr><td width="100" height="18" colspan="2" align="center">主修課程
</td><td width="100" height="18" colspan="5" align="center">HTML、STM32、linux、LORa、窄帶物聯網、計算機網絡、通信電子電路等
</td></tr><tr align="center"><th colspan="7" bgcolor="#06B5F0" class="wl2">項目經驗
</th></tr><tr><td width="16" colspan="1" height="35" align="center"><img src="../img/風箏.png"/></td><td width="100" colspan="2" align="left">物聯網智能家居系統
</td><td width="100" colspan="2" align="left">程序設計
</td><td width="100" height="35" colspan="2" align="center"><a href="智能家居超鏈接頁面.html" target="_blank">該項目是制作一款基于物聯網技術的智能家居系統
</a></td></tr><tr><td width="16" colspan="1" align="center"><img src="../img/風箏.png"/></td><td width="100" height="35" colspan="2" align="left">基于云端的操控小車
</td><td width="100" height="18" colspan="2" align="left" >程序設計、硬件設計
</td><td width="100" height="18" colspan="2" align="center" ><a href="云端操控小車超鏈接頁面.html" target="_blank">該項目是通過web端操控與四驅小車的行使
</a></td></tr><tr><td width="16" colspan="1" align="center"><img src="../img/風箏.png"/></td><td width="100" height="35" colspan="2" align="left">基于STM32的室內定位系統
</td><td width="100" height="18" colspan="2" align="left">程序設計
</td>
<td width="100" height="18" colspan="2" align="center" ><a href="#" target="_blank">這是一款能夠在室內環境下進行定位的系統，這款室內定位系統
</a></td></tr><tr><td width="16" colspan="1" align="center"><img src="../img/風箏.png"/></td><td width="100" height="18" colspan="2" align="left">全國大學生電子設計競賽
</td><td width="100" height="18" colspan="2" align="left">程序設計、硬件設計
</td><td width="100" height="18" colspan="2" align="center"><a href="#" target="_blank">該項目是研究簡單無接觸溫度測量與身份識別裝置
</a></td></tr><tr><td width="100" height="150" colspan="2" align="center" bgcolor="#7EB3FB" class="wl"><b>技能
</b></td><td colspan="5"><img id="jn" src="../img/QQ截圖20220605143255.png" class="item"/></td></tr><tr><td width="100" height="120" colspan="2" align="center" bgcolor="#6CA8F9" class="wl"><b>榮譽
</b></td><td colspan="5"><div>互聯網+比賽:
  獲得省級銅獎一項、校級銀獎一項、校級優秀獎兩項
</div><br /><div>電子設計競賽:
  獲得省級二等獎一項
</div><br /><div>校內所獲獎項:
  獲得國家勵志獎學金一項，校級優秀獎學金一項，三好學生一項
</div><br /><div>其它獎項:
    全國計算機二級C語言合格，發表省級論文一篇
</div><br /></td></tr><tr><td width="100" height="80" colspan="2" align="center" bgcolor="#7EB3FB" class="wl"><b>自我評價
</b></td><td colspan="5"><p> 吃苦耐勞，可以接受中等強度的加班和出差工作
</p><p> 有較好的理性邏輯思維，樂于交友，善于利用團隊協作的力量從多角度分析問題
</p></td></tr></table></div> </body>
</html>
在CSS樣式中主要有用偽選擇器實現了鼠標滑動的效果，比如劃過標題或者頭像可以變大或者實現圖片透明效果，還有一些字體大小顏色的設計、圖片設計的樣式等。代碼如下：
@charset "utf-8";
.box{width: 750px
;height: 1100px
;margin: auto
; background-color:#F7F8FB
; border: solid 2px #0CF
;
}.wl:hover{
opacity: 0.5
;}
.wl2:hover{
opacity: 0.5
;}.item:hover{opacity: 0.5
;}#tx:hover{opacity: 0.5
;transform: scale(1.2
,1.2
);
}a{display: block
; width: 150px
; white-space: nowrap
; text-overflow: ellipsis
;overflow: hidden
; text-decoration: none
;}#jn {
width: 491px
;height: 162px
;}
總結
以上是生活随笔為你收集整理的HTML5+CSS——个人在线简历的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
