<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>task6</title>
<link?rel="stylesheet"?type="text/css"?href="baidu_task6.css">
</head>
<body>
<div?class="container">
<header>
<div?class="ife_url">
<p>我的男神女神</p>
</div>
<p?class="time">2016.09</p>
<hr?class="url_line">
</header>
<section?class="iu">
<div?class="left">
<img?src="e:/image/iu2.jpg"?width="641"?height="301">
<div?class="left_green">
</div>
<div?class="left_red">
</div>
</div>
<div?class="right">
<div?class="right_p1">
<hr?class="iu_line1">
<p?class="p_one">iu</br>beautiful</p>
<h4>How?should?I?greet?thee,?with?silence?and?tears.?</h4>
<p?class="p_two">Hello?World</p>
</div>
<div?class="right_p2">
<div?class="p2_one">
<p>23</p>
</div>
<div?class="p2_two">
<p?class="one">
I?love
</p>
<p?class="two">
youyouyou...
</p>
</div>
<hr?class="iu_line2">
</div>
</div>
</section>
<section?class="wwh">
<div?class="what">
<h2>WHAT</h2>
<p>iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美iu美</p>
</div>
<div?class="when">
<h2>WHEN</h2>
<p>iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美iu真的美</p>
</div>
<div?class="how">
<h2>HOW</h2>
<p>iu真的真的美iu真的真的美iu真的真的美iu真的真的美iu真的真的美iu真的真的美iu真的真的美iu真的真的美iu真的真的美</p>
</div>
</section>
<section?class="part3">
<div?class="part3_container">
<div?class="part3_left">
<div?class="left_head">
??
<p?class="en"><span>MA</span>??LONG</p>
</br>
<p?class="ch">馬龍</p>
<hr?class="part3_line">
</div>
<div?class="left_down">
<p?class="passage1"><span>帥</span>呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了</p>
<img?src="e:/image/malong.jpg"?width="226"?height="300">
</br>
<p?class="passage2">帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆</p>
</br>
<p?class="passage3">帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了帥呆了</p>
</div>
</div>
<div?class="part3_right">
<img?src="e:/image/malong2.jpg"?width="458"?height="275">
<div?class="part3_right_down">
<div?class="down1">
<p>馬龍帥馬龍帥馬龍帥馬龍帥.....................很帥</p>
<p>馬龍帥馬龍帥馬龍帥馬龍帥.....................很帥</p>
<p>馬龍帥馬龍帥馬龍帥馬龍帥.....................很帥</p>
</div>
<div?class="down2"></div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>*{
padding:?0;
margin:?0;
}
body{
background-color:?#A9BEFE;
color:#767777;
font-size:?12px;
font-family:?"Microsoft?Yahei";
margin:?0?auto;
}
div.container{
background-color:?white;
width:?892px;
?
margin:?100px?auto;
padding:?20px?44px;
}
header?div.ife_url{
width:?110px;
height:?61px;
background-color:?#B26060;
float:?left;?
}
header?div.ife_url?p{
color:?white;
font-family:?"Microsoft?Yahei";
font-size:?15px;
font-weight:?600;
margin-top:?40px;
margin-left:?5px;
clear:?both;
}
header?p.time{
font-family:?"Microsoft?Yahei";
font-size:?15px;
font-weight:?400;
float:?right;
margin-top:?40px;
}
header?hr.url_line{
border:?2px?#938e8c?solid;
width:?892px;
margin-top:?40px;
clear:?both;
}
section.iu{
margin-top:?30px;
}
section.iu?div.left{
position:?relative;
width:?641px;
height:?301px;
display:?inline-block;
}
section.iu?div.left_green{
position:?absolute;
top:?0px;
left:?0px;
background-color:?#BBECBD;
width:?191px;
height:?301px;
opacity:?0.5;
}
section.iu?div.left_red{
position:?absolute;
top:?0px;
right:?0px;
background-color:?#E7BAE7;
width:?191px;
height:?301px;
opacity:?0.5;
}
section.iu?div.right{
float:?right;
width:?220px;
height:?301px;
}?
section.iu?hr.iu_line1{
border:?2px?#cc8091?solid;
width:?203px;
}
section.iu?p.p_one{
font-size:?24px;
font-family:?"5";
color:?#cc8091;
line-height:?30px;
text-decoration:?underline;
}
section.iu?p.p_two{
font-size:?55px;
color:?#75b86b;
font-family:?"5";
font-style:?italic;
}
section.iu?div.p2_one{
font-size:?50px;
color:?#cc8091;
font-family:?"5";
margin-left:?10px;
width:?55%;
display:?inline-block;
}
section.iu?div.p2_two{
display:?inline-block;
width:?35%;
margin-top:?20px;
}
section.iu?div.p2_two?p.one{
font-size:?15px;
color:?#cc8091;
font-family:?"5";
}
section.iu?div.p2_two?p.two{
font-size:?12px;
color:?#cc8091;
font-family:?"5";
}
section.iu?div.right_p2?hr.iu_line2{
border:?2px?#cc8091?solid;
width:?203px;
margin-top:?0px;
}
section.wwh{
width:?641px;
margin-top:?30px;
overflow:?hidden;
}
section.wwh?.what{
width:?35%;
display:?inline-block;
padding:?0?10px?0?10px;
float:?left;
}
section.wwh?div.what?h2{
font-size:?16px;
font-family:?"Microsoft?Yahei";
color:?#418c59;
font-weight:?bold;
text-decoration:?underline;
line-height:?30px;
}
section.wwh?.when{
width:?28%;
display:?inline-block;
padding:?0?10px?0?10px;
float:?left;
}
section.wwh?.when?h2{
font-size:?16px;
font-family:?"Microsoft?Yahei";
color:?#d2994f;
font-weight:?bold;
text-decoration:?underline;
line-height:?30px;
}
section.wwh?.how{
width:?25%;
display:?inline-block;
padding:?0?10px?0?10px;
float:?left;
}
section.wwh?.how?h2{
font-size:?16px;
font-family:?"Microsoft?Yahei";
color:?#cc7680;
font-weight:?bold;
text-decoration:?underline;
line-height:?30px;
}
section.wwh?p{
font-size:?12px;
color:?#231815;
font-family:?"Microsoft?Yahei";
line-height:?16px;
opacity:?0.7;
}
section.part3{
width:?892px;
margin-top:?50px;
}
section.part3?div.part3_container{
position:?relative;
}
section.part3?div.part3_left{
width:?400px;
position:?absolute;
top:?0;
left:?0;
}
section.par3?div.left_head{
}
section.part3?div.left_head?p?span{
font-size:?72px;
color:?#f5e327;
font-family:?"SimHei";
font-weight:?bold;
font-style:?italic;
}
section.part3?div.left_head?p.en{
font-size:?42px;
color:?#11456b;
font-family:?"SimHei";
font-weight:?bold;
line-height:?16px;
}
section.part3?div.left_head?p.ch{
font-size:?33px;
color:?#11456b;
font-family:?"SimHei";
font-weight:?bold;
line-height:?10px;
display:?block;
}
section.part3?div.left_head?hr{
border:?2px?#11456b?solid;
width:?415px;
margin-top:?10px;
}
section.part3?div.left_down{
margin-top:?30px;
}
section.part3?div.left_down?p.passage1{
font-size:?12px;
color:?#767777;
font-family:?"SimSuncss";
}
section.part3?div.left_down?p?span{
font-size:?70px;
color:?#f5e327;
float:?left;
font-family:?"Microsoft?Yahei";
padding:?0;
}
section.part3?div.left_down?img{
float:?right;
}
section.part3?div.left_down?p.passage2{
font-size:?12px;
color:?#767777;
font-family:?"SimSuncss";
text-indent:?2em;
}
section.part3?div.left_down?p.passage3{
font-size:?12px;
color:?#767777;
font-family:?"SimSuncss";
text-indent:?2em;
}
section.part3?div.part3_right{
width:?458px;
position:?absolute;
top:?0;
right:?0;
margin-top:?30px;
}
section.part3?div.part3_right_down?{
margin-top:?20px;
width:?459px;
height:?318px;
background-color:?#90D2D0;
position:?relative;
}
section.part3?div.part3_right?div.down2{
position:?absolute;
bottom:?0;
left:?0;
width:?260px;
height:?160px;
background-color:?#BDFECF;
}container定高度是圖1，不定高度是圖2.怎樣container不定高度實現圖1；
1 回答
已采納
小白師兄
TA貢獻55條經驗 獲得超37個贊
第一種:
html,body{height:100%;}
.container{height:100%}第二種:
.container{
????position:absolute;
????top:0;
????left:0;
????bottom:0;
????right:0;
}
//top,left,right,bottom四個屬性的值可以根據你自己的需求自己調整!祝你好運!
- 1 回答
- 0 關注
- 1447 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消