黑马程序员技术交流社区
标题:
网页制作实战之HTML部分
[打印本页]
作者:
南国之南
时间:
2016-7-20 23:18
标题:
网页制作实战之HTML部分
前几天看完了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>
作者:
z6677
时间:
2016-7-24 13:34
来顶一下。。。。
作者:
南国之南
时间:
2016-7-24 17:31
z6677 发表于 2016-7-24 13:34
来顶一下。。。。
多谢兄台
作者:
梦想追逐者
时间:
2016-7-25 22:36
楼主 看的是那家的基础视频? 我怎么感觉传智的看的进度太慢了,比较繁琐.觉的腾讯课堂的视频要精简些.举的例子通俗易懂.学的也快的多.不知到底选 择那家!!!
作者:
从无到有
时间:
2016-7-31 12:12
基础的话我是去看慕课网学的，比较好上手
作者:
7小虾米7
时间:
2016-9-10 00:29
不错不错
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
多谢兄台