收藏
批改狀態(tài)：合格
老師批語：與雙飛翼類似,還有一個(gè)圣杯布局, 有空了解一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0708默寫雙飛翼作業(yè)</title>
<style type="text/css">
.header {
background-color: lightblue;
}
.header .content {
width: 1000px;
height: 60px;
background-color: lightcoral;
margin: 0 auto;
}
.header .content .nav {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
.header .content .nav .item {
list-style-type: none;
}
.header .content .nav .item a {
float: left;
min-width: 80px;
min-height: 60px;
line-height: 60px;
color: white;
padding: 0 15px;
text-decoration: none;
text-align: center;
}
.header .content .nav .item a:hover {
background-color: blue;
font-size: 1.1rem;
}
.container {
width: 1000px;
margin: 5px auto;
background-color: lightgray;
overflow: hidden;
}
.wrap {
width: inherit;
min-height: 800px;
background-color: cyan;
}
.left {
width: 200px;
min-height: 800px;
background-color: lightcoral;
}
.right {
width: 200px;
min-height: 800px;
background-color: saddlebrown;
}
.wrap, .left, .right {
float: left;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
.main {
padding-left: 200px;
padding-right: 200px;
}
.footer {
background-color: lightgray;
}
.footer .content {
width: 1000px;
height: 60px;
background-color: #444;
margin: 0 auto;
}
.footer .content p {
text-align: center;
line-height: 60px;
}
.footer .content a {
text-decoration: none;
color: lightgrey;
}
.footer .content a:hover {
color: blue;
}
</style>
</head>
<body>
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="">首頁</a></li>
<li class="item"><a href="">公司新聞</a></li>
<li class="item"><a href="">最新產(chǎn)品</a></li>
<li class="item"><a href="">關(guān)于我們</a></li>
<li class="item"><a href="">聯(lián)系我們</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">內(nèi)容區(qū)</div>
</div>
<div class="left">左側(cè)</div>
<div class="right">右側(cè)</div>
</div>
<div class="footer">
<div class="content">
<p>
<a href="">? PHP中文網(wǎng)版權(quán)所有</a> |
<a href="">0551-88889999</a> |
<a href="">皖I(lǐng)CP2016098801-1</a>
</p>
</div>
</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)