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. 表示层 ...
随机推荐
- [Codeforces Round #431]简要题解
来自FallDream的博客,未经允许, 请勿转载,谢谢. 好久没写cf题解了zzz 代码比较丑不贴了,cf上都可以看 Div2A. 给你一个长度为n(n<=100)的序列 判断是否可以分成奇数 ...
- VB6工程在Win10系统打开提示MSCOMCTL.OCX无法加载
解决办法: 修改.vbp文件中的 00F8754DA1}#2.1#0; MSCOMCTL.OCX 改为 00F8754DA1}#2.0#0; MSCOMCTL.OCX 中间的2.1 改为 2.0
- SQL Server数据库账号密码变更后导致vCenter Server无法访问数据库
SQL Server数据库账号密码变更后导致vCenter Server无法访问数据库 1.1状况描述: 若SQL Server数据库的账号(这里以sa为例)密码发生了变更,那么连接数据的客户端vCe ...
- JS 判断是否为IP格式
<html> <head> <title><a href='http://js.zz5u.net'><u>JavaScript</u& ...
- BookNote: Refactoring - Improving the Design of Existing Code
BookNote: Refactoring - Improving the Design of Existing Code From "Refactoring - Improving the ...
- 007.Adding a view to an ASP.NET Core MVC app -- 【在asp.net core mvc中添加视图】
Adding a view to an ASP.NET Core MVC app 在asp.net core mvc中添加视图 2017-3-4 7 分钟阅读时长 本文内容 1.Changing vi ...
- SpringMVC之简单的增删改查示例（SSM整合）
本篇文章主要介绍了SpringMVC之简单的增删改查示例(SSM整合),这个例子是基于SpringMVC+Spring+Mybatis实现的.有兴趣的可以了解一下. 虽然已经在做关于SpringMVC ...
- Python中strip()、lstrip()、rstrip()用法详解
Python中有三个去除头尾字符.空白符的函数,它们依次为: strip: 用来去除头尾字符.空白符(包括\n.\r.\t.' ',即:换行.回车.制表符.空格)lstrip:用来去除开头字符.空白符 ...
- 常见压缩格式分析，及 Linux 下的压缩相关指令
可先浏览加粗部分 一.常见压缩档 *.zip | zip 程式壓縮打包的檔案: (很常见,但是因为不包含文件名编码信息,跨平台可能会乱码) *.rar | winrar 程序压缩打包的档案:(在win ...
- 六星经典CSAPP-笔记(11)网络编程
六星经典CSAPP-笔记(11)网络编程 参照<深入理解计算机系统>简单学习了下Unix/Linux的网络编程基础知识,进一步深入学习Linux网络编程和TCP/IP协议还得参考Steve ...