本身的第一個HTML5網頁

時間 2019-12-05 標籤本身第一個 html5 html 網頁

模仿着別人，一步步地作好了本身的第一個網頁，雖然說是不少事照着敲的，也算是一種鍛鍊把，接下來也繼續增強HTML技術

CSS技術和Javascrip技術，而後開始Javaweb開發，朝着全棧工程師發展，加油！

第一個網站的代碼（第一次作，不少東西都沒作好，沒有規範化本身的代碼，CSS中標籤元素的順序，結構，已經代碼縮進上，由於精力都花在如何實現上了，沒有太刻意規範化和可讀性這一塊，還有就是註釋，接下來得好好改正過來）

HTML代碼：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link rel="stylesheet" href="./images/reset.css"/>
<link href="./index.css" rel="stylesheet"type="text/css"/>
</head>

<body>
<div id="container">
<div id="header">
  <img src="./images/logo.jpg" alt="" id="logo">
  <ul id="nav">
   <li><a href="#">導航</a></li>
   <li><a href="#">導航</a></li>
   <li><a href="#">導航</a></li>
   <li><a href="#">導航</a></li>
   <li><a href="#">導航</a></li>
   <li><a href="#">導航</a></li>
   <li><a href="#">導航</a></li>

  </ul>
</div>
<img id= "banner" src="./images/about_banner.jpg" alt=""/>
  <div id="main">
   <div id="lside">
    <div class="subtitle">
     <img src="./images/circle.gif" alt=""/>
     <h1>核心業務</h1>
     <a herf="#">MORE>></a>
     </div>
    <div class="con">
     <h2>電子商務類網站建設</h2>
     <img src="./images/eshop_service.jpg" alt=""/>
     <ul>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
     </ul>
    </div>
    <div class="con">
    <h2>電子商務類網站建設</h2>
     <img src="./images/eshop_service.jpg" alt=""/>
     <ul>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      </ul></div>
    <div class="con">
    <h2>電子商務類網站建設</h2>
     <img src="./images/eshop_service.jpg" alt=""/>
     <ul>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
     </ul></div>
    <div class="con">
    <h2>電子商務類網站建設</h2>
     <img src="./images/eshop_service.jpg" alt=""/>
     <ul>
     <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
      <li><a href="#">電子商務類建設</a></li>
     </ul></div>
   </div>
      <div id="rside">
    <div class="subtitle">
     <img src="./images/circle.gif" alt=""/>
     <a herf="#">MORE>></a>
     <h1>文章觀點</h1>
     </div>


     <ul id="art">
     <li><a href="#"></a></li
      <li><a href="#">這是一篇好文章</a></li>
      <li><a href="#">這是一篇好文章</a></li>
      <li><a href="#">這是一篇好文章</a></li>
      <li><a href="#">這是一篇好文章</a></li>
      <li><a href="#">這是一篇好文章</a></li>
     </ul>
     <div class="subtitle">
     <img src="./images/circle.gif" alt=""/>
     <a herf="#">MORE>></a>
     <h1>聯繫咱們</h1>
     <div id="contact">

     </div>


     </div>




   </div>
   <div id="clr"></div>
  </div>
   <div id="footer">
    <ul>
     <li><a herf="#">聯繫咱們</a></li>
     <li><a herf="#">聯繫咱們</a></li>
     <li><a herf="#">聯繫咱們</a></li>
     <li><a herf="#">聯繫咱們</a></li>
     <li><a herf="#">聯繫咱們</a></li>
     <li><a herf="#">聯繫咱們</a></li>
     <li><a herf="#">聯繫咱們</a></li>

    </ul>
    <address>© 2006-2009 北京市靈犀慧通科技有限公司版權全部 http://www.lionhit.com 京ICP備07020337號</address>
   </div>
</div>
</body>
</html>

CSS代碼：

#container{
margin:0 auto;
width:1002px;
}
#header{
  width:1002px;
  height:128px;
  background:gray url(./images/top_bg.jpg)
}
#nav li {
  float:left;

  width:90px;
  font-size:16px;

  margin-right:1px;

}
#nav a{
  color:#363636;
  font-size:16px;
  font-family:'微軟雅黑';
  display:block;
  width:90px;
  height:37px;
  text-align:center;b

}
#nav a:hover{
  background:#EEE url(./images/nav_on.gif);
}
#nav a:visited{
  color:gray;

}
#banner{
margin:5px 0px 5px 0px;
}
#main{

}
#lside{

  height:480px;
  width:694px;
  border:1px solid #EEE;
  float:left;
  border-top:none;
  border-radius:40px;
}
#rside{


  width:294px;
  float:right;
  }

#clr{
  clear:both;
}
.subtitle{
  height:37px;
  background:gray url(./images/index_main_top_bg.gif) ;
  }
.con{
  background:#EEE;
  height:200px;
  width:330px;
  float:left;
  margin:10px 5px 10px 10px;
  }
.subtitle img{
  float:left;
  margin:5px;
  }
.subtitle h1{
  float:left;
  font-size:16px;
  font-family:'Microsoft Yahei', SimHei,sans-serif;
  color:#363636;
  }
.subtitle a{
  float:right;
  font-size:12px;
  color:gray;
  }
  .con img{
   float:left;
   margin-left:10px;
   padding:6px;
   background:white;
  }
  .con ul{
   float:left;
   margin-left:10px;
  }
  .con h2{
   font-size:16px;
   font-family:'Microsoft Yahei', SimHei,sans-serif;
   margin:6px 0px 6px 0px;
  }
  .con li{
   font-size:13px;
   background:url(./images/service_intro_bg.gif) no-repeat;
      margin:4px 0px 0px 4px;
   padding-left:10px;
  }
  .con a{
   color:gray;
  }
  .con a.hover{
  color:white;
  background:url(./images/nav_on.gif);

  }

  #art{
  margin-top:1px;
  background:#EEE;
  padding-top:10px;

  }

  #art li{


         color:#EEE;


  }
  #art a{
      font-size:12px;
   background:url(./images/article_head.gif) no-repeat;
   height:29px;
   display:block;
   padding:0 0 0 30px;

  }
  #art a:hover{
   background:url(./images/article_on_bg.gif);
  }

  #contact{
   height:249px;
   background:#EEE;
   margin-top:1px;
  }

#footer{ margin-top:15px; height:120px; } #footer li{ float:left; margin-right:30px; margin-top:15px; } #footer ul{ height:40px; background:#EEE; } #footer address{ font-size:12px; font-family:'微軟雅黑'，sans-serif; }