基本网页编程界面

最新推荐文章于 2023-09-05 15:31:02 发布
最新推荐文章于 2023-09-05 15:31:02 发布
阅读量3k 收藏 8
点赞数 2
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42701829/article/details/81067259
版权

 

一、实验目的

1、掌握HTML标记语言、CSS样式的综合使用。

2、理解JavaScript的基本用法。

3、熟悉Web编程的调试模式。

3、能够使用HTML+CSS+JavaScript编写静态页面。

二、实验任务

设计编写一个如下的静态页面。功能要求：点击不同的标签，中间的内容处会出现不同内容。美观要求：布局恰当、段落间隔合理，字体、大小、背景图片、显示内容均不限，网页表现美观即可。

三、实验要求

1、使用Visual Studio作为编程工具。

2、js代码可以使用JavaScript和jQuery，推荐使用jQuery。

3、实验上机前，根据实验指导书，提前预习。

3、实验上机结束后，撰写实验报告，在word中记录实验的步骤，包括实现思路、程序设计及实现结果

四、实验内容

1.新建不同的html、css、js文件用于存放搭建的基本界面和界面的样式

2.搭建基本界面并引用外部样式

<!DOCTYPE html>

<html lang="zh-cn">

<meta charset="utf-8">

<head>

<title>webgis</title>

<script src="fun.js" type="text/javascript"></script>

<head>

    <title>webgis</title>

    <link rel="stylesheet" href="style.css"/></head>

<body>

</body>

</html>

3.设计界面

（1）根据图片分析界面内容

（2）利用div设置不同的块，存放不同的内容

4.通过代码添加内容

（1）头部代码（包括标题以及导航部分）

  1. 通过P标签添加不同的导航文字，同时添加onclick点击事件，为后面点击切换js功能做准备。

具体代码如下所示：

<div align="center">

    <div id="top"><h1 >清风家园</h1></div>

        <p id="s1" style="display:inline-block"> <a οnclick="showP1()">古典散文</a></p>

        <p id="s2" style="display:inline-block"> <a οnclick="showP2()">现代诗歌</a></p>

        <p id="s3" style="display:inline-block"> <a οnclick="showP3()">唐诗精品</a></p>

        <p id="s4" style="display:inline-block"> <a οnclick="showP4()">外国佳作</a></p>

        <p id="s5" style="display:inline-block"> <a οnclick="showP5()">补充信息</a></p>

</div>

（2）中间部分代码（包括图片以及文字）

  1. 通过相对路径引用图片，方便在不同的设备上使用。同时通过%设置图片的大小，使其可以跟随浏览界面的大小变换大小。
  2. 设置不同的文字块，并为其添加id，方便后面的点击调用。

具体代码如下所示：

<div>

    <div><img src="image\2.jpg" width="28%" height="54%" align="left"></div>

    <div><img src="image\2.jpg" width="28%" height="54%" align="right"></div>

    <div>

        <div><p id="x1">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp又叫“四六文”，这种文体，四字、六字句相间，起源于汉魏，形成于南北朝，盛行于隋唐。句式迁就，文中堆砌辞藻，常影响内容表达。唐朝韩愈、柳宗元提倡古文运动后，骈文逐渐衰落。其中也不泛名篇佳作。著名的有南朝吴均写的《与朱元思书》，唐王勃写的《滕王阁序》、刘禹锡写的《陋室铭》。</p> </div>

        <div><p id="x2">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp现代诗也叫“白话诗”，最早可追源到清末，是诗歌的一种，与古典诗歌相比而言，虽都为感于物而作，但一般不拘格式和韵律。 <br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp现代诗形式自由，意涵丰富，意象经营重于修辞运用，完全突破了古诗“温柔敦厚，哀而不怨”的特点，更加强调自由开放和直率陈述与进行“可感与不可感之间”的沟通。</p></div>

        <div><p id="x3">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp唐诗是中华民族最值得宝爱最应当世代传承的一宗珍贵的精神财富。在那数逾五万的诗歌海洋中，可谓是满目珠贝，美不胜收。唐代初、盛、中、晚的时代风貌、社会风情，唐人的人生意识、生命追求、生活与审美的体验，一句话，他们的喜、怒、哀、乐和酸、甜、苦、辣，无不真实而动人地熔铸进诗的高唱之中：曲曲歌诗，给诗的海洋造成无比旖旎的风光。</p> </div>

        <div><p id="x4">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp奠泊桑，法国批判现实主义作家，著有300 篇短篇和长篇小说，代表作有《羊脂球》、《俊友》等，课文收有《项链》，《我的叔叔于勒》等。&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp莎士比亚，英国文艺复兴时期伟大的剧作家和诗人。流传剧本37 部，长诗两首，十四行诗154 首，代表作品有《罗密欧与朱丽叶》、《哈姆雷特》、《奥赛罗》、《李尔王》等。 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp契诃夫，19 世纪末期俄国杰出的批判现实主义作家，举世闻名的短篇小说巨匠和著名的剧作家，代表作有短篇小说《套中人》、《变色龙》、《哀伤》、《苦恼》、《万卡》等，剧本《万尼亚舅舅》、《伊凡诺夫》、《海鸥》、《樱桃园》等。 </p> </div>

        <div><p id="x5">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp上述内容如有问题请联系：1111111涉及侵权请联系：2222222</p></div>

</div>

</div>

（3）尾部代码（含个人信息）

  1. 包括班级、姓名、学号

<div id="footer">

    <div>个人信息： </div>

</div>

5.添加样式

（1）适用于真个模块，此处将显示的背景设置为蓝色

#all

    {background-color:#CCFFFF;}

（2）最顶端模块的样式

#top

    {

        text-align:center;

        /*background-color:#CCFFFF;*/

        }

（3）底部模块的样式

#footer

    {

    position: relative;

    margin-top: -150px; /* footer高度的负值 */

    text-align:center;

    line-height:50px;

    clear:both;

    background-color:#CCFFFF;

    }

（4）不同文字部分的样式

#x1{

    display:none;

    padding-top:15px;

    /*background-color:#FFFFFF;*/

    width:44%;

    height:54%;

    margin:0 auto;

    text-align:left;

    }

 

#x2{

    display: none;

    padding-top:15px;

    /*background-color:#FFFFFF;*/

    width:44%;

    height:54%;

    margin:0 auto;

    text-align:left;

    }

#x3{

    display: none;

    padding-top:15px;

    /*background-color:#FFFFFF;*/

    width:44%;

    height:54%;

    margin:0 auto;

    text-align:left;

    }

#x4{

    display: none;

    padding-top:15px;

    /*background-color:#FFFFFF;*/

    width:44%;

    height:54%;

    margin:0 auto;

    text-align:left;

    }

#x5{

    display: none;

    padding-top:15px;

    /*background-color:#FFFFFF;*/

    width:44%;

    height:54%;

    margin:0 auto;

    text-align:left;

    }

6.添加功能

  1. 点击不同文字时，会显示相应的文字，隐藏其余文字。

function showP1() {

    document.getElementById("x1").style.display="block";

    document.getElementById("x2").style.display = "none";

    document.getElementById("x3").style.display = "none";

    document.getElementById("x4").style.display = "none";

    document.getElementById("x5").style.display = "none";

    }

function showP2() {

    document.getElementById("x1").style.display= "none";

    document.getElementById("x2").style.display = "block";

    document.getElementById("x3").style.display = "none";

    document.getElementById("x4").style.display = "none";

    document.getElementById("x5").style.display = "none";

    }

function showP3() {

    document.getElementById("x1").style.display="none";

    document.getElementById("x2").style.display = "none";

    document.getElementById("x3").style.display = "block";

    document.getElementById("x4").style.display = "none";

    document.getElementById("x5").style.display = "none";

    }

function showP4() {

    document.getElementById("x1").style.display="none";

    document.getElementById("x2").style.display = "none";

    document.getElementById("x3").style.display = "none";

    document.getElementById("x4").style.display = "block";

    document.getElementById("x5").style.display = "none";

    }

function showP5() {

    document.getElementById("x1").style.display="none";

    document.getElementById("x2").style.display = "none";

    document.getElementById("x3").style.display = "none";

    document.getElementById("x4").style.display = "none";

    document.getElementById("x5").style.display = "block";

    }

7.运行结果

 

 

 

qq_42701829
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
面向对象方式编程前端页面（4）多弹层窗口管理
gllxbc的博客
06-03 380
　　前面页面模拟弹窗用得比较多的方法是用绝对定位的DIV模拟，修改其z-index为一个较大的值，覆盖当前页面。如果需要弹出多个弹层，如何进行管理？
电脑如何进入编程界面
02-01 1万+
1、现在的很多编程工具都是写代码，编译运行在一个程序窗口里的； 　　2、那就是所谓的IDE（集成开发环境）。 　　3、安装了开发工具后，就有这样的一个程序，启动程序也就进入了编程界面。 　　例如java编程开放界面： 　　1、只要在电脑安装JBUILD或者ECLIPS就可以。 　　2、要在电脑上编程，先装JDK，再配置下PATH=“”，加上JDK的LIB文件夹目录； 　　3、然后就可以用记事本啊什...
程序设计(网页制作)基础
Y2483490891的博客
03-29 3338
计算机只识别0与1构成的指令，与人类沟通所使用的语言相差甚远，如果直接使用0-1向计算机发号施令，是一种非常抽象又难以理解的过程，为了降低人与计算机的沟通速度，人们发明了一种由生活中常用组合轻而易举的编写出功能繁琐的程序，我们将这样的指令称为程序设计语言。PIXI.js是一个js文件，内部提供了很多的js工具库，可以在网页中引入，pixi.js使用PIXI提供的工具库，用更简短的实现比较复杂的效果。position.text = "x: "+pos.x+"坐标”，y: "+pos.y+"坐标";
Java图形化界面编程超详细知识点(5)——Swing编程
热门推荐
m0_66908465的博客
04-05 1万+
本篇文章主要介绍Java图形化界面编程中Swing类库的详细知识点总结，方便大家在图形化界面编程时快速找到自己所需要的方法，希望对大家完成课设有所帮助。
Java 图形化界面编程(Swing)入门实例
爪白白的个人博客
11-22 1万+
入门 package swing; import javax.swing.*; public class Demo { public static void main(String[] args) { // 2. 创建中间容器（面板容器） JPanel panel = new JPanel(); // 创建面板容器，使用...
JSP网页编程
12-22
【JSP网页编程】知识点详解 JavaServer Pages（JSP）是一种基于Java技术的网页编程方式，它使得开发者能够在HTML页面中嵌入Java代码，从而实现动态网页的创建。JSP的设计目标是简化Web应用程序的开发，将界面设计与...
C#实现简单的登录界面
09-03
在C#编程中，创建一个简单的登录界面是常见的需求。这个过程涉及到UI设计和事件处理，通过Visual Studio IDE可以轻松实现。下面我们将详细讲解如何使用C#实现两个不同级别的登录界面示例。 首先，我们从最基础的...
JSP网页编程_幻灯片
11-27
JSP网页编程 JSP（JavaServer Pages）是一种基于Java技术的网页编程语言，主要用于开发基于Web的应用程序。JSP技术可以将Java代码和HTML代码混合在一起，方便开发者快速开发网页应用程序。 JSP结构 JSP文件由两...
网页编程设计基础大全
01-19
网页编程设计基础是构建网页和交互式用户界面的基础，涵盖了HTML、CSS以及JavaScript等多个关键领域。HTML（Hyper Text Markup Language）是网页的核心，用于描述网页结构。以下将详细阐述这些基础知识： 1. **HTML...
Java图形用户界面编程.pdf
10-04
1. Java 图形用户界面编程的基本概念 * Applet：Java Applet 是一种小型的 Java 程序，可以运行在网页中，提供了图形用户界面的交互功能。 * AWT：Abstract Window Toolkit，Java 语言中的图形用户界面组件库，提供...
网页编程和设计（三）| CSS
最新发布
weixin_65180200的博客
09-05 289
CSS作为网页编程和设计中必不可少的技术之一，对于网页的外观和样式起着至关重要的作用。本博客将深入介绍CSS的基础和进阶特性，并探索其在网页编程和设计中的广泛应用。我们将涵盖选择器、盒模型、布局、响应式设计、动画效果等方面的内容。同时，我们还将分享实际案例和最佳实践，帮助你构建出现代化、响应式和美观的网页设计。无论你是初学者还是有经验的开发者，本文都将为你提供有关CSS的全面了解，并帮助你创建出独具风格的网页设计。
3.2JavaScript网页编程——JavaScript网页编程基础
lanmy_dl的博客
10-13 1637
特殊的几个为假的：undefine、null、0、false、‘’ 这五个和&&直接不用判断后面 和 ||直接看后面，（nan是非数值，所以不考虑，一般也可以暂且看做false，在if条件里面也是），并返回该数组的新长度arr.unshift(‘ewer’,‘rewt’)，添加之后是[‘ewer’,‘rewt’,…prompt()的获取输入默认是字符串类型，可以+prompt()获取就是数字类型了，括号里面可以加提示字符串。前面括号是定义，传入的函数是形参，后面的括号是调用执行，里面是实参。
网页编程和设计 HTML5
张锦的博客
05-15 527
仅为个人学习使用。
0基础学习网页结构编程
weixin_48060856的博客
11-18 599
书写位置：在html文件外，新建一个.css文件，在css文件里面通过选择器对应的html结构，在花括号里面书写css样式，然后在head标签里面写一个link标签将对应的css文件引入到html文件内。书写位置：在head标签内部，写一个style标签，通过选择器选中对应的html结构，在花括号里面书写css样式，可以写多组样式，样式之间用；通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，title属性（鼠标放上去显示）后代选择器：通过指定的祖先元素找到指定的后代元素。
网页编程入门应该首先学些什么
xiaoweids的博客
09-11 3099
③当然，开发工具、数据库和服务器这三个部分得根据学的动态语言来选择，比如动态语言和数据库可以选择asp和access或php和mysQL等。①组包：指按照协议把零散的数据或报文按照组合起来，实际应用中，比如在c++编程中，往往定义一种新的数据类型用来存储数据包的结构；②还有php、jsp这两种动态代码，和html有着很好的兼容性，基本学会掌握以后就可以去找工作了；①Java sockets：Java应用程序和网络协议的接口，提供若干个类的定义。①据了解，html属于静态代码，是网页编程的基础。
HTML+CSS写一个简单的网页界面
qq_47560372的博客
08-04 3328
学习了HTML和CSS入门的基本命令后，写出来一个简单的登录网页界面，可以跳转、登录。
网页编程----HTML网页编程
Mr_huang的博客
08-01 9721
网页编程设计（HTML） ​ 目前软件行业大多数的项目都是基于 B/S 架构，即在浏览器端实现效果展示。网页编程也是每个程序员必懂的技能。本阶段课程主要讲解 HTML5、CSS3 和 JavaScript 语言以及 Jquery。对于 JAVA 程序员来说，不需要像前端程序员那样精通这部分内容，但是需要做到熟悉。 第一节：互联网的三大基石 1.1 概念 HTML(Hyper Text Markup...
网页编程实习生实习内容
05-26
作为网页编程实习生，你的实习内容可能会因公司和实习计划而异。以下是一些可能包括在你的实习中的内容： 1. HTML和CSS基础：了解HTML和CSS语法及其用法，掌握网页标记和样式的基础知识。 2. JavaScript编程：学习JavaScript编程语言，掌握DOM操作和事件处理等基础知识。 3. 网页设计和开发：了解网页设计和开发的基本原理，包括响应式设计、用户体验和界面设计等。 4. 框架和库：学习使用流行的前端框架和库，如React、Angular和Vue等。 5. 数据库和后端开发：了解基本的后端开发知识和数据库知识，如Node.js和MongoDB等。 6. 项目实战：参与公司项目的开发和维护，了解团队协作和项目管理流程。 总之，网页编程实习生的实习内容包括了从基础到实战的全方位学习和实践，旨在培养你成为一名具有实际开发能力的前端工程师。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值