01 开篇 Html页面设计和布局

index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>StarTrackr !</title>

    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <meta name="viewport" content="width=device-width" />

    <link rel="stylesheet" href="./css/base.css" />

    <!--<link rel="stylesheet" href="../../css/base.css"/>-->

    <script src="../../lib/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" src="script.js"></script>

</head>

<body>

    <div id="container">

        <div id="header">

            <h1>StarTrackr!</h1>

        </div>

        <div id="content">

            <h2>

                欢迎光临!

            </h2>

            <div id="navigation">

                <ul>

                    <li><a href="#">首页</a></li>

                    <li><a href="#">现在购买!</a></li>

                    <li><a href="#">关于我们</a></li>

                    <li><a href="#">礼物</a></li>

                </ul>

            </div>

            <p id="intro">

                欢迎来到 <strong>StarTrackr!</strong> 欢迎来到StarTrackr !地球的超级明星跟踪和监控服务。需要知道世界上最好的乐队,音乐家或生产商在2.2平方米? 你来对地方了。我们有一个非常特别的本周的特别在b级名人,这么快!

            </p>

            <p id="disclaimer">

                免责声明! 这项服务并不打算为那些有犯罪意图。名人就像人,他们的隐私应该得到尊重。

            </p>

            <div id="news">

                <h2>最新消息</h2>

                <p>

                    Which member of the seminal calypso/lectro band <em>C&amp;C Music Sweatshop</em> was spotted last night at <em>Dirt</em>, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands?

                    <span class="spoiler">Yes! It's the ever-effervescent, <em>Glendatronix</em>!</span>

                </p>

                <p>今天谁失去了唱片合约? <span class="spoiler">The Zaxntines!</span></p>

            </div>

            <div>

                <h2 class="heading">我们的明星</h2>

                <p class="info">

                    我们有一个不断变化的新芯片的名人。 但它可以每周只小动物意识到他们已经标记,所以你必须快!

                </p>

                <table class="data" id="celebs">

                    <thead >

                        <tr>

                            <th>ID</th>

                            <th>Name</th>

                            <th>Occupation</th>

                            <th>Approx. Location</th>

                            <th>Price</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr>

                            <td>203A</td>

                            <td>Johny Stardust (<a href="bio.pdf">bio</a>)</td>

                            <td>Front-man</td>

                            <td>Los Angeles</td>

                            <td>$39.95</td>

                        </tr>

                        <tr>

                            <td>141B</td>

                            <td>Beau Dandy (<a href="img.jpg">pic</a>,<a href="bio.pdf">bio</a>)</td>

                            <td>Singer</td>

                            <td>New York</td>

                            <td>$39.95</td>

                        </tr>

                        <tr>

                            <td>2031</td>

                            <td>Mo' Fat (<a href="img.jpg">pic</a>)</td>

                            <td>Producer</td>

                            <td>New York</td>

                            <td>$19.95</td>

                        </tr>

                        <tr>

                            <td>007F</td>

                            <td>Kellie Kelly (<a href="bio.pdf">bio</a>,<a href="w.doc">press</a>)</td>

                            <td>Singer</td>

                            <td>Omaha</td>

                            <td>$11.95</td>

                        </tr>

                        <tr>

                            <td>8A05</td>

                            <td>Darth Fader (<a href="img.jpg">pic</a>)</td>

                            <td>DJ</td>

                            <td>London</td>

                            <td>$19.95</td>

                        </tr>

                        <tr>

                            <td>6636</td>

                            <td>Glendatronix  (<a href="bio.pdf">bio</a>,<a href="w.doc">press</a>)</td>

                            <td>Keytarist</td>

                            <td>London</td>

                            <td>$39.95</td>

                        </tr>

                    </tbody>

                </table>

            </div>

            <div id="comment">

                <h2>留下你的评论</h2>

                名称::<br />

                <input type="text" /><br />

                评论:<br />

                <textarea rows="5" cols="30" name="comment"></textarea>

            </div>

            <h2>细则</h2>

            <p id="fine_print">

                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

            </p>

        </div>

        <div id="footer">

            <p>

                &copy; Copyright 2010 CelebriTracker Productions

            </p>

        </div>

    </div>

</body>

</html>

无css样式事效果：

base.css

#navigation {

    float: right;

    width: 150px;

}

#intro {

    width: 450px;

}

body {

    font-family: "Lucida Sans Unicode", "Ludica Grande", sans-serif;

    color: #3e3e3e;

    background: #94C5EB url("../images/background-grad.png") repeat-x;

    font-size: 15px;

}

p {

    padding: 5px;

}

a {

    color: #008b8b;

}

#container {

    margin: 0 auto;

    text-align: left;

    width: 650px;

}

#header{

    height: 60px;

    color: #172322;

    background: transparent url(../images/header-corners.png) no-repeat bottom left;

}

#header h1 {

    padding: 0;

    margin: 0;

}

#content{

    background-color: #fff;

    padding: 0 15px 10px 15px;

} 

#footer {

    background-color: #fff;

    padding: 15px;

}

h2 {

    border-bottom: 2px solid #006400; /*效果下面有个下划线*/

    color: #b22222;

    padding-top: 10px;

    margin-top: 0;                    /*往上提升*/

}

table {

    border-collapse: collapse;

    font-size: 12px;

    margin: 0 20px 20px 20px;

    border-top: 2px solid #006400; /*效果上面有个下划线*/

    width: 480px;

}

th {

    border-bottom: 2px solid #006400;

    color: #b22222;

    font-size: 14px;

    font-weight: normal;           /*不加粗*/

    text-align: left;

    padding: 3px 8px;

}

td {

    padding: 6px;

}

添加样式后的效果：

【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局的更多相关文章

  1. 【JQuery NoviceToNinja系列】目录

    [JQuery NoviceToNinja系列]目录 [JQuery NoviceToNinja系列]01 开篇 Html页面设计和布局

  2. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

  3. ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开篇

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开篇 前言:博客又有一段时间没有更新了,心里感觉这段时间空空的,好像什么都没有学下,所以就想写博客,所以就有了这个系列,这里当然也 ...

  4. 1.注册或登录页面设计：UILabel，UIButton,UITextField

    学习iOS开发已经有一段时日了,之前一直没有系统的对iOS开发的相关知识进行归纳总结,导致很多知识点云里雾里在脑子里形不成iOS开发的思想,现将自己在学习过程中遇到的一些知识进行总结,希望能对iOS初 ...

  5. Tkinter教程系列01——引言和安装Tk

    Tkinter教程系列01--引言和安装Tk 首发于我的个人博客 https://chens.life/tkinter-tutorial-chapter-01-introduction-and-ins ...

  6. 豪情-CSS解构系列之-新浪页面解构-02

    前言 一.开发工具 - 前端四大利器 1. WebStorm 1). 岂今为止,业界公认的前端开发利器.优点: 2). 缺点 3). 相关资源 4). 后续展望 2. Photoshop 1).基本信 ...

  7. 仿souhu页面设计

    仿搜狐页面设计 Html页面设计代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  8. java io系列01之 "目录"

    java io 系列目录如下: 01. java io系列01之  "目录" 02. java io系列02之 ByteArrayInputStream的简介,源码分析和示例(包括 ...

  9. Winform开发框架之客户关系管理系统(CRM)的开发总结系列4-Tab控件页面的动态加载

    在前面介绍的几篇关于CRM系统的开发随笔中,里面都整合了多个页面的功能,包括多文档界面,以及客户相关信息的页面展示,这个模块就是利用DevExpress控件的XtraTabPage控件的动态加载实现的 ...

随机推荐

  1. cursorfilter

    android.widget.CursorAdapter它首先实现了两个接口Filterable,CursorFilter.CursorFilterClient.其中Filterable接口定义了ge ...

  2. dump buffer cache

    1.基础内容: ALTER SESSION SET EVENTS 'immediate trace name buffers level n'; n取值意义: 1 只转储buffer header. ...

  3. 02-线性结构3 Pop Sequence

    Given a stack which can keep M numbers at most. Push N numbers in the order of 1, 2, 3, ..., N and p ...

  4. linux下的声卡驱动架构

    1.linux下的声卡驱动架构主要分为OSS架构和ALSA架构. 2.OSS架构 OSS全称是Open Sound System,叫做开放式音频系统,这种早期的音频系统这种基于文件系统的访问方式,这意 ...

  5. Git - Tutorial [Lars Vogel]

    From: http://www.vogella.com/tutorials/Git/article.html Git - Tutorial Lars Vogel Version 5.6 Copyri ...

  6. VC下的人人对弈五子棋（dos）

    #include"stdio.h"#include"stdlib.h"#include"string.h"#include "io ...

  7. 金融系列14《QPBOC交易流程》

    中国银行金融IC卡qPBOC交易时间(不含终端处理时间)要求:IC卡私钥长度1024位,交易时间 <= 500ms, 1152 <=600 ATR=3B8D800100814D220886 ...

  8. javascript 关于Date 时间类型 处理方法

    上一篇博客中和大家分享了关于 字符串转时间类型 这一篇顺便整理下 javascript 中 Date 类型的一些方法 var time = new Date(); var year=time.getY ...

  9. bootstrap bootstrapTable 隐藏列

    主要代码: <script type="text/javascript"> $(function () { LoadingDataListOrderRealItems( ...

  10. PB中获取datawindow提交的sql语句

    PB的群里边,有人问的到这个问题,查了一下,综合了两条回答,得到了答案 1.DW 控件的SQLpreview 事件里的sqlsyntax 参数即是 2.pb一般使用占位符优化SQL语句,也就是你看到的 ...