DW运用HTML+CSS建网站（2）成品

最新推荐文章于 2024-05-29 10:26:34 发布

天乐敲代码

最新推荐文章于 2024-05-29 10:26:34 发布

阅读量8.2k

点赞数 3

分类专栏：前端文章标签： html css xhtml

本文链接：https://blog.csdn.net/m0_72858576/article/details/128028254

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<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 name="description" content="Description" />
<meta name="keywords" content="Keywords" /> 
<meta name="author" content="Enlighten Designs" />
<link rel="stylesheet" type="text/css" href="css/master.css"/>
<link rel="stylesheet" href="master1.css" />
</head>
<body>
<div id="page-container">
<div id="page-container">
   <div id="main-nav">

<ul>
<li id="about"><a href="#" >About</a></li>
<li id="services"><a href="#" >Services</a></li>
<li id="portfolio"><a href="#" >Portfolio</a></li>
<li id="contact"><a href="#" >Contact Us</a></li>
</ul>
</div> 



   <div id="header"><h1><img src="images/标题.png" width="236" height="36" alt="Enlighten Designs" border="0" /></h1></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></div> 
  <div id="content">
<div class="padding"><h2>About</h2>
<p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in 
front and back end development. To view some of the web sites we have created view our 
portfolio.</p>
<p>We are currently undergoing a 'face lift', so if you have any questions or would 
like more information about the services we provide please feel free to contact us.</p>
<h2>Contact Us</h2>
<p>Phone: (07) 853 6060<br />
Fax: (07) 853 6060<br />
Email: <a href="mailto:info@enlighten.co.nz" >info@enlighten.co.nz</a><br />
P.O Box: 14159, Hamilton, New Zealand</p>
<p><a href="http://css.jorux.com/wp-admin/post.php#" >More contact information…</a></p>
</div> </div>


  <div id="footer">
<div id="altnav">
<a href="#" >About</a> 
<a href="#" >Services</a> 
<a href="#" >Portfolio</a> 
<a href="#" >Contact Us</a> 
<a href="#" >Terms of Trade</a>
</div>
Copyright &copy; 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> 
</div>

</body>
</html>

@charset "utf-8";
/* CSS Document */

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

#page-container {
width: 760px;

margin:auto;
}
html, body {
margin: 0;
padding: 0;
}
#main-nav li { 
padding: 10px 10px 10px 80px;
list-style: none; 
font-size: 22px;
float: left; }

#header {

height: 150px;
background: url(images/%E8%84%9A%E9%83%A8.jpg);
}
h1 {margin: 0;padding: 0;} 

#sidebar-a {
float: right;
width: 280px;
line-height: 18px;
}

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


#content {
margin-right: 280px;
line-height: 18px;
} 


#content .padding {
padding: 25px;
} 

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




#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;

} 

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

#footer a {
color: #CF6;
text-decoration: none;
} 
#footer a:hover {color: #db6d16;} 

.hidden {display: none;}
h1 {margin: 0;padding: 0;float: right;margin-top: 57px;padding-right: 31px;}

下面是成品：