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. 怎样使android的view动画循环弹动

    在res中建立文件夹anim,分别写下cycles.xml,shake1.xml,shake2.xml cycles.xml: <?xml version="1.0" enc ...

  2. windows下文件名非法字符

    / \ : * ? " < > | / \如果用作文件名,会产生路径问题.因为绝对路径用 \ ; 相对路径用  / ;

  3. 向Windows 日志管理器写入系统程序日志信息

    标准样例代码: using System; using System.Collections.Generic; using System.ComponentModel; using System.Da ...

  4. 15.python的for循环与迭代器、生成器

    在前面学习讲完while循环之后,现在终于要将for循环这个坑填上了.之所以拖到现在是因为for循环对前面讲过的序列.字典.集合都是有效的,讲完前面的内容再来讲for循环会更加容易上手. 首先,for ...

  5. JTable的DefaultModel方法getValueAt（a,row）

    行和列都是从0开始索引的,而且不包括netbeans生成的表格头,而是从数据开始,否则就会报错

  6. 关于datagridview的一些操作

    1.绑定datatable时,会显示出不需要显示的列可以加datagridview.AutoGenerateColumns = false; 2.如果datagridview的某列是数值型的,有小数, ...

  7. SSIS包配置动态配置数据库连接

    动态连接数据库便于维护 用SSIS包配置实现 1.控制流页签 - 右键 - 包配置 2.配置xml文件 3.指定连接属性:ServerName.UserName.Password 测试: 1.配置错误 ...

  8. C# ArrayList的用法总结

    C# ArrayList的用法总结 System.Collections.ArrayList类是一个特殊的数组.通过添加和删除元素,就可以动态改变数组的长度. 一.优点 1. 支持自动改变大小的功能 ...

  9. hdu 2091 空心三角形

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=2091 空心三角形 Description 把一个字符三角形掏空,就能节省材料成本,减轻重量,但关键是为 ...

  10. ALTERA MAX10官方评估板，新鲜出炉！

    刚刚拿到骏龙提供的ALTERA MAX10官方评估板,还热乎呢,呵呵!赶紧跟大家分享一下 板子很简单,把IO口都扩展出来了,其他功能基本上没有. FPGA型号是10M08SAE144C8GES,144 ...