前几天看完了HTML跟CSS基础教程,这几天做了一些东西,今天试着做了一下完整的网页,下边附上代码,跟大家分享一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板页1</title>
<link rel="stylesheet" href="sytle.css" type="text/css">
</head>
<body >
<!-- 头部 -->
<div id="header">
<div id="header_main">
<div id="header_logo">
<a href="#"><img src="images/logo.jpg" alt="LOGO"></a>
</div>
<div id="header_img"><img src="images/header_img.jpg" alt="联系我们"></div>
<div id="header_nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">设计师</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>
<div id="header_foot"></div>
</div>
<div id="main">
<!-- 上部 -->
<div id="banner"><img src="images/qww.jpg" alt="banner">
</div>
<!-- 中部 -->
<div id="content">
<div id="content_showcase" class="content_com">
<div id="content_showcase_top" class="content_top">
<div id="content_showcase_top_l"></div>
<div id="content_showcase_top_r"></div>
<div id="more"><a href="#"></a></div>
</div>
<div id="content_showcase_bot" class="content_bot">
<ul>
<li><a href="#"><img src="images/img.png" alt="IMG"></a><p>家装案例—港式设计风格</p></li>
<li class="LI"><a href="#"><img src="images/img.png" alt="IMG"></a><p>家装案例—港式设计风格</p></li>
<li><a href="#"><img src="images/img.png" alt="IMG"></a><p>家装案例—港式设计风格</p></li>
</ul>
<ul>
<li><a href="#"><img src="images/img.png" alt="IMG"></a><p>家装案例—港式设计风格</p></li>
<li class="LI"><a href="#"><img src="images/img.png" alt="IMG"></a><p>家装案例—港式设计风格</p></li>
<li><a href="#"><img src="images/img.png" alt="IMG"></a><p>家装案例—港式设计风格</p></li>
</ul>
</div>
</div>
<div id="content_news" class="content_com">
<div id="content_news_top" class="content_top">
<div id="content_news_top_l"></div>
<div id="content_news_top_r">
<div id="content_news_top_r_top"><a href="#"></a></div>
<div id="content_news_top_r_bot"></div>
</div>
</div>
<div id="content_news_bot" class="content_bot">
<div id="news_top"></div>
<div id="news_content">
<ul>
<li><a href="#">01</a></li>
<li><a href="#">02</a></li>
<li><a href="#">03</a></li>
<li><a href="#">04</a></li>
<li><a href="#">05</a></li>
<li><a href="#">06</a></li>
</ul>
</div>
<div id="news_bot">
<dl>
<dd><img src="images/-.jpg" ><b>这里是小标题</b>
<br /><p>我们公司拥有最好的设计人才,并且我们拥有多年的设计经验,欢迎广大网友前来预订.....<a href="">+</a></p>
<hr/></dd>
<dd><img src="images/-.jpg" ><b>这里是小标题</b>
<br /><p>我们公司拥有最好的设计人才,并且我们拥有多年的设计经验,欢迎广大网友前来预订.....<a href="">+</a></p>
<hr/></dd>
<dd><img src="images/-.jpg" ><b>这里是小标题</b>
<br /><p>我们公司拥有最好的设计人才,并且我们拥有多年的设计经验,欢迎广大网友前来预订.....<a href="">+</a></p>
<hr/></dd>
</dl>
</div>
</div>
</div>
</div>
<!-- 下部 -->
<div id="bot">
<div id="bot_disigner" >
<div id="bot_disigner_top" class="bot_top">
<div id="bot_disigner_top_l"></div>
<div id="bot_disigner_top_r"></div>
<div id="more"><a href="#"></a></div>
</div>
<div id="bot_disigner_bot" class="bot_bot">
<div id="bot_disigner_box">
<ul>
<li class="A"><a href="#"><img src="images/one.png" alt=""></a></li>
<li class="B"><a href="#"><img src="images/tow.png" alt=""></a></li>
<li class="C"><a href="#"><img src="images/three.png" alt=""></a></li>
</ul>
<ul>
<li class="D"><a href="#"><img src="images/fore.png" alt=""></a></li>
<li class="E"><a href="#"><img src="images/five.png" alt=""></a></li>
<li class="F"><a href="#"><img src="images/six.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<div id="bot_about" >
<div id="bot_about_top" class="bot_top">
<div id="bot_about_top_l"></div>
<div id="bot_about_top_r"></div>
<div id="more"><a href="#"></a></div>
</div>
<div id="bot_about_bot" class="bot_bot">
<div id="about_img"></div>
<p>质鼎国际设计,是一家专业从事中高档家装、别墅、样板房、商业空间的装饰企业。
</p>
<p>自成立之日起,公司便以前沿的设计理念、科学的施工管理、人性化的服务为宗旨。为客户提供集合设计、选材、施工、家饰等全方位、高品质的服务。精湛的施工技术,真诚的服务态度,完善的饰后跟踪服务,深得客户的赞誉。</p>
<a href="#">更多>></a>
</div>
</div>
<div id="bot_contact" >
<div id="bot_contact_top" class="bot_top">
<div id="bot_contact_top_l"></div>
<div id="bot_contact_top_r"></div>
<div id="more"><a href="#"></a></div>
</div>
<div id="bot_contact_bot" class="bot_bot">
<div class="bot_contact_bot1"><img src="images/zhong.png" alt=""></div>
<div class="bot_contact_bot2">
<div id="">
<p>WORK TIME:AM9:00—PM18:00 </p>
</div>
<div id="man">
<ul>
<li><a id="man1" href="#"></a></li>
<li><a id="man2" href="#"></a></li>
<li><a id="man3" href="#"></a></li>
<li><a id="man4" href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div id="footer">
<div id="footer_top">
<div id="footer_box">
<div id="footer_box_l">
<ul>
<li class="no">
<a href="#"><h3>网站首页</h3></a>
</li>
<li class="yes">
<a href="#"><h3>公司历程</h3></a>
<a href="#"><p>公司创建</p></a>
<a href="#"><p>往年发展</p></a>
<a href="#"><p>未来发展</p></a>
</li>
<li>
<a href="#"><h3>相关设计</h3></a>
<a href="#"><p>欧式典雅</p></a>
<a href="#"><p>中式稳重</p></a>
<a href="#"><p>西班牙风</p></a>
</li>
<li>
<a href="#"><h3>你的建议</h3></a>
<a href="#"><p>优秀设计</p></a>
<a href="#"><p>设计难题</p></a>
<a href="#"><p>图纸设计</p></a>
</li>
</ul>
</div>
<div id="footer_box_r"><p>友情链接:</p></div>
</div>
</div>
<div id="footer_bot"></div>
</div>
</body>
</html> |
|