<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP中文网</title>
<style type="text/css">
body{
padding: 0;margin: 0;}
#title{width:400px;height: 200px;background:red;}
.main{ width:400px;height: 200px;background:pink;}
.pic{ width:400px;height: 200px;}
a{color:blue;}
a[href="demo3.html"]{color:red;}
</style>
</head>
<body>
<h1 #id=title> 这是一个H1标签</h1>
<h2>这是一个H2标签</h2>
<h3>这是一个H3标签</h3>
<a href="www.baidu.com"> 百度</a>
<a href="www.php.cn"> PHP中文网</a>
<a href="demo3.html"> demo3连接</a>
<div id="title">
<p>坚决打赢脱贫攻坚战，
让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。党的十八大以来，***总书记的扶贫足迹遍布全国，对坚决打赢脱贫攻坚战作出重要战略部署。 党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述，从说“不”的角度，深入体会总书记对脱贫攻坚工作的重要指示精神。</p>
<br>
<br>
</div>
<div class="main">
<a href="demo3.html"> demo3连接</a>
</div>
<strong>PHP中文网</strong>
<i>新五丰股份***</i>
<em>初体</em>
<br>
<del>原价399元</del><span style="background: #efefef;width: :300px;height:200px;"> 现价299元</span>
<!-- Img为行内块元素，会对高度有效，所以这个Img还是跟strong span 这些行内元素在一行，只是高度Imgc撑开了高度 -->
<img class="pic" src="images/1.jpg" /><span>123</span>
<div style="width:300px;height:200px;background: chartreuse;display:inline;"> 1</div>
<div style="width: 300px;height: 200px;background: aqua;display:inline-block;"> 2 </div>
<span style="width: 300px;height: 200px;background: aqua;"> 3</span>
<span style="width: 300px;height: 200px;background: aqua;display:block;" > 4 </span>
<span style="width: 300px;height: 200px;background: orangered;display:block;"> 5 </span>
<div> 6</div>
</div>
</body>
</html>
博客列表 >行内布局及块文件布局的理解
行内布局及块文件布局的理解
- Newf王永庆的博客原创转载
- 2018年10月01日 23:12:09928浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议