HTML5色块练习

于 2021-08-31 17:23:23 发布
阅读量917 收藏 6
点赞数 1
文章标签： html5 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43489683/article/details/120022339
版权

练习一

在这里插入图片描述

<!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>Document</title>
    <style>
        *{
     
            margin: 0;
            padding: 0;
        }
        .content{
     
            width: 100%;
        }
        .header{
     
            width: 100%;
            height: 60px;
            background-color: #232323;
        }
        .header-cloumn{
     
            height: 60px;
            width: 64%;
            margin: 0 auto;
            background-color: #e24a15;
        }
        .advertising{
     
            width: 100%;
            height: 400px;
            background-color: #67cc75;
        }
        .floor1{
     
            width: 100%;
            height: 350px;
            background-color: #f5f5f5;
        }
        .floor1-content{
     
            width: 64%;
            height: 350px;
            margin: 0 auto;
            display: flex;
        }
        .floor1-content div{
     
            width: 25%;
            height: 100%;
        }
        .floor1-content>:nth-child(1){
     
            background-color: #333;
        }
        .floor1-content>:nth-child(2){
     
            background-color: #fdc07c;
        }
        .floor1-content>:nth-child(3){
     
            background-color: #8adec9;
        }
        .floor1-content>:nth-child(4){
     
            background-color: #a9d7f9;
        }
        .floor2{
     
            width: 100%;
            height: 280px;
            background-color: #fff;
        }
        .floor2-content{
     
            width: 64%;
            height: 230px;
            padding: 25px 0;
            margin: 0 auto;
            display: flex;
        }
        .floor2-content>:nth-child(1){
     
            width: 30%;
            height: 100%;
            background-color: #e57c7c;
        }
        .floor2-content>:nth-child(2){
     
            width: 38%;
            height: 100%;
            background-color: #7e7ce5;
            margin-left: 2%;
        }
        .floor2-content>:nth-child(3){
     
            width: 38%;
            height: 100%;
            background-color: #a9d7f9;
            margin-left: 2%;
        }
        .floor3{
     
            width: 100%;
            height: 200px;
            background-color: #222222;
        }
        .floor3-cloumn{
     
            width: 64%;
            height: 100%;
            margin: 0 auto;
            display: flex;
        }
        .floor3-cloumn>:nth-child(1){
     
            width: 40%;
            height: 100%;
            background-color: #a9d7f9;
        }
        .floor3-cloumn>:nth-child(2){
     
            width: 34%;
            height: 100%;
            background-color: #f9a9e9;
            margin-left: 4%;
        }
        .floor3-cloumn>:nth-child(3){
     
            width: 20%;
            height: 100%;
            background-color: #8c87f6;
            margin-left: 2%;
        }
        .footer{
     
            width: 100%;
            height: 50px;
            background-color: #101010;
        }
        .footer-cloumn{
     
            width: 64%;
            height: 100%;
            margin: 0 auto;
            background-color: #87a7f6;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="header">
            <div class="header-cloumn">
            </div>
        </div>
        <div class="advertising">
        </div>
        <div class="floor1">
            <div class="floor1-content">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="floor2">
            <div class="floor2-content">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="floor3">
            <div class="floor3-cloumn">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-cloumn">
            </div>
        </div>
    </div>
</body>
</html>

练习二

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
最低0.47元/天 解锁文章
Frank831143
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【html本地工具】html+JavaScript实现一个好看的颜色码查询器，支持查询、转换、颜色选择器和颜色码对照表
weixin_43165220的博客
07-14 1374
相信大家平时工作的时候应该会经常用到颜色码吧，比如说想找个好看的颜色，或者有个颜色码但是不知道这个码是什么颜色的，这个时候我们就可以用颜色码对照表或者颜色码查询来查看了。当然也可以用截图软件或者取色器或者PS来查看，不过这终究不是很方便、全面。这个时候我们可以自己写一个颜色码对照表，然后把它收藏到标签栏，用的时候随时打开随时用。这个时候有人可能要说这种网站随便网上一搜多的是。是，确实有很多，但这终究是别人的网站，无法定制化。所谓定制化就是把自己经常用到的颜色用色块列出来，下次用的时候直接打开一看，你就知道具
在html创建色块,一道CSS题:不能改变html结构一个span做六个色块
weixin_31967485的博客
07-01 587
html结构,只有一个span,不能增加html元素也不能增加id,class等任何属性。制作效果如下图 每个块 100X100px 颜色分别为 red, orange, yellow, green, blue, indigo第一种方法：span 加两个伪元素 利用 分别写左边框和右边框一共六个色块span {position: relative;display: block;height: 10...
用代码编辑色块
dsrpt2的专栏
07-09 862
在上一次我们利用图形编辑qi
创意几何色块html5网站 v1.1
05-09
创意几何色块html5网站使搜索引擎更加容易抓取和索引；提供更多的功能，提高用户的友好体验；可用性的提高，提高用户的友好体验。 创意几何色块html5网站使用方法： 将文件上传只ASP空间，运行http://你的域名/install.asp进行安装。 只需两步即可安装完成，为了保证网站安全，请修改默认后台路径及数据库名称。 支持手机版网站 支持站内搜索 支持会员系统 支持商城系统 支持万能表单 支持支付宝（即时到帐接口）/微信（扫码支付）付款方式 支持中/英双语 支持QQ/旺旺客服 支持动/静态页面访问 支持接入微信公众号 支持会员系统QQ/微信接口一键登录 支持在线检测木马 支持后台一键切换模板 支持空间用量即时显示 支持在线数据库备份/还原（不限时间点个数） 支持多管理员（可各自设置权限） 支持根目录/子目录安装 支持后台一键更新程序（永久免费更新） 支持自检更新，保证每天用到的都是最新源码 前台模板全部基于精美模板开发 创意几何色块html5网站 v1.1 20160328更新说明： 1.增加了sweetalert弹出框对低版本IE的兼容性。 2.修复了对带端口域名不支持的情况。 3.增加了下载模板的域名验证（免费版不支持下载模板）。 4.新增了一键更新function代码/admin代码功能。 5.为新闻分类列表和产品分类列表新增了更多排列。
用php动态显示颜色,Html怎样实现动态显示颜色块的报表效果
weixin_39854867的博客
03-13 148
这次给大家带来Html怎样实现动态显示颜色块的报表效果，Html实现动态显示颜色块的报表效果的注意事项有哪些，下面就是实战案例，一起来看一下。利用html的颜色块动态展示数据*{padding: 0;margin: 0;}.tubiao,.jihua,.shiji,.riqi{width: 100%;overflow: hidden;margin-top: 10px;}.left{width: 1...
HTML常用标签代码
05-07
HTML常用标签练习，方便大家借鉴，本次下载不需要积分，可以直接下载 HTML常用标签练习，方便大家借鉴，本次下载不需要积分，可以直接下载
conquest:一个城市建设游戏。 用于练习 javascript、html5 和meteor
06-05
每个图块在 html5 画布中绘制为一个单一颜色的正方形。去做使用细胞自动化实现 Forrests 用于树木生长定义城市建筑的成本，例如农场、工厂、房屋、仓库为资源、维护和生产力创建 UI 实现第二个播放器——使用meteor...
Work.Day.Scheduler:本练习的目的是构造一个工作日计划程序，该程序使用moment.js评估当前时间，并使用过去，当前或将来的配色方案对每个时间块进行彩色编码。 过去的时间段显示为灰色，当前时间显示为白色，将来的时间段显示为绿色。 在保存按钮和页面刷新后，用户输入将保留。 使用的技术
05-24
工作日调度器描述本练习的目的是构造一个工作日计划程序，该程序使用moment.js评估当前时间，并使用过去，当前或将来的配色方案对每个时间块进行彩色编码。 过去的时间段显示为灰色，当前时间显示为白色，将来的时间...
exercice-01-le-globule：本练习的目的是创建消失的菜单和子菜单
02-17
本练习的目的是创建消失的菜单和子菜单。 菜单：用于菜单项的表格单元。 li位于相对位置，董事会处于绝对位置。 右和左列的表格单元格也与底部垂直对齐。 页脚链接采用内联块样式。 我们添加了最大宽度：100％...
DIV+CSS布局练习
11-17
在"DIV+CSS布局练习"中，你可能会遇到如何设置`DIV`的宽度和高度、边距和填充、背景色和图像、文字样式等问题，以及如何处理浮动元素、清除浮动、实现居中对齐等常见技巧。此外，还可能涉及到`盒模型`的概念，理解盒...
创意几何色块html5网站源代码
03-16
创意几何色块html5网站使搜索引擎更加容易抓取和索引；提供更多的功能，提高用户的友好体验；可用性的提高，提高用户的友好体验。 创意几何色块html5网站使用方法： 将文件上传只ASP空间，运行http://你的域名/install.asp进行安装。 只需两步即可安装完成，
创意几何色块html5网站 v2.0
10-18
创意几何色块html5网站使搜索引擎更加容易抓取和索引；提供更多的功能，提高用户的友好体验；可用性的提高，提高用户的友好体验。创意几何色块html5网站使用方法：将文件上传只ASP空间，运行http://你的域名/install.asp进行安装。只需两步即可安装完成，为了保证网站安全，请修改默认后台路径及数据库名称。支持手机版网站支持站内搜索支持会员系统支持商城系统支持万能表单支持支付宝（即时到帐接口）/微信（扫码支付）付款方式支持中/英双语支持QQ/旺旺客服支持动/静态页面访问支持接入微信公众号支持会员系统QQ/微信接口一键登录支持在线检测木马支持后台一键切换模板支持空间用量即时显示支持在线数据库备份/还原（不限时间点个数）支持多管理员（可各自设置权限）支持根目录/子目录安装支持后台一键更新程序（永久免费更新）支持自检更新，保证每天用到的都是最新源码前台模板全部基于精美模板开发创意几何色块html5网站 v1.7 20160602 更新说明：1.后台文件夹不再加密，面向用户开源。2.去除前台强制版权文字。3.修复后台新闻无法添加新分类的bug。4.修复菜单管理和简介、产品、新闻、表单
html怎么出现颜色块,Html实现动态显示颜色块的报表效果代码分享
weixin_39616565的博客
06-25 723
Html实现动态显示颜色块的报表效果代码分享发布时间：2020-04-11 14:24:23来源：亿速云阅读：597作者：小新今天小编给大家分享的是Html实现动态显示颜色块的报表效果代码，很多人都不太了解，今天小编为了让大家更加了解Html如何实现动态显示颜色块的报表效果，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。利用html的颜色块动态展示数据*{padding: 0;mar...
HTML 颜色
birthmarkqiqi的专栏
12-07 555
HTML 颜色由红色、绿色、蓝色混合而成。 Color Values HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。 种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。 这个表格给出了由三种颜色混合而成的具体效果： 颜色值 颜色(Color) 颜色十六进制(Color H
用H5 canvas实现唯美渐变色块的绘制
綦枫Maple的博客
12-21 3997
随着Web前端的不断发展，我们已经可以使用H5+js+css做出很多复杂而优美的视觉效果。一幕幕的视觉盛宴背后是网页设计人员精巧的构思和前端开发人员的精湛技能。今天我们来讲述一下简单H5 canvas 渐变色块的绘制，希望给有需要的读者一定的启发，day day up together。
html制作颜色块,Html 实现动态显示颜色块的报表效果(实例代码)
weixin_34220317的博客
06-22 625
利用html的颜色块动态展示数据*{padding: 0;margin: 0;}.tubiao,.jihua,.shiji,.riqi{width: 100%;overflow: hidden;margin-top: 10px;}.left{width: 10%;float: left;text-align: center;height: 25px;line-height: 25px;}.righ...
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）
心中的利剑：HTML5 Canvas游戏动画（JavaScript）
07-04 296
在网上看到一个俄罗斯方块游戏: [url]http://www.108js.com/article/article11/b0044.html[/url] 感觉还不错，学习了它的源码，写点笔记。俗话说：熟读唐诗三百首，不会吟诗也会吟。我相信熟读源码三百个，不会编程也会编。 这个俄罗斯方块游戏的精华部分应该是三个类，先看这个第一个Block类： [code="java"] (functi...
HTML5 CSS控制Table内外边框、颜色、大小示例
热门推荐
石虎
06-11 9万+
联系人:石虎 QQ:1224614774昵称:嗡嘛呢叭咪哄 QQ群:807236138群称:iOS 技术交流学习群 在默认的情况下，我们的CSS将Table的边框清除掉了，下面与大家分享下CSS控制Table内外边框、颜色、大小的样式，想学习的朋友可以参考下 其实按照常理来说，现在的网站应该早已经抛弃...
js运动函数封装-以色块为例变大且让其移动
Cupid
06-29 281
js运动函数封装 html代码 <body> <div id="box"></div> </body> js代码如下 var obox = document.getElementById("box"); document.onclick = function(){ move(obox,{left:300,...
html设计一款色块连连看的游戏
最新发布
04-13
确定色块的种类、数量和初始布局，以及玩家如何进行配对。可以设置时间限制或移动次数限制，以增加游戏的难度和挑战性。 其次，利用HTML和CSS创建游戏界面。设计好游戏的背景、按钮和计分板等元素，并将色块以div或...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值