学生个人静态网页设计作品之我的家乡

设计思路

页面使用居中效果，留下留白简洁简便，使浏览者在浏览的过程中有一种舒适感，在视觉方面有着清晰安静的画面，吸引浏览者对下面内容的浏览。作品采用的背景是白色，在视觉方面上有着明亮的空间，主体内容宽度为1080px，较大的宽度让浏览者能够清晰的浏览。

知识运用

在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

内容介绍

《我的家乡—汕头》共有7个页面，分别为

index.html【首页】

该页面引用了超链接、div盒子、浮动、插图片等知识将页面能够醒目的呈现出来，页面能够给浏览者在浏览过程中便捷的跳转。

intro.html【家乡介绍】

该页面使用p标签、h2标签将文字进行排版，使页面整洁，充分利用外来资源，引入相关资料。

food.html【家乡美食】

该页面以图片的形式为大家展示家乡的美食特产，以图片的形式更加能够让读者对家乡美食的了解，引用了hover属性、tranform属性和border-radius属性使光标在图片位置上时能够放大1.5倍并且使图片呈圆形。

photos.html【家乡美景】

以图片和文字的形式展现出家乡的风貌。

video.html【家乡视频】

使用标签引入视频，利用“好看视频”和“抖音”等资源引入有关家乡的视频。

login.html和register.html【登录/注册】

利用了表单、超链接等知识制作登录页面和注册页面，在登录页面中点击注册即可进入注册页面，在注册页面中点击登录则可返回登录页面。

页面代码展示

HTML文档：

   

   

content="width=device-width, initial-scale=1.0">

     

       

           

首页

           

家乡简介

           

家乡美景

           

家乡美食

           

家乡视频

           

登录/注册

       

       

       

       

       

       

CSS文档：

.nav{

    width: 1080px;

    height: 50px;

    margin: auto;

    background-color: rgb(43, 40, 40);

}

li{

    line-height: 50px;

    margin-left: 100px;

    list-style: none;

    float: left;

}

a{

    text-decoration: none;

    color: cornsilk;

}

.nav a:hover{

    color: maroon;

    border-bottom: 3px solid #cd000e;

}

.nav li .url{

    border-bottom: 3px solid #cd000e;

}

.clear{

    clear: both;

}

.img{

    width: 1080px;

    margin: auto;

}

.img img{

    width: 1080px;

}

.cont{

    width: 1080px;

    height:200px;

    margin: auto;

    margin-top: -4px;

}

.box1,.box2,.box3{

    width: 360px;

    height: 200px;

    float: left;

    background-color: rgb(17, 15, 15);

    color: blanchedalmond;

}

.cont a{

    margin-left: 155px;

}

h3{

    text-align: center;

}

p{

    padding: 10px;

    font-size: 10px;

}

.footer{

    width: 1080px;

    height: 30px;

    text-align: center;

    background-color: rgb(44, 39, 39);

    margin: auto;

｝

ps：由于代码较多，只截取一部分

作品展示