实验一:HTML 基础及超链接练习
实验目的:
熟悉 HTML 基础及超链接的使用
实验要求:
1、建立至少 3 个以上的网页;
2、实现任意两网页之间的跳转(建议做个导航菜单);
3、每个网页里面至少有文本内容;
4、必须有一个主题。

设计详情:

1.简单 js 语句,跳出窗口。

2.简单文字显示,利用简单css 对其样式调整。

3. 利用 div 设置菜单栏和图片图层(通过改变 div 改变图层样式),利用<ul><li>设置列表菜单栏。
4. 设置超链接。
5.利用简单js设置图片自动滑动功能

Js 解析:
 getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。
  NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由 0开始)。
  在这里表示所有由 img-slide 的图片集合。
 a[i].style.display='none';none : CSS1 隐藏对象。
 a[index].style.display='block';展开 block : 显示用该值为对象之后添加新行.

 用 for 循环实现图片循环隐藏达到图片切换功能。

实验截图:
(实验效果具体请看运行结果,此处仅放运行部分截图)

源码地址:https://github.com/Simmon2333/Web-Test(实验1)

HTML 基础及超链接练习的更多相关文章

  1. Jenkins中Jelly基础、超链接、国际化

    Jelly基础 参考:https://wiki.jenkins-ci.org/display/JENKINS/Basic+guide+to+Jelly+usage+in+Jenkins UI Samp ...

  2. HTML基础标签图片文本超链接列表表格介绍

    1.HTML基础标签图片常见代码形式<img src="图片路径地址" alt="属性名" title="占位符">常见的图片格 ...

  3. 零点起飞学HTML+CSS (顼宇峰) PDF扫描版

    零点起飞学HTML+CSS系统地介绍了网站制作中各种常用的HTML标签和CSS属性,以及网站各个部分和各种布局的实现方法,还提供了大量实例来引导读者学习,力求让读者获得真正实用的知识.本书涉及面广,从 ...

  4. 【2017-03-20】HTML基础知识、文字标记、图片标记、空格换行、表格、表格嵌套及布局、超链接

    一.HTML基础知识 HTML: 网站(站点) - 网页 网站是由一个或者多个网页组合起来的 HTML作为文件后缀名,可以把文件变为网页 HTML是一门编程语言的名字:超文本标记语言 超越了文字的范畴 ...

  5. 【2017-03-20】HTML基础知识,标记,表格,表格嵌套及布局,超链接

    一.HTML  网站(站点),网页基础知识 HTML是一门编程语言的名字:超文本标记语言 可以理解为:超越了文本的范畴,可以有图片.视频.音频.动画特效等其他内容,用标记的方法进行编程的计算机语言 基 ...

  6. HTML&CSS基础-超链接

    HTML&CSS基础-超链接 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,有三个网页 <!DOCTYPE html> <!--Docty ...

  7. [19/06/04-星期二] HTML基础_实体(转义字符)、图片标签(img)、元标签(meta)、语法规范、内联框架(iframe)、超链接

    一.实体(转义字符) 在HTML中,一些诸如<.> 就是普通的小于号和大于号不能直接使用,因为浏览可能会把它当成一个标签去解析,所以需要一些特殊字符去表示这些特殊字符, 这些字符我们称他们 ...

  8. HTML基础(四)——设置超链接的样式示例

     ***设置超链接的样式示例  a:link 超链接被点前状态 a:visited 超链接点击后状态 a:hover 悬停在超链接时 a:active 点击超链接时 在定义这些状态时,有一个顺序l v ...

  9. 富文本编辑器UEditor自定义工具栏(一、基础配置与字体、背景色、行间距、超链接实现)

    导读:UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,功能强大,可定制,是一款优秀的国产在线富文本编辑器,编辑器内可插入图片.音频.视频等. 一.UEditor自定义 ...

随机推荐

  1. JVM学习四:深入分析ClassLoader

    一.什么是ClassLoader? 大家都知道,当我们写好一个Java程序之后,不是管是CS还是BS应用,都是由若干个.class文件组织而成的一个完整的Java应用程序,当程序在运行时,即会调用该程 ...

  2. httpclient方式提交数据到服务器

    get方式: //使用HttpClient请求服务器将用户密码发送服务器验证 try{ String path = "http://192.168.13.83:8080/xuexi/serv ...

  3. Java泛型T与?

    感谢大佬:http://m.mamicode.com/info-detail-2657551.html 一.区别 单独的T 代表一个类型 ,而 Class<T>代表这个类型所对应的类, C ...

  4. Socket和数据库的一些使用---郭雪彬

    最近偶尔有时间,研究了下Socket的使用,虽然不简单,不过还是挺有意思,刚好咱们带头大哥需要我们发檄文,也罢,那就来一篇,废话不多说,直接入正题 struct sockaddr_in server_ ...

  5. 配置多个ssh公钥,解决Key is already in use

    背景:我已经有一个ssh公钥和私钥了,绑定的是公司的码云 但是绑定github是不允许的 所以我需要在生成一个公钥和私钥 第一步执行下面的命令, 至于如果生成ssh公钥点击这里 ssh-keygen ...

  6. 求解Ax=b

    一 线性方程组 Ax=b 的解释 线性方程组 Ax=b,其中矩阵 A 尺寸为 m*n, 当 A 为方正时,可使用消元法判断解是否存在并求解.当 A 为长方形矩阵时,同样可使用消元法判断解存在情况并求解 ...

  7. ELK-EFK-v7.12.0日志平台部署

    ELK和EFK是什么 ELK和EFK是四个开源产品的组合: Elasticsearch 一个基于Lucene搜索引擎的NoSQL数据库 Logstatsh 一个日志管道工具,接受数据输入,执行数据转换 ...

  8. HTML5/CSS3/JS笔记

    HTML笔记: 前言: HTML无非就是围绕标签.属性.属性值这三个词展开的. (标签也可以叫做元素, 元素的内容是开始标签与结束标签之间的内容) *常规标签 <标签 属性1="属性值 ...

  9. 乘风破浪,遇见未来元宇宙(Metaverse)之进入元宇宙世界,虚拟数字人行业洞察报告

    正值元宇宙热潮,虚拟数字人兴起 作为⼀个新兴领域,虚拟数字⼈已经引起市场和资本的⾼度关注,截⾄目前据不完全统计,全球范围已有500+虚拟数字人相关项目获得融资,融资总额超10亿美元,并且融资项目和总额 ...

  10. Django中ORM创建表关系

    一:django中ORM创建表关系 ORM创建外键关系 1.表与表之间的关系 1.表与表之间的关系 一对多 一对一 多对多 2.操作目标条件: 图书表 出版社表 作者表 作者详情表 3.外键关联 一对 ...