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. 关键字替换排除HTML标签属性字符

    解决办法: 1.打开文件e/class/functions.php 2.找到函数 ReplaceKey($newstext,$classid=0) 3.找到替换代码 if(STR_IREPLACE) ...

  2. Form认证导致登陆页面的样式无效和图片不能显示的原因

    最近在做企业内门户网站,一切进展还算顺利,部署到生产环境的时候也能没有什么大问题,只是登录页面的样式不起作用,不知为何,因为是使用了login控件,最初以为是此控件有内置默认样式或者什么原因,于是就不 ...

  3. equals函数

    equals函数在Object类当中,而Object类是所有类的父类,所以所有的类里面都有equals函数. “==”操作符之前用于比较两个基本数据类型的值是否相等,而对于引用数据类型,“==”操作符 ...

  4. 说说用C语言求根的那些事儿

    C语言--求根:计算机只识别0和1,那么问题来了,作为计算工具如何解决数学问题?其实,计算机是死东西,都是程序员用计算机的的思维去加数学公式计算数学题的.听起来好高端的样子,其实啊,也就那么回事儿, ...

  5. C 中 关于printf 函数中度剖析

    题外话  这篇博文主要围绕printf函数分析的,主要讲解printf 使用C的可变参数机制, printf是否可重入(是否线程安全), printf函数的源码实现. 正文 1.C中可变参数机制 我们 ...

  6. C#之玩转反射【转：http://www.cnblogs.com/yaozhenfa/p/CSharp_Reflection_1.html】

    前言 之所以要写这篇关于C#反射的随笔,起因有两个:   第一个是自己开发的网站需要用到   其次就是没看到这方面比较好的文章. 所以下定决心自己写一篇,废话不多说开始进入正题. 前期准备 在VS20 ...

  7. MVC 初始 Log4net （一）

    以前没有使用过Log4net 插件来记录日志文件,今天研究了一下,算是有点小眉目了,只是简单的使用一下:来写一篇博客自己记录一下,希望大神们多多包涵,小伙伴多多给提些建议,相互学习,我也是初始阶段,有 ...

  8. SQL Server数据库学习笔记-概念数据模型

    概念数据模型(Conceptual Data Model)也称为信息模型.它是对客观事物及其联系的抽象,用于信息世界的建模,是现实世界到信息世界的第一层抽象,是数据库设计人员进行数据库设计的有力工具. ...

  9. (转)android Fragments详解三:实现Fragment的界面

    为fragment添加用户界面 fragment一般作为activity的用户界面的一部分,把它自己的layout嵌入到activity的layout中.    一个 要为fragment提供layo ...

  10. RHEL6.4找回root密码的方法

    1.先在系统启动的时候提示:press any key to enter menu 时按下e键(其实其他键也可以,只不过我习惯e键而已) 2.进入如下界面: 3.按上下箭头方向键选中第二项,按e键,进 ...