收藏
批改狀態(tài)：合格
老師批語：雙飛翼布局, 思想很重要, 理解了流程寫起來就快了
7月8日直播課作業(yè)：雙飛翼布局
這是運(yùn)行效果：
有一個疑問請教老師：不知道為什么主體和頁腳之間的空隙比較大，問題出在哪里？應(yīng)該怎么縮小這個空隙？
html代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>7月8日直播課作業(yè)</title> <link rel="stylesheet" href="static/css/0708.css"> </head> <body> <h1>7月8日直播課作業(yè)</h1> <hr> <!--作業(yè)：默寫出雙飛翼布局的基本思路與實(shí)現(xiàn)代碼, 要求配圖片說明--> <h3>作業(yè)：默寫出雙飛翼布局的基本思路與實(shí)現(xiàn)代碼, 要求配圖片說明</h3> <!--網(wǎng)站代碼--> <div> <!--頭部--> <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="">知識</a></li> <li class="item"><a href="">服務(wù)</a></li> <li class="item"><a href="">會員中心</a></li> </ul> </div> </div> <!--主體：雙飛翼布局--> <div class="container"> <!--1、優(yōu)先渲染中間區(qū)塊，使內(nèi)容加載讓用戶的體驗(yàn)更好--> <!--給中間區(qū)塊先套一個盒子，如果不套，體驗(yàn)就會出問題--> <div class="wrap"> <div class="main"> 中間主體區(qū)塊 </div> </div> <!--2、渲染左側(cè)--> <div class="left"> 左側(cè) </div> <!--3、渲染右側(cè)--> <div class="right"> 右側(cè) </div> </div> <!--底部--> <div class="footer"> <div class="content"> <p> <a href="">? 優(yōu)勢健康</a> | <a href="">聯(lián)系我們</a> | <a href="">備案號：桂ICP備00000001號</a> </p> </div> </div> </div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS代碼如下：
.header {
background-color: cornflowerblue;
}
.container {
}
.footer {
}
/*頭部和底部內(nèi)容區(qū)*/
.header .content {
width: 1000px;
height: 60px;
background-color: darkblue;
margin: 0 auto;
}
/*頭部導(dǎo)航*/
.header .content .nav {
margin: 0;
padding: 0;
}
.header .content .nav .item {
list-style: none;
}
.header .content .nav .item a {
float: left;
min-width: 80px;
min-height: 60px;
/*設(shè)置當(dāng)前文本高度與行高相等，使之垂直居中*/
line-height: 60px;
color: white;
text-decoration: none;
padding: 0 15px;
text-align: center;
}
/*使用偽類選擇器設(shè)置菜單鼠標(biāo)滑過樣式*/
/*用JS也可以實(shí)現(xiàn)，但是CSS提供了更簡單的方法，所以推薦使用CSS來實(shí)現(xiàn)鼠標(biāo)滑過效果*/
/*鼠標(biāo)滑過效果使用：hover（浮動行為）實(shí)現(xiàn)*/
/*偽類：修飾某一個類樣式的類，它在元素上添加一點(diǎn)行為*/
.header .content .nav .item a:hover {
/*當(dāng)鼠標(biāo)滑過的時候更換元素背景色*/
background-color: red;
/*鼠標(biāo)滑過時，將字體放大1.2倍*/
font-size: 1.2rem;
}
/*主體樣式：雙飛翼布局*/
.container {
width: 1000px;
/*min-height: 600px;*/
background-color: lightblue;
margin: 5px auto;
/*使用清浮動讓主體盒子包住內(nèi)容區(qū)，而不是使用高度*/
overflow: hidden;
}
/*主體區(qū)盒子設(shè)置寬度100%*/
.wrap {
float: left;
width: 100%;
}
/*設(shè)置主體內(nèi)容區(qū)顏色*/
.left {
float: left;
width: 200px;
height: 600px;
background-color: chartreuse;
margin-left: -100%;
}
.right {
float: right;
width: 200px;
height: 600px;
background-color: gold;
margin-left: -100%;
}
/*main的css樣式應(yīng)該寫在lft和right之后，以便于程序按照先后順序執(zhí)行margin的效果*/
.main {
background-color: coral;
min-height: 600px;
margin: 0 210px;
}
/*底部樣式*/
.footer {
width: 1000px;
height: 60px;
background-color: darkblue;
margin: auto;
text-align: center;
color: white;
line-height: 60px;
}
.footer a{
color: white;
text-decoration: none;
}
.footer a:hover{
color: coral;
}點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號