加入腾讯课堂小白训练已经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;
}