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

Wmy-code

已于 2022-10-02 18:55:18 修改

阅读量2.5w

点赞数 63

分类专栏：网页设计作品文章标签： css html html5 css3 前端

于 2021-01-30 20:11:53 首次发布

本文链接：https://blog.csdn.net/m0_53161561/article/details/113445119

版权

网页设计作品专栏收录该内容

8 篇文章 24 订阅

订阅专栏

这个作品是一个学生用HTML5和CSS3设计的关于家乡的静态网页，包括7个页面，展示了家乡的介绍、美食、美景和视频等内容。设计上采用居中布局和白色背景，提供舒适的浏览体验。代码中运用了div+css结构、表单、超链接、浮动、定位等技术，实现了各页面间的导航和交互功能。同时，美食页面的图片应用了hover属性和transform属性，增强了用户体验。

摘要由CSDN通过智能技术生成

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

设计思路
知识运用
内容介绍
页面代码展示
作品展示

设计思路

页面使用居中效果，留下留白简洁简便，使浏览者在浏览的过程中有一种舒适感，在视觉方面有着清晰安静的画面，吸引浏览者对下面内容的浏览。作品采用的背景是白色，在视觉方面上有着明亮的空间，主体内容宽度为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【家乡视频】

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

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

页面代码展示

HTML文档：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
content="width=device-width, initial-scale=1.0">
    <title>我的家乡</title>  
 <link rel="stylesheet" href="css\index.css">
</head>
<body>
        <div class="nav">
            <li><a href="index.html" class="url">首页</a></li>
            <li><a href="intro.html">家乡简介</a></li>
            <li><a href="photos.html">家乡美景</a></li>
            <li><a href="food.html">家乡美食</a></li>
            <li><a href="video.html">家乡视频</a></li>
            <li><a href="login.html">登录/注册</a></li>
        </div>
        <div class="clear"></div>
        <div class="img">
        <img src="images\img1.jpg">
        </div>
        
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;
    color: ivory;
}

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

作品展示

在这里插入图片描述

Wmy-code

关注

63
点赞
踩
481

收藏

觉得还不错? 一键收藏
24
评论
学生静态网页设计作品之我的家乡

学生个人静态网页设计作品之我的家乡设计思路知识运用内容介绍页面代码展示作品展示设计思路页面使用居中效果，留下留白简洁简便，使浏览者在浏览的过程中有一种舒适感，在视觉方面有着清晰安静的画面，吸引浏览者对下面内容的浏览。作品采用的背景是白色，在视觉方面上有着明亮的空间，主体内容宽度为1080px，较大的宽度让浏览者能够清晰的浏览。知识运用在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识内容介绍《我的家
复制链接

扫一扫