人机交互第四次实验课——JavaScript+网站布局

body { background: gray; text-align: center; margin: 0; padding: 0 }
#wrapper { background: #bbbbbb; width: 800px; margin: 0 auto; text-align: left }
#branding { background: #aaaaaa; height: 100px; text-align: center; position: relative }
#branding div { font-size: 2em; line-height: 70px }
#footer { background: black; color: white; height: 70px; font-size: 1.2em; text-align: center; line-height: 70px; clear: both }
#content { background: #ccccff; width: 620px; float: right }
#mainNav { width: 179px; float: left }
#mainNav ul { list-style: none; margin: 0; padding: 0; float: right }
#mainNav ul a { text-decoration: none; background: black; color: white; display: block; width: 120px; line-height: 2em; border-bottom: solid white 1px; text-indent: 1em }
#mainNav ul a:hover { color: black; background: white }
#branding ul { list-style: none; margin: 0; padding: 0; position: absolute; right: 0; bottom: 0 }
#branding ul a { text-decoration: none; background: black; color: white; line-height: 2em; border-right: solid white 1px; float: left; padding: 0 2em }
#branding li { float: left }
#branding ul a:hover { color: black; background: white }

北京联合大学

  • 首页
  • 师资队伍
  • 学院分布
  • 校园风光
  • 招生计划

内容——JavaScript学习部分

<html>
<head>
<title>LUOyu</title>
<style type="text/css">
#x1 {
background:yellow;
}
</style>

<script type="text/javascript">

function a(){
alert("hello,world");//界面输出字符

confirm("a=");//输出消息
prompt("dfkl");//用户输入

var a=10;//定义
alert(typeof(a))//打印查看类型
}

</script>
</head>
<body>
<div id="x1">dsfdsf;ds</div>

<input type="button" value="click me" onclick="a()" />

</body>
</html>

  • 智慧城市学院
  • 艺术学院
  • 城市轨道交通
  • 机器人学院
  • 商务学院

[email protected]

时间: 2024-10-09 05:59:13

人机交互第四次实验课——JavaScript+网站布局的相关文章

第四次实验课

这次的实验课是最后一次实验课,我们将上一次实验课未完成的部分继续完成,因为发现之前的一些图画得不够完善所以就进行修改,两节实验课画了一个完整的用例图,一个房屋信息顺序图.房主信息顺序图.管理员审核租金顺序图,但是后来老师在检查时觉得顺序图部分较为复杂,所以就再次进行修改.经过实验课我们对理论知识有了更加深刻的印象,能够将理论运用于实际也是上这门可的最终目的,毕竟实践才是检验真理的唯一标准.最近都在进行紧张认真的期末复习,还是有些知识点理解得不够透彻,还需要更加认真. 原文地址:https://w

JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果. 没有写JavaScript之前看到的效果: 实现后的效果图: 这个就是我们现在要做的效果. 1.背景: 我们在about.html页面中写了一个ul列表

2018-09-08 第四十、四十一次课

第四十.四十一次课 Docker入门 目录 一. docker简介 二. 安装docker 三. 镜像管理 四. 通过容器创建镜像 五. 通过模板创建镜像 六. 容器管理 七. 仓库管理 八. 数据管理 九. 数据卷备份恢复 十. docker网络模式 十一. opration not permitted 十二. 配置桥接网络 十三. Dockerfile格式 十四. Dockerfile示例(安装nginx) 十五. 用docker compose部署服务 十六. docker compose

《CSS网站布局实录》学习笔记(四)

第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一般采用横向导航. 纵向导航:纵向导航更倾向于表达产品的分类. 下拉导航:主要用于功能复杂的网站. 总的来说,导航的核心目标就是设计一个简单.快捷的操作入口,帮助用户快速地到达网站中的 内容.这里将使用CSS来对这3种常见的导航进行设计. 4.1.1 横向导航 假设目前有6个频道,如果用传统的表格式布

JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果

原文:JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果 一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面中使用ul列表显示出所有的缩略图,然后使用JavaScript,for循环检查出当前点击的是哪一张图片,最后把这张图片给显示出来. 用到三个函数:显示图片函数.创建占位符预装图片.点击显示图片

雅虎十四条 - 14个优化网站性能提高网站访问速度的技巧

14个优化网站性能提高网站访问速度的技巧 又叫“雅虎十四条”,想起一年前那个懵懂的我,大四傻乎乎的跑到大学城面试前端,那个时候以为寒暑假看了两套CSS的视频,就很牛B了,出发先还把视频温了一下,嗯嗯,这是滑动门,嗯嗯这是绝对定位,嗯嗯这是浮动清除…… 当时是彪叔面试我的,当时我还不知道那个人,全身黑漆漆的,黑色T-shirt,黑色皮肤,黑色帽子,黑色墨镜,还有点黑色胡渣的人,就是彪叔,补做了试题后支支吾吾的跟他谈了一下,发现完全不行,第一个问题是“雅虎十四条”是什么?然后我蒙了,pardon?

四大学科之实验课

人与人之间的最大差距,不是金钱,而是思维和格局:摘自三体. 今天上午,以为上四节物理课的我们来到了实验课五楼,六楼是十五班.在位子上坐的好好的,突然储著斌拿着一把卷子来了,卧室,猝不及防的考了立体几何..我们又以为wwq生病了..然后卷子一发下来王文清就来了,他还以为上物理课,结果老储还是让我们考试了,真所谓先发制人啊.卷子真难. 所以王文清一脸无奈,课又上不掉了,所以星期一又不考试了... jj生物课讲的是真慢,两节课就讲了4面纸.后来牛守志来了,讲下周六要考试.所以我今明要把化学给搞一搞补一

?十四周五次课(3月30日)

十四周五次课(3月30日) 16.4 配置Tomcat监听80端口 Tomcat默认是监听8080端口,本节学习如何配置让它监听80端口. 编辑Tomcat配置文件:vim /usr/local/tomcat/conf/server.xml 将Connector port="8080" protocol="HTTP/1.1"修改为Connector port="80" protocol="HTTP/1.1" 重启Tomcat:

数据结构与算法 第四次实验报告 图

数据结构与算法 第四次实验报告 姓名:许恺 学号:2014011329 班级:计算机14-1     中国石油大学(北京)计算机科学与技术系 1.图的定义,文件为"Graph.h" #ifndef GRAPH_H//定义头文件 #define GRAPH_H #include<string>//引入标准库中的头文件 using namespace std; const int MaxSize=12; struct ArcNode//定义边表结点 { int adjvex;/