<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a{
margin: 50px;
border: 1px solid #8A2BE2;
width: 1000px;
height: 700px;
background-image: url(img/1.jpg);
background-attachment: scroll;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
}
.a1{
border: 1px solid #00FFFF;
width: 1000px;
height: 130px;
margin-top:100px ;
}
.a11{
border: 1px solid #00FFFF;
width: 500px;
height: auto;
text-align: end;
float: left;
}
.a12{
float: right;
margin-right:50px ;
height: auto;
}
.b1{
border: 1px solid #00FFFF;
width: 1000px;
height: 110px;
margin-top:10px ;
}
.b11{
border: 1px solid #00FFFF;
width: 200px;
height: 100px;
margin-top:10px ;
float: left;
}
.b12{
border: 1px solid #00FFFF;
width: 200px;
height: 100px;
margin-top:10px ;
float: left;
}
</style>
</head>
<body >
<div class="a" >
<div class="a1">
<div class="a11">
<h2>Jerry</h2>
</div>
<div class="a12">
<img src="img/3.jpg"/>
</div>
</div>
<div class="b1">
<div class="b11">
qqqq<br />
qqqq<br />
qqqq<br />
</div>
<div class="b12">
qqq<br />
qqqq<br />
qqqq<br />
</div>
</div>
<div class="b1">
qqq<br />
qqqq<br />
qqqq<br />
</div>
<div class="b1">
qqq<br />
qqqq<br />
qqqq<br />
</div>
</div>
</body>
</html>
簡單的網頁編輯：盒子模型
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
網頁設計大賽大神養成之路第一天
在慕課網進行了第一次的學習，因爲我的專業有開設相似課程，再加上老師講的通俗易懂，所以聽起來不算費力。這讓我有了小小的信心。 在已經被教會了如何編寫代碼來設計網絡頁面後，再來慕課網詳細學習前端開發的