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. C# A窗口内容显示在B窗口中的方法

    HeScripts script = new HeScripts(); //A窗口中实例化B窗口 string okscripts = "test"; //设置字段内容 scrip ...

  2. 内存详解--理解 JVM 如何使用 AIX 上的本机内存

    转自---http://www.ibm.com/developerworks/cn/java/j-nativememory-aix/

  3. 12.python中的列表

    先看列表是如何创建的: a = ['scolia', 123] b = list('scolia',123) 同样有两种创建方式,但一般用第一种. 列表和元祖最大的不同就是列表是可以修改的. 老规矩, ...

  4. python解析页面上json字段

    一般来说,当我们从一个网页上拿下来数据,就是一个字符串,比如: url_data = urllib2.urlopen(url).readline() 当我们这样得到页面数据,url_data是全部页面 ...

  5. C扩展 C++回顾到入门

    引言 C扩展也称C++, 是一个复(za)杂(ji)优(ken)秀(die)的语言. 本文通过开发中常用C++方式来了解和回顾C++这么语言. C++看了较多的书但还是觉得什么都不会. 只能说自己还付 ...

  6. [原创]在Windows和Linux中搭建PostgreSQL源码调试环境

    张文升http://ode.cnblogs.comEmail:wensheng.zhang#foxmail.com 配图太多,完整pdf下载请点这里 本文使用Xming.Putty和VMWare几款工 ...

  7. CSS3中新出现的技术

    CSS3中新出现的技术 CSS媒体查询 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定 ...

  8. Android--获取使用的总流量和每个App的上传、下载的流量

    获得每个App的上传.下载的流量. 思路就是获取到我们手机上的所有app,再获得app里面使用的权限,如果app有网络权限,就显示出来. 代码很简单,代码里面也有比较详细的注释,下面直接上代码 布局文 ...

  9. centos rsync安装配置

    安装 1 yum -y install rsync ---------------------服务器安装------------------------------- 创建基础配置文件 1 2 3 4 ...

  10. 依网友要求发个修改award bios的方法（刷CPU微码）

    注意本文修改的是award BIOS 首先看自己的CPUID是哪个代码,打开CPU-Z如下图红圈中就是,此CPUID就是067A,好了下面就可以开始准备工作 准备好BIOS文件,以及CPU微码文件.可 ...