一个简单的HTML文档，用于在网页上展示一个中国国旗图案

最新推荐文章于 2024-11-09 19:20:14 发布
最新推荐文章于 2024-11-09 19:20:14 发布
阅读量641 收藏 4
点赞数 19
分类专栏： html 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_76060199/article/details/142745930
版权

上述代码是一个简单的HTML文档，用于在网页上展示一个包含星星的中国国旗图案。该代码由HTML和CSS两部分组成，下面是对这两部分的详细解释说明：


  • <!DOCTYPE html>: 声明文档类型为HTML5。
  • <html lang="en">: 定义HTML文档的根元素，并设置语言属性为英语。
  • <head>: 包含文档的元数据，如字符集、视口设置和标题。
    • <meta charset="UTF-8" />: 设置文档的字符编码为UTF-8。
    • <meta name="viewport" content="width=device-width, initial-scale=1.0" />: 确保页面在移动设备上正确显示。
    • <title>Document</title>: 设置文档的标题。
  • <body>: 包含文档的可见内容。
    • <div class="flag">: 定义一个包含整个国旗图案的容器。
      • <div class="sfb"></div>: 星星的底部部分，通过CSS绘制。
      • <div class="sfs one"></div>: 第一个星星，通过CSS绘制。
      • <div class="sfs two"></div>: 第二个星星，通过CSS绘制。
      • <div class="sfs three"></div>: 第三个星星，通过CSS绘制。
      • <div class="sfs four"></div>: 第四个星星，通过CSS绘制。

CSS部分

CSS部分定义了国旗和星星的样式，包括大小、颜色、位置和旋转角度等。

  • :root: 定义全局变量，用于控制国旗和星星的尺寸、颜色等。

    • --width, --height, --grid, --radius, --sin18, --cos18, --tan36: 定义各种尺寸和数学常量。
    • --bg-color, --star-color: 定义国旗背景和星星的颜色。
    • --OL, --EL, --GL: 计算星星各个部分的长度。

  • .flag: 设置国旗容器的样式，包括尺寸、背景颜色和居中对齐。

  • .sfb: 绘制星星的底部部分，使用CSS的border属性创建三角形，并通过::before和::after伪元素添加额外的三角形以形成完整的星星底部。

  • .sfs: 定义单个星星的样式，同样使用CSS的border属性创建三角形，并通过::before和::after伪元素添加额外的三角形。

  • .one, .two, .three, .four: 分别定义四个星星的位置和旋转角度，使它们以正确的形状和位置排列在国旗上。

总的来说，这段代码通过纯CSS技巧（主要是利用border属性创建三角形）来绘制一个包含星星的美国国旗图案，无需使用任何图像文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="flag">
       
      <div class="sfb"></div>
       
      <div class="sfs one"></div>
       
      <div class="sfs two"></div>
       
      <div class="sfs three"></div>
       
      <div class="sfs four"></div>
    </div>
    <style>
      * {
        border-width: 0;
      }

      :root {
        --width: 500px;
        --grid: calc(var(--height) / 2 / 10);
        --radius: calc(var(--grid) * 3);
        --sin18: 0.3090169943749474;
        --cos18: 0.9510565162951535;
        --tan36: 0.7265425280053608;
        --height: calc(var(--width) * 2 / 3);
        --bg-color: #f40002;
        --star-color: #faf408;
        --OL: calc(var(--radius) * var(--sin18));
        --EL: calc(var(--radius) * var(--cos18));
        --GL: calc(var(--EL) * var(--tan36));
      }

      .flag {
        position: relative;
        width: var(--width);
        height: var(--height);
        background: var(--bg-color);
        margin: 0 auto;
      }

      .sfb {
        position: absolute;
        top: calc(5 * var(--grid) - var(--OL));
        left: calc(5 * var(--grid) - var(--EL));
        border-color: var(--star-color) transparent transparent;
        border-width: var(--GL) var(--EL);
        border-style: solid;
        width: 0;
        height: 0;
      }

      .sfb::before {
        position: absolute;
        top: calc(var(--GL) * -1);
        left: calc(var(--EL) * -1);
        border-color: var(--star-color) transparent transparent;
        border-width: var(--GL) var(--EL);
        border-style: solid;
        content: "";
        display: block;
        width: 0;
        height: 0;
        transform: rotate(72deg);
        transform-origin: var(--EL) var(--OL);
      }

      .sfb::after {
        position: absolute;
        top: calc(var(--GL) * -1);
        left: calc(var(--EL) * -1);
        border-color: var(--star-color) transparent transparent;
        border-width: var(--GL) var(--EL);
        border-style: solid;
        transform: rotate(-72deg);
        transform-origin: var(--EL) var(--OL);
        content: "";
        display: block;
        width: 0;
        height: 0;
      }

      .sfs {
        position: absolute;
        width: 0;
        height: 0;
        transform-origin: calc(var(--EL) / 3) calc(var(--OL) / 3);
        border-color: var(--star-color) transparent transparent;
        border-width: calc(var(--GL) / 3) calc(var(--EL) / 3);
        border-style: solid;
      }

      .sfs::before {
        position: absolute;
        top: calc(var(--GL) * -1 / 3);
        left: calc(var(--EL) * -1 / 3);
        border-color: var(--star-color) transparent transparent;
        border-width: calc(var(--GL) / 3) calc(var(--EL) / 3);
        border-style: solid;
        content: "";
        display: block;
        width: 0;
        height: 0;
        transform: rotate(72deg);
        transform-origin: calc(var(--EL) / 3) calc(var(--OL) / 3);
      }

      .sfs::after {
        position: absolute;
        top: calc(var(--GL) * -1 / 3);
        left: calc(var(--EL) * -1 / 3);
        height: 0;
        border-color: var(--star-color) transparent transparent;
        border-width: calc(var(--GL) / 3) calc(var(--EL) / 3);
        border-style: solid;
        content: "";
        display: block;
        width: 0;
        transform: rotate(-72deg);
        transform-origin: calc(var(--EL) / 3) calc(var(--OL) / 3);
      }

      .one {
        top: calc(2 * var(--grid) - var(--OL) / 3);
        left: calc(10 * var(--grid) - var(--EL) / 3);
        transform: rotate(-48.96deg);
      }

      .two {
        top: calc(4 * var(--grid) - var(--OL) / 3);
        left: calc(12 * var(--grid) - var(--EL) / 3);
        transform: rotate(-26.13deg);
      }

      .three {
        top: calc(7 * var(--grid) - var(--OL) / 3);
        left: calc(12 * var(--grid) - var(--EL) / 3);
        transform: rotate(-2.06deg);
      }

      .four {
        top: calc(9 * var(--grid) - var(--OL) / 3);
        left: calc(10 * var(--grid) - var(--EL) / 3);
        transform: rotate(20.66deg);
      }
    </style>
  </body>
</html>

雨涵和大地
关注
专栏目录
html五星红旗写法,html+css生成五星红旗
weixin_30877741的博客
06-03 2221
该楼层疑似违规已被系统折叠隐藏此楼查看此楼直接上代码CSS：#hongqi{width:864px;height:576px;background:red;}#wujiao {width: 0;height: 0;top:100px;left:50px;color: #f00;position: absolute;display: block;border-right: 100px solid ...
html五星红旗的代码
weixin_59089605的博客
02-27 378
【代码】html五星红旗的代码。
网页设计html怎么做五星红旗,用CSS做各国国旗方法
weixin_33501587的博客
06-10 1533
今天在网上浏览时看到用CSS来实现各国的国旗，真的很牛，拿过来给大家分享下，把下面的文件保存为.htm文件，预览下就能看到各国的国旗了。*{margin:0px;padding:0px;}ul{padding:0px;margin:0px;}div{width:160px;height:85px;}#Germanyulli,#Paraguayulli,#Netherlandsulli,...
html中css如何设置显示国旗,使用CSS3实现 五星红旗
weixin_33331559的博客
06-16 848
五星红旗*{margin: 0;padding: 0;}.main{width: 300px;height: 200px;background: #f00;padding: 20px;}.star{width: 0;height: 0;border-top: 10px solid yellow;border-left: 17.32px solid transparent;border-right:...
【国庆篇】用html5简单制作一个国旗
m0_67388084的博客
10-01 4823
用html5简单得制作一个国旗； 目光所至，皆华夏，五星闪耀，皆信仰，祝祖国繁荣昌盛！
用python画一个中国国旗.py
09-03
用python画一个中国国旗.py 中国的国旗是五星红旗，它象征着中国革命和中国人民的团结。 红色背景：代表了革命，象征着无数革命先烈为国家独立和人民解放所付出的鲜血和牺牲。 五颗黄色五角星：代表着中国共产党...
统编版一年级语文上课件（2） （生字教学课件）升国旗.ppt
07-16
统编版一年级语文上课件（2）
全球所有国家城市数据以及国旗logo，两个版本一个来源网络，一个来源于qq配置文件提取翻译
07-06
同时，正确使用和展示国旗是一项基本礼仪，确保每个国旗的准确性和尊重性是非常重要的。 数据集中的全球城市数据更是丰富多样，可能包含城市的中英文名称、经纬度坐标、人口数量、行政级别、时区、区域划分等信息。...
Python-djangocountries一个Django应用程序提供用于表格的国家选择功能国旗图标静态文件以及模型中的国家字段
08-12
这意味着你可以轻松地在网站上展示用户选择的国家对应的国旗，无需额外搜索和集成国旗图片资源。这些图标通常是SVG格式，支持高分辨率显示，并且具有良好的可扩展性。 在数据库模型中，`django-countries`提供的`...
利用Python的turtle模块绘制出一个在国旗下逆行的大白志愿者。
06-27
我们生在国旗下，活在春风里，疫情的突然来临，让我们不知所措，大白的迎难而上让我们战胜疫情的路上备受鼓舞，在此让我们向奋战在抗疫一线的医护人员和志愿者致敬。愿疫情早日结束，所有的医护人员和奋战在抗疫一线...
语言小国旗怎么 html,使用Html5中的cavas画一面国旗
weixin_35851374的博客
06-03 691
使用Html5中的cavas画一面国旗，具体代码如下所示：var canvas = document.getElementById("canvas");//创建一个cavas画板var context = canvas.getContext('2d');//设置画板属性var width=canvas.width;var height=width*2/3;context.fillStyle="re...
用html做旗子
07-23 339
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>旗子</title> <style> .flag{ width:300; height:1000px; border-left:5px ...
HTML制作法国国旗
Creeper05的博客
10-24 967
HTML制作法国国旗 <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>法国国旗</title> </head> <body> <div style="width: 180px; height: 160px;background-color:red"> <div style="width: 120px
网页设计五星红旗html,HTML5 Canvas绘制五星红旗
weixin_28877739的博客
06-05 1411
中国标准国旗 // 使用HTML5绘制标准五星红旗 var canvas = document.getElementById("canvas");var context = canvas.getContext('2d'); var width = canvas.width;var height = width * 2 / 3; ...
使用纯HTML和CSS绘制圣诞树：打造网页中的冬日奇景
最新发布
zhaoshanshan168的博客
11-09 335
通过简单的代码，您可以在网页上实现一棵带有星星、彩球装饰的圣诞树，为网站增添节日氛围。1. **树结构**：利用CSS的`border`属性绘制不同大小的三角形来组成圣诞树的分层结构。4. **彩球装饰**：在树上添加不同颜色的圆形装饰球，让页面更具节日氛围。### HTML & CSS 实现节日圣诞树：一步步打造你的冬季主题网页。2. **树干**：使用一个小矩形模拟树干，增加圣诞树的稳定感。3. **装饰星星**：用金色字体绘制顶部的星星，吸引眼球。
【前端基础】CSS进阶
qq_41413652的博客
11-01 1037
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
不用JS实现鼠标悬停提示框，以及Emotion里:hover使用踩坑
y523648的博客
11-06 283
不写onMouseEnter/onMouseLeave或者onMouseOver/onMouseOut，实现鼠标悬停提示框。Enter和Over的区别是，一个事件不冒泡，一个事件冒泡。
Web前端第二次作业
nixiaoge的博客
11-05 294
作业要求：制作带有下拉悬停菜单的导航栏。
用python在屏幕上打印一个国旗
10-11
在Python中，我们可以使用字符画的方式来模拟国旗的样式，例如美国国旗通常由3个部分组成：红色竖条、白色矩形和蓝色横条。下面是一个简单的例子，展示了如何用ASCII字符创建一个美国国旗的图案： ```python # 定义国旗的颜色和宽度 red = '*' * 19 white = ' ' * 80 blue = '#' * 44 # 打印竖条 print(red + white + blue) print(red.center(80)) # 打印白色矩形 for _ in range(2): print(' ' * 75 + red) # 打印底部蓝色横条 print(blue) ``` 这个脚本会输出类似这样的结果： ``` ********** ***** * * * * * * * * ********** ****# ``` 请注意，这只是一个非常基础的示例，实际国旗图案可能会更复杂，需要使用图形库或者外部图片文件才能得到更精确的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值