Html/float.html at master · changqing18/Html · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        body,div,p,ul,li,dl,dt,dd,h1,a{margin:0; padding:0;}
        html{background:url(images/bg.gif) repeat-x;}
        body{background:url(images/clouds.gif) repeat-x;}
        #header,#banner,#content,#footer{width:1000px; margin:0 auto;}
        #header{overflow:hidden;}
        #banner{display:block; width:1000px; height:292px; margin:10px auto;}
        #banner img{display:block;width:1000px; height:292px;}
        img{border:none;}
        #logo{display:block; width:220px; height:54px; float:left; background:#991616;}
        #logo img{display:block;}
        #nav{width:780px; height:54px; float:left; background:#393838; list-style:none;}
        #nav li{float:left;}
        #nav li a{display:block; width:86px; height:54px; line-height:54px;
            text-align:center; font-size:12px; color:#ccc; text-decoration:none; float:left;}
        #nav li a:hover{color:#fff;}
        #nav li .navActive{background:url(images/nav.png) no-repeat;color:#fff;}
        #content{overflow:hidden; background:#eaeaea; font-size:12px; line-height:24px;}
        #leftArticle,#rightInfo{margin:10px; float:left; display:inline;}
        #leftArticle{width:660px;}
        #rightInfo{width:300px;}
        #articlePicA,#articlePicA img{display:block;}
        #leftArticle h1{margin:20px 0; font-size:24px; font-family:"微软雅黑","黑体","serif";}
        h1{font-size:100%;}
        #leftArticle h1 a{color:#900; text-decoration:none;}
        #leftArticle h1 a:hover{text-decoration:underline;}
        #leftArticle p{color:#333; text-indent:2em; margin-bottom:30px; font-size:14px;}
        #rightInfo dl{margin-bottom:10px;}
        #rightInfo dl dt{
            height:32px;
            line-height:32px;
            color:#FFF;
            font-size:14px;
            font-weight:bold;
            text-indent:20px;
        }
        #rightInfo dl dd a{color:#333; text-decoration:none;}
        #rightInfo dl dd a:hover{color:#900; text-decoration:underline;}
        #footer{
            background:#393838;
            height:52px;
            line-height:18px;
            margin-top:10px;
            padding-top:18px;
            text-align:center;
            color:#ccc;
            font-size:12px;
        }
        #footer a{color:#ccc; text-decoration:none;}
        #footer a:hover{text-decoration:underline;}
        body{padding-top:45px; font-family:Verdana, Geneva, sans-serif;}


    </style>
</head>
<body>
<div id="header">

    <a id="logo" href="float.html"><img src="images/logo.jpg" alt="logo"></a>


    <ul id="nav">
        <li><a href="#" class="navActive">首页</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>
        <li><a href="#">学院地址</a></li>
    </ul>

</div>

<a id="banner" href="#"><img src="images/background.png" alt="background"></a>

<div id="content">
    <div id="leftArticle">
        <a  id="articlePicA" href="#">
            <img src="images/articleBanner.png" alt="articleBanner">
        </a>
        <h1><a href="#">Web前端开发工程师好找工作吗？</a></h1>
        <p> 据09年全国Web前端开发行业调查统计显示，09年大型企业对于Web前端开发
            人才需求紧缺。Web前端开发目前是一种新兴职业，从业的前端开发人员绝大部分存在于
            大型企业中，如腾讯、百度等，换种说法就是：选择仍事Web前端开发就等于你的一只脚
            已经迈进了腾讯、百度等高薪企业。</p>
        <p>... ...</p>
        <p>... ...</p>
        <p>... ...</p>
    </div>

    <div id="rightInfo">
        <dl>
            <dt>职业生涯</dt>
            <dd><a href="#">Web前端工程师需要掌握哪些核心技能？</a></dd>
            <dd><a href="#">我是程序员，有必要进行Web前端开发的学习吗？</a></dd>
            <dd><a href="http://blog.w3cstudy.com/?p=32">我是网站美工，目前进展遇到瓶
                颈，该如何解决？</a></dd>
            <dd><a href="http://blog.w3cstudy.com/?p=22">前端工程师如何提升自己？
                吗？</a></dd>
            <dd><a href="http://blog.w3cstudy.com/?p=15">Web前端工程师如何给自己定
                位？</a></dd>
            <dd><a href="http://blog.w3cstudy.com/?p=5">Web前端开发工程师好找工作
                吗？</a></dd>
        </dl>
    </div>
</div>
<div id="footer">

    <a href="#"></a>|<a
        href="#">广告服务</a>|<a href="#">提交问题</a>|<a
        href="#">联系我们</a>|<a href="#">版权声明</a>|<a
        href="#">关于隐私</a>|<a href="#">合作伙伴</a>
    <br>
    <a href="#">京ICP备10055601号</a>
    All rights(C)2014-2016 Reserved
</div>
</body>
</html>