学⽣个⼈静态⽹页设计作品之我的家乡
设计思路
页⾯使⽤居中效果，留下留⽩简洁简便，使浏览者在浏览的过程中有⼀种舒适感，在视觉⽅⾯有着清晰安静的画⾯，吸引浏览者对下⾯内容的浏览。作品采⽤的背景是⽩⾊，在视觉⽅⾯上有着明亮的空间，主体内容宽度为1080px，较⼤的宽度让浏览者能够清晰的浏览。
知识运⽤
在操作⽅⾯上运⽤了html5和css3，采⽤了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引⽤视频等基础知识
内容介绍
《我的家乡—汕头》共有7个页⾯，分别为
index.htm l【⾸页】
index.html【⾸页】
该页⾯引⽤了超链接、div盒⼦、浮动、插图⽚等知识将页⾯能够醒⽬的呈现出来，页⾯能够给浏览者在浏览过程中便捷的跳转。
intro.htm l【家乡介绍】
intro.html【家乡介绍】
该页⾯使⽤p标签、h2标签将⽂字进⾏排版，使页⾯整洁，充分利⽤外来资源，引⼊相关资料。
fo o d.htm l【家乡美⾷】
该页⾯以图⽚的形式为⼤家展⽰家乡的美⾷特产，以图⽚的形式更加能够让读者对家乡美⾷的了解，引⽤了hover属性、tranform属性和border-radius属性使光标在图⽚位置上时能够放⼤1.5倍并且使图⽚呈圆形。
pho to s.htm l【家乡美景】
s.html【家乡美景】gre培训收费
以图⽚和⽂字的形式展现出家乡的风貌。
html+css美食静态网页设计
video.htm l【家乡视频】
使⽤标签引⼊视频，利⽤“好看视频”和“抖⾳”等资源引⼊有关家乡的视频。
lo gin.htm l和r egister.htm l【登录/注册】
egister.html【登录/
利⽤了表单、超链接等知识制作登录页⾯和注册页⾯，在登录页⾯中点击注册即可进⼊注册页⾯，在注册页⾯中点击登录则可返回登录页⾯。
页⾯代码展⽰
H TML⽂档：
<!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>leng
<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;学java语言
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：由于代码较多，只截取⼀部分
作品展⽰vboxmanage命令详解

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。