天天看點
傳回

【網頁設計】web前端期末大作業html+css

???绮懼僵涓????ㄨ???????火?????火??????

??锔? 浣???绠?浠?: 涓?涓????辨???昏???缁磋漿??涓轟唬??????????涓? ??? 浣???涓婚〉: ??????涓婚〉????????峰???村?浼?璐ㄦ????????? ??? web??绔?????澶т?涓?锛? ?????姣?璁鵑」??绮懼??瀹???妗?渚? (1000濂?) ??

?А 绋?搴?????瓒ｇ?????芥?瑰?锛??????HTML涓?澶???浜鴻??琛ㄧ?界?椤靛?朵? (110濂?) ??

???瓒????風??Echarts澶у???瑙???婧???锛??????echarts澶у?灞?绀哄ぇ?版??骞沖?闆??瑙???(150濂?) ??

??? ??璐逛?瀹??ㄧ??WEB??绔?瀛??????锛? ?????web??绔??跺?虹??伴??绾у???瑙?棰???绋? 120G骞茶揣??浜???

?? ?充?浣???: ??浠葷????宸ョ?甯?锛?????缁??匡???瀛??葷??锛??句?2016骞淬??2020骞翠袱搴??ｈ?峰勾搴???澶у??瀹?????? ??杞藉???幫??懼????琛?锛?澶?骞磋??夥???缁???杩?锛??╂??浜洪???? ?惰??锛?瀵逛????????㈢儲??杩芥?浠?????姝??? ???????????锛???琛峰??浜?锛???蹇????癸?缁у?寮??ワ?

?????绔???褰?

  • 涓?????ㄢ?????缃?绔?棰???
  • 浜?????锔?缃?绔???杩?/li>
  • 涓??????缃?绔?浠?缁?
  • ???????缃?绔?婕?绀?/li>
  • 浜??????缃?绔?浠ｇ??
  • ?ПHTML缁???浠ｇ??
  • ???CSS?峰?浠ｇ??
  • ?????? 濡?浣?璁╁???涓????茬??
  • 涓???????村?骞茶揣

涓?????ㄢ?????缃?绔?棰???

??涓?浜虹?椤佃?捐?°?????????锔?涓?浜虹?????朵?????ㄢ????肩????????HTML涓?浜虹?椤典???????ㄢ?????涓?浜轟?缁?缃?绔?妯℃????绛?缃?绔???璁捐?′??朵???

浜?????锔?缃?绔???杩?/h2>

猸?涓?浜虹?椤佃?捐?＄?绔?妯℃?塊????IV CSS甯?灞??朵?锛?缃?椤典?????澶?涓?椤甸???濡? :涓?浜轟?缁?(??瀛?椤甸????????浣???(?劇????琛???涓?浜烘?????炬??椤甸?????ㄧ嚎??瑷?(琛ㄥ??椤甸??CSS?峰??歸?㈢?椤墊?翠????ㄥ乏?沖?灞?缁???锛??朵?浜?缃?椤佃?????劇??锛?瀵艱???哄??姣?涓?瀵艱???????蹭???锛?瀵艱???????蹭?椤甸?㈣?????煎???

??? 涓?濂?A+??缃?椤靛?璇ュ???? (?蜂????規??涓?浜鴻?姹???瀹?)

  1. 椤甸?㈠??涓洪〉澶淬??????瀵艱????(??濂藉??涓???)??涓??村??瀹規?垮????椤佃????澶ч?ㄥ????
  2. ????椤甸?㈢?鎬?瓒??炬?ワ????頒?绾ч〉?????5-10涓?椤甸?㈢?????
  3. 椤甸?㈡?峰?椋??肩?涓?甯?灞??劇ず姝ｅ父锛?涓???涔憋?浣跨??iv+Css??????
  4. ????缇?瑙???????锛?浜?绾ц??????姝ｅ父寮瑰?轟?璺寵漿??
  5. 瑕???JS?規??锛?濡?瀹??跺???㈠?????ㄥ???㈠?劇??杞?????
  6. 椤甸??腑??澶?濯?浣???绱?锛?濡?gif??瑙?棰????充?锛?琛ㄥ????????浣跨?ㄣ????
  7. 椤甸?㈡??姐??缇?瑙???澶ф?癸?涓??峰???? ??
  8. 涓?浠?瑕??藉????ㄦ?瘋?姹?????瀹瑰???闆?烘?ワ?杩?瑕?婊¤凍甯?灞???濂姐?????㈢?瑙??????蹭?????琛ㄧ?闆艦寮?澶??風??瑕?姹???

涓??????缃?绔?浠?缁?

???缃?绔?甯?灞??歸???璁″?????ㄧ????涓繪??????藉?煎?瑰??澶т富娴?娴?瑙??ㄣ???劇ず????绋沖????娴??ㄧ?椤靛?灞?缁?????

???缃?绔?绋?搴??歸???璁″?????ㄦ???扮??缃?椤電?绋?璇?瑷?HTML5+CSS3+JS绋?搴?璇?瑷?瀹???缃?绔??????借?捐?°??骞剁‘淇?缃?绔?浠ｇ???煎?圭????甯??????????涓繪?娴?瑙????宸茶揪?版??寮???灏辮?藉?蟲?剁???扮?绔?????????

???缃?绔?绱????歸???璁″???堕????澶у鈎?闆ソ?????劇??绱???锛?骞剁簿??缁???????缃?椤甸??肩???劇??锛??跺??浣跨??S???洪????缃?椤靛昂瀵哥???劇????

???缃?绔???浠舵?歸???缃?绔?绯葷???浠剁?绫誨????锛?html缃?椤電?????浠躲??css缃?椤墊?峰???浠躲??js缃?椤電?規????浠躲??images缃?椤靛?劇????浠訛?

???缃?椤電?杈??歸???缃?椤典???浠ｇ??绠???锛???浣跨?ㄤ換??HTML缂?杈?杞?浠?濡?锛???

??Dreamweaver??HBuilder??Vscode ??Sublime ??Webstorm??Text ??Notepad++??

???? 绛?浠繪??html缂?杈?杞?浠惰?琛?杩?琛???淇??圭?杈?绛???浣?)??

?朵腑锛?

(1)???html??浠跺????锛??朵腑index.html??棣?椤點???朵?html涓轟?绾ч〉???

(2)??? css??浠跺????锛?css?ㄩ?ㄩ〉?㈡?峰?,??瀛?婊??? ?劇???懼ぇ绛?锛?

(3)??? js??浠跺????锛?js瀹??闆?ㄦ??杞????規??, 琛ㄥ????浜? ?瑰?諱?浠剁??绛?(涓???缃?椤典腑杩??ㄥ??s浠ｇ??)??

???????缃?绔?婕?绀?/h2>
【網頁設計】web前端期末大作業html+css
【網頁設計】web前端期末大作業html+css
【網頁設計】web前端期末大作業html+css
【網頁設計】web前端期末大作業html+css
【網頁設計】web前端期末大作業html+css
【網頁設計】web前端期末大作業html+css
【網頁設計】web前端期末大作業html+css

浜??????缃?绔?浠ｇ??

?ПHTML缁???浠ｇ?? 

<!doctype html>
<html>
<head>
<meta charset="GB2312">
<meta name="keywords" content="tzyh" />
<title>Resume</title>
<link href="css/style.css"  rel="stylesheet"></head>
<SCRIPT language=JavaScript>
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
</SCRIPT>
<script type="text/javascript" src="../../chengpin/tzyh.js" ></script> 

<body >


<!-- Copyright ?2005. Spidersoft Ltd -->
<style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
</style>
<!-- /Copyright ?2005. Spidersoft Ltd -->
<center>
<table width="960" border="0" class="main"  cellspacing="0" cellpadding="0" style=" margin-bottom:20px;"  >
  <tr>
    <td height="76" colspan="3" class="branding">
    <center><a href="index.html"  >
        <img src="images/logo.png"  alt="Horus" /></center>
    </a> </td> 
  </tr>
  <tr>
<td height="125" colspan="3">
 <table width="960" border="0" align="center" cellspacing="0" class="nav">

      <tr><td></td>
        <td width="120"  height="125" ><a class="active" href="index.html" >棣?椤?lt;/a></td>
        <td width="120" ><a href="x.html" >涓?浜虹??浠?</a></td>
        <td width="120" ><a href="c.html" >婕??虹???</a></td>
        <td width="120"><a href="r.html" >涓?浜虹??娲?lt;/a></td>
        <td width="120"><a href="d.html" >浠ｈ〃浣???</a></td>
        <td width="150"><a href="z.html" >?稿??娆ｈ?</a></td>
        <td width="120"><a href="k.html" >?ㄧ嚎??瑷?</a></td>
        <td></td>
      </tr>
    </table>
</td>
  </tr>


 <tr>
    <td height="870" colspan="3"   >
 <table width="960" border="0" align="center" cellspacing="0">
 <tr>
<td width="960" height="1270" style=" background:#fff;">
<div class="t1"><br>

<h1 style="font-size:24px; line-height:50px; color:#000; text-indent:1em;">娆㈣??ュ?版??渚??ㄧ???ㄨ?芥??</h1>
<table border="0" cellspacing="0" cellpadding="0" style="padding:30px; line-height:30px; font-size:14px;">
  <tr>
    <td><img src="images/index.png"  width="300" /></td>
    <td><p style="padding-left:26px; font-size:14px; color:#f07a8b;">??渚???Ariel Lin)锛?1982骞?0??29?ュ?虹??浜??版咕???闆??甯?瀹??闆?匡?涓??藉?版咕濂蟲?????姝?????2000骞達???渚??ㄥ?????闆???瘋??ヤ婦????绗?涓?灞??瘋?瓒?缇?灏?濂蟲??璧?骞惰?峰???????2001骞達?濂矽???ュ?界???挎不澶у???╂??绯夥??跺????缁???涓?MV??骞垮??????????2002骞達???涓繪?涓?浜洪??ㄧ?佃??т?????????宀???绾?????姝ｅ??洪????2004骞達?????涓?浜哄ぇ?跺?澶?濂充???椋?璺???娴楓???ュ?撮??椹?濂???浣沖コ涓昏???2006骞達???涓繪??よ?绁?璇??辨???с??澶╁?椋?浠?????????杩??????闆??恒??2008骞達????跺???с???朵????彙???峰?????濂????х被??浣沖コ涓昏?锛???涓哄?跺???у?蹭???妗?????瑙?????绗?涓?浜恒??2009骞???锛?绛劇害?辮?????(<em>AVEX</em>)杩???姝???锛?10??锛???琛?涓?浜洪?寮??充?涓?杈???骞哥???瑙?????2010骞達???琛?绗?浜?寮?涓?杈???缇?濂界????琛?????</p>
      <p style="padding-left:26px; font-size:14px; color:#f07a8b;">2011骞達??????藉??辨???с???????戒?浼??變???璧㈠?棰?楂?浜烘?锛?骞朵?2012骞村??娆¤?峰?????濂????х被??浣沖コ涓昏???2013骞???锛???渚??ㄦ?ｅ?????婕??哄??锛?璧磋?卞?藉???涓?骞淬??2014骞?2??锛???渚??ㄤ??卞?戒雞??ぇ瀛?腑澶?婕?璁蹭????у???㈢?澹?瀛??姣?涓???2015骞達?涓繪??藉??辨????????????杩藉?璁般????2016骞達?棣?娆″?璇?澶у昂搴?被?靛獎浣???锛?涓繪????虹?辨???靛獎??234璇寸?變?????</p></td>
  </tr>
</table>



</div>

<div class="t2" style="padding-left:30px;">
<h1 style="font-size:24px; line-height:50px; color:#000; text-align:center;">??渚??ㄩ???~~</h1>
<table border="0" cellspacing="20" cellpadding="0">
  <tr>
    <td><img src="images/a1.jpg"></td>
    <td><img src="images/a2.jpg"></td>
    <td><img src="images/a3.jpg"></td>
  </tr>
  <tr>
    <td><img src="images/a4.jpg"></td>
    <td><img src="images/a5.jpg"></td>
    <td><img src="images/a6.jpg"></td>
  </tr>
  <tr>
     <td><img src="images/a7.jpg"></td>
    <td><img src="images/a8.jpg"></td>
    <td><img src="images/a9.jpg"></td>
  </tr>
</table>




</div>

</td>
</tr>
</table>
</td> 
  </tr>


  <tr>
    <td id="footer" colspan="3" >
   <center><font color="white">??渚??ㄤ釜浜虹?绔?</font></center>
</td> 
  </tr>
</table>
</center>

</body>
</html>

???CSS?峰?浠ｇ?? 

*{ margin:0; padding:0;}

body {
  font-family:Arial, '瀵邦?胯?????寸撥', sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  margin:0;
  padding:0;
  background-color: #55462d;
  background-image: url(../images/bj.jpg);
}
.nav{ height: 90px;}
.nav tr{text-align:center;}

.nav tr td a {
color:#026a7b;
padding:9px 26px; font-size:15px;
font-weight: bold;

text-decoration: none;
}
.nav tr td a:hover,.nav tr td a.active{
background:pink; }

.branding {
position: relative;
z-index: 9999;
}
#footer{
height:60px;
color:#E8E1AA;
font-weight: bold;
 background: url("../images/border-yellow.png") repeat-x left top;}

.t1{
  clear: both;
  padding-bottom: 20px;
  margin-bottom: 40px;
  background: url("../images/hr2.png") no-repeat bottom center
}.main tr td table tr td .t1 table tr td p {
  text-align: justify;
}

?????? 濡?浣?璁╁???涓????茬??

html css 前端 dreamweaver javascript
上一篇: android交叉編譯工具鍊,NDK 交叉編譯工具鍊使用
下一篇: 網絡-無線中繼(HG255d挂載8187)

繼續閱讀