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. public void onItemClick(AdapterView arg0, View view, int position,long arg3)详解【整理自网络】

    参考自: http://blog.csdn.net/zwq1457/article/details/8282717 http://blog.iamzsx.me/show.html?id=147001 ...

  2. eclipse使用快捷键

    注意热键冲突 内容补全键      Alt+/ 快速修复键      ctrl+1 代码移动         Alt+上下键(选中代码块) 左右移动         tab(右边)Shift+tab( ...

  3. i++与++i的误解

    javap -c xx.class {i=0i=i++}0: bipush 02: istore_1 stack ->var13: iload_1 var1->stack4: iinc 1 ...

  4. 自己写算法---java的堆的非递归遍历

    import java.io.*; import java.util.*; public class Main { public static void main(String args[]) { S ...

  5. DB2测试存储过程的原子性

    存储过程在运行过程中需要对其做异常处理.原子性等测试 下面是一个原子性测试案例 ===================================== 代码区域 ================= ...

  6. DB2数据库之间联邦

    现在有以下两个数据库:sample,QIN 需要在数据库QIN中访问sample中的表ACT 1.数据库编目 C:\Users\QIN>db2 catalog tcpip node OLIVER ...

  7. Oracle Database Links解析

    什么是Database Links呢? 首先我们阐述下它的作用:使用户可以通过一个数据库访问到另外一个远程数据库. 那么Database Link是存储着远程数据库的连接信息. 如下图所示: 用户Sc ...

  8. Swift的一些基础内容

    //①判断字符串是否为空的方法 isEmpty var str:String = "www.baidu.com" if str.isEmpty { print("空字符串 ...

  9. php webservice soap

    http://www.cnblogs.com/phpdragon/archive/2012/06/10/2544171.html http://jeffxie.blog.51cto.com/13653 ...

  10. hi3531播放1080p60f， 延迟越来越大的问题与解决办法

    问题 hi3531播放1080p60f, 延迟越来越大 左边屏幕是ffplay播放的,右边屏幕是3531播放的 数据是udp组播 mpegts, h264 12M码流 原因 经过测试发现: 解码器中缓 ...