block & inline
2015-09-20 22:33
232 查看
1. block 整体
<div> , <h1> , <p> , <form>
2. inline 一句话的一部分
<span> , <a> , <img>
3. <body>
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
</body>
4. <body>
<h1>My <span style="color:red">Important</span> Heading</h1>
</body>
5. 用class来解决多个相同样式的block
<head>
<style>
div.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
6. 用class来解决多个相同样式的inline
<head>
<style>
span.note {font-size:120%;color:red;}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
<div> , <h1> , <p> , <form>
2. inline 一句话的一部分
<span> , <a> , <img>
3. <body>
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
</body>
4. <body>
<h1>My <span style="color:red">Important</span> Heading</h1>
</body>
5. 用class来解决多个相同样式的block
<head>
<style>
div.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
6. 用class来解决多个相同样式的inline
<head>
<style>
span.note {font-size:120%;color:red;}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 黑马程序员——Java之网络通信
- 递归算法的时间复杂度终结篇与Master method
- leetcode:Reverse Linked List
- MySQL日志——通用查询日志（或者就叫查询日志）
- Bash的数组
- (转)递归算法的时间复杂度终结篇与Master method
- Linux和windows下安装OpenGrok
- 顺序表的c++实现,该模板类实现了插入，删除，清空，[]的重载等方法
- 黑马程序员——Java之反射机制
- JDBC调用存储过程
- Lecture4-3Connection to Learning
- Java 线程暂停与继续
- Linux 文件和目录操作的相关函数
- java字符串的各种编码转换
- 关于在gridview中有dorpdownlist的情况下使用自带编辑模板的方法
- VMware workstation Ubuntu Server显示分辨率
- UVA-11214 Guarding the Chessboard （迭代加深搜索）
- IBM MQ 字符集问题
- HTML标签大全（常用）
- 数据库的一些增删改查操作