Day 1
Html:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache"/>
<title>Hsl | 180 Copy Websites</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="index">
<!-- Start header -->
<header>
<nav>
<a href="about.html">关于</a>
<a href="mailto:[email protected]">联系</a>
<a href="http://www.cnblogs.com/JFDI/">博客园</a>
</nav>
</header>
<!-- End header -->
<!-- Start top_container -->
<div id="top_container">
<a href="mailto:[email protected]"><img id="logo" src="images/index.png"></a>
<h1>Hi!</h1>
<div id="infor_container">
<div>我是Hsl 我正在学习</div>
<div class="orange">180天模仿180个网站</div>
<div>你可以在<span><a href="http://www.cnblogs.com/JFDI/">博客园</a></span>查看我的计划</div>
</div>
</div>
<!-- End top_container -->
<!-- Start marquee_container -->
<div id="marquee_container">
<div>今天的Website</div>
<a href="#">Hello World!</a>
</div>
<!-- End marquee_container -->
<!-- Start Websites_list_container -->
<div id="Websites_list_container">
<div>Day 1 <span><a href="Home.html">Homepage</a></span></div>
</div>
<!-- End Websites_list_container -->
</body>
</html>
Css样式:
@charset "utf-8";
h1{
margin: 0;
padding: 0;
}
body{
font-family: Arial, sans-serif;
color: #5f5f5f;
letter-spacing: 2px;
}
a{
color: #8b00e0;
font-weight: bold;
}
a:visited{
color: #42006a;
}
/*头部nav样式*/
header {
text-align: right;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}
nav a{
margin-left: 10px;
font-weight: normal;
text-decoration: none;
}
/*头部nav样式结束*/
/*顶部容器开始*/
#top_container{
margin: 20px 0 50px 50px;
}
h1{
font-size: 90px;
color: #ff9933;
line-height: 1;
}
#logo{
float: right;
margin: 12px 50px;
}
#infor_container{
font-size: 22px;
}
/*顶部容器结束*/
/*选取框容器*/
#marquee_container{
border-top: 1px solid #5f5f5f;
border-bottom: 1px solid #5f5f5f;
text-align: center;
line-height: 1.6;
font-size: 26px;
margin: 0 50px;
padding: 30 0;
}
/*选取框容器结束*/
/*网页列表容器*/
#Websites_list_container{
margin: 30px 0 20px 50px;
}
/*网页列表容器结束*/