【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局
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&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> © 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;
}
添加样式后的效果：
