懒洋洋作业讲解

最新推荐文章于 2024-05-30 13:20:27 发布
最新推荐文章于 2024-05-30 13:20:27 发布
阅读量656 收藏 27
点赞数 21
文章标签： css html 前端 javascript 作业
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69311549/article/details/138567422
版权

懒洋洋作业讲解

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>

##

吹泡泡的派大星
关注
  • 21
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
大学物理C作业答案111
05-01
大学物理C作业答案
大学物理C作业答案（全）
05-01
大学物理C作业答案（全）
RVC懒洋洋模型完整版
09-05
RVC懒洋洋模型完整版
懒洋洋的
02-22
懒洋洋的
；懒洋洋.py
10-12
；懒洋洋.py
类和对象的初步介绍
fengxia110的博客
11-18 502
本篇适合Java从初学者使用，主要讲述了类的构成、如何定义一个类、类的实例化、this的引用、构造方法、封装、包的概念、构造代码块、静态代码块和对象打印的相关知识，以供使用。
从零开始自制实现正则引擎（一）---- Regex表达式转换为抽象语法树AST
Love 6's Private Blog
11-17 1730
查阅相关链接 编译原理（网易云课堂 中科大 编译原理） 如何从零写一个正则表达式引擎？（zhihu问答） 词法分析中正则表达式转换成nfa的实现（zhihu问答） 如何将正则表达式转换为NFA（博客园） 简易正则表达式引擎的实现（博客园） #include <iostream> #include <string> #include <stack> #include <unordered_map> using namespace std; #define.
算法设计与分析（整理）
Catherine_he_ye的博客
04-06 4572
2021年春-算法课 我与作业题库的爱恨情仇 我可没记住这个简朴的提交网站：http://47.99.179.148/ 有一个很蠢的坦白，我以为这个简陋的网站，提交时不会允许我们用algorithm库，所有排序我都复制一遍快排，所以当我发现可以用时，之前的冗长代码也没有继续管他，所以看上去比较蠢。 这题我愣是记住了它的题号1007，我还长江七号呢，也可能是自己傻里巴巴的，longlong可以解决的，还以为要高精，记得那天晚上弄到凌晨一点还没弄好，不过有天突然发现自己longlong其实有个笨蛋错误（清零没
计算机作文600字关于科学事业,关于科学的作文600字（精选11篇）
weixin_39809168的博客
07-21 274
关于科学的作文600字(精选11篇)在日复一日的学习、工作或生活中，大家都经常接触到作文吧，作文要求篇章结构完整，一定要避免无结尾作文的出现。那么一般作文是怎么写的呢？以下是小编帮大家整理的关于科学的作文600字(精选11篇)，欢迎阅读，希望大家能够喜欢。科学的作文600字 篇1今天，老师说要给我们看一张未来科学家的照片，大家都在一起沸沸扬扬的讨论着，有的同学问：这个科学家是谁？是哪一个国家的人？...
懒洋洋代码.dotx
12-18
懒洋洋代码.dotx
禅与维修摩托车的艺术_罗伯特-M-波西格
热门推荐
houxiaogang05
03-09 4万+
----------------------- Page 1-----------------------=================追寻生命的价值：万里任禅游作 者： 罗伯特-M-波西格一段横跨美国的大陆的摩托车之旅，一场拥有两个主讲的哲学肖陶扩，追寻自我，追寻真理，追寻生命的深层价值。本书的故事并不复杂，也没有引人入胜的情节，讲述的只是一个男人在游历中体悟生命意义、获得自我拯救的过程，但...
CSS 媒体查询 响应式开发
生产队的驴
05-27 225
媒体查询（Media Queries）是CSS3的技术，可以根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。媒体查询可以使网页在不同设备上呈现不同的样式，以实现响应式设计。
css-垂直居中的几种写法
xxuxioxx的博客
05-27 263
垂直居中的几种写法
CSS弹性布局方式，及其常用属性
最新发布
qq_62357662的博客
05-30 186
flex-grow：指定弹性项目的放大比例，默认为0，即不放大。flex-shrink：指定弹性项目的缩小比例，默认为1，即按照比例缩小。CSS弹性布局（Flexbox）是一种用于排列元素的布局模型，它提供了一套属性和值，使元素能够以弹性和自适应的方式排列在容器中。使用Flexbox布局，需要将父容器的display属性设置为flex或inline-flex，这样子元素就可以成为弹性项目。以上是一些常用的Flexbox属性及其作用，通过灵活使用这些属性，可以实现各种弹性的布局效果。
CSS 【实战】 “四合院”布局
朝阳39的博客
05-27 397
另一种方案是设置 html 和 body 高度为 100%
CSS+Canvas绘制最美星空(一闪一闪亮晶晶效果+流星划过)
misschengispink的博客
05-29 209
创建一个.html文件，复制代码进去就可以看到效果啦~满屏星星很好看，有普通粒子星星，也有一闪一闪的十字星星，不定时会有流星划过，很好看的夜空，如果想要星星变大，可自行调整粒子大小。
CSS：cursor作用
2302_79730293的博客
05-29 321
CSS：cursor作用
3D效果轮播图
weixin_46041602的博客
05-21 547
/margin;padding;box-sizing;body;;width;height;margin;溢出隐藏和3D变化会导致子元素溢出父元素盒子的问题相冲突，会导致不同图片3D效果切换无法实现*/position;;transition;imgdisplay;width;height;position;top;left;20%
python花懒洋洋
10-26
Python花懒洋洋是指使用Python语言的Turtle库绘制出来的一只可爱的懒羊羊。Turtle库是Python自带的一个绘图库，可以通过编写代码来控制一个小海龟在屏幕上绘制图形。通过使用Turtle库，可以实现各种各样的绘图效果，包括但不限于绘制几何图形、绘制动态图像等等。除了Python花懒洋洋，还可以使用Turtle库绘制出各种各样的图形，例如螺旋线、分形图形等等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值