登录  | 立即注册

游客您好!登录后享受更多精彩

查看: 984|回复: 0

[js,sql,html教程] 【HTML】实现导航条

[复制链接]

444

主题

509

帖子

2051

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2051

荣誉管理论坛元老

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

  47. " j$ j( n3 v8 N  V& r

  48. $ I1 R3 d7 Q* ^. c- u
  49.         </table>
    : m% k! G- R+ s9 }, L2 x1 F
  50. </body>
    5 N4 w- R* i/ `& O7 n% N
  51. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|星空社区 |网站地图

GMT+8, 2024-4-26 22:42 , Processed in 0.055079 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表