<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font: 12px '微软雅黑';}
ul{list-style: none;}
a{text-decoration: none;color: #000;}
.clearfix:after{content: '';display: block;clear:both;}
#box{
width: 770px;
background-color:rgb(215,215,215) ;
margin: auto;
position: relative;
}
header{
font-weight: bold;
}
.head_1{
width: 770px;
height: 90px;
}
nav{
height: 30px;
background-color: rgb(253,206,251);
font-weight: bolder;
}
.sec_1{
height: 90px;
}
.fen{
height: 15px;
}
dialog{
position:absolute ;
top:30px;
margin: auto;
/* margin:10px auto; */
width: 150px;
height: 150px;
background-color: rgb(152,19,252);
border: NONE;
}
.arc{
height: 90px;
background-color: rgb(79,230,248);
}
.sec_2{
height: 250px;
background-color: rgb(254,250,201);
}
.sec_2_left{
float: left;
width: 400px;
height: 250px;
/* background-color: red; */
}
.sec_2_right{
float: left;
width: 370px;
height: 250px;
/* background-color: green; */
}
img{
width: 200px;
height: 150px;
border: 1px solid black;
}
.sec_2_img,.sec_2_con,.arc2_1,.arc2_2,.arc2_3{
float: left;
}
.sec_3{
height: 220px;
background-color: rgb(48,62,255);
}
.arc_2{
height:170px ;
background-color:rgb(198,248,255) ;
}
.arc2_1,.arc2_2,.arc2_3{
/* background-color: red; */
width: 250px;
}
footer{
height:90px ;
background-color: rgb(255,64,91);
}
</style>
</head>
<body>
<div id="box">
<header class="head_1"></header>
<!-- 导航 -->
<nav>nav</nav>
<section class="sec_1"></section>
<!-- 自定义框 -->
<dialog open>
<header class="head_2">surround</header>
<article>content</article>
</dialog>
<!-- 内容 -->
<article class="arc">
<header class="head_3">Welcome to Surround</header>
<article>content</article>
</article>
<!-- 分割条 -->
<section class="fen"></section>
<section class="sec_2">
<!-- 左半部分内容 -->
<section class="sec_2_left">
<!-- 标题 -->
<header>Lorem ipsum sed aliquam</header>
<!-- 图片 -->
<section class="sec_2_img">
<figure>
<img src="../image/2.jpg"/>
<figcaption>
<!-- 定义标题，figcaption放在figure里的第一个位置或者最后一个位置 -->
</figcaption>
</figure>
</section>
<!-- 内容 -->
<section class="sec_2_con">content</section>
</section>
<section class="sec_2_right">
<header>Praesent scelerisque</header>
<article>
contentA <br>
contentB <br>
contentC <br>
contentD <br>
contentE <br>
contentF <br>
</article>
</section>
</section>
<!-- 分割条 -->
<section class="fen"></section>
<!-- 内容 -->
<section class="sec_3">section3</section>
<!-- 分割条 -->
<section class="fen"></section>
<article class="arc_2">
<section class="arc2_1">
<header>article1</header>
<article>content1</article>
</section>
<section class="arc2_2">
<header>article2</header>
<article>content1</article>
</section>
<section class="arc2_3">
<header>article3</header>
<article>content1</article>
</section>
</article>
<section class="fen"></section>
<footer>footer</footer>
</div>
</body>
</html>
