`
plane
  • 浏览: 157627 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

div+css 布局

CSS音乐CMS活动HTML
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
<div id="page-container">
<div id="header">
    <h1>Enlighten Designs</h1>
    http://edu.136z.com/Web/21652.html
</div>
<div id="main-nav">
http://tool.alixixi.com/demo/201/index.html
<ul class="hidden">
<li id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></li>
<li id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></li>
<li id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></li>
<li id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></li>
</ul>
</div>
<div id="sidebar-a">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
<div class="clear"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
</div>
<div id="content">
<div class="padding">
  <div class="message-content">
      <h2>Shopping is more fun with friends</h2>
      Share recommendations and discover new things from our community<p>
      Discover new things from people with similar taste and style
      Recommend and discuss your favorite products and stores
      Simplify your life with wish lists and shopping lists<br>
      <a href="#">Learn More »</a>
      <p> <img src="images/hp-join-now-new.gif"  />
  </div>
  <div class="message-pics"><img src="images/hp-message-pics.jpg"  /></div>
  <p><p><p>
  <div class="clear"></div>
  发现最适合你的书籍、电影、音乐、活动、博客以及未知一切时刻获得朋友们以及豆瓣推荐给你的有趣信息从18427264名注册用户中找到和你臭味相投的人
 
</div>
</div>
<div id="footer">
<div id="altnav">
<a href="http://css.jorux.com/wp-admin/post.php#" >About</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Services</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a> -
<a href="http://css.jorux.com/wp-admin/post.php#" >Terms of Trade</a>
</div>
Copyright © Enlighten Designs
Powered by <a href="http://www.enlightenhosting.com/" >Enlighten Hosting</a> and
<a href="http://www.vadmin.co.nz/" >Vadmin 3.0 CMS</a>
</div>
</div>
</body>
</html>

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}

html, body {
margin: 0;
padding: 0;
}

.hidden {
display: none;
}

h1 {
margin: 0;
padding: 0;
}



#page-container {
width: 100%;
margin: auto;
background: #FFFFFF;
}


#header {

height: 70px;
}
#main-nav {
background:#E0ECF8 ;
height: 50px;
}
#sidebar-a {
float: right;
width: 35%;
line-height: 18px;
}
#content {
margin-right: 35%;
line-height: 18px;
}
#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}


#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

#sidebar-a .padding {
padding: 25px;
}

#content .padding {
padding: 25px;
}

#footer a {
color: #c9c9c9;
text-decoration: none ;
}


#altnav {
width: 350px;
float: right;
text-align: right;
}

.message-pics{
width: 189px;
}
.message-content{
width: 65%;
float: right;
}

.clear{
height:20px;
width: 100%;
}





分享到：
| ibatis sqlMapConfig settings 中属性用法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics