How to use HTML+CSS to create TG-vision homepage

How to use HTML+CSS to create TG-vision homepage

This time we use HTML+CSS layout to make a preliminary construction of the homepage of TG-vision Shuanghui Media.

1. Top logo and navigation bar

1. HTML code

<!--Start at the top-->
<div class="topheader">
    <!--Shuanghui logo-->
    <div class="logo">
        <img src="images/logo.jpg" alt="">
    </div>
    <!--Top navigation bar-->
    <div class="navheader" id="Tapbar">
        <div class="nav" >
            <a href="#">Home</a>
        </div>
        <div class="nav">
            <a href="#porfolio">Case</a>
        </div>
        <div class="nav">
            <a href="#services">Services</a>
        </div>
        <div class="nav">
            <a href="#about us">About us</a>
        </div>
        <div class="nav">
            <a href="#contact us">Contact us</a>
        </div>
    </div>
</div>

2.css code

.topheader{
    height: 65px;
    width: 99%;
    /*Top background color*/
    background-image: url(images/top_header_bg.gif);
    background-repeat:repeat;
    /*The top area is fixed at the top and moves with the scroll bar*/
    position: fixed ;
    top: 0;
    z-index: 9999; /*Adjust to the top layer*/
}
/*logo image layout*/
.logo{
    height: 62px;
    width: 220px;
    float: left;
    margin-left: 250px;
}
/*Navigation bar layout*/
.navheader{
    width: 600px;
    height: 65px;
    float: right;
    margin-right: 130px;
    margin-top: 15px;
}
/*Navigation bar layout*/
.nav{
    width: 80px;
    height: 40px;
    float: left;
    margin-right: 10px;
    text-align:center;
    line-height: 40px;

}
/*Adjust the a tag and remove the underline*/
.navheader a{
    text-decoration: none;
    font:18px "New Song";
    color: white;
}
/*Through hover, when the mouse hovers over the nav area, the nav area color changes to the set color*/
.nav:hover{
    background-color: #ff6666;
    border-radius: 5px; /*Add a radius*/
}

2. Central area display pictures

1. HTML code

<div class="focusBar">
    <div class="Focusout">
       <!--Insert center image-->
        <div class="focus">
            <img src="images/focus/11.jpg" alt="">
        </div>
          <!--Insert center image-->
        <div class="focus">
            <img src="images/focus/12.jpg" alt="">
        </div>
    </div>
      <!--Bottom area of ​​the image-->
    <div class="focusbuttom"></div>
</div>

2.css code

/*Central area layout*/
.focusBar{
    height: 500px;
    width: 100%;
    background-color: #141414;
    padding-top: 130px;
}
 /* Center image area layout*/
.Focusout{
    width: 1000px;
    height: 400px;
    margin:0 auto; /* Center the center image area horizontally*/
}
.focus{
    width: 1000px;
    height: 500px;
    float: left;
    position: absolute;

}
.focusbutton{
    height: 100px;
    width: 100%;
    background-color: #e8e8e8;
}

3. Post-webpage layout style

Image source: Motian888

3. Portfolio part

1. HTML code

<div class="titleBar1"id="porfolio"></div>
      <!--Picture display below the 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 title layout*/
.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 display area layout*/
.porfolio{
    width: 100%;
    height: 615px;
}
.portfoliobox{
    height: 206px;
    width: 1000px;
    margin: 0 auto;

}
/*Display image layout*/
.porfolioobox1,.porfolioobox2,.porfolioobox3{
    height: 195px;
    width: 330px;
    float: left;
}
.boxmargin{
    margin: 0 5px;
}

3. Post-webpage layout style

Image source: Motian888

4. Services section

1. HTML code

<!--services title-->
<div class="titleBar2" id="services">
</div>
     <!-services body-->
<div class="services">
    <div class="servicesbox">
        <div class="servicesbox1">
            <img src="images/ser_box1.jpg" alt="">
            <P>Mobile product solutions</P>
            <span>iOS/Android/WeChat public platform APP interaction design, visual design, HTML5 development, function customization development</span>
            </div>
        <div class="servicesbox1 servicesbox2">
            <img src="images/ser_box2.jpg" alt="">
            <p>Application software solutions</p>
            <span> Multi-operating system and multi-platform application software interaction design, visual design, and application-side development services</span>
        </div>
        <div class="servicesbox1">
            <img src="images/ser_box3.jpg" alt="">
            <p>Network and Internet Product Solutions</p>
            <span> Comprehensively analyze the availability of Web solutions based on user needs, market conditions, corporate conditions, etc.</span>
        </div>
        <!--The clients area uses ul layout pictures-->
        <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 title layout*/
.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 main layout*/
.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 "Chinese Song";
    padding-bottom: 5px;
}
.servicesbox1 span{
    font:15px "Chinese Song";
}
/*Website image layout below services*/
.clients{
    width:1000px;
    height: 265px;
    float: left;
    overflow: hidden;
}
/*ul layout configuration*/
.clients ul{
    width:1000px;
    height: 246px;
    padding-inline-start: 0px; /*Remove the space occupied by the symbol in front of li*/
}
ul, li, dl, dt, dd {
    list-style-type: none;
}
/*li layout configuration*/
.clients li {
    width: 165px;
    height: 80px;
    overflow: hidden; /*Hide*/
    float: left;
    display: list-item;
    text-align: -webkit-match-parent;
    border: 0.5px solid #f3f3f3;
}

3. Post-webpage layout style

From Motian 888

5. About us section

1. HTML

<!--about us title-->
<div class="titleBar3" id="about us"></div>
<!--about us center area-->
<div class="about">
<!--about usTop picture display-->
    <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 middle introduction section-->
    <div class="aboutshow2">
        <div class="auoutlogo">
            <img src="images/about_logo.jpg" alt="">
        </div>
        <p>TGVISION was established in 2006. We are a professional brand planning and production team integrating interaction, innovation, visual design and product development. We strive to provide all-round multi-platform product service solutions for well-known domestic and foreign companies. With professional interactive design, innovative concepts and visual presentation, we have served more than 100 domestic and foreign companies and have more than 300 successful cases. It covers various industries including IT, automobile, education, real estate, finance, etc., and has successful cases for companies including China Mobile, China Telecom, Baidu, Sina, Taobao, Sony, Lenovo, People's Daily, China Daily, etc., and enjoys a high reputation in China. </p>
    </div>
    <!--about us bottom introduction-->
    <div class="aboutshow3">
        <div class="showtime">
            <img src="images/about_num1.gif" width="332px">
            <p>We study and understand users' thinking, behavior, and goals, and explore their potential needs for product use. Through our rich experience in serving customers in various industries and combined with the advantages of the brand, we conduct analysis to allow users to perceive product innovations emotionally and behaviorally and experience a perfect experience. Beyond the value of the brand. </p>
        </div>
        <div class="showtime showtimemargin">
            <img src="images/about_num2.gif" width="332px">
            <p>We are a passionate and innovative team. We use design to naturally connect users and products through emotional expression, allowing users to enjoy the pleasure of using the product, thereby strengthening their experience and cognition of the product and brand! Show it through natural interaction and vivid design, and impress users with an emotional design! </p>
        </div>
        <div class="showtime">
            <img src="images/about_num3.gif" width="332px">
            <p>
                Provide customers with branded, one-stop solutions. Services cover the Internet, handheld mobile devices, desktop platforms, and consumer electronics. We provide customers with everything from brand design, concept design, interaction design, visual design, function research and development to final product realization. Provide customers with product experience that is truly innovative.
            </p>
        </div>
    </div>
</div>

2.css

/*services title layout*/
.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 center area layout*/
.about{
    width: 100%;
    height: 715px;
}
/*services first part picture area layout*/
.aboutshow{
    width: 1000px;
    height: 260px;
    margin: 0 auto;
}
.show{
    float: left;
}
.showmargin{
    margin: 0 12.5px;
}、
/*Services middle introduction layout*/
.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 "Huawen Fangsong";
}
/*Services bottom introduction layout*/
.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 "Chinese Song";
    padding-top: 20px;
}

3. Post-webpage layout style

From Motian 888

6. Contact us section

1. HTML

<!--Contact us title-->
<div class="titleBar4" id="contact us"></div>
<!--Contact us main part-->
<div class="contact">
    <div class="contactbox">
        <div class="contactbox1">
            <ul>
                <li class="contact_1"><h3>Tell us what you need</h3></li>
                <li class="contact_2">
                    <input type="text"value="Fill in your name" class="clients_3">
                    <input type="text"value="Contact number">
                </li>
                <li class="clients_4"><input type="text" value="Email" ></li>
                <li class="clients_4"><input type="text" value="Your Company" ></li>
                <li class="clients_5">
                    <textarea cols="80" rows="20">Fill in details</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 title layout*/
.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 main layout*/
.contact{
    width: 100%;
    height: 620px;
}
.contactbox{
    width: 1000px;
    height: 620px;
    margin: 0 auto;
}
.contactbox1{
    width: 640px;
    height: 620px;
    float: left;
    overflow: hidden;

}
/*ul layout*/
.contact ul{
    width: 640px;
    padding-inline-start: 0px; /*Hide the space occupied by the li symbol*/
}
/*li layout*/
.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 "Chinese Song";
    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. Post-webpage layout style

From Motian 888

7. Web page construction source code and image links

Link: https://pan.baidu.com/s/1p-wi4g8rloHotNx4te4r5A

Extraction code: 52hc

It was my first time making a website, so I wasn’t particularly clear about the web page architecture, the degree of completion of the web page production was not particularly good, and the code was not clearly written. Please give me some advice.

This is the end of this article on how to use HTML+CSS to create a TG-vision homepage. For more relevant CSS TG-vision homepage creation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  Font Treasure House 50 exquisite free English font resources Part 1

>>:  Implementation steps of encapsulating components based on React

Recommend

VUE Getting Started Learning Event Handling

Table of contents 1. Function Binding 2. With par...

Complete steps to solve 403 forbidden in Nginx

The webpage displays 403 Forbidden Nginx (yum ins...

Linux swap partition (detailed explanation)

Table of contents linux 1. What is SWAP 2. What d...

Learn one minute a day to use Git server to view debug branches and fix them

Debug branch During the normal development of a p...

Detailed explanation of the application of Docker underlying technology Namespace Cgroup

Docker underlying technology: The two core techno...

Summary of experience in using div box model

Calculation of the box model <br />Margin + ...

Paragraph layout and line breaks in HTML web pages

The appearance of a web page depends largely on i...

Quickly solve the problem of slow startup after Tomcat reconfiguration

During the configuration of Jenkins+Tomcat server...

How to simulate enumeration with JS

Preface In current JavaScript, there is no concep...

Basic knowledge of load balancing and a simple example of load balancing using nginx

Nginx can generally be used for seven-layer load ...

Detailed explanation of the usage of compose function and pipe function in JS

Table of contents compose function Array.prototyp...

Analysis of the principle and usage of MySQL custom functions

This article uses examples to illustrate the prin...

Native js to achieve accordion effect

In actual web page development, accordions also a...

In-depth explanation of various binary object relationships in JavaScript

Table of contents Preface Relationships between v...

Vue routing to implement login interception

Table of contents 1. Overview 2. Routing Navigati...