牛客网DAY2(编程题)

news2024/11/24 3:14:52

圣诞节来啦!请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的:
1. "topbranch"是圣诞树的上枝叶,该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是:宽度为100px、是直线、颜色为green(未显示的边框颜色都为透明)
2. "middleBranch"是圣诞树的中枝叶,该上枝叶仅通过边框属性即可实现。边框的属性依次是:宽度为200px、是直线、颜色为green(未显示的边框颜色都为透明)
3. "base"是圣诞树的树干,该树干仅通过左外边距实现居中于中枝叶。树干的宽度、高度分别为70px、200px,颜色为gray。
注意:
1. 上枝叶、树干的居中都是通过左外边距实现的
2. 没有显示的边框,其属性都是透明(属性)
3. 仅通过border属性完成边框的所有属性设置

效果图如下

 接下来我们就来完成这个简单的圣诞树吧

第一步我们需要搭建三个盒子分别代表上枝叶中枝叶下树根的操作

        <section class="topbranch"></section>
        <section class="middleBranch"></section>
        <section class="base"></section>

接下来开始搭建样式

CSS样式

制作一个三角形我们需要让他的三条边进行隐形的操作

中枝叶的效果和上都是一样的,但是需要边框的大小即可

下面树根只需要给高宽就行了。一个简单的圣诞树就搭好了。

.topbranch {
                width: 0px;
                height: 0px;
                /*
                * TODO: 上枝叶效果
                */
                border: 100px solid green;
                float: left;
                margin-left: 100px;
                border-left-color: transparent;
                border-right-color: transparent;
                border-top-color: transparent;
            }
            .middleBranch {
                width: 0px;
                height: 0px;
                /*
                * TODO: 中枝叶效果
                */
                border: 200px solid green;
                margin-left: 10px;
                border-left-color: transparent;
                border-right-color: transparent;
                border-top-color: transparent;
                
            }
            .base {
                /*
                * TODO: 树干效果
                */
                width: 70px;
                height: 200px;
                background-color: gray;
                margin-left: 170px;
            }

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

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

相关文章

房地产行业IT运维安全就用行云管家堡垒机!

对于房地产行业而言&#xff0c;安全TI运维是构建数字化企业的核心&#xff0c;是推动其业务发展的信息化支撑体系。所以一个靠谱的IT运维安全软件非常重要。不仅可以省时省力&#xff0c;还能保障网络安全&#xff01;这里我给推荐行云管家堡垒机&#xff01; 行云管家公司介…

枚举、反射

枚举 jdk1.5之前&#xff0c;需要自己实现枚举 自己实现枚举 public class StatusEnum {private final String id;private final String code;private final String name;private StatusEnum(String id, String code, String name){this.id id;this.code code;this.name …

使用预训练的 ImageNet 模型进行图像分类

在这篇文章中,我们将学习如何使用预训练的 ImageNet 模型来执行图像分类。我们已经看到了如何训练一个简单的神经网络来对 CIFAR-10 数据集中的图像进行分类,但这是一个相对简单的任务,因为只有十个类别。另一方面,对大量对象类型进行分类将需要包含数百万个参数的更大网络…

华为OD机试真题B卷 Java 实现【字符统计】,附详细解题思路

一、题目描述 输入一个只包含小写英文字母和数字的字符串&#xff0c;按照不同字符统计个数由多到少输出统计结果&#xff0c;如果统计的个数相同&#xff0c;则按照ASCII码由小到大排序输出。 数据范围&#xff1a;字符串长度满足 1≤len(str)≤1000 。 二、输入描述 一个…

图像算法工程师岗位的基本职责范围(合集)

图像算法工程师岗位的基本职责范围 图像算法工程师岗位的基本职责范围1 职责&#xff1a; 图像内容识别、图像纹理优化方面的算法基础研发; 三维模型内容识别、三维模型优化方面的算法研发; 遥感影像处理、内容理解方面的算法研发; 以上1,2,3方面的内容可选择某一项或者多项; 可…

CodeForces..翻转魔术.[简单].[找规律]

题目描述&#xff1a; 题目解读&#xff1a; 给定由0&#xff0c;1组成的长度为n的字符串&#xff0c;执行翻转操作&#xff0c;即0变1&#xff0c;1变0&#xff1b; 判断执行一次翻转之后是否为回文。 解题思路&#xff1a; 寻找规律&#xff1a;如果翻转前已经是回文&…

这里有一个源码调试方法,短小精悍,简单粗暴,但足够好用。

文章中有这样的一段描述&#xff1a; 然后有个读者来问我&#xff1a; 是怎么把 JDK 源码中的一行代码给注释掉的&#xff1f; 这个问题确实不错&#xff0c;属于一个偶尔用一下能起到奇效的源码调试技巧。所以我决定写个文章来说明一下这个问题。 但是这个技巧确实非常的简单…

VS输出路径和生成事件

在生成时&#xff0c;常常希望输出文件夹整洁&#xff0c;因此需要设置dll或exe输出位置&#xff0c;同时也希望对一些文件做一些特殊操作 VS的 UI 常用缩写 “./”&#xff1a;代表目前所在的目录。 " . ./"代表上一层目录。 “/”&#xff1a;代表根目录。 生成…

【图像分割】SAM:Segment Anything论文学习V1

论文:2304.Segment Anything 代码&#xff1a; https://github.com/facebookresearch/segment-anything 官网与demo&#xff1a;https://segment-anything.com/ 概要&#xff1a;SAM是什么&#xff1f; 是通用的分割模型 可以通过 模糊的点选择、文字输入、标注框对图片进行标…

Scala学习(十一)---集合高阶

文章目录 1.集合常用方法2.衍生集合3.集合的常用函数 1.集合常用方法 class Test_Func {} object Test_Func{def main(args: Array[String]): Unit {val list List(1, 2, 3, 4, 5)//定义一个List集合val set Set(6, 7, 8, 9)//定义一个Set集合//1.获取集合长度&#xff0c;…

Spring Boot如何与其他技术进行集成,如Spring Cloud、Spring Security、Spring Data等?

Spring Boot与其他技术集成 Spring Boot 是一个快速构建 Spring 应用程序的框架&#xff0c;它提供了自动配置和快速开发的特性&#xff0c;使得开发人员可以更加专注于业务逻辑的实现而不是搭建框架。Spring Boot 可以轻松集成其他 Spring 生态系统中的技术&#xff0c;例如 …

pnpm无法加载文件 (解决方法 )

例如&#xff1a;我现在要运行一个TS的项目&#xff0c;我的电脑上没有安装pnpm&#xff0c;导致我的vscode一直报错无法加载 Pnpm安装 npm install -g pnpm pnpm : 无法加载文件 pnpm : 无法加载文件 C:\Users\HP\AppData\Roaming\npm\pnpm.ps1&#xff0c;因为在此系统上禁…

微念“跌倒”,李子柒也吃不饱

文 | 螳螂观察 作者 | 青月 “共有从前&#xff0c;各有未来。” 杨幂官宣与嘉行传媒结束合作关系的微文&#xff0c;同样适用于现在的微念与李子柒。 李子柒与微念之间的这场MCN机构与网红IP之间由于利益分配的矛盾&#xff0c;经过500多天的博弈后&#xff0c;最终以李子柒…

2.6. Java内存管理与垃圾回收

2.6.1. Java内存模型 在Java中&#xff0c;内存被划分为以下几个区域&#xff1a; 堆&#xff08;Heap&#xff09;&#xff1a;存储对象实例和数组&#xff0c;是垃圾回收的主要区域。栈&#xff08;Stack&#xff09;&#xff1a;存储局部变量和方法调用。每个线程有自己的…

Python scapy二层、三层发送接收数据包

环境&#xff1a; Linux环境&#xff1a;安装scapy&#xff0c; 执行scapy 安装scapy yum install python3-pip (安装python3 pip) pip3 install --upgrade pip yum remove python-pip&#xff08;删除pip&#xff09; pip3 install scapy (安装scapy) 简介&#xff1a; …

【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递(5月29日论文合集)

文章目录 一、检测相关(12篇)1.1 Linear Object Detection in Document Images using Multiple Object Tracking1.2 Hybrid Energy Based Model in the Feature Space for Out-of-Distribution Detection1.3 BEV-IO: Enhancing Birds-Eye-View 3D Detection with Instance Occu…

原来你是这样的5G 一文了解亚马逊云科技的云上5G专网

根据麦肯锡公司发布的《2021年离散制造业上云调查》报告显示&#xff1a;云转型所带来的IT价值仅占其潜在价值的5&#xff05;&#xff0c;但其业务价值高达95&#xff05;。随着云计算技术的快速发展以及云的IT价值在敏捷性、弹性和经济性几个方面的充分呈现加上同5G技术和应用…

8项seo的日常工作

SEO的日常工作涵盖了一系列任务和活动&#xff0c;旨在优化网站以提高在搜索引擎中的排名和可见性。 以下是SEO的日常工作内容&#xff1a; 关键词研究和优化&#xff1a;定期进行关键词研究&#xff0c;寻找与目标受众和业务相关的热门关键词。优化网站内容、标题、元描述和链…

《Cocos Creator游戏实战》签到日历实现思路

在线体验地址 Cocos Creator | SignCalendar Cocos Store 购买地址&#xff08;如果没有显示&#xff0c;那就是还在审核&#xff09;&#xff1a; https://store.cocos.com/app/detail/4975微店购买地址&#xff1a; https://weidian.com/item.html?itemID6354270477 运行效…

【书评】《写作脑科学》杨滢(@屠龙的胭脂井)

《写作脑科学》是一本介绍写作与脑科学关系的书籍&#xff0c;作者是杨滢。 本书通过对脑科学的研究和分析&#xff0c;揭示了写作的本质和技巧&#xff0c;为写作者提供了有益的指导和启示。 本书的主要内容分为八个部分 第1章 为什么写作跟大脑有关第2章 快速写作&#xff…