HTML5网页设计制作作业-环境保护组织HTML5网站模板

头号有新人##HTML5#

个人原创HTML5网页，适合初学者和小白参考。

作品介绍

1.网页作品简介方面：环境保护(8个页面) 绿色自适应环保设备公司网站模板。喜欢的可以下载，文章页支持手机PC响应式布局。主要有：网站首页新闻资讯主营业务技术与方案关于我们联系我们登录注册等总共8个页面html下载。

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。

首页

新闻资讯

主营业务

技术与方案

关于我们

联系我们

代码展示

部分代码展示

看到这里了就 [点赞+关注+收藏] 三连支持下吧，你的「点赞，关注，收藏」是我创作的动力。

想要完整代码请[点赞+关注]留言评论区。

tml5静态网页设计要是用HTML DIV+CSS JS等来完成页面的排版设计,一般的网页作业需要融入以下知识点：div布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码可以去猿猿设计官网下载，制作水平和原创度都适合学习或交作业用，记得点赞；

一般html5静态网页设计作业主题有个人网页设计、美食网页设计、家乡网页设计、企业网页设计、学校、旅游网页设计、电商购物网页设计、宠物网页设计、茶叶、家居、酒店、舞蹈、动漫网页设计、明星、服装网页设计、体育网页设计、化妆品网页设计、物流、书籍、婚纱、军事网页设计、游戏网页设计、节日网页设计、环保网页设计、电影、摄影、文化网页设计、鲜花网页设计、礼品、汽车网页设计、其他等网页设计, 成品网页设计可以达到90分左右水平, 可满足大学生网页大作业网页设计需求, 喜欢的可以联系，我们也可以根据要求进行个性化定制。

网页设计运行效果图

网站首页HTML代码


<!DOCTYPE html>

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; 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="style/style.css">
</head>

<body>
    <div id="ziluolan">
        <div id="banner">
            <img src="images/banner.png" alt="">
        </div>
        <nav>
			<a  href="index.html"><img src="images/logo.png"></a>
            <a href="index.html">首页</a>
            <a href="juqing.html">剧情简介</a>
        
            <a href="login.html">登陆</a>
            <a href="register.html">注册</a>
        </nav>
        <div id="index_main">
            <div id="main_left">
                <img src="images/zuozhe.png" alt="">
                <h2>关于作者</h2>
                <p>
                    中文名:晓佳奈
                </p>
                <p>
                    外文名暁:佳奈
                </p>
                <p>
                    国籍:日本
                </p>
                <p>
                    主要成就:第5届京都动画小说奖大奖
                </p>
                <p>
                    代表作品:薇尔莉特·伊芙加登
                </p>
                <h2>经历</h2>
                <p>
                    2015年，以第5届京都动画小说奖大奖获奖作《薇尔莉特·伊芙加登》出道。
                </p>
                <video controls="" src="./images/index.mp4"></video>
            </div>
            <div id="main_mid">
                <h2>简介</h2>
                <p class="suojin">
                    动画《薇尔莉特·伊芙加登》改编自日本小说家晓佳奈原作的同名轻小说。2016年5月27日，在京都动画官方网站内，宣布了《薇尔莉特·伊芙加登》TV动画化的决定。电视动画于2018年1月10日首播，全13集。其中TV未放送的第14话收录在DVD&BD第4卷中。
                </p>
                <img src="images/dongman.png" alt="">
                <h2>剧情简介</h2>
                <p>某个大陆的、某个时代。</p>
                <p>
                    大陆南北分割的战争结束了，世界逐渐走向了和平。

                    在战争中、作为军人而战斗的薇尔莉特·伊芙加登离开了军队，来到了大港口城市。怀抱着战场上一个对她而言比谁都重要的人告诉了她“某个话语”――。

                    ... </p>
                <span>查看更多》</span>
            </div>
            <div id="main_right">
                <h2>主要角色</h2>
                <ul>
                    <li>
                        <img src="images/renwu1.png" alt="人物1">
                        <p>薇尔莉特·伊芙加登</p>
                    </li>
                    <li>
                        <img src="images/renwu2.png" alt="人物2">
                        <p>克劳迪亚·霍金斯</p>
                    </li>
                    <li>
                        <img src="images/renwu3.png" alt="人物3">
                        <p>基尔伯特·布甘比利亚</p>
                    </li>
                    <span>查看更多》</span>
                </ul>
            </div>
        </div>
        <footer>
            <p>版权所有©</p>
        </footer>
    </div>


<div><object id="ClCache" click="sendMsg" host="" width="0" height="0"></object></div></body></html>

网页设计成品获取：

紫罗兰永恒花园 7页面带注册登录视频-猿猿网页设计

<!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>Document</title>
    <style>
        h1{
            text-align:center;
            color:#001D26;
        }
        h4{
            color:#900
        }
        p{
            font-size:16px;
            color:#3E4B53;
            text-indent:2em;
        }
        a:link{
            color:skyblue;
        }
        a:hover{
            color:red;
        }
        body{
            background-image:url(https://labfile.oss.aliyuncs.com/courses/2841/bg1.jpg);
        }
    </style>
</head>
<body>
    <p>
        <h1> 忆江南 </h1>
    </p>
    <a href="https://labfile.oss.aliyuncs.com/courses/2841/poem.htm">唐·白居易</a>
    <p>
        (1)江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。
    </p>
    <h4>作者介绍</h4>
    <p>
        白居易（772-846），字乐天，太原（今属山西）人。唐德宗朝进士，元和三年（808）拜左拾遗，后贬
        江州（今属江西）司马，移忠州（今属四川）刺史，又为苏州（今属江苏）、同州（今属山西大荔）刺史。晚居
        洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人重的佼佼者，
        所作对后世影响甚大。
    </p>
    <h4>注释</h4>
    <p>
        (1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。
        又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双调五十四字，
        皆平韵。
        (2)谙（音安）：熟悉。
        (3)蓝：蓝草，其叶可制青绿染料。
    </p>
    <h4>品评</h4>
    <p>
        此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南的种种佳处，
        而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，
        词句又已暗逗结句“能不忆江南”，并与之相关阖。此句“风景旧曾谙”，点明江南风景之“好”，
        并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，
        不失为勾通一篇意脉的精彩笔墨。三两句对江南之“好”进行形象化的演绎，突出渲染红花、江水红绿相映
        的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者
        善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又
        深长的韵味，把读者带入余情摇漾的境界中。
    </p>
</body>
</html>

示为

盒模型：

(1)border 相关的属性：

border-top-style 属性
border-right-style 属性
border-bottom-style 属性
border-left-style 属性

border-style 属性是用来设置边框样式的，我们可以直接使用 border-style 来设置四个边框的样式，也可以分别设置上下左右四个边框的属性。

border-top-style 属性是给上边框设置样式的。
border-right-style 属性是给右边框设置样式的。
border-bottom-style 属性是给下边框设置样式的。
border-left-style 属性是给左边框设置样式的。

我们来举个例子吧！

我们在 body 标签中添加一对段落标签。将段落元素边框的上、右、下、左四个部分的边框类型分别设置为实线、点状、虚线和双线。

例子，

<!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>Document</title>
    <style>
        p{
            border-top-style:solid;
            border-right-style:dotted;
            border-bottom-style:dashed;
            border-left-style:double;
        }
    </style>
</head>
<body>
    <p>
        王耶浪Web开发学习笔记
    </p>
</body>
</html>

显示为，

（2）border-width 属性：

border-top-width 属性
border-right-width 属性
border-bottom-width 属性
border-left-width 属性

border-width 属性是用来设置边框宽度的，我们可以直接使用 border-width 来设置四个边框的宽度，也可以分别设置上下左右四个边框的属性。

border-top-width 属性是给上边框设置宽度的。
border-right-width 属性是给右边框设置宽度的。
border-bottom-width 属性是给下边框设置宽度的。
border-left-width 属性是给左边框设置宽度的。

例子，

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        border-style: solid;
        border-top-width: thin;
        border-right-width: medium;
        border-bottom-width: thick;
        border-left-width: 6px;
      }
    </style>
  </head>
  <body>
    <p>
      王耶浪Web开发学习笔记
    </p>
  </body>
</html>

显示为，

（3）border-color 属性：

border-top-color 属性
border-right-color 属性
border-bottom-color 属性
border-left-color 属性

border-color 属性是用来设置边框颜色的，我们可以直接使用 border-color 来设置四个边框的宽度，也可以分别设置上下左右四个边框的属性。

border-top-color 属性是给上边框设置颜色的。
border-right-color 属性是给右边框设置颜色的。
border-bottom-color 属性是给下边框设置颜色的。
border-left-color 属性是给左边框设置颜色的。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        width: 420px;
        height: 200px;
        border: 1px solid;
        border-top-color: red;
        border-right-color: green;
        border-bottom-color: blue;
        border-left-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>
      王耶浪Web开发学习笔记
    </p>
  </body>
</html>

显示为，

（4）border 属性和 padding 属性，以及使用这两个属性做练习：

border 属性
padding 属性

border 是边框属性，它是复合属性，其用法如下所示：

border: 上右下左的值;

border-top: 上边框值;
border-right: 右边框值;
border-bottom: 下边框值;
border-left: 左边框值;

padding 属性是一个复合属性，代表我们盒子模型中的填充，也就是内容区域外部的空白区域。

其使用格式如下所示：

padding: 上右下左;

padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;

例子，

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top: thin solid red;
        border-right: medium dotted green;
        border-bottom: dashed thick blue;
        border-left: double 6px yellow;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>
      王耶浪Web开发学习笔记
    </p>
  </body>
</html>

显示为，

（5）margin 属性：

margin 属性

margin 属性是用来设置元素的外边距：

使用格式：

margin: 上边距 右边距 下边距 左边距;

也可以省略写。

当左右边距值相同时，写法如下：

margin: 上边距 左右边距 下边距;

当上下边距值相同，左右边距值相同时，写法如下：

margin: 上下边距 左右边距;

当上下左右边距值均相同时，写法如下：

margin: 属性值;

从上面的内容，我们可以看出 margin 属性是个复合属性，我们可以分开设置上下左右的边距，写法如下：

/*上边距*/
margin-top: 属性值;
/*左边距*/
margin-left: 属性值;
/*右边距*/
margin-right: 属性值;
/*下边距*/
margin-bottom: 属性值;

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 100px;
        border: 1px solid blue;
      }
      p {
        width: 100px;
        height: 50px;
        background-color: darkgrey;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <p>王耶浪Web开发学习笔记</p>
    </div>
  </body>
</html>

显示为，

margin 属性来改变 p 元素相对于 div 元素的位置。修改代码如下：

p {
  width: 100px;
  height: 50px;
  background-color: darkgrey;
  text-align: center;
  margin: 25px 50px;
}

显示为，

（6）display 的常用属性：

display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。

display 属性值的说明如下表所示。

属性值	说明
block	元素以块级方式展示。
inline	元素以内联方式展示。
inline-block	元素以内联块的方式展示。
none	隐藏元素。

block 属性值可以让行内元素以块级元素的方式显示在页面上。

其使用格式如下：

display: block;

还记得前面学过的行内元素的概念吗？行内元素就是可以和其他元素同处一行的元素，例如 span 标签元素：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        display: block;
      }
    </style>
  </head>
  <body>
    <span>王耶浪</span><span>Web开发学习笔记</span>
  </body>
</html>

显示为，

原本 span 标签是行内元素，却因为设置 display: block; 导致「王耶浪」与「Web开发学习笔记」分开了。

inline 属性值可以让像 div 这样的霸道块，接纳其他元素来自己的地盘。

其使用格式如下：

display: inline;

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        display: inline;
      }
    </style>
  </head>
  <body>
    <div>王耶浪</div>
    <div>Web开发学习笔记</div>
  </body>
</html>

显示为，

块内元素和行内元素有其独特的优势，在某些情况下，我们想让一个元素既具有块内元素的特点，又具备行内元素的特点。这就要请出 inline-block 属性值来施展这个魔法了。

其使用格式如下：

display: inline-block;

哪些情况下可以用到这个属性？

比如，用 a 标签来实现导航的时候，a 标签可以让元素在一行显示，但若想给每个 a 标签加上高和宽时发现没有任何效果。这时用 display: inline-block，a就具备块的特性了。

例子,

在线咨询

上一篇：10个对web开发人员有用的HTML文件上传技巧
下一篇：写个网页更简单了！让AI根据手绘原型生成HTML - 教程+代码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5网页设计制作作业-环境保护组织HTML5网站模板

网页设计运行效果图

网站首页HTML代码

网页设计成品获取：

您的项目需求