文章标题

**我的第一个网站**大一上学期，学院组织了全院（包括研究生在内)的一次网页设计大赛。参赛的一支队伍一般是4个人，而我和另外一个男生组成了一支队伍。当时也是有种初生牛犊不怕虎的感觉，觉得自己可以。当然啦，事实证明确实可以。当时还有两支大一的队伍都是一个人一支队，他们是从初高中就开始学习网页的，最后也是他们两支队伍各占一、二名。我们是第三名。对于这个成绩，本人是很满意的。毕竟我自己初高中不是搞这一方面的，仅仅是大学上了半个学期专业课SSD1，外加做的时候不会的自己百度或者找队友帮忙。说了这么多，也没有讲到自己的网页本身。不到一个月的时间，两个人，打造出纯手工72KB全彩高清自适应完整生动简洁极速的小网站。 在内容上有些不充实或者缺失等问题，这原因呢，就是当时实在想不出可以再放些什么有关的东西上去了，所以导致有些页面是整一版都是图片配文字来填充。答辩的时候，也看到其他同学的作品展示。给我印象最深刻的就是其中一个作品中有个网页是一个3D视角的模仿电影院的，具体怎么描述出来我也不是很会。我就暂且描述一下它的功能吧，大家将就着看功能有这样的： 1. 一进到那个页面，是一个电影院放映室，正中间是放映幕，旁边是椅子。 2. 随着鼠标的移动，视角也会随着移动。 3. 好像是可以点击椅子的，点击椅子的话就相当于你坐在这个椅子上看电影了，你的位置就不会变，但是视角还是可以模仿你左右看的。 4. 放映幕播放一个电影，可以通过点击放映幕实现播放的暂停和开始。 当时看了觉得好神奇啊。当然啊，人家是使用了网上的模板做出来的。先撇开这个的技术问题，我的水平也不知道这是怎么实现的。当时他们的主题就是为我们学院做一个院网，他们说这是一个我们院的在线电影院。个人认为，这个东西很强词夺理啊，学院网站应该用不到这些东西吧。这个就是我们的首页，第一次写博客，不知道这个图片有没有插入成功啊。一进入首页，就是一个用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点补交。。。。噩梦