A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 南国之南 中级黑马   /  2016-7-20 23:18  /  1987 人查看  /  5 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

前几天看完了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="#">更多&gt;&gt;</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&nbsp;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>

5 个回复

倒序浏览
来顶一下。。。。
回复 使用道具 举报
z6677 发表于 2016-7-24 13:34
来顶一下。。。。

多谢兄台
回复 使用道具 举报
楼主 看的是那家的基础视频? 我怎么感觉传智的看的进度太慢了,比较繁琐.觉的腾讯课堂的视频要精简些.举的例子通俗易懂.学的也快的多.不知到底选 择那家!!!
回复 使用道具 举报
基础的话我是去看慕课网学的,比较好上手
回复 使用道具 举报
不错不错
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马