列表属性及练习（2）九宫格花瓣.html

最新推荐文章于 2024-10-01 23:23:32 发布
最新推荐文章于 2024-10-01 23:23:32 发布
阅读量469 收藏 12
点赞数 13
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pale_moonlight/article/details/142439495
版权

#以下内容支持在Hbuilder中使用（或idea）

.<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表two</title>
    </head>
    <body>
        <!--tr代表行，td代表列        
    table属性：border边框
        cellspacing:设置单元格与单元格之间的间距（默认2px)
        cellpadding:设置单元格与内容之间的间隔（默认1px)
    align:水平对齐方式 left(默认) center right
        table表格在浏览器中的位置
        tr:设置当前行内容的位置
          td:设置当前单元格内容的位置
    valign:垂直对齐方式 top、middle、bottom
        table:不生效
        tr(当前行)/td(当前单元格)
        bgcolor:填充颜色
        rowspan="n"   n代表合并几行
        colspan="n"   n代表合并几列
        -->
        <table border="1" width="180px" height="180px"
            cellspacing="2px" cellpadding="1px" align="center" bgcolor="aqua">
            <tr align="left">
                <td rowspan="2">1</td>
                <td align="center" valign="top">2</td>
                <td colspan="3">3</td>
            </tr>
            <tr>
                <td align="center" colspan="2">4</td>
                <td valign="middle">5</td>
                <td align="center">6</td>
            </tr>
            <tr align="right">
                <td colspan="2">7</td>
                <td align="center" valign="bottom" colspan="2">8</td>
                <td>9</td>
            </tr>
        </table>
        
        
            
        <!--九宫格花瓣练习-->
        <!-- border-top-left-radius:左上消弧...... -->
        <table border="0" width="250px" height="250px"
            cellspacing="2px" cellpadding="1px" align="center">
            <tr>
                <td colspan="2" bgcolor="red" style="border-top-left-radius:100px; 
                    border-top-right-radius: 100px;"></td>
                <td rowspan="2" bgcolor="aqua" style="border-top-right-radius: 100px; 
                    border-bottom-right-radius: 100px;"></td>
        
            </tr>
            <tr>
                <td rowspan="2" bgcolor="purple" style="border-top-left-radius: 100px;
                    border-bottom-left-radius: 100px;"></td>
                <td bgcolor="aquamarine"style="border-radius: 100%;"></td>
                
            </tr>
            <tr>
                <td colspan="2" bgcolor="cornflowerblue" style="border-bottom-left-radius:
                     100px;border-bottom-right-radius: 100px;"></td>
                        
            </tr>     
        </table>

    </body>
</html>

pale_moonlight
关注
HTML飞舞的花瓣
兔子王
05-13 2万+
HTML实现的飘落的花瓣的完整代码。
【html----花瓣特效(附源代码)】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
11-09 1万+
代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>2019年最好看的花瓣</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords
html 花瓣飘落效果,html全屏花瓣掉落特效
weixin_42503881的博客
06-03 2818
代码片段和文件信息属性大小日期时间名称---------------------------------------文件46202020-04-1916:36demo.html目录02020-04-1916:30static\目录02020-04-191...
html花瓣特效代码,网页上漂浮的花瓣
weixin_39555320的博客
06-07 1840
网页上漂浮的花瓣[ 发布者：在远方┊来源：本站整理┊时间：2006-08-19┊浏览：人次 ]该特效用到的图片：网页特效观止|JsCode.CN|---网页上漂浮的花瓣var no = 6; // snow numbervar speed = 12; // smaller number moves the snow fastervar snowflake = "http://www.jscode....
HTML 实现动态花瓣掉落
qq_48516121的博客
10-11 3427
HTML 实现动态花瓣掉落
本地mysql5.7以上版本配置及my.ini
Java 技术专栏，从入门到精通，熟悉企业级开发
03-13 2242
Windows 64 位 mysql 5.7以上版本安装包安装之后，没有my-default.ini和my.ini文件。我们本地开发调试的时候， 有时候也需要改变一下参数，比如最大连接数、查询缓存、缓存池、编码等。 Mysql msi安装包的Windows下载地址: https://dev.mysql.com/downloads/installer/
炫酷樱花花瓣飘落 HTML（附源码）
热门推荐
Xiadehang200510的博客
01-20 3万+
由于本人比较懒就不录视频了 话不多咱们直接上代码 下面展示一些 内联代码片。 // A code block var foo = 'bar'; // An highlighted block var foo = 'bar'; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> .
html5 canvas烂漫的空中散落的花瓣动画特效
qq_365392777
09-16 4421
html5 canvas烂漫的空中散落的花瓣动画特效 作品介绍 1.网页作品简介方面 ：html5 canvas烂漫的空中散落的花瓣动画特效 2.网页作品编辑方面：作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)...
css和html实现花瓣动画效果：
Deng872347348的博客
02-21 3023
css和html实现花瓣动画效果 如图1 首先我们要画一个建立一个正方行模型，里面来接椭圆 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g
设计HTML5列表和超链接
码说芯语的博客
08-14 2332
一文读懂HTML5设计列表和超链接！
Html-花瓣特效.rar
03-12
【Html-花瓣特效.rar】这个压缩包文件是一个前端开发项目，主要展示了如何使用HTML、CSS以及JavaScript技术来创建一个生动有趣的“花瓣飘落”特效。这个特效为网页增添了一种视觉上的吸引力，常用于网站背景或者特定...
html代码_星空、机器人、贪吃蛇、花瓣.rar
12-18
这个压缩包"html代码_星空、机器人、贪吃蛇、花瓣.rar"包含了四个基于HTML的项目，它们分别是星空、机器人、贪吃蛇和花瓣。这些项目展示了HTML在创建交互式和视觉效果丰富的网页时的潜力。 首先，让我们来探讨一下...
花瓣.js
11-16
花瓣.js
kaiquxian2.rar_kaiquxian2_花瓣
09-21
标题中的“kaiquxian2.rar_kaiquxian2_花瓣”表明这是一个与绘制花瓣图形相关的程序，可能是通过某种编程语言实现的，并且采用了压缩格式存储。描述提到“利用均匀三角多项式曲线”来生成图形，这涉及到数学中的曲线...
2016秋九年级科学上册1.2物质的酸碱性练习题2浙教版.doc
09-12
14. 酸碱指示剂的应用：想要检验紫色喇叭花的花瓣浸出液是否具有类似石蕊的性质，应将其分别滴入酸性和碱性溶液中观察颜色变化，如食醋（酸性）和石灰水（碱性）。 15. 酸的分类：HClO3、H2S、H2SO4是酸，而NaHSO4...
html中的文本标签(含标签的实现案例)
最新发布
2301_76862031的博客
10-01 526
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
HTML粉色烟花秀
兔子王
09-21 8269
HTML语言实现的粉红色跨年烟花秀的完整代码。
关于HTML 案例_个人简历展示02
Dingyuan0的博客
09-29 1079
展示效果 用table进行布局 label 标签进行关联 例如：点姓名就可以到text中去填写内容 input的使用 text 文本框 select与option 选择框 checkbox 复选框 textarea ul与li 无序列表 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte
好玩的水表电表
lulei5153的博客
10-01 583
【代码】好玩的水表电表。
html动态背景特效花瓣
09-22
HTML动态背景特效中的花瓣效果通常通过CSS和JavaScript或者jQuery库来实现。这种效果会让网页背景看起来像是有花瓣飘动、生长或绽放。常见的做法包括： 1. CSS动画：利用关键帧动画（@keyframes），创建一个从静态到动态变化的花瓣形状动画，设置透明度、位置和旋转等属性。 ```html <!DOCTYPE html> <html lang="zh"> <head> <style> @keyframes bloom { 0% {background-position: 0 0; opacity: 0;} 50% {background-position: -20px 20px; opacity: 1;} 100% {background-position: 0 0; opacity: 0;} } body { background-image: linear-gradient(to right, red, orange, yellow, green); animation: bloom 4s ease-in-out infinite; } </style> </head> <body> </body> </html> ``` 2. JavaScript/jQuery：可以结合JavaScript或者jQuery库如GreenSock (GSAP) 来创建更复杂的交互式动画，比如花瓣的随机飘落或者响应用户的鼠标事件。 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script> function createPetal() { let petals = document.createElement('div'); petals.classList.add('petal'); // 更多CSS样式和动画设置... // 子元素添加并定位 document.body.appendChild(petals); } // 每隔一段时间生成新的花瓣 setInterval(createPetal, 2000); </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值