前端入门:HTML(CSS边框综合案例)

案例:

源代码:

css-borders.html:

<body>

<div id="square"> </div>

    <br>

    <div id="triangle"> </div>

    <br>

    <div id="trapezium"> </div>

    <br>

    <div id="windmills">

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3"></div>

        <div class="box4"></div>

    </div>

</body>

border-style.css:

#square {

    width: 0px;

    height: 0px;

    border-top: 50px solid red;

    border-right: 50px solid yellow;

    border-bottom: 50px solid blue ;

    border-left: 50px solid green;

}

#triangle {

    width: 0px;

    height: 0px;

    border: 50px solid transparent;

    border-top: 50px solid red;

}

#trapezium {

    width: 0px;

    height: 0px;

    border-right: 50px solid blue;

    border-bottom: 50px solid blue ;

    border-left: 50px solid transparent;

}

#windmills {

    width: 200px;

    height: 200px;

    border: 2px solid gray;

}

#windmills div{

    float: left;

}

#windmills .box1 {

    width: 0px;

    height: 0px;

    border: 50px solid transparent;

    border-bottom: 50px solid red ;

}

#windmills .box2 {

    width: 0px;

    height: 0px;

    border: 50px solid transparent;

    border-left: 50px solid red ;

}

#windmills .box3 {

    width: 0px;

    height: 0px;

    border: 50px solid transparent;

    border-right: 50px solid red ;

}

#windmills .box4 {

    width: 0px;

    height: 0px;

    border: 50px solid transparent;

    border-top: 50px solid red ;

}

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

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

相关文章

【C语言】指针篇-深入探索数组名和指针数组(2/5)- 必读指南

&#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专栏&#xff1a; C笔记 &#x1f308;喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章目录 认识指针与数组之间的关系(涉及二级指针)**数组名****指针访问…

面试后,公司如何决定你的去留

在现代职场中&#xff0c;求职者在经历了一系列严格的面试流程后&#xff0c;往往会进入一段等待期。在这段时间里&#xff0c;他们满怀希望地等待企业的最终反馈。但有一个现象普遍存在&#xff1a;无论面试过程如何&#xff0c;最终决定权总是掌握在公司手中&#xff0c;由公…

企业常用Linux三剑客awk及案例/awk底层剖析/淘宝网cdn缓存对象分级存储策略案例/磁盘知识/awk统计与计算-7055字

高薪思维&#xff1a; 不愿意做的事情:加班&#xff0c;先例自己在利他 生活中先利他人在利自己 感恩&#xff0c;假设别人帮助过你&#xff0c;先帮助别人&#xff0c;感恩境界 awk三剑客老大 find其实也算是一种新的第四剑客 find 查找文件 查找文件&#xff0c;与其他命令…

推荐实用网站——算法可视化

网站链接 https://www.cs.usfca.edu/~galles/visualization/Algorithms.html

【设计模式】8、adapter 适配器模式

文章目录 八、adapter 适配器模式8.1 convert_lightning_to_usb8.1.1 client_test.go8.1.2 client.go8.1.3 computer.go8.1.4 adapter.go 八、adapter 适配器模式 https://refactoringguru.cn/design-patterns/adapter 通常用于老旧系统, 或第三方系统, 提供一层适配器或插件…

variant

class RTTR_API variant 对github项目rttr&#xff08;C反射库&#xff09;解析&#xff0c;链接&#xff1a;https://github.com/rttrorg/rttr namespace rttr { class variant_associative_view; class variant_sequential_view; class type; class variant; class argumen…

真实世界的密码学(四)

原文&#xff1a;annas-archive.org/md5/655c944001312f47533514408a1a919a 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第十六章&#xff1a;加密何时何地失败 本章涵盖 使用加密时可能遇到的一般问题 遵循烘烤良好的加密的要点 加密从业者的危险和责任 问候…

论文笔记:Time-LLM: Time Series Forecasting by Reprogramming Large Language Models

iclr 2024 reviewer 评分 3888 1 方法 提出了 Time-LLM&#xff0c; 是一个通用的大模型重编程&#xff08;LLM Reprogramming&#xff09;框架将 LLM 轻松用于一般时间序列预测&#xff0c;而无需对大语言模型本身做任何训练 为什么需要时序数据和文本数据对齐&#xff1a;时…

mysql一些语法记录

count: count(*) 符合条件所有行数&#xff1b; count(列名) 符合条件行数排除null; group by select sum(amount) from test where status 1 group by dept having amount > 100 顺序&#xff1a; group by 对 where过滤后的数据进行分组&#xff1b;&#xff08;分组字段…

Docker镜像下载

离线安装&#xff1a;物理传输 # 将镜像压缩成tar包 (将nginx 镜像打成tar包&#xff0c;然后拷贝到新机器) docker save -o xxxx.tar nginx:v1.0 # 新的机器加载 docker load -i xxx.tar # 在线安装&#xff1a;先上传到远程镜像仓库 docker tag nginx:v1.0 ldj/nginx:v1.0 #登…

Oracle数据库从入门到精通系列之二十三:卸载Oracle数据库19c详细步骤

Oracle数据库从入门到精通系列之二十三:卸载Oracle数据库19c详细步骤 一、停止监听二、删除安装目录三、删除/usr/local/bin/文件夹下内容四、删除配置文件五、卸载安装的软件包六、卸载相关的补充命令一、停止监听 lsnrctl stopLSNRCTL for Linux: Version 19.0.0.0.0 - Pro…

力扣OJ(3000+)

目录 3018. 可处理的最大删除操作数 I 3032. 统计各位数字都不同的数字个数 II 3062. 链表游戏的获胜者 3018. 可处理的最大删除操作数 I 区间DP 3032. 统计各位数字都不同的数字个数 II 给你两个 正整数 a 和 b &#xff0c;返回 闭区间 [a, b] 内各位数字都不同的数字个…

Oracle 窗口函数 02 (排名问题)

目录 一、什么是窗口函数 1.语法里每部分表示什么 2.窗口函数可以解决这几类经典问题 二、排名问题 1.学生成绩排名 2.去除最大值、最小值后求平均值 知识点&#xff1a; 一、什么是窗口函数 窗口函数也叫作OLAP&#xff08;Online Analytical Processing&#xff0c;联…

正确的原因是错误的:可解释的 ML 技术能否检测出虚假相关性?

Right for the Wrong Reason: Can Interpretable ML Techniques Detect Spurious Correlations? 摘要 虽然深度神经网络模型提供了无与伦比的分类性能&#xff0c;但它们容易在数据中学习虚假相关性。如果测试数据与训练数据来自相同的分布&#xff0c;则使用性能指标很难检…

mysql基础20——数据备份

数据备份 数据备份有2种 一种是物理备份 一种是逻辑备份 物理备份 物理备份 通过把数据文件复制出来 达到备份的目的 用得比较少 逻辑备份 逻辑备份 把描述数据库结构和内容的信息保存起来 达到备份的目的 是免费的 数据备份工具 mysqldump &#xff08;3种模式&#x…

监控指定任务,结束钉钉通知

使用场景&#xff1a;你已经运行了一个长时间任务&#xff0c;临时希望在任务结束后通知&#xff0c;这种情况下可以循环监控指定的PID号&#xff0c;如果PID消失了就发送通知&#xff0c;逻辑简单粗暴&#xff0c;但胜在好用 本篇内容为shell 调用钉钉通知后续 #!/bin/bash s…

【蓝桥杯2025备赛】集合求和

集合求和 题目描述 给定一个集合 s s s&#xff08;集合元素数量 ≤ 30 \le 30 ≤30&#xff09;&#xff0c;求出此集合所有子集元素之和。 输入格式 集合中的元素&#xff08;元素 ≤ 1000 \le 1000 ≤1000&#xff09; 输出格式 s s s 所有子集元素之和。 样例 #1 …

Java面试八股之marshalling和demarshalling

marshalling和demarshalling Marshalling&#xff08;序列化&#xff09;是将内存中的对象状态转化为适合传输或存储的格式&#xff08;如字节流、JSON、XML&#xff09;&#xff0c;以便进行网络通信、持久化存储或跨平台/语言交互操作。Demarshalling&#xff08;反序列化&a…

AI大模型探索之路-实战篇3:基于私有模型GLM-企业级知识库开发实战

文章目录 前言概述一、本地知识库核心架构回顾&#xff08;RAG&#xff09;1. 知识数据向量化2. 知识数据检索返回 二、大模型选择1. 模型选择标准2. ChatGLM3-6B 三、Embedding模型选择四、改造后的技术选型五、资源准备1. 安装git-lfs2. 下载GLM模型3. 下载Embeding模型 六、…

开源啦!一键部署免费使用!Kubernetes上直接运行大数据平台!

市场上首个K8s上的大数据平台&#xff0c;开源啦&#xff01; 智领云自主研发的首个 完全基于Kubernetes的容器化大数据平台 Kubernetes Data Platform (简称KDP) 开源啦&#x1f680;&#x1f680; 开发者只要准备好命令行工具&#xff0c;一键部署 Hadoop&#xff0c;Hi…