├── img1.png
├── img2.png
├── img
    ├── header.jpg
    └── nav_line.png
├── README.md
├── .project
├── css
    └── layout.css
└── index.html


/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SmallLee/Blog/HEAD/img1.png


--------------------------------------------------------------------------------
/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SmallLee/Blog/HEAD/img2.png


--------------------------------------------------------------------------------
/img/header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SmallLee/Blog/HEAD/img/header.jpg


--------------------------------------------------------------------------------
/img/nav_line.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SmallLee/Blog/HEAD/img/nav_line.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Blog
 2 | HTML+CSS制作的个人博客网页
 3 | 
 4 | ##效果图一
 5 | 
 6 | ![效果图一](https://github.com/SmallLee/Blog/blob/master/img1.png)
 7 | 
 8 | ##效果图二
 9 | 
10 | ![效果图二](https://github.com/SmallLee/Blog/blob/master/img2.png)
11 | 


--------------------------------------------------------------------------------
/.project:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <projectDescription>
 3 | 	<name>Blog</name>
 4 | 	<comment>Create By HBuilder</comment>
 5 | 	<projects>
 6 | 	</projects>
 7 | 	<buildSpec>
 8 | 		<buildCommand>
 9 | 			<name>com.aptana.ide.core.unifiedBuilder</name>
10 | 			<arguments>
11 | 			</arguments>
12 | 		</buildCommand>
13 | 	</buildSpec>
14 | 	<natures>
15 | 		<nature>com.aptana.projects.webnature</nature>
16 | 	</natures>
17 | 	<filteredResources>
18 | 		<filter>
19 | 			<id>1474359577652</id>
20 | 			<name></name>
21 | 			<type>10</type>
22 | 			<matcher>
23 | 				<id>org.eclipse.ui.ide.orFilterMatcher</id>
24 | 				<arguments>
25 | 					<matcher>
26 | 						<id>org.eclipse.ui.ide.multiFilter</id>
27 | 						<arguments>1.0-projectRelativePath-matches-false-false-bin</arguments>
28 | 					</matcher>
29 | 					<matcher>
30 | 						<id>org.eclipse.ui.ide.multiFilter</id>
31 | 						<arguments>1.0-projectRelativePath-matches-false-false-setting</arguments>
32 | 					</matcher>
33 | 				</arguments>
34 | 			</matcher>
35 | 		</filter>
36 | 	</filteredResources>
37 | </projectDescription>
38 | 


--------------------------------------------------------------------------------
/css/layout.css:
--------------------------------------------------------------------------------
  1 | /*将所有带边界或者内边距的清零*/
  2 | *{
  3 | 	padding: 0px;
  4 | 	margin: 0px;
  5 | }
  6 | /*设置整个页面的字体及文字颜色*/
  7 | body{
  8 | 	font-family: arial,宋体,serif;
  9 | 	font-size: 12px;
 10 | 	color: #534616;
 11 | 	background: #F9F0CF url(../img/header.jpg) repeat-x left top;
 12 | 	height: 180px;
 13 | }
 14 | #wrapper{
 15 | 	width: 960px;
 16 | 	margin: 0 auto;/*将整个网页居中显示*/
 17 | }
 18 | #header{
 19 | 	width: 100%;
 20 | 	height: 250px;
 21 | }
 22 | #header #logo{  /*后代选择器*/
 23 | 	color: gray;
 24 | 	font-size: 28px;
 25 | 	padding-top: 10px;
 26 | 	float: left;
 27 | 	margin-left: 50px;
 28 | }
 29 | 
 30 |  a{    /*将整个页面的超链接下划线去掉*/
 31 | 	text-decoration: none;
 32 | }
 33 | /*伪元素选择器，未访问过链接的颜色*/
 34 | a:link{
 35 | 	color: darkgray;
 36 | }
 37 | 
 38 | #logo a{
 39 | 	color: darkgray;
 40 | }
 41 | /*伪元素选择器，已访问过链接的颜色*/
 42 | a:visited{
 43 | 	color: green;
 44 | }
 45 | /*伪元素选择器，鼠标悬浮时链接的颜色*/
 46 | a:hover{
 47 | 	color: red;
 48 | }
 49 | #main{
 50 | 	width: 100%px;
 51 | 	height: auto;
 52 | 	margin-top: 20px;
 53 | }
 54 | #left{
 55 | 	width: 25%;
 56 | 	height: 98%;
 57 | 	float:  left;
 58 | }
 59 | #right{
 60 | 	width: 72%;
 61 | 	height: 98%;
 62 | 	float: right;
 63 | }
 64 | #footer{
 65 | 	width: 100%;
 66 | 	height: 90px;
 67 | 	background: gray;
 68 | 	margin-top: 8px;
 69 | 	float: left;
 70 | 	background: #D5E2CB;
 71 | 	padding: 20px;
 72 | 	text-align: center;
 73 | }
 74 | 
 75 | #search{
 76 | 	float: right;
 77 | 	margin-top: 15px;
 78 | }
 79 | 
 80 | #search .stxt{
 81 | 	width: 180px;
 82 | 	height: 20px;
 83 | }
 84 | #search .go{
 85 | 	width: 30px;
 86 | 	height: 24px;
 87 | }
 88 | /*所有的ul不带指示器*/
 89 | ul{
 90 | 	list-style-type: none;
 91 | }
 92 | 
 93 | #nav ul li a{
 94 | 	float: left;
 95 | 	margin-right: 28px;
 96 | 	font-size: 24px;
 97 | 	color: #D1C091;
 98 | 	background: url(../img/nav_line.png) no-repeat right top;
 99 | 	/*text-align: center;*/
100 | 	width: 100px;
101 | }
102 | 
103 | #nav{
104 | 	width: 100%;
105 | 	height: 40px;
106 | 	float: left;
107 | 	margin-top: 150px;
108 | 	margin-left: 50px;
109 | }
110 | #nav ul li a:hover{
111 | 	text-decoration: underline;
112 | }
113 | /*左侧侧边栏样式*/
114 | .title{
115 | 	width: 100%;
116 | 	height: 50px;
117 | 	background: #D5E2CB;
118 | 	line-height: 50px;
119 | 	text-indent: 20px;//左缩进
120 | }
121 | .content{
122 | 	padding-left: 20px;
123 | 	padding-right: 20px;
124 | 	line-height: 20px;
125 | 	color: #787878;
126 | 	border: 1px solid #D6E6CC;
127 | 	padding-bottom: 20px;
128 | 	margin-bottom: 20px;
129 | }
130 | 
131 | .content li{
132 | 	line-height: 25px;
133 | 	border-bottom: dashed 1px #D1D1D1;
134 | }
135 | 
136 | p{
137 | 	margin: 10px;
138 | }
139 | #left .content,#right .content{
140 | 	background: #F4FAF0;
141 | }
142 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | 	<head>
  4 | 		<title>个人博客网站</title>
  5 | 		<meta charset="utf-8"/>
  6 | 		<link rel="stylesheet" href="./css/layout.css" />
  7 | 	</head>
  8 | 	<body >
  9 | 		<!--网站的容器-->
 10 | 		<div id="wrapper">
 11 | 			<!--网站头部-->
 12 | 			<div id="header">
 13 | 				<div id="logo">
 14 | 					<a href="#">Steven Gerrard! </a><span style="font-style: italic;font-size: 16px;"><span style="color: #fff;">You will</span> never walk alone!</span>
 15 | 				</div>
 16 | 				<div id="search">
 17 | 					<form action="#" method="get">
 18 | 						<input type="text" name="searchtxt" id="searchtxt" value="" class="stxt"/>
 19 | 						<input type="submit" name="btn_search" id="btn_search" value="GO" class="go"/>
 20 | 					</form>
 21 | 				</div>
 22 | 				<!--导航栏-->
 23 | 			<div id="nav">
 24 | 				<ul>
 25 | 					<li><a href="#">Home</a></li>
 26 | 					<li><a href="#">Blog</a></li>
 27 | 					<li><a href="#">Photos</a></li>
 28 | 					<li><a href="#">About</a></li>
 29 | 					<li><a href="#">Links</a></li>
 30 | 					<li><a href="#">Contacts</a></li>
 31 | 				</ul>
 32 | 			</div>	
 33 | 		</div>
 34 | 			<!--主体内容-->
 35 | 			<div id="main">
 36 | 				<div id="left">
 37 | 					<!--左侧侧边栏一-->
 38 | 					<div class="title">
 39 | 						<h2>Because Of You</h2>
 40 | 					</div>
 41 | 					<div class="content" style="border: none;">
 42 | 						I will not make,the same mistake that
 43 | 						you did,I will not let myself heart so misery!
 44 | 					</div>
 45 | 						<!--左侧侧边栏一-->
 46 | 					<div class="title">
 47 | 						<h2>Clubs</h2>
 48 | 					</div>
 49 | 					<div class="content">
 50 | 						<ul>
 51 | 							<li><a href="#">C罗</a></li>
 52 | 							<li><a href="#">梅西</a></li>
 53 | 							<li><a href="#">厄齐尔</a></li>
 54 | 							<li><a href="#">阿圭罗</a></li>
 55 | 							<li><a href="#">德布劳内</a></li>
 56 | 							<li><a href="#">本泽马</a></li>
 57 | 						</ul>
 58 | 					</div>
 59 | 					<!--左侧侧边栏二-->
 60 | 					<div class="title">
 61 | 						<h2>Clubs</h2>
 62 | 					</div>
 63 | 					<div class="content">
 64 | 						<ul>
 65 | 							<li><a href="#">皇家马德里</a></li>
 66 | 							<li><a href="#">巴塞罗那</a></li>
 67 | 							<li><a href="#">拜仁慕尼黑</a></li>
 68 | 							<li><a href="#">曼联</a></li>
 69 | 							<li><a href="#">阿森纳</a></li>
 70 | 							<li><a href="#">切尔西</a></li>
 71 | 						</ul>
 72 | 					</div>
 73 | 					<!--左侧侧边栏三-->
 74 | 					<div class="title">
 75 | 						<h2>Country</h2>
 76 | 					</div>
 77 | 					<div class="content">
 78 | 						<ul>
 79 | 							<li><a href="#">德国</a></li>
 80 | 							<li><a href="#">法国</a></li>
 81 | 							<li><a href="#">意大利</a></li>
 82 | 						</ul>
 83 | 					</div>
 84 | 				</div>
 85 | 				<!--右侧侧边栏-->
 86 | 				<div id="right">
 87 | 						<!--右侧内容一-->
 88 | 					<div class="title">
 89 | 						<h2>C罗</h2>
 90 | 					</div>
 91 | 					<div class="content">
 92 | 						<p>克里斯蒂亚诺·罗纳尔多（Cristiano Ronaldo），1985年2月5日出生于葡萄牙马德拉岛丰沙尔。简称C罗，葡萄牙足球运动员，司职边锋可兼任中锋，现效力于西甲皇家马德里足球俱乐部，并身兼葡萄牙国家队队长[1-2]。
 93 | 						C罗带球速度极快，善于突破和射门，拥有强悍的身体素质，技术非常全面[3]。</p>
 94 | 						<p>C罗出道于里斯本竞技。2003年，加盟英超曼联，期间获得了英格兰足球超级联赛冠军、欧洲冠军联赛冠军、世俱杯冠军等十个赛事冠军。囊获了英超最佳射手
 95 | 						、欧冠最佳射手、英格兰足球先生、世界足球先生、金球奖、欧洲金靴奖等个人荣誉[4]。2009年6月，C罗以身价9600万欧元转会至西甲皇马。前四赛季在199
 96 | 						场比赛中201个进球49次助攻，以场均1.01球的进球率成为皇马历史上进球率最高的球员[5]。</p>
 97 | 					</div>
 98 | 						<!--右侧内容二-->
 99 | 					<div class="title">
100 | 						<h2>梅西</h2>
101 | 					</div>
102 | 					<div class="content">
103 | 						<p>里奥·梅西（Lionel Messi），1987年6月24日出生于圣菲省罗萨里奥市，阿根廷足球运动员。</p>
104 | 						<p>
105 | 						2000年，梅西加入巴塞罗那俱乐部。2005年，阿根廷青年队夺取世青赛冠军，梅西赢得了金球奖和金靴奖双项大奖。2007年4月18日，梅西在国王杯半决赛对赫塔菲时复制了马拉多纳在世界杯上的连过五人进球。2008年北京奥运会上，梅西随阿根廷国奥队夺取了金牌。2009年底，他当选了欧洲足球先生和世界足球先生。梅西2008-2009赛季率领球队连夺西甲、国王杯和欧冠三个冠军。2011年，梅西获得首届国际足联金球奖，还获得了欧足联欧洲最佳球员。
106 | 2013年，他以46粒联赛进球的成绩第三次获得欧洲金靴奖奖杯。2014年，梅西随阿根廷队参加2014巴西世界杯。2014年巴西世界杯上，获得世界杯亚军</p>
107 | 					</div>
108 | 					<div class="title">
109 | 						<h2>厄齐尔</h2>
110 | 					</div>
111 | 					<div class="content">
112 | 						<p>梅苏特·厄齐尔（Mesut Özil），1988年10月15日出生于德国的盖尔森基兴，德国籍足球运动员，场上司职前腰及左边锋。效力于阿森纳足球俱乐部。</p>
113 | 						<p>2005年，厄齐尔被沙尔克04足球俱乐部看中，便签约加入沙尔克04青年队。2007年至2010年夏天，厄齐尔在云达不来梅足球俱乐部共效力过三个赛季，夺得过一次德国杯冠军。2010年，厄齐尔加盟至西甲皇家马德里足球俱乐部，在皇马效力了三个赛季，
114 | 跟随皇马夺得过2011年国王杯和2012年的西甲联赛冠军。</p>
115 | 					</div>
116 | 				</div>
117 | 			</div>
118 | 			<!--尾部-->
119 | 			<div id="footer">
120 | 				&copy;Copyright (c) 2008 .All Rights reserved
121 | 			</div>
122 | 		</div>
123 | 	</body>
124 | </html>


--------------------------------------------------------------------------------