腾讯课堂小白训练——个人博客

加入腾讯课堂小白训练已经9天了，自己也根据这几天学的知识，做了一个静态的个人博客页面，还有需要不足的地方，不过这几天的收获还是蛮多的，会一直努力下去。

先把我设计的页面挂出来吧，这个页面分为三个板块，靠滑动条来滚动切换

因为是静态的页面，所有只用到了html和css，其中html的代码为：

<div id="summary">
			<div class="header">
				<h2>懒人blog</h2>
				<a href="#" >首页</a>
				<a href="#" >写文章</a>
				<input type="text" class="txt"/>
				<input type="button" class="search"  value="搜索"/>
				
			</div>
			<div class="introduct">
				<img src="img/头像.jpg">
				<h3>男同学</h3>
				<p>祖国大地在脚下</p>
			</div>
		</div>
		<div id="footprint">
			<h2>我的足迹</h2>
			<ul>
				<li class="photo">
					<img src="img/三亚.JPG" /> 
					<a href="#">我在三亚</a>
				</li>
				
				<li>
					<img src="img/上海.jpg">
					<a href="#">我在上海</a>
				</li>
				、
				<li>
					<img src="img/杭州.jpg">
					<a href="#">我在杭州</a>
				</li>
				
				<li>
					<img src="img/大理.jpg">
					<a href="#">我在大理</a>
				</li>
				
				<li>
					<img src="img/丽江.jpg">
					<a href="#">我在丽江</a>
				</li>
				
				<li>
					<img src="img/北京.JPG">
					<a href="#">我在北京</a>
				</li>
			</ul>
		</div>
		<div id="msg">
			<h2>给我留言吧</h2>
			<div class="send-msg">
				<div class="message">
					<img src="img/1.jpg">
					<h4>追梦的女孩</h4>
					<i class="date">2017.04.22 12：24：35</i>
				</div>
				<p>我也想去大理走一走</p>
			</div>
			<div class="send-msg">
				<div class="message">
					<img src="img/2.jpg">
					<h4>小屁孩</h4>
					<i class="date">2017.04.22 11：02：15</i>
				</div>
				<p>组队去丽江</p>
			</div>
			<div class="send-msg">
				<div class="message">
					<img src="img/3.jpg">
					<h4>淡淡的忧伤</h4>
					<i class="date">2017.04.22 10：00：25</i>
				</div>
				<p>博主，多拍点美照吧！</p>
			</div>
			<div class="send-msg">
				<div class="message">
					<img src="img/4.jpg">
					<h4>不落的太阳</h4>
					<i class="date">2017.04.22 08：26：54</i>
				</div>
				<p>博主去过西藏吗？</p>
			</div>
				
		</div>

css的代码为：

*{
	padding: 0;
	margin: 0;
}
#summary{
	height: 100vh;
	background-color: rgb(210,232,183) ;
}
#summary .header{
	display: flex;
	height: 60px;
	background-color: rgb(199,232,183);	
}
#summary .header h2{
	margin: 10px 80px 0 10px;
}
#summary .header a {
	text-decoration: none;
	color: inherit;
	margin: 20px 0 0 30px;
}
#summary .header a:hover{
	color: forestgreen;
}
#summary .header .txt{
	height: 30px;
	border-radius: 10px;
	margin: 15px 15px 0 80px;
	box-shadow: 2px 2px 3px rgb(210,232,183);
}
#summary .header .search{
	height: 30px;
	border-radius: 5px;
	margin-top: 15px;
	margin-left: 10px;
	background-color: rgb(210,232,183);
}

#summary .introduct{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 150px;
}
#summary .introduct img{
	width: 200px;
	height: 230px;
	border-radius: 50%;
}
#summary .introduct h3{
	margin: 10px;
	font-family: "微软雅黑";
}
#footprint{
	height: 100vh;
	background-color: rgb(241,193,155);
	
}
#footprint h2{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 10px;
}
#footprint ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#footprint li{
	list-style: none;
	width: 320px;
	height: 260px;
	background-color: rgb(233,125,105);
	margin: 10px;
}
#footprint li img{
	width: 300px;
	height: 220px;
	padding: 10px 10px 0 10px;
}
#footprint li a{
	text-decoration: none;
	color: inherit;
	float: right;
	padding-right: 10px;
}
#footprint li a:hover{
	color: red;
	font: 24px;
}
#msg{
	height: 100vh;
	background-color: rgb(210,232,183) ;
}
#msg h2{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 10px;
}
#msg .send-msg{
	border: 2px solid darkolivegreen;
	height: 100px;
	margin: 10px;
}
#msg .send-msg .message{
	display: flex;
	flex-wrap: wrap;
	
}
#msg .send-msg .message img{
	width: 80px;
	height: 80px;
	margin: 10px;
}
#msg .send-msg .message h4{
	margin: 10px;
	color: forestgreen;
}
#msg .send-msg .message .date{
	font: 8px;
	margin: 10px;
}
#msg .send-msg p{
	margin-left:100px ;
	margin-top: -50px;
}