怎么用html和css做出色塊
慕先生4562452
2016-10-04 19:49:44
1 回答
業(yè)余奶茶品鑒師
TA貢獻260條經(jīng)驗 獲得超388個贊
<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8">
????????<title>Test</title>
????????<style>
????????????*{
????????????????margin:?0px;
????????????????padding:?0px;
????????????}
????????????header{
????????????????width:?800px;
????????????????height:?80px;
????????????????background:?#3567AC;
????????????????margin:?0px?auto;
????????????????text-align:?center;
????????????????line-height:?80px;
????????????}
????????????section{
????????????????width:?800px;
????????????????height:?600px;
????????????????margin:?0px?auto;
????????????????text-align:?center;
????????????}
????????????section>div{
????????????????float:?left;
????????????}
????????????section>div:first-child{
????????????????height:?600px;
????????????????width:?150px;
????????????????background:?#E3912B;
????????????}
????????????section>div:nth-child(2){
????????????????height:?600px;
????????????????width:?650px;
????????????}
????????????section>div:nth-child(2)>div:first-child{
????????????????height:?250px;
????????????????width:?650px;
????????????}
????????????section>div:nth-child(2)>div:first-child>div{
????????????????float:?left;
????????????}
????????????section>div:nth-child(2)>div:first-child>div:first-child{
????????????????width:?300px;
????????????????height:?250px;
????????????????background:?#DA4D44;
????????????}
????????????section>div:nth-child(2)>div:first-child>div:nth-child(2){
????????????????width:?350px;
????????????????height:?250px;
????????????????background:?#3DBBD1;
????????????}
????????????section>div:nth-child(2)>div:nth-child(2){
????????????????height:?350px;
????????????????width:?650px;
????????????}
????????????section>div:nth-child(2)>div:nth-child(2)>div{
????????????????float:?left;
????????????}
????????????section>div:nth-child(2)>div:nth-child(2)>div:first-child{
????????????????width:?230px;
????????????????height:?350px;
????????????????background:?#C4D960;
????????????}
????????????section>div:nth-child(2)>div:nth-child(2)>div:nth-child(2){
????????????????width:?190px;
????????????????height:?350px;
????????????????background:?#538FCE;
????????????}
????????????section>div:nth-child(2)>div:nth-child(2)>div:nth-child(3){
????????????????width:?230px;
????????????????height:?350px;
????????????????background:?#EDA948;
????????????}
????????????footer{
????????????????width:?800px;
????????????????height:?80px;
????????????????background:?#578AC1;
????????????????margin:?0px?auto;
????????????????text-align:?center;
????????????????line-height:?80px;
????????????}
????????</style>
????</head>
????<body>
????????<header>
????????????<h1>header</h1>
????????</header>
????????<section>
????????????<div><h1>1</h1></div>
????????????<div>
????????????????<div>
????????????????????<div><h1>2</h1></div>
????????????????????<div><h1>3</h1></div>
????????????????</div>
????????????????<div>
????????????????????<div><h1>4</h1></div>
????????????????????<div><h1>5</h1></div>
????????????????????<div><h1>6</h1></div>
????????????????</div>
????????????</div>
????????</section>
????????<footer>
????????????<h1>footer</h1>
????????</footer>
????</body>
</html>就是這樣的。望采納
-
慕先生4562452section>div:nth-child(2){ height: 600px; width: 650px; } section>div:nth-child(2)>div:first-child{ height: 250px; width: 650px; } section>div:nth-child(2)>div:first-child>div{ float: left; -
慕先生4562452<section> <div><h1>1</h1></div> <div> <div> <div><h1>2</h1></div> <div><h1>3</h1></div> </div> <div> <div><h1>4</h1></div> <div><h1>5</h1></div> <div><h1>6</h1></div> </div> </div> </section> 這兩段代碼是什么意思？
添加回答
舉報
0/150
提交
取消