前言:走进代码的世界已经半年了,在这半年间从一个只会office软件简单操作变到独立完成静态网站设计搭建,其中学到了很多专业知识,接下来人生的第一篇博文通过自己的实训作品带大家来看看我所得到的东西。
在大一的第一个学期大部分学生都是啥也不懂,当然我也一样,所以学习基础就是首要任务,其中一个非常重要的技能就是PS。对于一个网站来说,一个好的设计图是至关重要的,它可以直观的显现出你的网站的分布情况(及排版,美观与否等)网站的颜色搭配,字体大小,主体内容的位置,都是设计网站时需要考虑的。
<div id="daohang">
<ul>
<li id="daohang1"><a href="####">首页</a></li>
<li id="daohang2"><a href="####">动漫新番</a></li>
<li id="daohang3"><a href="####">动漫资讯</a></li>
<li id="daohang4"><a href="####">动漫电影</a></li>
<li id="daohang5"><a href="####">动漫原著</a></li>
<li id="daohang6"><a href="####">动漫周边</a></li>
<li id="daohang7"><a href="####">同人漫展</a></li>
</ul>
</div>
</div>
/*网站的导航部分*/
#daohang {
width: 1004px;
height: 44px;
background: url(images/daohangbeijing.jpg) no-repeat;
}
/*网站导航的内容伪类*/
#daohang ul {
padding-top: 8px;
}
#daohang ul li {
float: left;
font-size: 19px;
font-weight: bold;
color: #532900;
}
#daohang ul li a:link {
text-decoration: none;
color: #532900;
}
#daohang ul li a:visited {
text-decoration: none;
color: #303030;
}
#daohang ul li a:hover {
text-decoration: none;
color: #DF7000;
}
#daohang ul li a:active {
text-decoration: none;
color: #303030;
}
/*制网站导航内容中“首页”的位置*/
#daohang1 {
margin-left: 102px;
display:inline;
}
/*网站导航内容中“动漫新番”的位置*/
#daohang2 {
margin-left: 48px;
}
/*网站导航内容中“动漫资讯”的位置*/
#daohang3 {
margin-left: 47px;
}
/*网站导航内容中“动漫电影”的位置*/
#daohang4 {
margin-left: 56px;
}
/*网站导航内容中“动漫原著”的位置*/
#daohang5 {
margin-left: 56px;
}
/*网站导航内容中“动漫周边”的位置*/
#daohang6 {
margin-left: 56px;
}
/*网站导航内容中“同人漫展”的位置*/
#daohang7 {
margin-left: 46px;
}
有了网站的设计图,搭建网页将会是一个紧接而来的巨大工程,需要你通过用代码制作出与设计图一样的网站。所以在平时敲代码时养成一定的好习惯,代码嵌套和注释可以快速的让他人了解你的代码,也可以让你以后更维护起来更容易。
感悟:人们往往会为了梦想走向挑战。当你走向梦想的道路时,你的人生将充满着,你所不懂的未知挑战。从起初的梦想,到人生的选择,决定了自己的未来,当迷茫与挑战来临时,试着去向前进。