|
- <!DOCTYPE html>
2 W4 e/ p9 h" s3 ~) E0 F; w: p- m- Q' U - <html>
: l7 W, i, C: Z& O) }* H) b - <head>
]+ f9 u3 O' }" g* s& d - <meta charset="utf-8">
7 }+ R9 ]/ ]+ l: K5 K6 d - <title>实验3</title>( {% ]: e+ q* _
- <style type="text/css">
0 {& V H. H8 Q/ E3 h4 h: W. z - ul{/*设置导航栏的框框*/6 V8 L0 ?/ F8 [. |# D% f! s/ K( i
- margin: 30px auto;/*框框整体的位置,30px是指离网页的顶部和下部的距离,auto控制的是左右距离为自动调节*/
6 p. n/ d/ j* r3 e2 R! N; n - width: 600px;/*框框的宽度*/' [& c3 N4 {/ i& d( y9 p
- height: 350px;/*框框的长度*/
V( H3 o3 z& ^- P# h- d - padding: 0px;/*将框框的padding设置为零,不然会导致框框里的内容与框边缘有间隔*/
# Z7 o0 R3 a0 w! L - border:1px solid #000;/*添加边框*/
6 U% M8 U4 _+ ^, U3 L+ g - }
; D# j: O/ s9 t) q, s0 b9 z5 M* \ - li{" h h; m, ^% x
- list-style-type: none;/* 去掉li前的点 */+ }* H! `) d# ~* E5 W& g( Q
- float: left;/*将li设置成做浮动,变为联动*/0 F& K6 y2 c N: B F0 r6 ^) s- [
- }/ d+ d- {' x- ^+ |
- a{
) Y/ o7 r( w. r* s7 E2 W0 B z - display: block;/*将a变成块状*/) D( T$ f `% V. d: X" J& N
- width: 100px;/*设置块的宽度*/
W2 d/ \/ n- P$ y. d; k' H6 s - height: 50px;/*设置块的长度*/. B" [' n0 O) e6 D3 A+ I
- font-family: Microsoft Yahei;" ^( g1 `+ d/ q, M! f
- line-height: 50px;/*设置字体在块中的高度*/
+ B. m1 Y O) y1 [' d% u - background-color: #2f4f4f;5 H( j+ _! R. P, h/ {. e
- margin: 0px 0px;/*块里的高宽通过margin设置*/- H# W8 G5 v8 _
- color: #fff;
3 C# _/ v/ I" g! j0 B2 ? - text-align: center;/*字体居中*/
q' h, @ g$ g6 b" [ - text-decoration: none;/*去掉下划线*/
. |# B* d1 m, C' ?1 z - font-size: 15px;
) l* [) ?0 y, _2 q9 L5 Y - }* }, d2 c% ] X6 V; ~
- a:hover{+ r) E2 N% }! O" o ~ O' E# Z. Y
- background-color: #2f6f4f;2 \6 \0 C$ J( F* j
- }
) Q0 L2 a1 w8 n/ o ~ i3 S - </style>
2 [% N' X$ B1 G3 B, I - </head>
9 Z# k! w$ r; c4 u& B6 D - <body>
! v+ t3 d$ F; B' i - <div > N2 H7 o9 K( M8 Y
- <ul class=daohang>
* F) B, |0 O: `- E, m! a - <li><a href="">首页</a></li>
# O0 a6 m4 |1 e: l1 t - <li><a href="">课程章节</a></li>
. }) H- V$ a A/ ^ - <li><a href="">课程实验</a></li> ~% L! D3 S2 Z7 |+ Z$ Q
- <li><a href="">教师团队</a></li>
3 P' u; e1 |& [# p7 O - <li><a href="">教学资源</a></li>
; z0 F& o- {& z4 p: v/ t- \ - <li><a href="">参考教材</a></li>
9 Q( `& O! o9 o& w, P6 [ - </ul>
' ]& \% b) K) q) O6 ` - </div>( i- b/ S/ `' R. c( \
-
/ W; G9 L6 p4 Y6 L: ^' |/ R% m -
9 N: R5 i1 a7 w* c - </table>" i% p! g5 N8 h6 g
- </body>
/ l, c. x& J5 Q9 Q - </html>
复制代码 |
|