HTML5中 HTML列表/块/布局 韩俊强的博客
从简单到复杂HTML5详解:每日更新关注:http://weibo.com/hanjunqiang
新浪微博!
1.HTML列表
1.有序
2.无序
3.有序star属性
4.有序无序列表
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <ul> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul> <ol> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ol> <!--无需列表--> <ul type="square"> <li>iOS</li> <li>android</li> <li>html5</li> <li>swift</li> </ul> <!--有序列表--> <ol start="10"> <li>iOS</li> <li>android</li> <li>html5</li> <li>swift</li> </ol> <!--嵌套列表(无序ul/有序ol)--> <ul> <li>宠物</li> <ol> <li>猫</li> <li>狗</li> </ol> <li>植物</li> <ol> <li>仙人掌</li> <li>棕榈</li> </ol> </ul> <br/> <br/> <ol> <li>宠物</li> <ol> <li>猫</li> <li>狗</li> </ol> <li>植物</li> <ol> <li>仙人掌</li> <li>棕榈</li> </ol> </ol> <dl> <dt>helloword</dt> <dd>大家好啊打印helloword</dd> <dt>helloword</dt> <dd>大家好啊打印helloword</dd> </dl> </body> </html>
每日更新关注:http://weibo.com/hanjunqiang
新浪微博!
2.块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块元素</title> <link rel="stylesheet" type="text/css" href="mycss.css"> <style type="text/css"> span{ color: blue; } </style> </head> <body> <!-- 块 --> <p>大家好!</p> <h1>大家好啊</h1> <b>这是一个加重标签</b> <a>这是一个超链接标签</a> <div id="divid"> <p>helloword</p> <a>惦记我</a> </div> <div id="divspan"> <p><span>这是一个测试效果</span>span是什么样式</p> </div> </body> </html>
效果如下:
span标签下作用看效果图!
每日更新关注:http://weibo.com/hanjunqiang
新浪微博!
3.布局
1.div布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div布局</title> <style type="text/css"> body{ margin: 0px; } #container{ width: 100%; height: 950px; background-color: antiquewhite; } #header{ width: 100%; height: 10%; background-color: aquamarine; } #conten_menu{ width: 30%; height: 80%; background-color: azure; float:left ; } #content_body{ width: 70%; height: 80%; background-color: chartreuse; float: left; } #footer{ width: 100%; height: 10%; background-color: darkgoldenrod; clear: left; } </style> </head> <body> <div id="container"> <div id="header">头部</div> <div id="conten_menu">内容菜单</div> <div id="content_body">内容主题</div> <div id="footer">底部</div> </div> </body> </html>
效果如下:
2.table布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table布局</title> </head> <body marginheight="0px" marginwidth="0px"> <table width="100%" height="950" style="background-color: darkgoldenrod"> <tr> <td colspan="3" width="100%" height="10%" style="background-color: burlywood">这是头部</td> </tr> <tr> <td width="20%" height="80%" style="background-color: aqua"> <ul> <li>iOS</li> <li>android</li> <li>swift</li> <li>html5</li> </ul> </td> <td width="60%" height="80%" style="background-color: chartreuse">内容主题</td> <td width="20%" height="80%" style="background-color: crimson">右菜单</td> </tr> <tr> <td width="100%" height="10%" colspan="3" style="background-color: blue">这是底部</td> </tr> </table> </body> </html>
效果如下:
每日更新关注:http://weibo.com/hanjunqiang
新浪微博!
iOS开发者交流QQ群: 446310206
HTML5中 HTML列表/块/布局 韩俊强的博客的更多相关文章
- HTML5中 基本用法及属性 韩俊强的博客
从今天开始更新H5相关学习:希望大家能一起学习,多学习一门语言,多一门乐趣! 了解Html5: Html5基本属性: <!DOCTYPE html> <html lang=" ...
- iOS开发中的零碎知识点笔记 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博 1.关联 objc_setAssociatedObject关联是指把两个对象相互关联起来,使得其中的一个对象作为另外 ...
- iOS中 MediaPlayer framework实现视频播放 韩俊强的博客
iOS开发中播放音乐可以使用MPMusicPlayerController类来实现,播放视频可以使用MPMoviePlayerController和MPMoviePlayerViewControlle ...
- iOS中 Realm错误总结整理 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博! 一.错误信息:Attempting to modify object outside of a write tra ...
- iOS中 动态热修补技术JSPatch 韩俊强的博客
.1.4) JSPatch bridge Objective-C and JavaScript. You can call any Objective-C class and method in Ja ...
- iOS中 最新支付宝支付(AliPay) 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博 现在的支付方式一般有三种, 支付宝, 微信, 网银. 个人觉得最简单易用的还是支付宝, 微信虽然看起来币支付宝要简单 ...
- iOS中 断点下载详解 韩俊强的博客
布局如下: 基本拖拉属性: #import "ViewController.h" #import "AFNetworking.h" @interface Vie ...
- iOS中 扫描二维码/生成二维码详解 韩俊强的博客
最近大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 每日更新关注:http://weibo.com/hanjunqiang 新浪微博 指示根视图: se ...
- iOS中 HTTP/Socket/TCP/IP通信协议详解 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博 简单介绍: // OSI(开放式系统互联), 由ISO(国际化标准组织)制定 // 1. 应用层 // 2. 表示层 ...
随机推荐
- [POJ]1279: Art Gallery
题目大意:有一个N边形展馆,问展馆内有多少地方可以看到所有墙壁.(N<=1500) 思路:模板题,半平面交求出多边形的核后计算核的面积. #include<cstdio> #incl ...
- Linux必备操作vim
vim被称作为编辑器之神,那么在我们操作linux系统时,进行编辑操作有没有感觉心有余而力不足?今天我讲自己总结的一些vim的操作命令和大家进行一下分享,有不足之处还请指出. vim的三种模式大家还记 ...
- 阿里 & 酷家乐:实习生面试
最近海投了十家公司,暂时有阿里两面(已凉).酷家乐两面(大概凉了).网易一面.前两个都是基础知识发挥得还可以,两家公司二面都凉凉. 阿里一面(3.21 26min) 刚好买了中饭回宿舍打开正准备吃的时 ...
- Unrecognized token 'XXXX': was expecting ('true', 'false' or 'null')
原因是,返回或发送数据格式不规范. 当dataType指定为json后,1.4+以上的jquery版本对json格式要求更加严格.如果不是严格的json格式,就不能正常执行success回调函数. J ...
- 【Java关键字-Interface】为什么Interface中的变量只能是 public static final
三个关键字在接口中的存在原因:public:接口可以被其他接口继承,也可以被类实现,类与接口.接口与接口可能会形成多层级关系,采用public可以满足变量的访问范围: static:如果变量不是sta ...
- centos6.8下weblogic12c静默安装
环境: centos6.8 无桌面环境 jdk1.7.0_25 关闭iptables.selinux 安装前准备: 1.新建weblogic用户,设置weblogic密码 useradd weblog ...
- R语言do.call 函数用法详解
虽然R语言有类型很丰富的数据结构,但是很多时候数据结构比较复杂,那么基本就会用到list这种结构的数据类型.但是list对象很难以文本的形式导出,因此需要一个函数能快速将复杂的list结构扁平化成da ...
- PHP 5 常量
PHP 5 常量 常量值被定义后,在脚本的其他任何地方都不能被改变. PHP 常量 常量是一个简单值的标识符.该值在脚本中不能改变. 一个常量由英文字母.下划线.和数字组成,但数字不能作为首字母出现. ...
- B+树在磁盘存储中的应用
欢迎探讨,如有错误敬请指正 如需转载,请注明出处 http://www.cnblogs.com/nullzx/ 我们首先提一个问题, B+树比平衡二叉树在索引数据方面要快么? 大多数人可能认为肯定还是 ...
- Bootstrap3 表单-水平排列的表单
通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局.这样做将改变 .form-group 的行为,使其表现 ...