标签：round 一个 智慧 text 单位 css ted ash title
<!doctype html> <html> <head> <meta charset="utf-8"> <title>sy5-2</title> </head> <style type="text/css"> .box1{ width: 100px; height: 100px; background-color:blue; border:1px black solid; float:left; } .box2{ width: 100px; height: 100px; background-color: red; float:left; border:1px black solid; } </style> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>sy5-2</title> </head> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color:#C41BE9; } .box2{ width: 300px; background-color: gray; border:10px black solid; margin: 0 auto;/*上下边距为0 左右边距自动适应 */ /*float:center; 错误，只有左右浮动，没有居中浮动*/ } </style> <body> <div class="box2"> <div class="box1"></div> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>sy5-3</title> </head> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color:#C41BE9; float:left; } .box2{ width: 300px; height: 200px;/*坑爹啊，没有定位高度，看不到父盒子的背景颜色*/ background-color: gray; border:10px black solid; margin: 0 auto;/*上下边距为0 左右边距自动适应 */ } </style> <body> <div class="box2"> <div class="box1"></div> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>sy5-3</title> </head> <style type="text/css"> .box1{ width: 1000px; height: 800px; margin: 0 auto; } .box2{ width:auto; height: 200px; background-color: gray; border:red 3px dashed; } .box3{ width:1000px; height: 400px; border:blue 3px solid; margin: 0 auto; } .box31{ width:300px; height: 400px; float:left; background-color: pink; } .box32{ width:700px; height:400px; background-color:#C41BE9; float:left; } .box4{ width:1000px; height: 200px; background-color: blue; border:dotted 3px red; } </style> <body> <div class="box1"> <div class="box2"> </div> <div class="box3"> <div class="box31"> </div> <div class="box32"> </div> </div> <div class="box4"> </div> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>sy5-4</title> </head> <style type="text/css"> .box0{ width: 1100px; height: 700px; margin: 0 auto; } .box1{ width: 150px; height: 700px; float:left; } .box11{ width: 150px; height: 550px; background-color:#1093E4; display: flex; } .box12{ width: 150px; height: 150px; background-image: url(颐和园图片.jpg); background-size: cover; } .box2{ width: 950px; height: 700px; float:left; } .box3{ width: 950px; height: 130px; } .box31{ width: 800px; height: 130px; background-color:#DF5DED; float:left; font-size:20px; } .box32{ width: 150px; height: 130px; float:left; background-color: pink; display: flex; } .box4{ width: 950px; height: 400px; } .box41{ width: 150px; height: 400px; background-color:#E4B837; float:left; display: flex; } .box42{ width:800px; height: 400px; background-color: #0FE38C; float:right; font-size:25px; } .box5{ width: 950px; height: 170px; } .box51{ width: 800px; height: 170px; background-color:#A1AFE9; float:left; display: flex; } .box52{ width:150px; height: 170px; background-color:#3856E9; float:left; display: flex; } .t1{/*为了让字体上下左右居中，文字部分再套一个div，并且父亲盒子display改为flex*/ text-align:center; font-size: 30px; font-family:"隶书"; margin: auto auto; font-weight:bold;/*字体加粗*/ } .t3{ text-align:center; font-size: 30px; font-family:"华文行楷"; margin: auto auto; font-weight:bold; } .t5{ text-align:center; margin: auto auto; font-size:30px; } </style> <body> <div class="box0"> <div class="box1"> <div class="box11" ><div class="t1" >颐和园</div></div> <div class="box12"></div> </div> <div class="box2"> <div class="box3"> <div class="box31">颐和园是我国现存最完好、规模最宏大的古代园林。位于北京市海淀区境内，距天安门20余公里，占地290公顷。</div> <div class="box32"><div class="t3">概述</div></div> </div> <div class="box4"> <div class="box41"><div class="t3">历史发展</div></div> <div class="box42">颐和园原为封建帝王的行宫和花园，远在1153年即在这里修建“西山八院”之一的“金山行宫”。1494年修建了园静寺，后皇室在此建成好山园。1664年清廷定都北京后，又将好山园更名为“瓮山行宫”。清乾隆年间，经过15年的修建工程，将该园改名为“清漪圆”。此时的清漪园，北自文昌阁至西宫门筑有围墙，东、南、西三面以昆明湖水为屏障，园内修建了许多亭台楼阁，桥廊斋榭，山清水秀，富丽堂皇。1860年，英法联军疯狂抢劫并焚烧了园内大部分建筑，除宝云阁（俗称“铜亭”）智慧海、多宝 琉璃塔幸存外，珍宝被洗劫一空，建筑夷为一片废墟。1888年慈待太后挪用海军经费3000万两白银，在清漪园的废墟上兴建起颐和园。1900年颐和园又遭八国联军的野蛮破坏，后慈禧又动用巨款重新修复。数百年来，这里一直是封建帝王、皇室的享乐之地，解放辟为公园。1961年国务院公布颐和园为全国重点文物保护单位。</div> </div> <div class="box5"> <div class="box51"><div class="t5">颐和园包括万寿山、昆明湖两大部分。</div></div> <div class="box52"><div class="t3">主要景观</div></div> </div> </div> </div> </body> </html>
标签：round 一个 智慧 text 单位 css ted ash title
原文地址：https://www.cnblogs.com/shoulinniao/p/10779577.html
