当前位置: 首页 > news >正文

静态网页设计——环保网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)

前言

声明:该文章只是做技术分享,若侵权请联系我删除。!!
感谢大佬的视频:
https://www.bilibili.com/video/BV1BC4y1v7ZY/?vd_source=5f425e0074a7f92921f53ab87712357b

使用技术:HTML+CSS+JS(静态网页设计)
主要内容:呼吁环保。

主要内容

1、首页

首页用html标签分割成多个区域,每个区域都是用子div标签继续进行更加细致的分割,并且使用css设置样式,将每个区域想显示的效果用css设计出来,最后根据px单位进行划分,精准的分割页面格式化。
在这里插入图片描述
该页面使用了很多的li列表+css样式设计,设计出许多排列整齐的菜单按钮,可以在这里切换到网站中的其他页面当中去,属于网站的交通中转站。
在这里插入图片描述

代码:

<div class="right_nav"><ul><li><a href="http://www.chusan.com/zhongkao/56959.html" title="">因环境污染带来的危害</a></li><li><a href="https://baike.sogou.com/v89618.htm?fromTitle=%E7%8E%AF%E5%A2%83%E6%B1%A1%E6%9F%93" title="">环境污染</a></li><li><a class="" href="https://baike.sogou.com/v37146.htm?fromTitle=%E5%A4%A7%E6%B0%94%E6%B1%A1%E6%9F%93" title="">大气污染</a></li><li><a href="https://baike.sogou.com/v259400.htm?fromTitle=%E5%9C%9F%E5%A3%A4%E6%B1%A1%E6%9F%93" title="">土壤污染</a></li><li><a href="https://baike.sogou.com/v310679.htm?fromTitle=%E6%B0%B4%E4%BD%93%E6%B1%A1%E6%9F%93" title="">水体污染</a></li></ul></div>
2、环保产品

该页面使用p标签和人span标签嵌入许多文本,将关于网站主题的介绍全部写到网页中,文字排版根据字数来进行,使用不会出现不协调的情况。在文字旁边,使用img标签嵌入一些图片,使得网页整体更加的美观。
在这里插入图片描述

代码:

<div class="pros"><h2>随着更多创意环保产品的出现,你还了解哪些环保产品?</h2><ul><li><img src="images/pro.1.png"><span>纯电动车</span></li><li><img src="images/pro.2.png"><span>插电混合动力汽车</span></li><li><img src="images/pro.3.png"><span>混合动力汽车</span></li></ul></div>
3、关于我们

该页面使用了form表单技术,可以填写并且提交文字信息,密码会被****字符代替,不会泄露密码,其他的名字则直接用明文的input标签。
在这里插入图片描述

代码:

<form action="#" method="post"><table><tr><td>注册方式:<input type="radio" name="email">E-mail注册<input type="radio" name="phone">手机号码注册</td></tr><tr><td>注册邮箱:<input type="text"></td></tr><tr><td>注册手机:<input type="text"></td></tr><tr><td>登录密码:<input type="text"></td></tr><tr><td>昵称:<input type="text"></td></tr></table></form>

总结

想要看具体效果的同学,可以访问这个链接:
https://www.bilibili.com/video/BV1BC4y1v7ZY/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。

http://www.lryc.cn/news/275512.html

相关文章:

  • 【HarmonyOS】装饰器下的状态管理与页面路由跳转实现
  • 学习笔记——C++中数据的输入 cin
  • Filter Options in Select Field
  • 【React系列】Hook(二)高级使用
  • 编程笔记 html5cssjs 018 HTML颜色
  • C++_继承
  • Java-IO流-15
  • java中使用redis
  • Mongodb的可重试读操作
  • 2024年1月2日-1月7日(ue5底层渲染+ue arpg+项目需求)
  • MySQL中的视图和触发器
  • uView-UI v2.x常见问题整理
  • MBTI职业性格测试 28题(免费版)
  • Springcloud 微服务实战笔记 Ribbon
  • CSS基础笔记-04cascade-specificity-inheritance
  • Spring应用的部署与管理
  • B端产品经理学习-需求挖掘
  • 整数规划基本原理
  • 秋招复习之堆
  • 算法训练营Day36(贪心-重叠区间)
  • 如何利用Oracle官方网站不登录账号下载和安装非最新版本的JDK(版本自由选择)
  • 税法相关的基础知识
  • ListNode 2487. 从链表中移除节点,单调栈的应用
  • vue3中pdf打印问题处理
  • 如何向嵌入式设备中添加tcpdump工具
  • 伦茨科技Apple Find My认证芯片-ST17H6x芯片
  • uni-app 前后端调用实例 基于Springboot 数据列表显示实现
  • python渗透工具编写学习笔记:10、网络爬虫基础/多功能编写
  • Python武器库开发-武器库篇之子域名扫描器开发(四十一)
  • 通俗易懂的15个Java Lambda表达式案例