返回首页

web网页 主题网站大作业?

258 2023-11-01 23:59 admin

关于学生网页设计作业,想要做一份合格高分的网页设计课程作品,在制作时需要考虑以下几点:

一、围绕一个主题展开,页面内容不跑题、图片选用要美观且无水印,注意图片适配网页模块尺寸要在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&reg;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> 定段吵义命令的列表或菜单...

有的有的,你这个需求很简州誉烂单,静态的网站没有问题的,但是虚蔽图片和设计类型的话可以去参考一些喜欢的网站,然后册漏制作3-5天就可以了

太多了 没人会免费给你做的。要么去付费找一个人给你敲代码,要么自己慢慢琢磨。

顶一下
(0)
0%
踩一下
(0)
0%
相关评论
我要评论
用户名: 验证码:点击我更换图片
上一篇:返回栏目