HTML 第八章 作業
阿新 • • 發佈:2018-12-19
課後作業
1.position屬性有哪些屬性值?他們在定位元素時,分別有哪些特點?
(1)absolute絕對定位
:相對位置為父元素為非static的第一個父元素進行定位。
(2)fixed 固定定位
:相對於瀏覽器視窗進行定位。
(3)relative相對定位
:相對於其正常(預設佈局)位置進行定位。
(4)static
:預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right z-index 宣告)
2.z-index屬性在網定位中有什麼作用?
當網頁上出現多個由絕對定位(POSITION:absolute
)或固定定位(POSITION:fixed
z-index
的值來解決,這個值較大的就在上面,較小的在下面。3.製作美食今日推薦頁面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>美食今日推薦</title> <style type="text/css"> .nav { border: 1px solid #AACBEE; border-radius: 5px; width: 300px; height:360px; } .div1 { margin-top: -2px; margin-left: -20px; } h2 { margin-top: 15px; font-family: "微軟雅黑", "黑體", "宋體"; margin-left: 30px; font-size: 14px; } h2 span { margin-right: 8px; color: #D80000; } h2 img { vertical-align: middle; margin-left: 100px; } ul { list-style-type: none; } .login { position: relative; top: -40px; left: -32px; } .div1 ul li { margin-bottom: 5px; } nav { font-size: 13px; position: relative; top: -320px; left: 115px; } nav li { margin-top: 4px; font-size: 12px; color: gray; } nav ul a { font-weight: 600; color: #B80000; } .li{ margin-top: 10px; } </style> </head> <body> <div class="nav"> <h2><span>SHOP</span>今日推薦 <img src="img/more.gif"/></h2> <div class="div1"> <ul> <li><img src="img/img9.gif" /><img src="img/shen.png" class="login" /></li> <li><img src="img/img7.gif" /></li> <li><img src="img/img8.gif" /></li> <li><img src="img/img7.gif" /></li> </ul> </div> <nav> <ul> <a href="#">漢來國際美食百貨</a> <li class="li">口味:創意中餐</li> <li>區域:朝陽/CBD</li> </ul> <ul> <a href="#">漢來國際美食百貨</a> <li class="li">口味:創意中餐</li> <li>區域:朝陽/CBD</li> </ul> <ul> <a href="#">漢來國際美食百貨</a> <li class="li">口味:創意中餐</li> <li>區域:朝陽/CBD</li> </ul> <ul> <a href="#">漢來國際美食百貨</a> <li class="li">口味:創意中餐</li> <li>區域:朝陽/CBD</li> </ul> </nav> </div> </body> </html>
4.製作京東輪播圖頁面
HTML程式碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>輪播圖</title> <link rel="stylesheet" type="text/css" href="css/new_file.css" /> </head> <body> <div id="nav"> <div id="photo"> <img src="img/264c1dc1cac92265.jpg" /> <img src="img/5acb3b19Nc3efd8d0.jpg" /> <img src="img/8402ca6a09fe3122.jpg" /> <img src="img/91db3f8f2e388912.jpg" /> <img src="img/c335ac0ddc54a481.jpg" /> </div> <div id="num"> <ul> <a href="#"> <li>1</li> </a> <a href="#"> <li>2</li> </a> <a href="#"> <li>3</li> </a> <a href="#"> <li>4</li> </a> <a href="#"> <li>5</li> </a> </ul> </div> <div id="div2"> <a href="#"><label class="label1"><</label></a> <a href="#"><label class="label2">></label></a> </div> </div> </body> </html>
CSS樣式:
* {
margin: 0px auto;
padding: 0px;
}
#nav {
width: 590px;
height: 470px;
overflow: hidden;
}
#photo {
width: 2950px;
animation: switch 25s ease-out infinite;
}
#num {
position: relative;
font-size: 14px;
font-family: "微軟雅黑";
font-weight: 900;
bottom: 35px;
right: -5px;
text-align: center;
}
#num ul{
color: white;
list-style-type: none;
}
#num li{
padding-top: 3px;
padding-bottom: 3px;
padding-left: 8px;
padding-right: 8px;
border-radius:50% ;
margin-right:8px ;
display: inline-block;
background: dimgray;
}
#num a{
text-decoration: none;
color: white;
}
#num ul a:hover li{
background: orangered;
}
#photo img {
float: left;
width: 590px;
height: 470px;
}
@keyframes switch {
0%,
15% {
margin-left: 0px;
}
20%,
35% {
margin-left: -590px;
}
40%,
55% {
margin-left: -1180px;
}
60%,
75% {
margin-left: -1770px;
}
80%,
95% {
margin-left: -2360px;
}
100% {
margin-left: 0;
}
}
#div2 {
font-size: 18px;
font-family: "微軟雅黑";
position: relative;
bottom: 255px;
left: 0px;
}
.label1 {
padding: 6px;
margin-right: 533px;
color: white;
background: black;
opacity: 0.4;
}
.label2 {
padding: 6px;`在這裡插入程式碼片`
color: white;
background: black;
opacity: 0.4;
}
#div2 a {
color: white;
text-decoration: none;
}
#div2 a:hover label {
background: black;
opacity: 0.8;
}
5.製作新東方頂部導航選單頁面
程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新東方頂部頁面</title>
<style type="text/css">
* {
margin: 0px auto;
}
.div {
height: 30px;
border-bottom: 1px dashed gray;
position: relative;
background: #EEEEED;
}
.img {
margin-left: 10px;
vertical-align: middle;
margin-top: -5px;
}
.nav {
display: inline;
line-height: 30px;
border-right: 1px solid #6F6F6F;
}
.div-box a {
text-decoration: none;
color: #6F6F6F;
margin: 15px;
}
.div-box {
display: inline;
margin-left: 100px;
}
.div1 {
display: inline;
line-height: 30px;
}
a img {
position: relative;
top: -8px;
left: 1px;
}
.post {
font-size: 14px;
padding-top: 12px;
width: 270px;
position: relative;
background: white;
top: -10px;
left: -230px;
display: none;
border: 1px solid #C0C0C0;
padding-bottom: 15px;
}
.post ul {
margin-left: -30px;
list-style-type: none;
}
.post ul li {
margin-right: -5px;
line-height: 26px;
display: inline-block;
}
.post ul li a {
text-decoration: none;
color: gray;
}
.post ul li a:hover {
color: orangered;
}
hr {
background-color: #DBD8D8;
border: 0;
height: 1px;
width: 240px;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
.div1:hover .post {
display: block;
}
</style>
</head>
<body>
<header>
<div class="div">
<img src="img/logo.gif" class="img" />
<div class="div-box">
<div class="nav">
<a href="#">購物車</a>
</div>
<div class="nav">
<a href="#">優惠券</a>
</div>
<div class="nav">
<a href="#">快速注卡</a>
</div>
<div class="nav">
<a href="#">各地購課</a>
</div>
<div class="nav">
<a href="#">手機報</a>
</div>
<div class="div1">
<a href="#">網站導航 <img src="img/open_icon.gif" /></a>
<div class="post">
<ul>
<li>
<a href="#">託福</a>
</li>
<li>
<a href="#">雅思</a>
</li>
<li>
<a href="#">考研</a>
</li>
<li>
<a href="#">職稱英語</a>
</li>
<li>
<a href="#">初中</a>
</li>
<li>
<a href="#">日語</a>
</li>
<hr />
</ul>
<ul>
<li>
<a href="#">網路課堂</a>
</li>
<li>
<a href="#">資訊中心</a>
</li>
<li>
<a href="#">知識堂</a>
</li>
<li>
<a href="#">大師講壇</a>
</li>
<li>
<a href="#">學習論壇</a>
</li>
<li>
<a href="#">學詞</a>
</li>
<li>
<a href="#">考研搜校</a>
</li>
<hr />
</ul>
<ul>
<li>
<a href="#">M-Zone</a>
</li>
<li>
<a href="#">手機報</a>
</li>
<li>
<a href="#">時時英語</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>