本次我们用HTML+CSS布局来对TG-vision 双晖传媒的主页进行一个初步的搭建。
一.顶部logo及导航条
1.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>
2.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图片布局*/ .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; } /*调整a标签,去掉下划线*/ .navheader a{ text-decoration: none; font:18px "新宋体"; color: white; } /*通过hover,使得当鼠标悬停在nav区域时,nav区域颜色变为设置颜色*/ .nav:hover{ background-color: #ff6666; border-radius: 5px; /*添加一个弧度*/ }
二.中心区域展示图片
1.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>
2.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; }
3.网页布局后样式
三.porfolio部分
1.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>
2.css
/*porfolio标题布局*/ .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展示区域布局*/ .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; }
3.网页布局后样式
四. services部分
1.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>
2.css
/*services标题布局*/ .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主体布局*/ .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 "华文宋体"; } /*services下方网站图片布局*/ .clients{ width:1000px; height: 265px; float: left; overflow: hidden; } /*ul布局配置*/ .clients ul{ width:1000px; height: 246px; padding-inline-start: 0px; /*去掉li前面符号占据的空间*/ } ul, li, dl, dt, dd { list-style-type: none; } /*li布局配置*/ .clients li { width: 165px; height: 80px; overflow: hidden; /*隐藏*/ float: left; display: list-item; text-align: -webkit-match-parent; border: 0.5px solid #f3f3f3; }
3.网页布局后样式
五. about us 部分
1.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>
2.css
/*services标题布局*/ .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; } /*services中心区域布局*/ .about{ width: 100%; height: 715px; } /*services第一部分图片区域布局*/ .aboutshow{ width: 1000px; height: 260px; margin: 0 auto; } .show{ float: left; } .showmargin{ margin: 0 12.5px; }、 /*services中部简介布局*/ .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 "华文仿宋"; } /*services底部简介布局*/ .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; }
3.网页布局后样式
六.contact us部分
1.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"><h3>告诉我们您的需求</h3></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>
2.css
/*contact us标题布局*/ .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 us主体布局*/ .contact{ width: 100%; height: 620px; } .contactbox{ width: 1000px; height: 620px; margin: 0 auto; } .contactbox1{ width: 640px; height: 620px; float: left; overflow: hidden; } /*ul布局*/ .contact ul{ width: 640px; padding-inline-start: 0px; /*隐藏li符号占据区域的空间*/ } /*li布局*/ .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; }
3.网页布局后样式
七.网页构建源代码及图片链接
链接: https://pan.baidu.com/s/1p-wi4g8rloHotNx4te4r5A
提取码: 52hc
初次制作,对于网页架构并不是特别清楚,网页制作的临摹完成度并不是特别好,代码写的也并不清晰明了。请各位大佬悉心赐教。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
暂无“如何使用HTML+CSS实现TG-vision 主页制作”评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年12月24日
2024年12月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]