马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
为什么写在body内的元素div不被body所包容?
以至于设定的 底部留白 不处在页面最底端
html:<!doctype html>
<html lang="zh-CN">
<head>
<meta charset='utf-8'>
<title>start</title>
<link rel='shortcut icon' href='../image/ico/start.ico'/>
<link rel='stylesheet' type='text/css' href='start.css'>
</head>
<body>
<div class = 'top'>
<div class = 'start'><a href='start.html'>
<img src='../image/ico/start.ico' alt='MyDream'/>
<p class = 'mydream'>MyDream</p></a>
</div>
</div>
<div class = 'title'>
<h1>欢迎来到我的私人网站</h1>
<h2>Welcome To My Private Website</h2>
</div>
<div class = 'bodyx'>
<div class = 'big'>
<p>作者:白居易</p>
<p>汉皇重色思倾国,御宇多年求不得。</p>
<p>杨家有女初长成,养在深闺人未识。</p>
<p>天生丽质难自弃,一朝选在君王侧。</p>
<p>回眸一笑百媚生,六宫粉黛无颜色。</p>
<p>春寒赐浴华清池,温泉水滑洗凝脂。</p>
<p>侍儿扶起娇无力,始是新承恩泽时。</p>
<p>云鬓花颜金步摇,芙蓉帐暖度春宵。</p>
<p>春宵苦短日高起,从此君王不早朝。</p>
<p>承欢侍宴无闲暇,春从春游夜专夜。</p>
<p>后宫佳丽三千人,三千宠爱在一身。</p>
<p>金屋妆成娇侍夜,玉楼宴罢醉和春。</p>
<p>姊妹弟兄皆列土,可怜光彩生门户。</p>
<p>遂令天下父母心,不重生男重生女。</p>
<p>骊宫高处入青云,仙乐风飘处处闻。</p>
<p>缓歌慢舞凝丝竹,尽日君王看不足。</p>
<p>渔阳鼙鼓动地来,惊破霓裳羽衣曲。</p>
<p>九重城阙烟尘生,千乘万骑西南行。</p>
<p>翠华摇摇行复止,西出都门百余里。</p>
<p>六军不发无奈何,宛转蛾眉马前死。</p>
<p>花钿委地无人收,翠翘金雀玉搔头。</p>
<p>君王掩面救不得,回看血泪相和流。</p>
<p>黄埃散漫风萧索,云栈萦纡登剑阁。</p>
<p>峨嵋山下少人行,旌旗无光日色薄。</p>
<p>蜀江水碧蜀山青,圣主朝朝暮暮情。</p>
<p>行宫见月伤心色,夜雨闻铃肠断声。</p>
<p>天旋地转回龙驭,到此踌躇不能去。</p>
<p>马嵬坡下泥土中,不见玉颜空死处。</p>
<p>君臣相顾尽沾衣,东望都门信马归。</p>
<p>归来池苑皆依旧,太液芙蓉未央柳。</p>
<p>芙蓉如面柳如眉,对此如何不泪垂。</p>
<p>春风桃李花开夜,秋雨梧桐叶落时。</p>
<p>西宫南内多秋草,落叶满阶红不扫。</p>
<p>梨园弟子白发新,椒房阿监青娥老。</p>
<p>夕殿萤飞思悄然,孤灯挑尽未成眠。</p>
<p>迟迟钟鼓初长夜,耿耿星河欲曙天。</p>
<p>鸳鸯瓦冷霜华重,翡翠衾寒谁与共。</p>
<p>悠悠生死别经年,魂魄不曾来入梦。</p>
<p>临邛道士鸿都客,能以精诚致魂魄。</p>
<p>为感君王辗转思,遂教方士殷勤觅。</p>
<p>排空驭气奔如电,升天入地求之遍。</p>
<p>上穷碧落下黄泉,两处茫茫皆不见。</p>
<p>忽闻海上有仙山,山在虚无缥渺间。</p>
<p>楼阁玲珑五云起,其中绰约多仙子。</p>
<p>中有一人字太真,雪肤花貌参差是。</p>
<p>金阙西厢叩玉扃,转教小玉报双成。</p>
<p>闻道汉家天子使,九华帐里梦魂惊。</p>
<p>揽衣推枕起徘徊,珠箔银屏迤逦开。</p>
<p>云鬓半偏新睡觉,花冠不整下堂来。</p>
<p>风吹仙袂飘飖举,犹似霓裳羽衣舞。</p>
<p>玉容寂寞泪阑干,梨花一枝春带雨。</p>
<p>含情凝睇谢君王,一别音容两渺茫。</p>
<p>昭阳殿里恩爱绝,蓬莱宫中日月长。</p>
<p>回头下望人寰处,不见长安见尘雾。</p>
<p>惟将旧物表深情,钿合金钗寄将去。</p>
<p>钗留一股合一扇,钗擘黄金合分钿。</p>
<p>但教心似金钿坚,天上人间会相见。</p>
<p>临别殷勤重寄词,词中有誓两心知。</p>
<p>七月七日长生殿,夜半无人私语时。</p>
<p>在天愿作比翼鸟,在地愿为连理枝。</p>
<p>天长地久有时尽,此恨绵绵无绝期。</p>
</div>
<div class = 'bottom'>底部留白</div>
</div>
</body>
</html>
css:body{
position:relative;
}
.top{
position:fixed;
top:0px;
}
.start{
margin:6px;
transform:translateX(60%);
width:160px;
height:48px;
background-color:blue;
}
.mydream{
font-size:18px;
float:right;
margin-top:12px;
margin-right:10%;
}
.title{
padding-top:20px;
padding-bottom:20px;
margin-bottom:10px;
background-size:100% 100%;
color:rgb(0,160,250);
border-bottom-style:solid;
border-bottom-color:rgb(0,20,120);
}
h1{
text-align:center;
font-size:300%;
}
h2{
text-align:right;
transform:translateX(-30%);
}
div.bodyx{
position:relative;
}
div.big{
position:absolute;
left:20%;
right:20%;
text-align:center;
background-color:yellow;
font-size:300%;
margin-bottom:50px;
}
div.bottom{
background-color:rgb(255,255,255);
position:absolute;
bottom:0;
width:100%;
}
|