懒洋洋作业讲解

懒洋洋作业讲解

e5b501284d7b0815dd9c73e683819fc

环境配置

1.软件下载:DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

2.软件介绍

HBuilder是由DCloud(数字天堂)推出的一款面向HTML5的Web开发集成开发环境(IDE)。它的主要特点和功能包括:

  1. 多语言支持:HBuilder支持Java、C、HTML、Web和Ruby等编程语言,为开发者提供了强大的代码编辑能力。

  2. 高效的编码辅助:HBuilder提供完整的语法提示和代码输入法,大幅提升HTML、JavaScript、CSS的开发效率。它还具有代码块功能,帮助开发者快速编写代码。

  3. 基于Eclipse平台:HBuilder基于Eclipse,因此能够兼容Eclipse的插件,这使得它能够扩展多种功能来满足不同开发需求。

  4. 跨平台兼容性:HBuilder X作为其最新版本,是一款轻量级、高效能的IDE,它支持多平台,并提供一键式应用打包等功能,非常适合用于开发Web应用、微信小程序和APP等项目。

  5. 开源软件与社区支持:HBuilder X作为开源软件,拥有强大的技术团队和社区支持。在使用过程中,如果遇到问题,开发者可以寻求社区的帮助,并且鼓励更多的开发者参与到HBuilder X的开发和优化中来。

  6. 易用性:HBuilder X的安装过程十分简单。用户只需访问官方网站下载对应的安装包,解压后即可直接使用,无需复杂的安装步骤。

综上所述,HBuilder是一个功能全面、高效且易于上手的前端开发工具,适用于各种Web项目的开发。它不仅提高了开发效率,还通过社区支持促进了技术的共享与创新。

html、css、JavaScript

HTML 是用于创建网页结构的标记语言,CSS 是用于控制网页样式和布局的样式表语言,而 JavaScript 是一种编程语言,用于实现网页的交互功能。

示例代码:

HTML 代码:

 <!DOCTYPE html><html><head><title>My Website</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body><h1>Welcome to My Website</h1><p id="message"></p><button οnclick="showMessage()">Click me</button><script src="script.js"></script></body></html>

CSS 代码(styles.css):

 body {background-color: lightblue;}​h1 {color: white;text-align: center;}​#message {font-size: 20px;color: red;}

JavaScript 代码(script.js):

 function showMessage() {document.getElementById("message").innerHTML = "Hello, World!";}

这个示例中,HTML 用于创建网页结构,包括标题、段落和按钮等元素。CSS 用于设置网页的样式,例如背景颜色、文本颜色和字体大小等。JavaScript 用于实现网页的交互功能,当用户点击按钮时,会调用 showMessage 函数,将段落中的文本内容设置为 "Hello, World!"。

整体要求

  1. 参照样张图片,使用素材,完善已有页面index.htmml。

  2. 文字素材及图片素材均可在试题文件夹下找到 要求制作页面时使用CSS规则来设定样式,采用内部样式表来保存CSS规则。

详细要求

  • 设置网页文字默认为微软雅黑,大小为14px。

     body {font-family: "微软雅黑";font-size: 14px;}

  • 修改标题栏#header样式,增加背景颜色为#000,文字颜色为#fff属性,右上角插入导航栏,如图所示,为导航栏中的每一项添加空的超链接,超链接文字为白色,无下划线,访问过的超链接文字,仍然为白色。

     <div id="header"><h1>网站标题</h1><div class="nav"><a href="#">导航1</a><a href="#">导航2</a><a href="#">导航3</a></div></div>​<style>#header {background-color: #000;color: #fff;position: relative;}#header a {color: #fff;text-decoration: none;}#header .nav {position: absolute;right: 0;top: 0;}#header .nav a {margin-right: 10px;}</style>

  • 在页面灰色区域插入jmages文件夹下pic.jpg,图片大小为宽度990px,高度300px。

     <div id="content"><div class="image"></div></div>

  #content .image {width: 990px;height: 300px;background-image: url("images/pic.jpg");}

  • 在标“此处插入两个并列的div"的区域插入两个并列显示的间隔为50px的div,其样式分别命名为#login,#intro。(10分)

      <div class="login"><!-- 登录表单 --></div><div class="intro"><!-- 插入文字素材中的文字 --></div>
     #content .login,#content .intro {display: inline-block;vertical-align: top;}

  • 定义#login样式为竞度:300px高度:300px,左内边距为:20px,边框为颜色为#333的宽度为1的实线,并插入表单,实现样图所示登录界面。(20分)

     #content .login {width: 300px;height: 300px;padding-left: 20px;border: 1px solid #333;}

  • 定义#intro样式为宽度:620px 高度:300px,行高为30px,边框为颜色为#333的宽度为1的实线,并插入文字素材中的文字。

    #content .intro {width: 620px;height: 300px;line-height: 30px;border: 1px solid #333;}

  • 在网页底部插入页脚(div实现),页脚页面居中,宽度为1000px,高度100px,背景色:#333,文字水平居中显示,并插入样张所示文字,将**"替换为具体的个人信息。(10分)

    <div id="footer">页脚内容,替换为具体的个人信息。</div>
    #footer {width: 1000px;height: 100px;background-color: #333;color: #fff;text-align: center;line-height: 100px;}

整体代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>index</title><style>body {font-family: "微软雅黑";font-size: 14px;}#header {background-color: #000;color: #fff;position: relative;}#header a {color: #fff;text-decoration: none;}#header .nav {position: absolute;right: 0;top: 0;}#header .nav a {margin-right: 10px;}#content .image {width: 990px;height: 300px;background-image: url("images/pic.jpg");}#content .login,#content .intro {display: inline-block;vertical-align: top;}#content .login {width: 300px;height: 300px;padding-left: 20px;border: 1px solid #333;}#content .intro {width: 620px;height: 300px;line-height: 30px;border: 1px solid #333;}#footer {width: 1000px;height: 100px;background-color: #333;color: #fff;text-align: center;line-height: 100px;}</style>
</head>
<body><div id="header"><h1>网站标题</h1><div class="nav"><a href="#">导航1</a><a href="#">导航2</a><a href="#">导航3</a></div></div><div id="content"><div class="image"></div><div class="login"><!-- 登录表单 --></div><div class="intro"><!-- 插入文字素材中的文字 --></div></div><div id="footer">页脚内容,替换为具体的个人信息。</div>
</body>
</html>

##

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/8831.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何训练一个非常像的真人LoRA

在本篇文章中&#xff0c;我们将探索如何训练一个能够将喜爱的人物置入任何场景中并实现高度一致性的LoRA模型。借助LoRA&#xff0c;我们能够创造出极为逼真的人物图像&#xff0c;就如同我为斯嘉丽训练的LoRA模型所展示的那样。 那么&#xff0c;让我们一起深入了解如何训练L…

vue2人力资源项目3主页

主页权限验证 前置守卫开启进度条&#xff0c;后置守卫关闭进度条 import router from /router import nProgress from nprogress// 导入进度条&#xff08;模板自带&#xff09; import nprogress/nprogress.css// 导入进度条样式&#xff08;模板自带&#xff09; // 前置守…

idea配置hive

idea配置hive 今天才知道&#xff0c;idea居然可以配置hive&#xff0c;步骤如下: view -> Tool Windows -> Database Database出来了之后&#xff0c;直接配置即可

11 防火墙配置信息的认识

F1000-AK1242 防火墙配置 F1000-AK1242 防火墙的基本内容脚本 <F1000-AK1242>display current-configuration Arduino display current-configuration命令通常在网络设备的命令行界面&#xff08;CLI&#xff09;中使用&#xff0c;用于显示设备当前的配置信息。这包括…

SEQUENTIAL CONSISTENCY----SC

SC模型是最直观的memory consistency model; 什么是single core sequential? 真正的执行顺序&#xff0c;和PO的顺序&#xff0c;是相同的&#xff1b; 什么是multi core sequential consistent? the operations of each individual processor (core) appear in this seq…

Python深度学习基于Tensorflow(1)Numpy基础

文章目录 数据转换和数据生成存取数据数据变形和合并算数计算广播机制使用Numpy实现回归实例 numpy的重要性不言而喻&#xff0c;一般不涉及到GPU/TPU计算&#xff0c;都是用numpy&#xff0c;常见的np就是这个玩意。其特点就是快&#xff01;其实如果不涉及到深度学习&#xf…

【DevOps】Elasticsearch为什么需要大内存,怎么优化?

目录 一、Elasticsearch为什么需要大内存 1. 索引和搜索的高效执行 2. 缓存机制 3. 聚合操作 4. 堆内存用于 JVM 操作 5. 分片管理 6. 数据复制与高可用 7. 数据模型的灵活性 如何优化内存使用 二、优化分片减少内存占用 1. 每个分片都有独立的资源消耗 2. JVM 堆内…

HTTP常见面试题(二)

3.1 HTTP 常见面试题 HTTP特性 HTTP 常见到版本有 HTTP/1.1&#xff0c;HTTP/2.0&#xff0c;HTTP/3.0&#xff0c;不同版本的 HTTP 特性是不一样的。 HTTP/1.1 的优点有哪些&#xff1f; HTTP 最突出的优点是「简单、灵活和易于扩展、应用广泛和跨平台」。 1. 简单 HTTP…

JavaWeb_请求响应_简单参数实体参数

一、SpringBoot方式接收携带简单参数的请求 简单参数&#xff1a;参数名与形参变量名相同&#xff0c;定义形参即可接收参数。并且在接收过程中&#xff0c;会进行自动的类型转换。 启动应用程序后&#xff0c;在postman中进行测试&#xff1a; 请求成功&#xff0c;响应回了O…

需要几步申请免费SSL证书,实现网站HTTPS访问

SSL证书是一种用于在网络中提供加密通信的数字证书。它有助于保护网站数据的完整性和隐私性&#xff0c;并通过在浏览器地址栏显示“https”和绿色锁图标来增强用户信任。许多证书颁发机构&#xff08;CA&#xff09;提供免费的SSL证书&#xff0c;以鼓励更广泛的网络安全使用。…

hal_stm32_RTC函数

1设置当前时间&#xff1a; 调用 HAL_RTC_SetTime 来设置小时、分钟、秒和亚秒。 调用 HAL_RTC_SetDate 来设置年、月、日和星期。 HAL_StatusTypeDef HAL_RTC_SetTime(RTC_HandleTypeDef *hrtc, RTC_TimeTypeDef *sTime, uint32_t Format); HAL_StatusTypeDef HAL_RTC_SetDat…

一步成像:Hyper-SD在图像合成中的创新与应用

一、摘要&#xff1a; 论文&#xff1a;https://arxiv.org/pdf/2404.13686 代码&#xff1a;https://huggingface.co/ByteDance/Hyper-SD 在生成人工智能领域&#xff0c;扩散模型&#xff08;Diffusion Models, DMs&#xff09;因其出色的图像生成质量而备受关注&#xff0c;但…

itext5.5.13 PDF预览权限问题

PdfUtils.htFile.createNewFile&#xff08;&#xff09; createNewFile 创建文件错误错误原因方式一方式二实例代码-生成PDF表格数据 createNewFile 创建文件错误 ht getResourceBasePath() "\\templates\\ht.pdf"; htFile new File(ht);代码含义是创建源文件路…

【大学物理】双语笔记

7.5 angular momentu(角动量)_哔哩哔哩_bilibili 6.4Energy in Rotation Motion 有质量有速度的物体有动能&#xff0c;是不是很有道理 international system&#xff08;from French systeme international&#xff0c;acronym&#xff0c;SI&#xff09;of ineria kg*m^2 转…

Google Earth Engine——删除和复制指定ASSETS中的文件信息(JavaScript 和python版本)

如果你和我一样,有大量资产上传到 Earth Engine。随着上传的资产越来越多,管理这些数据变得相当繁琐。Earth Engine 提供了一个便捷的命令行工具,可以帮助进行资产管理。虽然命令行工具非常有用,但在涉及批量数据管理任务时,它就显得力不从心了。 如果你想重新命名一个图…

上位机图像处理和嵌入式模块部署(树莓派4b和mcu的分工与配合)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 树莓派4b从广义上来说&#xff0c;它本身就是一个mini小电脑。我们需要什么软件&#xff0c;就可以apt install去下载即可。这和之前嵌入式linux开…

8G显存玩转AI换衣IDM-VTON(支持MAC、WIN)

最近AI换衣项目IDM-VTON挺火哈&#xff0c;我也火速体验了一把。效果也是很不错&#xff0c;相对OOTDiffusion的换衣效果提升了不少。 那部署的时候遇到比较大的问题是高显存占用&#xff01;太吃配置了&#xff01;24G的显卡占用了18G左右。于是花了点时间改成 使用了低精度模…

Python图形界面(GUI)Tkinter笔记(二):标签Label的基本应用

Label()方法用于在根窗口(根窗口可以想象成一个容器,一个画布,一个电路板;而标签Label()等等这些方法也叫控件或元件或组件,它们可以想象成装进容器的物品,或是想象成画在画布上的图形,或是想象成焊接在电路板上的电子元件)内建立“文字”或“图像”标签。 其余笔记:…

Wireshark Lua插件开发实战:应对TCP粘包问题

0. 概述 Wireshark提供了tcp_dissect_pdus()函数&#xff0c;可以帮助用户处理TCP粘包问题 1. 粘包问题的基本原理 TCP粘包问题本质上是数据包拼接和拆分的问题。当多个应用层数据包被封装成同一个TCP段时&#xff0c;就发生了粘包现象。在解析时&#xff0c;我们需要将粘在…

【linux kernel】杂项(misc)设备驱动总结

文章目录 一、杂项设备简介二、杂项设备API1、注册杂项设备2、注销杂项设备3、杂项设备模块助手函数 三、杂项设备初始化四、杂项设备示例五、杂项设备和字符设备 &#x1f449;相关文件&#xff1a; drivers/char/misc.cinclude/linux/miscdevice.h 一、杂项设备简介 Linux …