HTML5小demo——cat
来源:互联网 发布:横道图用什么软件画 编辑:程序博客网 时间:2024/06/08 11:54
完整理解并写出的H5代码,H5确实方便orz,应用bootstrap响应式网格布局,还不太懂。
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/><link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css"><style> h2 { font-family: Lobster, Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; }</style><div class="container-fluid"> <div class="row"> <div class="col-xs-8"> <h2 class="text-primary text-center">CatPhotoApp</h2> </div> <div class="col-xs-4"> <a href="#"><img class="img-responsive thick-green-border" src="/images/relaxing-cat.jpg"></a> </div> </div> <img src="/images/running-cat.jpg" class="img-responsive"> <div class="row"> <div class="col-xs-4"> <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button> </div> <div class="col-xs-4"> <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button> </div> <div class="col-xs-4"> <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button> </div> </div> <p>Things cats <span class="text-danger">love:</span></p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <div class="row"> <div class="col-xs-6"> <label><input type="radio" name="indoor-outdoor"> Indoor</label> </div> <div class="col-xs-6"> <label><input type="radio" name="indoor-outdoor"> Outdoor</label> </div> </div> <div class="row"> <div class="col-xs-4"> <label><input type="checkbox" name="personality"> Loving</label> </div> <div class="col-xs-4"> <label><input type="checkbox" name="personality"> Lazy</label> </div> <div class="col-xs-4"> <label><input type="checkbox" name="personality"> Crazy</label> </div> </div> <div class="row"> <div class="col-xs-7"> <input type="text" class="form-control" placeholder="cat photo URL" required></div> <div class="col-xs-5"> <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button></div> </div> </form></div>
0 1
- HTML5小demo——cat
- HTML5应用—好看的DEMO
- html5-localstorage操作(小demo)
- matlab—cat函数
- 小demo——体重测试
- Android小Demo——OnDragListener
- HTML5 demo
- 【HTML5物理小Demo】用Box2dWeb实现锁链+弹簧效果
- HTML5学习笔记—小圣诞树
- MATLAB——cat函数
- linux命令——cat
- Linux命令——cat
- Linux命令简介—cat
- 【连载】实用小demo连载 1 —— 页码切换demo
- 【连载】实用小demo连载 2 —— Cookie 记录和获取 demo
- 【连载】实用小demo连载 3 —— js 时间转换 demo
- 【连载】实用小demo连载 4 —— css3+js 大转盘 demo
- 【连载】实用小demo连载 5 —— js 无限级菜单 demo
- VMware虚拟机克隆Linux系统后找不到eth0网卡
- node.js中使用exports
- 常用排序算法-归并排序
- 5-25 最大公约数和最小公倍数 (15分)
- python ord() chr() unichr() 函数
- HTML5小demo——cat
- 基于proteus的51单片机仿真实例四十四、C语言的结构体演示实例
- 软件光栅化渲染器(五)
- python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器
- 浏览器检测
- Spring MVC 学习 之
- 关联规则
- Elasticsearch(十)【NEST高级客户端--搜索查询】
- C#中的线程(二) 线程同步基础