模仿着别人,一步步地做好了自己的第一个网页,虽说是很多事照着敲的,也算是一种锻炼把,接下来也继续加强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>
<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 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>
</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>
<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;
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;
}
#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;
}
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;
}