作业3：我的博客主页_我的博客html-CSDN博客

本文链接：https://blog.csdn.net/yuye_v_xingchen/article/details/70649786

HTML代码：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>我的博客</title>
		<link rel="stylesheet" type="text/css" href="blog.css"/>
		<link rel="stylesheet" type="text/css" href="new.css"/>
	</head>
	<body>
		<div id="first">
			<div id="header">
				<div id="logo">
					<img src="1.jpg">
				</div>
				<div id="guide">
					<ul>
						<li><a href="#">首页</a></li>
						<li class="nt"></li>
						<li><a href="#">浏览</a></li>
						<li class="nt"></li>
						<li><a href="#">收藏</a></li>
						<li class="nt"></li>
						<li><a href="#">讨论</a></li>
					</ul>
				</div>
			</div>
			<div class="space"></div>
			<div id="thing">
				<div id="main">
					<div id="box1">
						<a href="#"><img src="2.jpg"/></a>
						<a href="#"><img src="3.jpg"/></a>
						<a href="#"><img src="4.jpg"/></a>
						<a href="#"><img src="5.jpg"/></a>
						<a href="#"><img src="6.jpg"/></a>
					</div>
					<div id="box2">
						<a href="#"><img src="7.jpg"/></a>
					</div>
					<div id="box3">
						<a href="#"><img src="8.jpg"/></a>
					</div>
				</div>
				<div id="side">
				
				</div>
			</div>
			<div class="space"></div>
			<div id="last">
			
			</div>
		</div>
	</body>
</html>

CSS代码1：

body{
	padding:0px;
	margin:0px;
}
#first{
	width:960px;
	margin:0 auto;
	text-align:left;	
}
#header{
	width:100%;
	height:90px; /*tmp*/
	background:black;
}
#logo{
	margin-top:5px;
	margin-left:5px;
	float:left;
	height:80px;
	width:180px;
}
#guide{
	margin-top:50px;
	margin-right:10px;
	float:right;
	height:30px;
	width:750px;
}
#thing{
	width:100%;
	height:580px; /*tmp*/
	background:url("10.jpg");
}
#main{
	float:left;
	width:750px;
}
#box1{
	float:right;
	margin-right:20px;
	margin-top:10px;
	width:500px;
	height:60px;
	background:blue;
}
#box2{
	float:right;
	margin-right:20px;
	margin-top:10px;
}
#box3{
	float:left;
	margin-left:20px;
	margin-top:10px;
}
#side{
	float:right;
	width:200px;
	height:580px;
	background:url("11.jpg");
	font-size:100%;
}
#last{
	width:100%;
	height:50px; /*tmp*/
	background:black;
}
.space{
	height:10px;
	width:100%;
}

CSS代码2：

#logo img{
	height:80px;
	width:180px;
	border:0px;
	font-size:100%;
	margin:0px;
	padding:0px;
}
#box1 img{
	height:60px;
	width:100px;
	border:0px;
	font-size:100%;
	margin:0px;
	padding:0px;
	float:right;
}
#box2 img{
	border:0px;
	font-size:100%;
	margin:0px;
	padding:0px;
	float:right;
	margin-right:180px;
}
#box3 img{
	height:150px;
	width:150px;
	border:0px;
	font-size:100%;
	margin:0px;
	margin-left:20px;
	padding:0px;
	float:left;
}
a{
	font-size:14px;
	text-decoration:none;
	color:white;
}
ul{
	margin:0px;
	padding:0px;
	list-style:none;
}
li{
	width:80px;
	height:30px;
	float:left;
	text-align:center;
	line-height:30px;
}
.nt{
	width:1px;
	height:14px;
	background:white;
	margin-top:8px;
}