这篇文章给大家分享的是有关怎么使用HTML+CSS实现TG-vision 主页的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
一.顶部logo及导航条
HTML代码
<!--顶部开始--><div class="topheader"> <!--双晖logo--> <div class="logo"> <img src="images/logo.jpg" alt=""> </div> <!--顶部导航条--> <div class="navheader" id="Tapbar"> <div class="nav" > <a href="#">首页</a> </div> <div class="nav"> <a href="#porfolio">案例</a> </div> <div class="nav"> <a href="#services">服务</a> </div> <div class="nav"> <a href="#about us">关于</a> </div> <div class="nav"> <a href="#contact us">联系</a> </div> </div></div>css代码
.topheader{ height: 65px; width: 99%; background-image: url(images/top_header_bg.gif); background-repeat:repeat; position: fixed ; top: 0; z-index: 9999; }.logo{ height: 62px; width: 220px; float: left; margin-left: 250px;}.navheader{ width: 600px; height: 65px; float: right; margin-right: 130px; margin-top: 15px;}.nav{ width: 80px; height: 40px; float: left; margin-right: 10px; text-align:center; line-height: 40px;}.navheader a{ text-decoration: none; font:18px "新宋体"; color: white;}.nav:hover{ background-color: #ff6666; border-radius: 5px; }二.中心区域展示图片
HTML代码
<div class="focusBar"> <div class="Focusout"> <!--插入中心图片--> <div class="focus"> <img src="images/focus/11.jpg" alt=""> </div> <!--插入中心图片--> <div class="focus"> <img src="images/focus/12.jpg" alt=""> </div> </div> <!--图片底部区域--> <div class="focusbuttom"></div></div>css代码
.focusBar{ height: 500px; width: 100%; background-color: #141414; padding-top: 130px;} .Focusout{ width: 1000px; height: 400px; margin:0 auto ; }.focus{ width: 1000px; height: 500px; float: left; position: absolute;}.focusbuttom{ height: 100px; width: 100%; background-color: #e8e8e8;}网页布局后样式
三.porfolio部分
HTML代码
<div class="titleBar1"id="porfolio"></div> <!--porfolio下方图片展示--><div class="porfolio"> <div class="porfoliobox"> <div class="porfolioobox1"> <img src="images/portfolio/p1.jpg" width="330px" alt=""> </div> <div class="porfolioobox1 boxmargin"> <img src="images/portfolio/p2.jpg" width="330px"alt=""> </div> <div class="porfolioobox1"> <img src="images/portfolio/p3.jpg"width="330px" alt=""> </div> </div> <div class="porfoliobox"> <div class="porfolioobox2"> <img src="images/portfolio/p4.jpg" width="330px" alt=""> </div> <div class="porfolioobox2 boxmargin"> <img src="images/portfolio/p5.jpg" width="330px" alt=""> </div> <div class="porfolioobox2"> <img src="images/portfolio/p6.jpg" width="330px" alt=""> </div> </div> <div class="porfoliobox"> <div class="porfolioobox3"> <img src="images/portfolio/p7.jpg" width="330px" alt=""> </div> <div class="porfolioobox3 boxmargin"> <img src="images/portfolio/p8.jpg" width="330px" alt=""> </div> <div class="porfolioobox3"> <img src="images/portfolio/p9.jpg" width="330px" alt=""> </div> </div>css
.titleBar1{ width: 100%; height: 70px; background-image: url(images/col_tit.gif); background-repeat:no-repeat; background-position: center 0; background-color: #f3f3f3; margin: 10px 0;}.porfolio{ width: 100%; height: 615px;}.porfoliobox{ height: 206px; width: 1000px; margin: 0 auto;}.porfolioobox1,.porfolioobox2,.porfolioobox3{ height: 195px; width: 330px; float: left;}.boxmargin{ margin: 0 5px;}网页布局后样式
四. services部分
HTML代码
<!--services标题--><div class="titleBar2" id="services"></div> <!-services 主体部分--><div class="services"> <div class="servicesbox"> <div class="servicesbox1"> <img src="images/ser_box1.jpg" alt=""> <P>移动产品解决方案</P> <span>iOS/Android/微信公众平台 APP交互设计、视觉设计、HTML5开发、功能定制开发</span> </div> <div class="servicesbox1 servicesbox2"> <img src="images/ser_box2.jpg" alt=""> <p>应用软件解决方案</p> <span> 多操作系统多平台的应用软件交互设计、视觉设计、应用端开发服务</span> </div> <div class="servicesbox1"> <img src="images/ser_box3.jpg" alt=""> <p>网络及网路产品解决方案</p> <span> 根据用户的需求、市场状况、企业情况等进行综合分析可用性的Web解决方案</span> </div> <!--clients区域采用ul布局图片--> <div class="clients"> <ul> <li><img src="images/clients/tg_clients_1.gif" alt=""></li> <li><img src="images/clients/tg_clients_2.gif" alt=""></li> <li><img src="images/clients/tg_clients_3.gif" alt=""></li> <li><img src="images/clients/tg_clients_4.gif" alt=""></li> <li><img src="images/clients/tg_clients_5.gif" alt=""></li> <li><img src="images/clients/tg_clients_6.gif" alt=""></li> <li><img src="images/clients/tg_clients_7.gif" alt=""></li> <li><img src="images/clients/tg_clients_8.gif" alt=""></li> <li><img src="images/clients/tg_clients_9.gif" alt=""></li> <li><img src="images/clients/tg_clients_10.gif" alt=""></li> <li><img src="images/clients/tg_clients_11.gif" alt=""></li> <li><img src="images/clients/tg_clients_12.gif" alt=""></li> <li><img src="images/clients/tg_clients_13.gif" alt=""></li> <li><img src="images/clients/tg_clients_14.gif" alt=""></li> <li><img src="images/clients/tg_clients_15.gif" alt=""></li> <li><img src="images/clients/tg_clients_16.gif" alt=""></li> <li><img src="images/clients/tg_clients_17.gif" alt=""></li> <li><img src="images/clients/tg_clients_18.gif" alt=""></li> </ul> </div> </div></div>css
.titleBar2{ width: 100%; height: 70px; background-image: url(images/col_tit.gif); background-repeat:no-repeat; background-position: center -70px; background-color: #f3f3f3; margin: 10px 0;}.services{ width: 1000px; height:570px; margin: 0 auto;}.servicesbox{ width: 1000px; height:270px;}.servicesbox1{ width: 320px; height: 270px; background-color: #f3f3f3; float: left; text-align: center;}.servicesbox2{ margin: 0 20px}.servicesbox1 p{ font:20px "华文宋体"; padding-bottom: 5px;}.servicesbox1 span{ font:15px "华文宋体";}.clients{ width:1000px; height: 265px; float: left; overflow: hidden;}.clients ul{ width:1000px; height: 246px; padding-inline-start: 0px; }ul, li, dl, dt, dd { list-style-type: none;}.clients li { width: 165px; height: 80px; overflow: hidden; float: left; display: list-item; text-align: -webkit-match-parent; border: 0.5px solid #f3f3f3;}网页布局后样式
五. about us 部分
HTML
<!--about us标题--><div class="titleBar3" id="about us"></div><!--about us中心区域--><div class="about"><!--about us最上方图片展示--> <div class="aboutshow"> <div class="show"> <img src="images/shshow/ss12.jpg" alt=""> </div> <div class="show showmargin"> <img src="images/shshow/ss22.jpg" alt=""> </div> <div class="show"> <img src="images/shshow/ss32.jpg" alt=""> </div> </div> <!--about us中间简介部分--> <div class="aboutshow2"> <div class="auoutlogo"> <img src="images/about_logo.jpg" alt=""> </div> <p>双晖传媒（TGVISION）成立于2006年，我们是一支融交互、创新、视觉设计、产品研发于一体的专业品牌策划与制作团队，鼎力为国内外知名企业提供全方位多平台的产品服务解决方案。以专业的交互设计、创新理念、视觉呈现，服务国内外企业多达100余家，成功案例300余例。涉及IT、汽车、教育、房地产、金融等各个行业，拥有包括中国移动、中国电信、百度、新浪、淘宝、索尼、联想、人民网、中国日报等企业在内的成功案例，在国内拥有较高美誉。</p> </div> <!--about us底部介绍--> <div class="aboutshow3"> <div class="showtime"> <img src="images/about_num1.gif" width="332px"> <p>我们通过研究理解用户的思维、行为、和目标，挖掘用户对产品使用的潜在需求，通过我们服务于各行业客户的丰富经验，结合品牌的优势进行分析，让用户在情绪上、行为上感知产品的创新、感受完美的体验。超越品牌的价值。</p> </div> <div class="showtime showtimemargin"> <img src="images/about_num2.gif" width="332px"> <p>我们是一只富有激情的创新团队。我们将设计通过情感的表达把用户和产品很自然的连接在一起，让用户享受使用产品的愉悦，以此来强化对产品、品牌的体验认知！通过自然的交互和生动的设计展现出来，用一个充满情感化的设计打动用户！</p> </div> <div class="showtime"> <img src="images/about_num3.gif" width="332px"> <p> 为客户提供品牌化、一站式的解决方案。服务涵盖了互联网，掌上移动设备、桌面平台以及电子消费类产品等。为客户提供从品牌设计、概念设计、交互设计、视觉设计、功能研发到最终产品实现。为客户提供真正具有创新价值的产品体验。 </p> </div> </div></div>css
.titleBar3{ width: 100%; height: 70px; background-image: url(images/col_tit.gif); background-repeat:no-repeat; background-position: center -140px; background-color: #f3f3f3; margin: 10px 0;}.about{ width: 100%; height: 715px;}.aboutshow{ width: 1000px; height: 260px; margin: 0 auto;}.show{ float: left;}.showmargin{ margin: 0 12.5px;}、.aboutshow2{ width: 1000px; height: 120px; background-color: #f3f3f3; margin: 0 auto; border: 0.5px solid #141414;}.auoutlogo{ float: left; padding-right: 10px; padding-top: 5px;}.aboutshow2 p{ width: 800px; padding-top: 5px; margin-right: 10px; background-color: #f3f3f3; float: right; font: 15px "华文仿宋";}.aboutshow3{ width: 1000px; height: 300px; margin: 0 auto; margin-top: 30px;}.showtime{ width: 332px; height:299px; border-top: 1px outset #787676; border-bottom: 1px outset #787676; float: left;}.showtimemargin{ border-left: 1px outset #787676; border-right: 1px outset #787676;}.showtime p{ font: 15px "华文宋体"; padding-top: 20px;}网页布局后样式
六.contact us部分
HTML
<!--contact us标题--><div class="titleBar4" id="contact us"></div><!--contact us主体部分--><div class="contact"> <div class="contactbox"> <div class="contactbox1"> <ul> <li class="contact_1"><h4>告诉我们您的需求</h4></li> <li class="contact_2"> <input type="text"value="填写姓名" class="clients_3"> <input type="text"value="联系电话"> </li> <li class="clients_4"><input type="text" value="电子邮箱" ></li> <li class="clients_4"><input type="text" value="您的公司" ></li> <li class="clients_5"> <textarea cols="80" rows="20">填写详细信息</textarea> <input type="submit"> </li> </ul> </div> <div class="contactbox2"> <img src="images/bottomlogo.jpg" width="320px" alt=""> <div class="contactbox3"> <img src="images/temp_map.jpg" width="320px" alt="" class="bottom"> </div> </div> </div>css
.titleBar4{ width: 100%; height: 70px; background-image: url(images/col_tit.gif); background-repeat:no-repeat; background-position: center -210px; background-color: #f3f3f3; margin: 10px 0;}.contact{ width: 100%; height: 620px;}.contactbox{ width: 1000px; height: 620px; margin: 0 auto;}.contactbox1{ width: 640px; height: 620px; float: left; overflow: hidden;}.contact ul{ width: 640px; padding-inline-start: 0px; }.contact li{ width: 640px; margin: 0; padding-top: 10px; list-style-type:none; overflow: hidden;}.contact input[type=text]{ width: 300px; height: 40px; font: 15px "华文宋体" ; background-color: rgba(250,250,250,0.8);}.contact input[type=submit]{ width: 150px; height: 45px; background-color: #ff6666;}.clients_3{ margin-right: 18px;}.clients_4 input[type=text]{ width: 630px;}.clients_5 { width: 640px; height: 353px;}.contactbox2{ width: 320px; height: 630px; float: right; padding-top: 34px;}.bottom{ padding-top: 86px;}.contactbox3{ width: 320px; height: 335px; float: right;}网页布局后样式
感谢各位的阅读！关于“怎么使用HTML+CSS实现TG-vision 主页”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
