前端基础之CSS
⭐CSS3新增
- CSS3边框如 border-radius,box-shadow 等;
- CSS3背景如 background-size,background-origin 等;
- CSS3 2D,3D转换如 transform 等;
- CSS3动画如 animation 等。
PS:参考https://www.cnblogs.com/xkweb/p/5862612.html
伪类和伪元素
伪类
伪类用于定义元素的特殊状态。
:active
:为活动的链接设置样式。当您在一个链接上点击时,它就会成为活动的(激活的)。:hover
:设置鼠标悬停在元素上时的样式:visited
和:link
:为已访问和未访问链接设置不同的样式:focus
:设置元素获得焦点时的样式:first-child
:选择作为其父的第一个子元素的元素。:nth-child(n)
:选择作为其父的第n个子元素的元素。p:nth-child(2)
:nth-of-type(n)
:选择满足是其父元素的第n个某类型子元素的元素。p:nth-of-type(2)
选择作为其父的第二个<p>
元素的元素。:not(selector)
:选择每个非目标元素的元素。
表单向:checked
:选择每个被选中的元素。:valid
:选择满足值为有效值的元素。:invalid
:选择满足值为无效值的元素。:required
:选择指定了 “required” 属性的 元素。:optional
:选择不带 “required” 属性的 元素。
伪元素
CSS 伪元素用于设置元素指定部分的样式。
⭐CSS画三角形
三角形原理:边框的均分原理
div {
width:0px;
height:0px;
border-top:10px solid red;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
}
css画圆
圆的画法:边框的半径border-radius
.circle {
width: 0;
height: 0;
border: 50px black solid;
border-radius: 50px;
}
盒模型
- box-sizing属性:保证新增padding和border之后,盒子元素的宽度和高度不变
- 取值:
- content-box:元素的宽高=border+padding+content,标准盒子模型
- border-box:元素的宽高=width/height的宽高,IE盒子模型
- 增加padding/border之后还想保持盒子元素的宽高不变,就要减去内容的宽度和高度
- ✗padding-box:元素的宽高=padding+width,只有firefox支持
- inherit:规定应从父元素继承 box-sizing 属性的值。
- 取值:
- 建议使用标准 W3C 盒子模型
标准W3C盒子模型
IE盒子模型
区别
★ width包含的范围
- 标准盒子模型:content
- IE盒子模型:content+padding+border
★ div宽度包含的范围
- 标准盒子模型:border+padding+width
- IE盒子模型:width
<!DOCTYPE html>
<html>
<head>
<title>Box</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
.border {
/* IE盒子:width 100分配到content 98和border 1*2 */
box-sizing: border-box;
}
.content {
/* W3C盒子:width 100就是content 100 */
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="border"></div>
<div class="content"></div>
</body>
</html>
画一条0.5px的线
✘直接设置
不同浏览器表现不一样,不太可靠
1. meta viewport
1px的线通过 meta viewport中,scale的设置,可以缩放变成0.5倍,则得到0.5px的线。
<meta name="viewport" content="width=device-width,initial-sacle=0.5">
<style>
.hr.viewport{
border-top: solid black 1px;
}
</style>
<div class="hr viewport"></div>
▲仅限移动端
2. transform:scale()缩放
为1px的线添加上CSS样式,transform:scaleY(0.5);
<style>
.hr.scale-half{
border-top: solid black 1px;
transform: scaleY(0.5);
}
</style>
<div class="hr scale-half"></div>
可继承属性
只有颜色,文字,字体间距行高对齐方式,和列表的样式可以继承
- 字体系列:font、font-*
- 文本系列:text-indent 缩进、line-height 行高、text-align 文本水平对齐、字间隙、字符间距、文本大小写、文本方向
- 元素可见性:visibility
- 表格布局属性
- 列表样式属性
- 等等
link标签和@import的区别
<link>
标签- 定义文档与外部资源的关系。
- 最常见的用途是链接样式表。
- HTML标签
- 页面加载时加载
- 样式权重高于
@import
,强烈建议
<head>
<!-- 引入样式表 -->
<link rel="stylesheet" type="text/css" href="theme.css" />
<!-- 引入图标 -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
</head>
@import
语句- 指定导入的外部样式表及目标媒体。
- CSS提供
- 页面加载结束后加载
- IE5以上才能识别
<style type="text/css">
<!-- 引入样式表 -->
@import url("style.css")
</style >
transition和animation的区别
transition过渡(简写属性)
- 需要触发事件
- 只有两个关键帧,from…to…
属性 | 描述 |
---|---|
transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
transition-duration | 规定完成过渡效果需要多少秒或毫秒。默认为0,必须设置,否则不会产生过渡效果。 |
transition-timing-function | 规定速度效果的速度曲线。 |
transition-delay | 定义过渡效果何时开始。 |
/* 把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px: */
div:hover{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
animation(简写属性)
- 不需要触发事件
- 可以多个关键帧
- animation: name duration timing-function delay iteration-count direction;
属性 | 描述 | 值 |
---|---|---|
animation-name | 规定需要绑定到选择器的 keyframe 名称。 | |
animation-duration | 规定完成动画所花费的时间,以秒或毫秒计。 | 0(默认)/n,必须设置,否则不会播放动画。 |
animation-timing-function | 规定动画的速度曲线。 | linear/ease慢-快-慢(默认)/ease-in慢进/ease-out慢出/ease-in-out慢进慢出 |
animation-delay | 规定在动画开始之前的延迟。 | 0(默认) |
animation-iteration-count | 规定动画应该播放的次数。 | 1(默认)/n/infinite |
animation-direction | 规定是否应该轮流反向播放动画。 | normal(默认)/alternate |
animation-play-state | 规定是否运行此动画。 | paused/running(默认) |
div{
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst{
0%{background: red;}
50%{background: green;}
75%(中间再可以添加关键帧)
100%{background: yellow;}
}
/* Safari 与 Chrome */
@-webkit-keyframes myfirst {
0%{background: red;}
50%{background: green;}
75%(中间再可以添加关键帧)
100%{background: yellow;}
}
响应式布局
Flex布局
- Flex即Flexible Box,“弹性布局”
- 基于盒状模型,依赖display属性 + position属性 + float属性。
- 容器包括外层的父元素和内层的子元素,轴包括主轴(水平)和交叉轴(垂直)。
display: flex;
display: inline-flex; /* 行内元素 */
display: -webkit-flex; /* Webkit内核/Safari */
display: flex;
注意:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
Flex容器属性
属性 | 描述 | 取值 |
---|---|---|
flex-direction | 规定子item的排列方式。 | row (默认值,从左往右) / row-reverse / column从上往下 / column-reverse |
flex-wrap | 规定换行规则。 | nowrap (默认值) / wrap / wrap-reverse |
flex-flow | direction和wrap的简写属性 | <flex-direction> <flex-wrap> |
justify-content | 规定子item沿主轴水平对齐方式。 | flex-start (默认值) / flex-end / center / space-between等间距均匀分布 / space-around等边距均匀分布 |
align-items | 规定子item垂直对齐方式。 | flex-start / flex-end / center / baseline / stretch (默认值) |
align-content | 规定多行沿交叉轴对齐方式。 | flex-start / flex-end / center / space-between / space-around / stretch (默认值) |
Flex项目属性
属性 | 描述 | 取值 |
---|---|---|
order | 规定子item的排列方式。 | 数值越小,排列越靠前,默认为0。 |
flex-grow | 规定子item的放大比例。 | 默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。 |
flex-shrink | 规定子item的缩小比例 | 默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。 |
flex-basis | 规定子item在分配多余的空间,项目占据的空间。 | 默认值为auto,即项目的本来大小。可以设为固定值如350px |
flex | flex-grow, flex-shrink 和 flex-basis的简写属性。 | 默认值为0 1 auto。后两个属性可选。 |
align-self | 允许单个项目与其他项目不一样的对齐方式,可以覆盖align-items。 | 默认属性为auto,表示继承父元素的align-items。 |
Grid布局(兼容性较差)
网格布局(Grid)是最强大的 CSS 布局方案。
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。
- 设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
⭐⭐垂直居中的方法
单行内联(inline-)元素垂直居中
- 单行文字
通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中。
<head>
<style>
div.margin-auto {
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img.margin-auto {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="margin-auto">
<img class="margin-auto" src="../9.png" />
</div>
</body>
- 图片
多行元素垂直居中
- table-cell
设置父元素的display为table-cell,并且text-align设为center(水平居中),vertical-align设为middle(垂直居中)。
<head>
<style>
div.inline {
width: 400px;
height: 120px;
line-height: 120px;
border: 1px solid #465468;
}
</style>
</head>
<body>
<div class="inline">css垂直居中</div>
</body>
- 利用flex
设置父元素的display为flex,并且设置align-items和justify-content为center。
<head>
<style>
div.flex {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 400px;
height: 400px;
border: 1px solid #465468;
}
</style>
</head>
<body>
<div class="flex">
<img class="flex" src="../9.png" />
</div>
</body>
- 伪元素
在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐vertical-align: middle;
,从而达到垂直居中的目的。但是这个方法要求待居中的元素是 inline-block,不是一个真正通用的方案。
<head>
<style>
div.ghost {
width: 400px;
height: 200px;
border: 1px solid #465468;
}
div.ghost div {
display: inline-block;
width: 150px;
background-color: yellow;
vertical-align: middle;
}
div.ghost::before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="flex">
<img class="flex" src="../9.png" />
</div>
</body>
块级元素垂直居中
- 子绝父相+margin: auto法
父元素position为relative,子元素为absolute,上下左右为0,margin:auto; 可以实现脱离文档流的居中.
<head>
<style>
div.margin-auto {
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img.margin-auto {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="margin-auto">
<img class="margin-auto" src="../9.png" />
</div>
</body>
- 子绝父相+margin负值法
通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就可以实现垂直居中了。
<head>
<style>
div.margin-negative {
width: 400px;
height: 400px;
border: 1px solid #465468;
position: relative;
}
img.margin-negative {
width: 180px;
height: 190px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -90px; /*height的一半*/
margin-left: -80px; /*width的一半*/
}
</style>
</head>
<body>
<div class="margin-negative">
<img class="margin-negative" src="../9.png" />
</div>
</body>
- 子绝父相+transform位移
<head>
<style>
div.transform {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #465468;
}
img.transform {
position: absolute;
/* top: 50%; 如果用了top位移 translate就变成-50%*/
transform: translate(50%, 50%);
}
</style>
</head>
<body>
<div class="transform">
<img class="transform" src="../9.png" />
</div>
</body>
优点:不必提前知道被居中元素的尺寸了。因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
块元素和行内元素
块元素 block
- 独占一行
- 自动填满父元素
- 可以设置margin和pading以及高度和宽度
- 包括:
- 标题标签:h1, h2, h3, h4, h5, h6
- 表格标签:table, td, th
- 列表标签:dl, dt, ol, ul, li
- 其他:div, p, form, pre, hr
行内元素 inline
- 不会独占一行
- width和height会失效
- 垂直方向的padding和margin会失效
- 包括:
- 文本:em, strong, span, textarea, code
- 表单:button, input, label, select
- 其他:img
多行元素的文本省略号
<style>
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
<div>
fwejvijgc,mgice,gcjg3qjxdpiwjec,hgmavcoijggb3niqcufu43cxnfmwlcn.groeangc.bsua.bxf.
fwejvijgc,mgice,gcjg3qjxdpiwjec,hgmavcoijggb3niqcufu43cxnfmwlcn.groeangc.bsua.bxf.
fwejvijgc,mgice,gcjg3qjxdpiwjec,hgmavcoijggb3niqcufu43cxnfmwlcn.groeangc.bsua.bxf.
</div>
隐藏
- 透明度opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的;
- 可视性visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件;
- 显示display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样。
定位属性position
固定定位fixed
- 元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。
- Fixed定位使元素的位置与文档流无关,因此不占据空间。
- Fixed定位的元素和其他元素重叠。
相对定位relative
- 设置为相对定位的元素框会偏移某个距离。
- 元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
- 可能导致覆盖其它框。
绝对定位absolute
- 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于
<html>
。 - absolute 定位使元素的位置与文档流无关,因此不占据空间。
- absolute 定位的元素可和其他元素重叠。
?粘性定位sticky
- 元素先按照普通文档流定位,然后相对于该元素在流中的flow root(BFC)和 containing block(最近的块级祖先元素)定位。
- 元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
默认定位Static
- position的默认值。
- 没有定位,元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)。
继承inherit
规定应该从父元素继承position 属性的值。
双边距重叠问题(外边距折叠)
多个相邻(兄弟或者父子关系)普通流的块元素垂直方向marigin会重叠
折叠的结果为:
- 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时,折叠结果是两者的相加的和。
⭐浮动清除
参考https://www.cnblogs.com/ForEvErNoME/p/3383539.html
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
浮动溢出
浮动清除后
- 使用带clear属性的空元素
什么都不做,给浮动元素后面的元素添加clear属性,如<div class="clear"></div>
,并在CSS中赋予.clear{clear:both;}
属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />
来进行清理。
<style>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
</style>
<div class="news">
<img src="../9.png" />
<p>some text</p>
<div class="clear"></div>
</div>
- 使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;
或overflow:auto;
可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1
。
在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
<style>
.news {
background-color: gray;
border: solid 1px black;
overflow: hidden;
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
<div class="news">
<img src="../9.png" />
<p>some text</p>
</div>
- 给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。
- ⭐使用CSS的:after伪元素(推荐)
结合 :after
伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
<style>
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clearfix:after {
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
</style>
<div class="news clearfix">
<img src="../9.png" />
<p>some text</p>
</div>
三栏布局
- 绝对定位布局:position + margin
左右两栏绝对定位,父容器相对定位,中间栏设置margin自适应
<!DOCTYPE html>
<html>
<head>
<title>ThreeColumn</title>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
height: 100%;
position: relative;
}
.left {
width: 150px;
height: 100%;
position: absolute;
left: 0;
background: red;
}
.right {
width: 150px;
height: 100%;
position: absolute;
right: 0;
background: blue;
}
.center {
height: 100%;
background: blueviolet;
margin: 0 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
</body>
</html>
缺点: 如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。
- 浮动布局: float + margin
左右两栏浮动,中间使用设置margin实现自适应
<!DOCTYPE html>
<html>
<head>
<title>ThreeColumn</title>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
}
.left {
width: 150px;
height: 100%;
float: left;
background: red;
}
.right {
width: 150px;
height: 100%;
float: right;
background: blue;
}
.center {
height: 100%;
background: blueviolet;
margin: 0 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
</body>
</html>
- table布局
父元素设置display: table, 设置子元素为列的属性为display:table-cell。
<!DOCTYPE html>
<html>
<head>
<title>ThreeColumn</title>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.container > div {
display: table-cell;
}
.left {
width: 150px;
background-color: red;
}
.center {
background-color: blueviolet;
}
.right {
width: 150px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
</body>
</html>
- flex布局
父元素设置display:flex,子元素默认从左往右排列。
<!DOCTYPE html>
<html>
<head>
<title>ThreeColumn</title>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.container {
display: flex;
width: 100%;
height: 100%;
}
.left {
width: 150px;
background-color: red;
}
.center {
flex: 1;
background-color: blueviolet;
}
.right {
width: 150px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
</body>
</html>
- Grid布局
父元素设置display: grid;
,并且分配列宽 grid-template-columns: 100px auto 200px;
<!DOCTYPE html>
<html>
<head>
<title>ThreeColumn</title>
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.container {
display: grid;
width: 100%;
height: 100%;
grid-template-columns: 150px auto 150px;
}
.left {
background: red;
}
.center {
background: blue;
}
.right {
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
</body>
</html>
⭐BFC
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
BFC是一个独立
的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直
的沿着其父元素的边框排列。
BFC渲染规则
- BFC垂直方向边距重叠。
- BFC的区域不会与浮动元素的box重叠。
- BFC是一个独立的容器,外面的元素不会影响里面的元素。
- 计算BFC高度的时候浮动元素也会参与计算
BFC的作用
- 防止浮动导致父元素高度塌陷(清除浮动)
清除前
<style>
.container {
border: 1px solid blue;
}
.inner {
width: 100px;
height: 100px;
float: right;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">Inner</div>
</div>
</body>
在父元素使用overflow: hidden;
清除后
<style>
.container {
border: 1px solid blue;
overflow: hidden;
}
.inner {
width: 100px;
height: 100px;
float: right;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">Inner</div>
</div>
</body>
- 阻止元素被浮动元素覆盖
浮动元素可能盖在其他非浮动元素上。
<style>
.left{
float: left;
width: 200px;
background: red;
}
.right{
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="left">Float</div>
<div class="right">Not float</div>
</body>
在第二个元素加上overflow: hidden;
清除后
<style>
.left{
float: left;
width: 200px;
background: red;
}
.right{
height: 100px;
background: blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="left">Float</div>
<div class="right">Not float</div>
</body>
- 避免外边距折叠
同一个BFC容器中,在垂直方向可能发生边距坍塌,即两个元素margin都是50,最终可能只有50。
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: #108ee9;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
如果想要避免外边距发生重叠,可以将其放在不同的BFC容器中。并用overflow: hidden;
。
<style>
div {
overflow: hidden;
}
p {
width: 100px;
height: 100px;
margin: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div><p></p></div>
<div><p></p></div>
</body>