三小时自制网页成果
前两天啃下了《自学HTML+CSS》这本书，然后今天中午花了三个小时的时间做了一个小小的网页。
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>MosquitoEqBlog</title>
<meta name="Keywords"
content="博客,Blog,Bloger,网络日志"/>
<meta name="description"
content="笑我杀蚊也不够胆 我天性不够奸"/>
<meta name="robots"
content="index,follow"/>
<link rel="stylesheet" type="text/css"
href="style/style.css"/>
</head>
<body>
<div
id="wrapper">
<div id="innerWrapper">
<div
id="header">
<div id="innerHeader">
<h1
id="blogTitle"><a href="#">恩强不N强</a></h1>
<div id="blogUrl"><a
href="#">http://www.mosquitoEq.com/</a><a href="#">
复制地址</a></div>
<div id="blogDesc">笑我杀蚊也不够胆
我天性不够奸</div>
</div>
</div>
<div id="navBar">
<div id="innerNavBar">
<ul
id="mainNav">
<li><a href="#"
class="navHome">首页</a></li>
<li><a href="#"
class="navBlog">日志</a></li>
<li><a href="#"
class="navSound">音乐</a></li>
<li><a href="#"
class="navImg">相册</a></li>
<li><a href="#"
class="navProfile">档案</a></li>
<li><a
href="#" class="navfriend">交友</a></li>
<li><a
href="#" class="navShipin">视频</a></li>
</ul>
</div class="clear"></div>
</div>
</div>
<div id="mainwrapper">
<div id="content">
<div class="innercontent">
<div id="diarytitle">只有一事不成全你 2014-4-10</div>
<div
id="diarycontent">
随风
你说得多么洒脱
如何尽如人意 想不了
何妨盼望永生 等不了
随便 我却说得多么酸
怀疑
你在病床
驯服到不敢挣扎 不敢呼叫
才令你斗志软弱无力 无尝不可
容许我为你默默生火
若然肉身遭绑架
逃生那道奇门极近 永没上锁
而对你最不舍的是我
竟丢低我自己一个
柔柔一声成全 为何听得我这么崩溃太多
如果 你永远不会在场 如何继续自强
成就要一些观众 怎么可以遗下你
斗志软弱无力 无尝不可
容许我为你默默生火
若然肉身遭绑架
逃生那道奇门极近永没上锁
而对你最不舍的是我
竟丢低我自己一个
柔柔一声成全 为何听得我这么崩溃太多
目前留在氧气樽里 没法话当年
但你毋忘过去 谁不管气喘仍谈下去
人软弱无力 无尝不可
容许我为你用力高歌
突然绝境走一趟
无非要在明日盛世 放任穿梭
还有你最不舍的是我
怎么可以就此经过
平时多么仁慈 为何今天你就不施舍 更多</div>
<div
id="diarybottom"><a href="#">评论(0)</a> |<a href="#">固定链接
</a> |<a href="#">类别（闲时随笔）</a> |发表于12:47</div>
</div></div>
</div>
<div id="footer">
<div id="innerFooter"><table
id="contact"><tr><td rowspan="2"></td><td
nowrap="nowrap" align="left"><a href="#"
target="_blank">客服论坛</a> 客服邮箱：<a
href="mailto:#">[email protected]</a></td></tr></tr><td
nowrap="nowrap"
align="left">24小时客服热线：123456</td></tr><//table><div
id="copyright">CopyRight©2014mosquitoEq.com.Inc.Allrights
reserved.蚊子网 版权所有</div></div></div>
</div>
</body>
</html>
CSS代码：
body{
margin:0px;
padding:0px;
font-family:"宋体",Verdana,Arial,Helvetica,sans-serif;
font_size:12px;
color:#cccccc;
line-height:130%;
background-color:#11191E;
}
a{
color:#F5651F;
text-decoration:underline;
}
a:hover{
color:#f4f4f4;
text=decoration:underline;
}
img{
border:none;
}
#wrapper{
margin:0px
auto;
width:993px;
background-image:url(../images/21961354294673_1024_682.jpg);
background-position:center;
background-repeat:no-repeat;
}
#header{
height:374px;
}
#innerHeader{
width:983px;
padding-left:10px;
}
#blogTitle{
float:letf;
}
#blogTitle,#blogTitle
a{
color:#ffffff;
font-size:16px;
line-height:16px;
text-decoration:none;
margin-top:15px;
padding-left:70px;
}
#blogTitle
a:hover{
color:#F5651F;
}
#blogUrl{
color:#ffffff;
padding-left:15px;
}
#blogUrl
a:hover{
color:#F5651F;
}
#blogDesc{
color:#ffffff;
width:400px;
word-break:break-all;
padding-top:15px;
padding-left:140px;
}
#navBar{
height:82px;
/*background-image:url(../images/logo.png)---定义导航条背景*/
/*background-repeat:np-repeat;*/
}
#innerNavBar{
width:710px;
margin:170px;
margin-top:23px;
}
#mainNav{
float:left;
margin:0px;
padding:0px;
}
#mainNav
li{
float:left;
list-style:none;
margin:0px;
padding:32px 0px
2px;
}
#mainNav li a{
padding:32px;
background-position:center
top;
background-repeat:no-repeat;
text-decoration:none;
}
#mainNav
li a{
color:3ffffff;
}
#mainNav.navHome{background-image:url(../images/...);} /*定义未点击的链接的背景图片,"..."代表图片名称*/
#mainNav.navHome:hover{background-image:url(../images/...);} /*定义鼠标悬停的链接的背景图片*/
#mainNav.navHome:active{background-image:url(../images/...);color:#ffffff;cursor:default;} /*定义已点击的链接的背景图片以及颜色*/
#mainNav.navBlog{background-image:url(../images/...);}
#mainNav.navBlog:hover{backgronud-image:url(../images/...);}
#mainNav.navBlog:active{background-image:url(../images/...);color:#ffffff;cursor:default;}
#mainNav.navImg{background-image:url(../images/...);}
#mainNav.navImg:hover{background-image:url(../images/...);}
#mainNav.navImg:active{background-image:url(../images/...);color:#ffffff;cursor:default;}
#mainNav.navSound{background-image:url(../images/...);}
#mainNav.navSound:hover{background-image:url(../images/...);}
#mainNav.navSound:active{background-image:url(../images/...);color:#ffffff;cursor:default;}
#mainNav.navVideo{background-image:url(../images/...);}
#mainNav.navVideo:hover{background-image:url(../images/...);}
#mainNav.navVideo:active{background-image:url(../images/...);color:#ffffff;cursor:default;}
#mainNav.navProfile{background-image:url(../images/...);}
#mainNav.navProfile:hover{background-image:url(../images/...);}
#mainNav.navProfile:active{background-image:url(../images/...);color:#ffffff;cursor:default;}
#mainNav.navShipin{background-image:url(../images/...);}
#mainNav.navProfile:hover{background-image:url(../images/...);}
#mainNav.navProfile:active{background-image:url(../images/...);color:#ffffff;cursor:default;}
#mainNav.navfriend{background-image:url(../images/...);}
#mainNav.navfriend:hover{background-image:url(../images/...);}
#mainNav.navfriend:active{background-image:url(../images/...);color:#ffffff;cursor:default;}
#mainwrapper{
margin:400px;
margin-top:46px;
width:993px;
}
#sidebar{
float:right;
width:181px;
overflow:hidden;
margin-top:-10px;
padding-right:120px;
}
#content{
float:left;
width:530px;
overflow:hidden;
margin-top:-20px;
padding-right:125px;
}
#innercontent{
width:500px;
overflow:hidden;
}
#innersidebar{
overflow:hidden;
}
#diarytitle{
width:100%;
float:left;
font-size:14px;
font-weight:bold;
color:#eeeeee;
padding:5px;
border-bottom:1px
dashed
#97ACB6;
}
#diarycontent{
width:100%;
float:left;
font-size:12px;
color:#dddddd;
padding:5px;
line-height:180%
padding-bottom:15px;
}
#diarybottom{
width:100%;
float:left;
font-size:12px;
color:#eeeeee;
padding:5px;
}
#footer{
clear:both;
height:165px;
}
#innerFooter{
color:#f4f4f4;
padding-top:86px;
text-align:center;
}
#innerFooter
a{
color:#f4f4f4;
text-decoration:none;
}
#innerFooter
a:hover{
color:#F5651F;
text-decoration:underline;
}
#contact{
margin:0px
auto;
margin-bottom:15px;
width:400px;
}
#contact
td{
color:#f4f4f4;
padding:0 10px;
}
#contact
a{
color:#f4f4f4;
text-decoration:underline;
}
#contact
a:hover{
color:#f5651f;
}
__mosquitoEq
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
