CSDN C1 认证 任务三 -------------web基础与布局

最新推荐文章于 2023-11-13 10:24:13 发布
最新推荐文章于 2023-11-13 10:24:13 发布
阅读量253 收藏 1
点赞数 1
分类专栏： 杂谈 文章标签： html css js c1认证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51111980/article/details/117134765
版权

文章目录

一、任务一、任务二(略)

任务一、任务二主要是引导学生对前端三驾马车进行初识，在此不过多展示任务的完成过程，我们直接来看拓展任务。

二、拓展任务 ： CSS盒模型

据说要实现这样的界面？

效果图

在这里插入图片描述

在这里插入图片描述
我主要是用position来做的。
下面附上源代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型布局</title>
    <style>
        html,body{
           width : 100%;
           height : 100%;
        }
         html {
           border-width : 5px;
           border-color : rgb(169,169,169);
           border-style: solid;
        }
        body {
            background-color: rgb(251,220,155);
        }
        .box1 {
            width : 25%;
            height : 280px; 
            font-size: 25px;
            margin-top: 25px;
            text-align: center;
            line-height: 280px;
            margin-left: 35px;
            color : white;
            background-color: rgb(197,208,142);
        }
        .box2 {
            position : absolute;
            font-size: 25px;
            color : white;
            text-align: center;
            top : 35%;
            margin-left: 35px;
            width : 25%;
            height : 590px;
            line-height: 590px;
            background-color: rgb(197,208,142);
        }
        .box3 {
            position : absolute;
            top : 28px;
            left : 550px; 
            font-size : 25px;
            color : white;
            width : 1270px;
            height : 362px;
            line-height: 362px;
            text-align: center;
            background-color: rgb(197,208,142);
        }
        .box4 {
            position : absolute;
            left : -50px; 
            top : -362px;
            width : 572px;
            height : 488px;
            font-size : 25px;
            color : white;
            line-height: 462px;
            text-align: center;
            background-color: rgb(197,208,142);
        }
        .box5 {
            position : absolute;
            left : 1200px; 
            top : 420px;
            width :  620px;
            height : 230px;
            font-size : 25px;
            color : white;
            text-align: center;
            line-height: 230px;
            background-color: rgb(197,208,142);
        }
        .box6 {
            position : absolute;
            left : 1200px; 
            top : 676px;
            width :  620px;
            height : 230px;
            font-size : 25px;
            color : white;
            text-align: center;
            line-height: 230px;
            background-color: rgb(197,208,142);
        }
        .box7 {
            position:absolute;
            top : 120px;
            left : 600px;
            width : 250px;
            height : 200px;
            line-height: 200px;
            text-align: center;
            font-size: 25px;
            color:white;
            background-color: rgb(242,163,99);
        }
        .box8 {
            position: absolute;
            top : -60px;
            left :1500px;
            width : 250px;
            height : 200px;
            line-height: 200px;
            text-align: center;
            font-size: 25px;
            color:white;
            background-color: rgb(242,163,99);
        }
        .box9 {
            position: absolute;
            top : 780px;
            left :600px;
            width : 250px;
            height : 200px;
            line-height: 200px;
            text-align: center;
            font-size: 25px;
            color:white;
            background-color: rgb(242,163,99);
        }
    </style>
</head>
<body>
    <div class = "box1">1</div>
    <div class = "box2">2</div>
    <div class = "box3">3</div>
    <div class = "box9">9<div class ="box4">4</div></div>
    <div class = "box5">5</div>
    <div class = "box6">6</div>
    <div class = "box7">7</div>
    <div class = "box8">8</div>
</body>
</html>

三、自测

  1. HTML5为了使img元素可拖放，需要增加什么属性?
draggable = "true";
  1. HTML5哪一个选择器可以选择一个无时区的日期选择器？

input datetime-local类型

  1. CSS盒子模型中 Margin Border Padding都是什么意思？

margin外边距（不同容器之间的距离)，border边框，padding内边距（容器内元素距边框的距离）

  1. 至少说出5种常见的HTML事件

onclick鼠标点击事件 onfocus元素获取焦点事件 onblur失焦事件 onkeydown 按键按下事件
onmousemove鼠标移入事件

  1. HTML的onblur和onfocus是哪种类型的属性?

窗口事件属性

  1. 怎么设置display属性的值使容器成为弹性容器？
display: flex;
  1. JavaScript中有多少种不同类型的循环？

for 、forEach、do…while、while、for…in、for…of

  1. 用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最合适?

mark标签

在森林中麋了鹿
关注
专栏目录
AI-GC-手把手教你写一个小说推文生成器(UI界面实现-part01)
`or 1 or 不正经の泡泡
04-22 411
小汐创作助手: 小汐创作助手 (gitee.com)为了能够快速完成页面的开发，提高开发速度降低开发成本。因此，我们整个项目，没有直接采用原来的前后端分离方案，而是直接使用streamlit完成搭建。streamlit是一款基于Python编写的前端机器学习组件库。简单高效，内置丰富的组件，同时我们也可以使用css对部分样式进行改造处理。那么很显然，我们本篇博文的目的就是如何快速来实现，我们先前预设的UI效果。首页：对话助手小说视频生成设置页面。
测试开发09---Web前端技术---HTML编程基础and编程进阶
初遇我ㄖ寸の热情呢？
04-14 896
Html5编程技术 在哪里写： 主流的IDE工具比较 在哪里看： 浏览器打开html文件 浏览器f12查看源码 HTML5语法： 主要是记住便签 比如：body就是显示在浏览器上面的内容 bgcolor就是背景颜色，这就是属性 所以说：html文档是由元素构成的，元素又是由标签加内容构成的 标签又可以带各种属性 创建第一个网页 以html为开头的， head是网页的头：是不会显示在浏览器里面的。但是对这个网页是至关重要的。 比如网页的标题是啥，网页的编码格式是啥，还有各搜索引擎哪些关键
CSDN C1 任务一 修改游戏存档 WriteUp
xiaoshu1998的博客
04-01 341
0x01 安装植物大战僵尸 在 Steam 上购买并安装 Plants vs Zombie ，先随便玩一两关 0x02 找到存档位置 退出并且回到 Steam 中，点击小齿轮 -> 管理 -> 浏览本地文件 接着点击 Steam 向上返回到 Steam 文件夹 找到 userdata\xxxxx\3590\remote 文件夹（xxxx是一串数字，似乎是 Steam ID），可以看到里面有一个 user1.dat，用 HxD 这个十六进制编辑器打开 0x03 确定关卡存储位 打开后找到
CSDN C1认证 任务四 ------- 计算机程序逻辑
在森林里麋了鹿
05-31 184
任务一 ： 实现轮播图 效果图 ： 代码 ： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <style> #box {
CSDN高校——C1任务01—修改游戏存档
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
04-01 819
文章目录挑战说明内容资源（仅供参考，部分资源在外⽹）书籍链接⾃测任务完成过程绪：1.修改用户名2.修改关卡3.修改金币收获 挑战 有的玩家在玩游戏时，可能并不想⼀关⼀关地慢慢玩，⽽是希望可以直接跳到最后⼀关，或者从⾃⼰指定的关卡开始，⽐如 经典的《植物⼤战僵⼫》；再就是怎么能够「开挂」，得到更多的⾦钱、更⾼的属性、更强的道具，⽐如《三国志》系列。 任何游戏都会保存玩家的进度和数据，不管是单机游戏还是⽹络游戏都是如此。如果玩家能够知道这些存档数据保存在哪 ⾥，并且还能随意修改存档信息，那是不是就能达到「开挂
CSDN C1认证：作业1
CXNing的博客
04-06 1809
1、作业任务 1、修改《植物大战僵尸》的存档文件，将一个新用户的进度直接修改到5-2关 2、金钱（能量）直接修改到10000 2、运行环境 ①win10系统 ②《植物大战僵尸1》单机中文版 ③H小D Hex Editor 64位 注：《植物大战僵尸1》以及Hex Editor下载地址： https://pan.baidu.com/s/1Vr4UJQwpZTgRSnI1qF2U9A 提取码：lnhs 3、实现详解 3.1 实现流程 1、下载安装《植物大战僵尸1》和16进制编辑器 2、打开游戏，新建
CSDN认证C1等级考试——练习（一）
m0_51660523的博客
04-30 3266
CSDN认证C1等级考试——练习（一） 1-1 通过改变二进制编码的形式改变矩形方块组的长和宽方向上方块的个数，并且通过对应顺序的二级制编码定义每个方块的颜色（1白0黑）： 上边的例子是一个像素块用一个二进制数字（bits）表示，实际上一个像素块可以用多个bits表示： ...
Django web开发(一) - 前端
热门推荐
每天进步亿点点
11-30 6万+
Django学习 Web框架 Python语言
C站认证七天初体验-致敬CSDN
m0_54410802的博客
03-02 1867
C站认证七天初体验-致敬CSDN 上周有幸参加了CSDN软件工程师能力认证的学习和测试，从一个小白到对软件技术有了初步的认识，从计算机进制转换到网络IP组网，从HTML常用标签和样式到表单表格，通过闯关的模式，完成了C1认证的四个任务，近距离体验了一下编程的基础知识。 推出C站软件工程师能力认证的目的 当前，企业招聘软件工程师通常按照简历筛选、笔试、面试、试用期等环节筛选人才，笔试合格后主要以与应聘者面谈为主，这样的流程一是很难甄别应聘者的真实能力，二是招聘和入职后的培养成本相对较高。对软件工程师这一实践性
红队系列-shellcode AV bypass Evasion免杀合集
最新发布
aming小老弟
11-13 1504
壳就是软件所增加的保护，并不会破坏里面的程序结构，当我们运行这个加壳的程序时，系统首先会运行程序里的壳，然后由壳将加密的程序逐步还原到内存中，最后运行程序。加壳虽然对于特征码绕过有非常好的效果，加密壳基本上可以把特征码全部掩盖，但是缺点也非常的明显，因为壳自己也有特征，主流的壳如VMP, Themida等等。客户端上传特征，在云端无法检测到，则上传文件，文件通过杀软系统进行评判，得出总评分，对于无结果的，进行鉴定系统评分，总共得出结果返回给用户，并入云端库。比如可以远程读取png中的shellcode。
CSDN C1认证 任务04
ViktorChen的博客
05-26 302
CSDN C1认证 任务04
CSDN的C1-见习工程师能力认证相关知识（框架）
企业实战系列集 ●●● https://ximenjianxue.blog.csdn.net
08-19 2528
一、背景 看到CSDN有软件工程师能力认证的认证，因非编程技术出身，故从C1开始（考试费500元），看一下，需要了解掌握的知识： C1认证 考试大纲： 掌握Web基础，能识别和编写简单的Web程序： • 具备较好的程序逻辑，能像计算机一样思考 • 掌握计算机与互联网行业通识，能正常的与专业技术人员沟通 建议掌握的知识和具备的经验： • 能熟练操作计算机 • 能熟练使用搜索引擎解决学习过程中遇到的问题 考题从C认证题库中随机抽取，其中计算机通识（占比15～25%）、程序逻辑（占比20～30%）、Web基础（
CSDN C1认证 任务一 ----- 进制与信息编码
在森林里麋了鹿
05-02 718
文章目录一、任务一 用 0 和 1 绘图二、任务二 掌握进制编辑器三、任务拓展 修改游戏存档四、自测 一、任务一 用 0 和 1 绘图 1 . 登录 code.org 网站 注册登录 2 . 拖到网页最下部，点击小部件，找到Pixelation模块即为任务所在处。如图 3.打开黑白像素自由游戏，可通过image-width和image-height 来调整画布大小，也可在下方代码区通过二进制数据来确定其大小。在下方输入二进制数据时，0代表白色的像素块，1代表黑色的像素块，通过改变画布中1的位置和..
CSDN的C1考试，质数问题，一不小心就错失得分
weixin_44878554的博客
08-22 340
2021年8月22号，怀着忐忑的心参数了CSDN的C1考试，为自己能顺利通过，真没想到却栽在了质数大题上。错失10分真的好可惜。 现在回顾一下这道题目。 题目要求： 1、生成2个1~100的随机整数。（是1~50还是 1~100有点记不清楚了） 2、打印出这2个整数的所有质数。 这道题主要是考查我们对质数、JS中Math中的相关方法的理解 第一： 什么是质数？ 能被1及自身整除的数为质数 第二： 与本题相关的Math方法有哪些？ Math.random() 随机数生成方法 Ma...
CSDN C1认证 任务03
ViktorChen的博客
05-19 974
CSDN C1认证 任务03
c1（基础篇）
art8886565的博客
01-13 219
int a= 10 ; printf("a = %d\n", a); char number = 'H'; printf("number = %c\n", number); //打印字符对应的 ASCII值（十进制） printf("number = %d\n", number); short c = 12; ...
CSDN C1认证 考试流程讲解
m0_62360527的博客
06-21 2288
CSDN C1认证 考试流程讲解
CSDN-C1工程师认证任务2
hnu汐逸的博客
05-13 812
任务一:网络数据抓包 使用F12进入network里面Ctro+r得到以下内容 接下来我们改一下提交的表单,加多一段输入口令的代码然后再把刚刚那个口令写进去 任务结束!!!由于第一次搞这种东西,一开始改代码和找那个口令还费了点时间. 接下来试一下工具fiddler 直接到body里面去把值设置好,然后直接excute就能得到结果了 任务二 ...
C1见习工程师（一）
lovewangyihui的博客
01-12 692
C1见习工程师 计算机通识 进制转换 1、进制定义 二进制：是指在数学和数字电路中以2为基数的记数系统，二进制只有0和1两个数字符号，其运算规律是逢2进1，例如101101。 八进制：一种以8为基数的计数法，采用0，1，2，3，4，5，6，7这八个数字符号，其运算规律是逢8进1，例如77。 十进制：一种以10为基数的计数法，采用0，1，2，3，4，5，6，7，8，9这十个数字符号，其运算规律是逢10进1，例如88。 十六进制：一种以16为基数的计数法，采用0，1，2，3，4，5，6，7，8，9
ECharts与ECharts-gl配套版本文件解析
而 ECharts-GL 是 ECharts 的扩展版本，专注于支持地理信息系统（GIS）和三维数据可视化，提供了3D散点图、3D地图以及更加丰富的3D效果。 ECharts 的配套版本文件中的组件能够帮助开发者快速搭建起一个数据可视化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

在森林中麋了鹿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值