扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >怎么使用HTML+CSS实现TG-vision 主页
  • 299

0
分享到

怎么使用HTML+CSS实现TG-vision 主页

2023-06-08 03:06:57 299人浏览 薄情痞子
摘要

这篇文章给大家分享的是有关怎么使用html+CSS实现TG-vision 主页的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。一.顶部logo及导航条HTML代码<!--顶部开始--><div&n

这篇文章给大家分享的是有关怎么使用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;}

网页布局后样式

怎么使用HTML+CSS实现TG-vision 主页

三.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;}

网页布局后样式

怎么使用HTML+CSS实现TG-vision 主页

四. 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;}

网页布局后样式

怎么使用HTML+CSS实现TG-vision 主页

五. 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;}

网页布局后样式

怎么使用HTML+CSS实现TG-vision 主页

六.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 主页

感谢各位的阅读！关于“怎么使用HTML+CSS实现TG-vision 主页”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

--结束END--

本文标题: 怎么使用HTML+CSS实现TG-vision 主页

本文链接: https://lsjlt.com/news/251370.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 怎么使用HTML+CSS实现TG-vision 主页
    这篇文章给大家分享的是有关怎么使用HTML+CSS实现TG-vision 主页的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。一.顶部logo及导航条HTML代码<!--顶部开始--><div&n...
    99+
    2023-06-08
  • 怎么使用html+css实现页面书本翻页特效
    本篇内容主要讲解“怎么使用html+css实现页面书本翻页特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用html+css实现页面书本翻页特效”吧!效果：实现：1.定义标签，shu是书...
    99+
    2023-07-05
  • 如何使用HTML和CSS实现分页布局
    在现代网页设计中，分页布局是一种常见的方式，可以将大量内容分组展示，并提供简洁清晰的导航方式。本文将以HTML和CSS为基础，为大家介绍如何实现一个简单而实用的分页布局，并附上具体的代码示例。页面结构首先，我们需要定义网页的基本结构，这包括...
    99+
    2023-10-21
    CSS html 分页布局
  • JS、CSS和HTML怎么实现注册页面
    小编给大家分享一下JS、CSS和HTML怎么实现注册页面，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！更新：使用JavaScript实现用户名和密码表单校验功能。...
    99+
    2023-06-20
  • 使用JavaScript+CSS+HTML怎么实现时序图
    这篇文章将为大家详细讲解有关使用JavaScript+CSS+HTML怎么实现时序图，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript的作用是什么1、能够嵌入动态文本于HTM...
    99+
    2023-06-09
  • 如何使用HTML和CSS实现网页换肤效果
    这篇文章主要为大家展示了“如何使用HTML和CSS实现网页换肤效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用HTML和CSS实现网页换肤效果”这篇文...
    99+
    2024-04-02
  • HTML怎么使用CSS
    这篇文章主要为大家展示了“HTML怎么使用CSS”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“HTML怎么使用CSS”这篇文章吧。 　　当浏览器读到一个样式表...
    99+
    2024-04-02
  • HTML+CSS怎么实现动态背景登录页面
    这篇文章给大家分享的是有关HTML+CSS怎么实现动态背景登录页面的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。1. 实现背景图片的动态变换首先在HTML页面body板块中，添加图片div，代码如下：<bo...
    99+
    2023-06-08
  • 如何使用HTML+CSS实现页面加载动画效果
    这篇“如何使用HTML+CSS实现页面加载动画效果”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“如何使用HTML+CSS实现页面加载动画效果”，给大家总结了以下内容，具有一定借鉴价值，内容详...
    99+
    2024-04-02
  • 如何使用HTML和CSS实现导航标签页布局
    在网页设计中，导航标签页是一种常见的布局方式，用于展示网站的不同页面和内容。它可以提高用户体验，让用户可以直观地浏览和访问网站的各个部分。本文将介绍如何使用HTML和CSS来实现导航标签页布局，并给出具体的代码示例。首先，我们需要创建一个基...
    99+
    2023-10-21
    CSS html 导航标签页布局
  • 怎么使用HTML+CSS+JavaScript实现放大镜效果
    本文小编为大家详细介绍“怎么使用HTML+CSS+JavaScript实现放大镜效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么使用HTML+CSS+JavaScript实现放大镜效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢...
    99+
    2023-07-02
  • 怎么使用html和css实现5R笔记模板
    这篇文章主要介绍怎么使用html和css实现5R笔记模板，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！缘起网上有很多现成的模板，下载下来之后吧，看着好像在上面写英文可能更方便一点，行距很小，而且还有网址在上面，心里不...
    99+
    2023-06-08
  • css在html中怎么实现
    这篇文章主要介绍css在html中怎么实现，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！三种实现方式：1、在html标签内使用style属性定义css样式；2、在html文件头部“<style></...
    99+
    2023-06-14
  • 怎么用jQuery+html+css实现王者荣耀官网首页效果
    这篇文章主要介绍“怎么用jQuery+html+css实现王者荣耀官网首页效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么用jQuery+html+css实现王者荣耀官网首页效果”文章能帮助大...
    99+
    2023-06-29
  • 如何使用HTML和CSS实现一个详细页面布局
    HTML和CSS是创建和设计网页的基础技术，通过合理使用这两者，我们可以实现各种复杂的网页布局。本文将介绍如何使用HTML和CSS来实现一个详细页面布局，并提供具体的代码示例。创建HTML结构首先，我们需要创建一个HTML结构来放置我们的页...
    99+
    2023-10-21
    CSS样式 HTML布局 详细页面
  • 如何使用HTML和CSS实现一个固定页脚布局
    在网站设计中，一个常见的需求是实现一个固定页脚布局，即无论网页内容有多少，页脚始终显示在页面的底部。本文将介绍如何使用HTML和CSS实现这样的布局，并提供具体的代码示例。要实现固定页脚布局，我们需要使用CSS的定位属性来控制页脚的位置，并...
    99+
    2023-10-21
    CSS html 固定页脚布局
  • 怎么使用HTML+CSS+JavaScript实现下拉菜单效果
    今天小编给大家分享一下怎么使用HTML+CSS+JavaScript实现下拉菜单效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一...
    99+
    2023-07-02
  • html怎么实现分页功能
    html中实现分页功能的方法：1、创建html文件；2、添加html代码架构；3、在body标签中使用ul、li标签设计页码数；4、添加script标签并写入css样式代码来实现点击及鼠标悬停的分页样式；5、通过浏览器方式查看设计效果。具体...
    99+
    2024-04-02
  • 怎么实现简单html网页
    这篇文章主要介绍怎么实现简单html网页，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！html是什么html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的...
    99+
    2023-06-14
  • html模板页怎么使用
    html 模板页是预先制作的 html 文件，可简化网站开发。使用步骤包括：1. 查找并下载模板；2. 解压缩模板文件（如有必要）；3. 编辑模板页内容；4. 调整 css 样式（可选）...
    99+
    2024-05-21
    css
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作