此次大家用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）创立于2007年，大家是一支融互动、自主创新、视觉效果设计方案、商品产品研发于一体的技术专业知名品牌方案策划与制作精英团队，鼎立为中国外著名公司出示多方位多服务平台的商品服务处理计划方案。以技术专业的互动设计方案、自主创新核心理念、视觉效果展现，服务中国外公司高达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
第一次制作，针对网页页面构架其实不是非常清晰，网页页面制作的摹仿进行度其实不是非常好，编码写的也其实不清楚一目了然。请诸位巨头悉心赐教。
到此这篇有关怎样应用HTML+CSS完成TG-vision 首页制作的文章内容就详细介绍到这了,大量有关css TG-vision 首页制作內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！
Copyright © 2002-2020 小程序开发者工具_小程序在线生成平台_小程序编辑_免费的小程序_微信小程序在哪里 版权所有 （网站地图） 粤ICP备10235580号