[交流] 用div+css创建“小七论坛”的logo和导航部分 ...

小七 于 5-20 15:59 发表在  建站交流[高级] 1554
这一节综合运营div创建“小七论坛”的logo和导航条,其实就是在上一节的基础上再加一个div,里面放一个logo即可,两个div外面再套一个总的div即可,后面的正文部分还有很多div需要用到。这一节相对比较简单,完整测试代码如下:* r) g7 C# g+ e' F1 I% H5 t) O& M  W+ H
& R4 Z) n- n1 g: h" d7 ^6 W  P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">5 Y% @; Q; k2 T* R/ F, R, @3 l- i+ Z! U5 `) V+ s# g
<html xmlns="http://www.w3.org/1999/xhtml">7 B7 |4 g0 M! e1 w8 J: k; \! o* X8 l6 a1 D+ x, J  _' M* u3 c  N+ M, _1 j
<head>
搜外七街 www.SEOwhy7.com <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />+ F' U8 W, i+ D( Q1 N9 g4 r% J* u
<title>无标题文档</title>3 A; y! Y# X9 S8 m) L* }0 j& f/ i" D0 N
<style type="text/css">6 f1 v& L3 L( K: @) ]" w$ e7 r3 W5 L
.all{5 I6 b* |5 z3 S; t8 k3 R2 K' u" y0 f: p8 P# p5 V  Q  }$ Z; @, s
      width:1100px;  D& j5 v; {) U; s! d8 t: \  j! S# D( I1 Z$ M/ Y7 O: U, M2 _; V
      margin:0 auto;}
搜外七街 www.seowhy7.com .top{+ C% q7 x' W! ?/ ]1 i/ Q' @8 o9 m$ y, [  [: \8 v
       margin-left:73px;}) _# ?6 b2 V2 r2 W% T; j# w5 b
.nav ul{* I6 U- l/ {) W3 [; @2 @3 H2 _4 d
        width:1000px;9 E' y" r0 P7 X; `; P/ O+ }% l$ }& o6 A0 F- j
        height:40px;+ p! F' f) O3 l* d8 @3 e- A8 Q' S7 B
        border-bottom:1px solid #E20001;- _2 M2 T6 J. n6 E: d" l- R: w' _! F: k+ P6 e* v% A# L! m! Q6 h- _
        margin:0 auto;0 L& [. t8 ~; o" f; a1 U% `1 Z& s/ |+ p$ L! s" `) ?7 H; s& _
}5 ]) o+ S, K/ ~; }4 j7 J* c8 N3 Y  \9 d, S9 L5 O" Z+ h( \8 J/ D2 i& F
.nav ul li{7 v/ S5 t+ h  q  d& C0 M$ D3 _/ r' T
        float:left;) H, r7 |3 H$ \0 w, p  T2 l  }- H7 C: A  {+ `2 `- y" u1 W
        list-style:none;" U- z7 D% y; q% E( |$ @
}
搜外七街 www.seowhy7.com .nav ul li a{+ G8 g$ ?6 v! U: y/ N% Z2 k0 T3 D
        width:100px;% P( J8 A! p5 f: O9 r* r% s7 A& d% U, U
        height:30px;3 f( p+ j: @) _# q& s# c4 t+ {8 d! h* _7 c9 D3 O' C" {
        line-height:30px;" Q+ Y4 V) z) b2 d8 l: f- M+ M, L# a4 C4 R) g
        background-color:#E20001;
搜外七街 www.seowhy7.com         color:#FFFFFF;/ L+ J4 r- v8 l+ n* u# N$ h+ t
        margin:10px 5px;0 m8 C, U; [" i  N1 m* @3 }& w% _6 a/ A) B
        font-size:12px;
搜外七街 www.seowhy7.com         display:block;, E! V% l; c1 L0 A# B5 `3 S. {. ~7 J" t  m" }/ b
        text-align:center;
搜外七街 www.seowhy7.com         text-decoration:none;3 A# M6 I) ]" t$ `# K3 g- T3 j* h1 W/ \2 b. o$ b  E
}! J& K  D6 @+ ~/ _- a, e$ Y  C; w! [/ q
.nav ul li a:hover{% U6 G  i7 D2 [) Z* ~4 n  V6 ]9 ^
        background-color:#FFFF00;0 j  A; O* \' A$ j% ?& z
        }% b! G4 ~" R, A/ b* o: u  c( Y8 k3 l/ D- l
</style>- k- B4 v( ^$ V5 T4 K- L
</head>" V+ Y) K+ Q5 J% O6 F' N1 M4 r2 n* I: i2 A# e; p" u+ S4 \1 C+ r

搜外七街 www.seowhy7.com <body>5 p# ^; _8 Y& u! N+ _4 M4 b( a. J# X) x( F1 a, r7 ^- B2 b
<div class="all">* m, y. U3 w1 Z$ V' J. F' L5 v3 r2 ^* x3 R4 P8 _9 w8 l2 i# m$ W5 B/ \6 P" |
<div class="top"><a href="http://www.seowhy7.com/" target="_blank"><img src="bbs-logo.png" /></a></div>+ H/ q0 i! \: I$ q& p+ ~2 `% E0 B4 O" d' a% n
<div class="nav">3 ?; n+ Q! n- O& I3 c% A6 X  b
<ul>. \9 D4 E" ^  ^2 \! _+ i7 A* d- r, M; I, [2 B
   <li><a href="#">小七论坛</a></li>* C3 \2 v2 ~2 L. h$ y6 d# V! a" J. H
   <li><a href="#">搜外问答</a></li>
搜外七街 www.seowhy7.com    <li><a href="#">夫唯学院</a></li>. Y, J$ a# n7 G6 R  d7 V/ V+ ], }
   <li><a href="#">工具</a></li>+ B+ r: Y, \* ~. @' g, p! S+ D# C6 [/ e8 i: t4 I/ l  B/ Q2 h5 s2 Q, M
   <li><a href="#">招聘</a></li># J) [& x/ V; B% y8 M: `7 R8 d$ I- V# @# O: U, }
</ul>. \% l& }+ Z6 I$ a" D4 P* x, m. v: K' B- F5 _1 n& Z
</div>0 G: Q  J) u, h9 _# d0 N1 t* c! N: H( _0 [# }- _, P
</div>% _& U+ C  B0 b3 |5 _& T& S! n7 `* d
</body>- V% F. g) U2 ~( }0 `5 |& L$ P7 d6 i
</html>5 q" l5 f% h5 `1 U& j8 {  g6 z+ J. S* N& T* T' j
% M/ C9 d: p% B( Q7 X1 O1 @: z8 x) R+ a: @% x' f2 l) V! ~" ]5 i
9 O' p8 R8 x: c# ~; m/ O' m. Q8 d! B- z3 C- b  \6 E9 |% `* X- F0 ?( S1 X6 ^: E, f" }+ b0 o0 A
. ^, b2 c( i; v  r6 [; `+ [/ G3 o- E' t* w5 [3 ]1 j
 
个性签名玩转七街

评论 使用道具 举报

评论

帮你查询到 6 条优质的评论,通过实名认证可以查询更多优质的评论
您需要登录后才可以查看更多的评论 登录|立即注册 用QQ账号登录
搜外七街:SEO培训_SEO优化排名技术_网络营销推广建站培训
        搜外七街(SEOwhy7.COM)是互联网最大的搜索引擎优化排名技术、SEO培训、网络营销、网络推广、建站等综合bbs社区论坛站长学习培训网站,致力于培养学员。
七街事务:点击这里给我发消息
快速回复 返回顶部 返回列表