学生个人网页设计作品_简单的静态网页代码
2023-06-13 09:13:42 时间
学生个人静态网页设计作品之我的家乡
- 设计思路
- 知识运用
- 内容介绍
- 页面代码展示
- 作品展示
设计思路
页面使用居中效果,留下留白简洁简便,使浏览者在浏览的过程中有一种舒适感,在视觉方面有着清晰安静的画面,吸引浏览者对下面内容的浏览。作品采用的背景是白色,在视觉方面上有着明亮的空间,主体内容宽度为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文档:
<!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:由于代码较多,只截取一部分
作品展示
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
相关文章
- Python爬虫—-网页下载器和urllib2模块及对应的实例
- vivo前端智能化实践:机器学习在自动网页布局中的应用
- java 网页提示被阻止怎么办,应用程序已被java安全阻止怎么办
- 京东静态网页设计案例(1)
- 静态页面和动态页面的区别在于_超链接属于静态网页还是动态网页
- 寻找可靠的长久的存储介质之旅,以及背后制作的三个网页
- 网页端对接ChatGPT源码
- 个人介绍静态网页【附源码】初学者的期中作业
- Linux基础:Linux 下的 httpd静态网页配置教程
- nginx 搭建静态网页服务,不同的前缀进入不同的静态文件路径详解程序员
- 深入浅出Linux网页命令行(linux网页命令行)
- python抓取网页例子详解编程语言
- Oracle网页登录:安全又方便(oracle网页登陆)
- 为什么我用Outlook客户端收信后网页端的收件箱里的邮件被删除了?
- Linux下发布网页的完美实现(linux发布网页)
- 如何使用MySQL在网页上显示数据(mysql页面显示)
- 用libtemplate实现静态网页生成
- 静态网页加密
- 做网页字体大小参考网页中同字号字体的不同单位对比列表
- c#正则表达式对网页进行有效内容抽取
- asp由动态网页转变为静态网页的实现代码
- 通用PHP动态生成静态HTML网页的代码
- 在Asp.net网页上写读Cookie的两种不同语法介绍
- Extjs中TabPane如何嵌套在其他网页中实现思路及代码
- JavaScript实现网页图片等比例缩放实现代码及调用方式
- 网页禁止鼠标左右键功能的简单代码
- ajax提交表单实现网页无刷新注册示例