html 自适应通用ui,DanceUI: 一款强自适应HTML布局框架,帮助你毫无顾虑的布局HTML页面,而不用担心各种盒模型溢出...

DanceUI

一款强自适应HTML布局框架,帮助你毫无顾虑的布局HTML页面,而不用担心各种盒模型溢出。

通过这个框架,你可以用几行代码实现这样的效果:

Demo.gif

Logo

User Infomation

A

Line

A

新的盒模型

使用标签创建一个行,然后就可以在里面自由地使用标签了!标签是特殊的div,它能保证宽度和高度就是你规定的值,完全不需要担心margin、border和padding!

77acc88e76f0cf021bd464030a82c151.png

新的单位

DanceUI引入了两个新的单位:标准高度(h)和浮动宽度(f),你可以利用这两个单位创建极其复杂的布局。同一个布局在移动端和PC端都能兼容,变得不再是幻想!

11080cae0f682f8c9992b8d17e6c03a1.png

ae4f334cc1a98a12c1a3674679e690fa.png

这个框架目前仍在开发中,等待你的参与!

关于开源协议

仓库中DanceUI本身(DanceUI.js和DanceUI.css),以及通过该程序衍生得产品,如Demo视频,均属于开源软件,遵守GNU通用公共许可证,即GNU GPL。

GNU GPL协议授予程序接受人以下权利,或称“自由”:

以任何目的运行此程序的自由;

再发行复制件的自由;

改进此程序,并公开发布改进的自由。

GNU GPL不会授予许可证接受人无限的权利。再发行权的授予需要许可证接受人开放软件的源代码,及所有修改。且复制件、修改版本,都必须以GPL为许可证,这是为了确保任何使用者不会独自占有开源软件。使用、复制或更改DanceUI的程序接受人视为同意GNU GPL协议,必须再次开源其更改后的派生物(如源代码等),否则将追究法律责任。

关于协议版本,DanceUI使用GPL v2协议。

关于GPL v2协议,上述说明仅做参考,具体细节请以LICENSE为准,DanceUI原作者Jackie Lin(用户名lyj00912,https://github.com/lyj00912 )保留一切解释权。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的自适应布局HTML框架模板: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自适应布局模板</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; background-color: #f2f2f2; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; } .box { width: calc(33.33% - 20px); margin-bottom: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); overflow: hidden; } .box img { display: block; width: 100%; height: auto; } .box h3 { margin: 10px; font-size: 20px; font-weight: bold; color: #333; text-align: center; } .box p { margin: 10px; font-size: 16px; color: #666; text-align: justify; } @media screen and (max-width: 767px) { .box { width: calc(50% - 20px); } } @media screen and (max-width: 479px) { .box { width: 100%; } } </style> </head> <body> <div class="container"> <div class="box"> <img src="https://via.placeholder.com/300x200" alt=""> <h3>标题一</h3> <p>内容一</p> </div> <div class="box"> <img src="https://via.placeholder.com/300x200" alt=""> <h3>标题二</h3> <p>内容二</p> </div> <div class="box"> <img src="https://via.placeholder.com/300x200" alt=""> <h3>标题三</h3> <p>内容三</p> </div> <!-- 添加更多的盒子 --> </div> </body> </html> ``` 该模板使用了flex布局和媒体查询来实现自适应布局。在移动端设备中,每一行最多显示一个盒子,而在大屏幕设备中,每一行可以显示多个盒子。在不同屏幕尺寸下,盒子的宽度会自动调整以适应屏幕。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值