大一上学期，学院组织了全院（包括研究生在内)的一次网页设计大赛。参赛的一支队伍一般是4个人，而我和另外一个男生组成了一支队伍。当时也是有种初生牛犊不怕虎的感觉，觉得自己可以。当然啦，事实证明确实可以。当时还有两支大一的队伍都是一个人一支队，他们是从初高中就开始学习网页的，最后也是他们两支队伍各占一、二名。我们是第三名。对于这个成绩，本人是很满意的。毕竟我自己初高中不是搞这一方面的，仅仅是大学上了半个学期专业课SSD1，外加做的时候不会的自己百度或者找队友帮忙。
说了这么多，也没有讲到自己的网页本身。不到一个月的时间，两个人，打造出纯手工72KB全彩高清自适应完整生动简洁极速的小网站。 在内容上有些不充实或者缺失等问题，这原因呢，就是当时实在想不出可以再放些什么有关的东西上去了，所以导致有些页面是整一版都是图片配文字来填充。答辩的时候，也看到其他同学的作品展示。给我印象最深刻的就是其中一个作品中有个网页是一个3D视角的模仿电影院的，具体怎么描述出来我也不是很会。我就暂且描述一下它的功能吧，大家将就着看功能有这样的：
- 一进到那个页面，是一个电影院放映室，正中间是放映幕，旁边是椅子。
- 随着鼠标的移动，视角也会随着移动。
- 好像是可以点击椅子的，点击椅子的话就相当于你坐在这个椅子上看电影了，你的位置就不会变，但是视角还是可以模仿你左右看的。
放映幕播放一个电影，可以通过点击放映幕实现播放的暂停和开始。
当时看了觉得好神奇啊。当然啊，人家是使用了网上的模板做出来的。先撇开这个的技术问题，我的水平也不知道这是怎么实现的。当时他们的主题就是为我们学院做一个院网，他们说这是一个我们院的在线电影院。个人认为，这个东西很强词夺理啊，学院网站应该用不到这些东西吧。
一进入首页，就是一个用javascript写的动画，因为我不是负责写这个的，所以关于这个，我也不能说什么。往下浏览就是我负责写的图标、链接、配字啦。我大概写了一部分的时候，队友告诉我有个叫CSS的东西。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。（以上来自百度百科）
下面就是我们在主页的CSS样式表。运用样式表能减少很多重复的代码。
div#index{
background-color:#0041D8;
}
object#index-flash{
min-width:100%;
}
div#wapper{
margin-top:-20px;
padding-top:40px;
}
div#title-sub1{
margin:80px;
margin-top:40px;
margin-bottom:40px;
}
div#title-sub1 h1{
width:40%;
border-left: 10px solid #22a1c4;
padding: 30px 30px 20px 30px;
background: #f6f7f9;
}
div#body-sub1{
position:relative;
float:left;
width:40%;
margin-left:5%;
}
div.info{
height:120px;
}
@media screen and (min-width: 1200px) {
div.info{
height:180px;
}
}
@media screen and (min-width: 1500px) {
div.info{
height:200px;
}
}
div.info img{
position:relative;
float:left;
width:30%;
margin-right:5%;
}
div.text{
position:relative;
float:left;
width:65%;
border-top:5px solid #00C3FF;
margin-top:10px;
padding-top:10px;
line-height:140%;
letter-spacing:1px;
}
div.text a{
display:block;
padding-bottom:5px;
}
div#body-sub2 img{
position:relative;
float:left;
max-width:50%;
margin-left:3%;
margin-top:5%;
}
div.claerfloat{
clear:both;
}
div#footer{
clear:both;
}比如上面的代码，有div#title-sub1 h1，意思就是定义html中的凡是title-sub1 h1的，宽度都占屏幕的40%等。在html文件中引用css文件的时候就是这样：<link rel="stylesheet" type="text/css" href="css/index.css"/>
以下是部分index.html的代码。我觉得刚接触写代码的，必须要注意！！
代码的良好风格很重要啊啊！！ 因为写网页的标签是成对的，一旦没有把成对标签对齐的话，当系统报错少了一个标签，找错会找的崩溃的。亲身经历。可能以下给的代码里面有错误示范，大家不要学。
<div id="wapper">
<div id="title-sub1">
<h1>学风大比拼</h1>
<br>
<hr align="left" color="#FCD76A" width="75%">
</div>
<div id="body-sub1">
<div id="info1" class="info">
<a href="introduction.html"><img src="images/index/boy2.png" alt=""></a>
<div id="text1" class="text">
<a href="introduction.html">活动简介</a>
<p>学风大比拼是我院为响应学校学风建设而进行的活动，目的在于激发同学们对生活、学业的积极性。</p>
</div>
</div>
<div id="info2" class="info">
<a href="environment.html"><img src="images/index/girl1.png" alt=""></a>
<div id="text2" class="text">
<a href="environment.html">学术环境</a>
<p>中南大学学子在这里拥有与众不同的有利环境，从生活环境到学习环境，无不充满着美丽与希望。</p>
</div>
</div>
<div id="info3" class="info">
<a href="development.html"><img src="images/index/boy1.png" alt=""></a>
<div id="text3" class="text">
<a href="development.html">建设进展</a>
<p>各班积极建设班级的方式各有侧重点，他们建设班级的方式也体现了各个班的班级文化各有千秋。</p>
</div>
</div>
</div>
<div id="body-sub2">
<img src="images/index/styleofstudy.jpg" alt="">
</div>
<div class="claerfloat"></div>
</div>写到这里呢，就暂且告一段落吧，刚刚收到通知，今早没交高数作业的童鞋要今晚10点补交。。。。噩梦
