自己的第一个HTML5网页

模仿着别人，一步步地做好了自己的第一个网页，虽说是很多事照着敲的，也算是一种锻炼把，接下来也继续加强HTML技术

CSS技术和Javascrip技术，然后开始Javaweb开发，朝着全栈工程师发展，加油！

第一个网站的代码（第一次做，很多东西都没做好，没有规范化自己的代码，CSS中标签元素的顺序，结构，已经代码缩进上，因为精力都花在如何实现上了，没有太刻意规范化和可读性这一块，还有就是注释，接下来得好好改正过来）

HTML代码：

 
 
 
 
 
 
 
 
 
 

 
 

 

  
  

   
• 导航

   
• 导航

   
• 导航

   
• 导航

   
• 导航

   
• 导航

   
• 导航

     
  

 

 
  

   

    

     
     

核心业务

     MORE>>
     

    

     

电子商务类网站建设

     
     

      
• 电子商务类建设

      
• 电子商务类建设

      
• 电子商务类建设

      
• 电子商务类建设

      
• 电子商务类建设

     

    

    

    

电子商务类网站建设

     
     

      
• 电子商务类建设

      
• 电子商务类建设

      
• 电子商务类建设

      
• 电子商务类建设

      
• 电子商务类建设

      

    

    

电子商务类网站建设

     
     

      
• 电子商务类建设

      
• 电子商务类建设

      
• 电子商务类建设

      
• 电子商务类建设

      
• 电子商务类建设

     

    

    

电子商务类网站建设

     
     

     
• 电子商务类建设

      
• 电子商务类建设

      
• 电子商务类建设

      
• 电子商务类建设

      
• 电子商务类建设

     

   

     

    

     
     MORE>>
     

文章观点

     

    
    
     

     
      
• 这是一篇好文章

      
• 这是一篇好文章

      
• 这是一篇好文章

      
• 这是一篇好文章

      
• 这是一篇好文章

     

     

     
     MORE>>
     

联系我们

     

     

     
     
     

    
     
    
    
   

   

  

   

    

     
• 联系我们

     
• 联系我们

     
• 联系我们

     
• 联系我们

     
• 联系我们

     
• 联系我们

     
• 联系我们

    
    

©  2006-2009 北京市灵犀慧通科技有限公司 版权所有 http://www.lionhit.com 京ICP备07020337号

   

 

 

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;
  }