关于学生网页设计作业，想要做一份合格高分的网页设计课程作品，在制作时需要考虑以下几点：
一、围绕一个主题展开，页面内容不跑题、图片选用要美观且无水印，注意图片适配网页模块尺寸要在Photoshop里裁切，而不是直接缩放变形，变形的图片美观度极差；网页的版面不是内容越多越好，要美观、要留白，看着舒服才会觉得你“做的好”；
二、网站要具备LOGO、导航栏、搜索框、轮播图、底部版权栏等构成网页的基本要素，少了这些老师可能会认为这个页面不够完整、丰富；
三、每个页面的布局版式都不能一样，不要去套用一样的版式去换图换字，不同的版式设计能够拿到更高的分数，比如一个子页面是上下结构，那么另一个子页面可以改成左右结构、左中右结构等等~
四、多媒体元素的丰富运用，如图片、动图、音频、视频、Flash...这些不同格式的素材既能帮助我们去丰富页面内容，也是实实在在的加分项，如音频、视频的插入需要不同的代码以及兼容性测试，在评分人眼里更具有得分理由哦；
五、丰富的运营Html标签，如<footer>定义页脚；<form>表单；<frame>定义框架；<hr>定义水平线；<nav>定义导航；<ul> 标签定义无序列表；<li>定义列表的项目；<menu> 定义命令的列表或菜单...
index.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垃圾分类网</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<img src="image/1.png" alt="" id="header-img">
<marquee behavior="" direction="left">今天是2021年11月27日</marquee>
<div id="nav">
<ul>
<li><a href="welcome.html" target="content" class="active">首页</a></li>
<li><a href="page1.html" target="content">子页1</a></li>
<li><a href="page2.html" target="content">子页2</a></li>
<li><a href="page3.html" target="content">子页3</a></li>
<li><a href="#" target="content">子页4</a></li>
<li><a href="#" target="content">子页5</a></li>
</ul>
</div>
<iframe src="" frameborder="0" name="content" id="myframe"></iframe>
<footer>
<p> copyright®2020-2021</p>
</footer>
</body>
</html>
index.css
*{
margin: 0;
padding: 0;
}
#nav{
width: 100%;
height: 30px;
}
#header-img{
width: 100%;
height: 150px;
}
marquee{
position: absolute;
top: 100px;
left: 0;
color: #fff;
font-size: 18px;
}
#nav ul{
display: flex;
justify-content: center;
width: 100%;
height: 30px;
margin: -4px auto;
list-style: none;
border-bottom: 1px solid #eee;
background: pink;
}
ul li{
text-align: center;
width: 12%;
height: 30px;
line-height: 30px;
display: inline-block;
}
ul li a{
color: rgba(233, 12, 166, 0.678);
text-decoration: none;
width: 100%;
height: 30px;
line-height: 30px;
display: inline-block;
letter-spacing: 5px;
}
.active{
background: rgb(248, 211, 211);
}
a:hover{
color: #fff;
font-weight: bold;
background: rgb(248, 211, 211);
}
#myframe{
width: 76%;
margin-left:12%;
height: 600px;
}
footer{
display: flex;
height: 70px;
justify-content: center;
background-color: #eee;
width: 100%;
}
footer p{
line-height: 70px;
color: rgb(228, 96, 96);
font-size: 18px;
}
基本的框架就是这样，剩下的自己再根据需要写吧。
运营Html标签，
如<footer>定义页脚；
<form>表单；
<frame>定义框架；
<hr>定义水平线；
<nav>定义导航；<ul>
标签定义无序列表；
<li>定义列表的项目；
<menu> 定义命令的列表或菜单...
