|
- <!DOCTYPE html>% r4 @' A( g0 r$ O0 |% G8 z( [ R
- <html>
7 U$ ^$ n2 F/ Q# e/ e. E, I - <head>
8 N# y( ~' y. g C6 ]- Q - <meta charset="utf-8">
9 T, I4 z" W3 e3 F1 q - <title>实验3</title>6 `4 S! s3 M; p& f5 V7 x
- <style type="text/css">: U" ^0 i& F8 q+ i' S4 Y7 {
- ul{/*设置导航栏的框框*/
2 H" F" E5 E$ u3 R. d3 W2 k8 K - margin: 30px auto;/*框框整体的位置,30px是指离网页的顶部和下部的距离,auto控制的是左右距离为自动调节*/
9 d6 s$ w; r1 j4 E! H" m - width: 600px;/*框框的宽度*/; r6 C" ^% g5 t
- height: 350px;/*框框的长度*/" F. u2 f0 D( q7 |; s* o: X5 k
- padding: 0px;/*将框框的padding设置为零,不然会导致框框里的内容与框边缘有间隔*/. t. o; u- J2 ]7 J1 U- Q; n
- border:1px solid #000;/*添加边框*/% V8 V/ E/ J+ s3 i3 @+ Q7 j7 K
- }
4 Y, r3 J5 y0 T6 @1 n& w - li{
$ ] E2 M* s* V% Z - list-style-type: none;/* 去掉li前的点 */
- t, }0 v# m+ M6 ?( p3 f) I9 P6 L - float: left;/*将li设置成做浮动,变为联动*/
: K& Y: @9 \" }1 s - }
( ^9 `4 d$ H! i J - a{9 K* q' w! D' F' u
- display: block;/*将a变成块状*/& P' F) D+ H6 T' c |6 G4 }
- width: 100px;/*设置块的宽度*/
& K8 T# _4 O/ s/ T - height: 50px;/*设置块的长度*/
" r5 l- j) x" A - font-family: Microsoft Yahei;5 L: A- z: c5 f$ }1 F; j( N4 c+ u
- line-height: 50px;/*设置字体在块中的高度*/
: C0 W$ S6 J1 E& O9 g6 u - background-color: #2f4f4f;6 d. y# }9 Y& @, P2 S
- margin: 0px 0px;/*块里的高宽通过margin设置*/
: I" F+ D5 `2 Q" t8 n - color: #fff;1 b) Q, X/ ]6 Y6 u
- text-align: center;/*字体居中*/0 B$ \0 e K9 R. l
- text-decoration: none;/*去掉下划线*/
! d7 \ r: U) `9 @ - font-size: 15px;
8 u, s- q1 Z+ o# f6 U - }
, C8 k8 u# a' v) P O - a:hover{
- f* D8 Q" f* B# r - background-color: #2f6f4f;# e* [7 X( _* q# s# P' q
- }% I0 e& f: G) T, L3 v
- </style>
6 o+ G) E1 n) q- \ - </head>% z& l+ n! Q9 W9 b0 D4 o; p8 l4 E
- <body>. Y X5 N2 D3 N
- <div >
" \6 e4 v/ a" f1 h$ R - <ul class=daohang>" t9 ? {+ q7 l( T' U
- <li><a href="">首页</a></li>
2 \$ A; x) X5 W! G+ {1 U - <li><a href="">课程章节</a></li>
: [! c; E5 [8 R5 ?2 i; H8 j - <li><a href="">课程实验</a></li>! B! C& s+ N; }. P' M2 Y3 B
- <li><a href="">教师团队</a></li>/ J% X- B/ m+ f2 k
- <li><a href="">教学资源</a></li>6 L7 o, Y: ]# {
- <li><a href="">参考教材</a></li>
+ G$ @3 D6 f) X' V/ J! ~ - </ul>
5 D8 }' C8 |: ?) V$ [) a - </div>' _" A4 P4 C; x$ }4 D% b
-
" j$ j( n3 v8 N V& r -
$ I1 R3 d7 Q* ^. c- u - </table>
: m% k! G- R+ s9 }, L2 x1 F - </body>
5 N4 w- R* i/ `& O7 n% N - </html>
复制代码 |
|