So verwenden Sie HTML+CSS zum Erstellen einer TG-Vision-Homepage
|
Dieses Mal verwenden wir HTML+CSS-Layout, um eine vorläufige Konstruktion der Homepage von TG-vision Shuanghui Media zu erstellen. 1. Top-Logo und Navigationsleiste 1. HTML-Code
<!--Oben beginnen-->
<div Klasse="topheader">
<!--Shuanghui-Logo-->
<div Klasse="Logo">
<img src="images/logo.jpg" alt="">
</div>
<!--Obere Navigationsleiste-->
<div Klasse="navheader" id="Tapbar">
<div Klasse="nav" >
<a href="#">Startseite</a>
</div>
<div Klasse="nav">
<a href="#porfolio">Fall</a>
</div>
<div Klasse="nav">
<a href="#services">Dienste</a>
</div>
<div Klasse="nav">
<a href="#über uns">Über uns</a>
</div>
<div Klasse="nav">
<a href="#Kontakt">Kontaktieren Sie uns</a>
</div>
</div>
</div>2. CSS-Code
.topheader{
Höhe: 65px;
Breite: 99 %;
/*Obere Hintergrundfarbe*/
Hintergrundbild: URL (Bilder/top_header_bg.gif);
Hintergrundwiederholung: Wiederholung;
/*Der obere Bereich ist oben fixiert und bewegt sich mit der Bildlaufleiste*/
Position: fest;
oben: 0;
z-index: 9999; /*An die oberste Ebene anpassen*/
}
/*Logo-Bild-Layout*/
.Logo{
Höhe: 62px;
Breite: 220px;
schweben: links;
Rand links: 250px;
}
/*Navigationsleistenlayout*/
.navheader{
Breite: 600px;
Höhe: 65px;
schweben: rechts;
Rand rechts: 130px;
Rand oben: 15px;
}
/*Navigationsleistenlayout*/
.nav{
Breite: 80px;
Höhe: 40px;
schweben: links;
Rand rechts: 10px;
Textausrichtung: zentriert;
Zeilenhöhe: 40px;
}
/*Passe das a-Tag an und entferne die Unterstreichung*/
.navheader a{
Textdekoration: keine;
Schriftart: 18px „Neues Lied“;
Farbe: weiß;
}
/*Durch Hovern, wenn die Maus über den Navigationsbereich bewegt wird, ändert sich die Farbe des Navigationsbereichs in die eingestellte Farbe*/
.nav:hover{
Hintergrundfarbe: #ff6666;
border-radius: 5px; /*Radius hinzufügen*/
}2. Zentralbereich Anzeigebilder 1. HTML-Code
<div Klasse="Fokusleiste">
<div Klasse="Fokusaus">
<!--Bild zentrieren-->
<div Klasse="Fokus">
<img src="images/focus/11.jpg" alt="">
</div>
<!--Bild zentrieren-->
<div Klasse="Fokus">
<img src="images/focus/12.jpg" alt="">
</div>
</div>
<!--Unterer Bereich des Bildes-->
<div Klasse = "Fokusbuttom"></div>
</div>2. CSS-Code
/*Zentrale Bereichsaufteilung*/
.focusBar{
Höhe: 500px;
Breite: 100 %;
Hintergrundfarbe: #141414;
Polsterung oben: 130px;
}
/* Layout des zentrierten Bildbereichs*/
.Fokusaus{
Breite: 1000px;
Höhe: 400px;
margin:0 auto; /* Den mittleren Bildbereich horizontal zentrieren*/
}
.Fokus{
Breite: 1000px;
Höhe: 500px;
schweben: links;
Position: absolut;
}
.fokusbutton{
Höhe: 100px;
Breite: 100 %;
Hintergrundfarbe: #e8e8e8;
}3. Layoutstil für Beiträge auf der Webseite
3. Portfolio-Teil 1. HTML-Code
<div class="titleBar1"id="portfolio"></div>
<!--Bilderanzeige unterhalb des Portfolios-->
<div class="portfolio">
<div Klasse="Portfoliobox">
<div Klasse="Portfolioobox1">
<img src="images/portfolio/p1.jpg" width="330px" alt="">
</div>
<div Klasse="Portfolioobox1 Boxmargin">
<img src="images/portfolio/p2.jpg" width="330px"alt="">
</div>
<div Klasse="Portfolioobox1">
<img src="images/portfolio/p3.jpg"width="330px" alt="">
</div>
</div>
<div Klasse="Portfoliobox">
<div Klasse="Portfolioobox2">
<img src="images/portfolio/p4.jpg" width="330px" alt="">
</div>
<div Klasse="porfolioobox2 boxmargin">
<img src="images/portfolio/p5.jpg" width="330px" alt="">
</div>
<div Klasse="Portfolioobox2">
<img src="images/portfolio/p6.jpg" width="330px" alt="">
</div>
</div>
<div Klasse="Portfoliobox">
<div Klasse="Portfolioobox3">
<img src="images/portfolio/p7.jpg" width="330px" alt="">
</div>
<div Klasse="porfolioobox3 boxmargin">
<img src="images/portfolio/p8.jpg" width="330px" alt="">
</div>
<div Klasse="Portfolioobox3">
<img src="images/portfolio/p9.jpg" width="330px" alt="">
</div>
</div>2.css
/*Portfolio-Titel-Layout*/
.titleBar1{
Breite: 100 %;
Höhe: 70px;
Hintergrundbild: URL (Bilder/col_tit.gif);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: Mitte 0;
Hintergrundfarbe: #f3f3f3;
Rand: 10px 0;
}
/*Layout des Portfolio-Anzeigebereichs*/
.portfolio{
Breite: 100 %;
Höhe: 615px;
}
.portfoliobox{
Höhe: 206px;
Breite: 1000px;
Rand: 0 automatisch;
}
/*Bildlayout anzeigen*/
.porfolioobox1,.porfolioobox2,.porfolioobox3{
Höhe: 195px;
Breite: 330px;
schweben: links;
}
.boxmargin{
Rand: 0,5px;
}3. Layoutstil für Beiträge auf der Webseite
4. Abschnitt „Dienste“ 1. HTML-Code
<!--Dienstleistungstitel-->
<div Klasse="titleBar2" id="Dienste">
</div>
<!-Dienste-Body-->
<div Klasse="Dienste">
<div Klasse="Servicesbox">
<div Klasse="servicesbox1">
<img src="images/ser_box1.jpg" alt="">
<P>Mobile Produktlösungen</P>
<span>Interaktionsdesign, visuelles Design, HTML5-Entwicklung, Entwicklung individueller Funktionen für öffentliche iOS-/Android-/WeChat-Plattformen</span>
</div>
<div Klasse="Dienstebox1 Dienstebox2">
<img src="images/ser_box2.jpg" alt="">
<p>Anwendungssoftwarelösungen</p>
<span>Interaktionsdesign, visuelles Design und anwendungsseitige Entwicklungsdienste für mehrere Betriebssysteme und Plattformen bei Anwendungssoftware</span>
</div>
<div Klasse="servicesbox1">
<img src="images/ser_box3.jpg" alt="">
<p>Netzwerk- und Internet-Produktlösungen</p>
<span> Umfassende Analyse der Verfügbarkeit von Weblösungen basierend auf Benutzeranforderungen, Marktbedingungen, Unternehmensbedingungen usw.</span>
</div>
<!--Der Kundenbereich verwendet UL-Layoutbilder-->
<div Klasse="Kunden">
<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
/*Titellayout der Dienste*/
.titleBar2{
Breite: 100 %;
Höhe: 70px;
Hintergrundbild: URL (Bilder/col_tit.gif);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: Mitte -70px;
Hintergrundfarbe: #f3f3f3;
Rand: 10px 0;
}
/*Hauptlayout der Dienste*/
.Dienste{
Breite: 1000px;
Höhe: 570px;
Rand: 0 automatisch;
}
.servicesbox{
Breite: 1000px;
Höhe: 270px;
}
.servicesbox1{
Breite: 320px;
Höhe: 270px;
Hintergrundfarbe: #f3f3f3;
schweben: links;
Textausrichtung: zentriert;
}
.servicesbox2{
Rand: 0 20px
}
.servicesbox1 p{
Schriftart: 20px „Chinesisches Lied“;
Polsterung unten: 5px;
}
.servicesbox1 span{
Schriftart: 15px „Chinesisches Lied“;
}
/*Website-Bildlayout unter Dienstleistungen*/
.Kunden{
Breite: 1000px;
Höhe: 265px;
schweben: links;
Überlauf: versteckt;
}
/*ul-Layoutkonfiguration*/
.clients ul{
Breite: 1000px;
Höhe: 246px;
padding-inline-start: 0px; /*Entferne den vom Symbol vor li belegten Platz*/
}
ul, li, dl, dt, dd {
Listenstiltyp: keiner;
}
/*li-Layoutkonfiguration*/
.Kunden li {
Breite: 165px;
Höhe: 80px;
Überlauf: versteckt; /*Ausblenden*/
schweben: links;
Anzeige: Listenelement;
Textausrichtung: -webkit-match-parent;
Rand: 0,5px durchgezogen #f3f3f3;
}3. Layoutstil für Beiträge auf der Webseite
5. Abschnitt „Über uns“ 1. HTML
<!--Über uns Titel-->
<div class="titleBar3" id="Über uns"></div>
<!--Über uns Center-Bereich-->
<div Klasse="Über">
<!--Über unsTop-Bildanzeige-->
<div Klasse="aboutshow">
<div Klasse="anzeigen">
<img src="images/shshow/ss12.jpg" alt="">
</div>
<div Klasse="Show-Showmargin">
<img src="images/shshow/ss22.jpg" alt="">
</div>
<div Klasse="anzeigen">
<img src="images/shshow/ss32.jpg" alt="">
</div>
</div>
<!--Über uns, mittlerer Einführungsabschnitt-->
<div Klasse="aboutshow2">
<div Klasse="auoutlogo">
<img src="images/about_logo.jpg" alt="">
</div>
<p>TGVISION wurde 2006 gegründet. Wir sind ein professionelles Markenplanungs- und Produktionsteam, das Interaktion, Innovation, visuelles Design und Produktentwicklung integriert. Wir sind bestrebt, umfassende plattformübergreifende Produktservicelösungen für namhafte in- und ausländische Unternehmen bereitzustellen. Mit professionellem interaktivem Design, innovativen Konzepten und visueller Präsentation haben wir mehr als 100 in- und ausländische Unternehmen betreut und können auf über 300 erfolgreiche Fälle zurückblicken. Es deckt verschiedene Branchen ab, darunter IT, Automobil, Bildung, Immobilien, Finanzen usw., und verfügt über erfolgreiche Fälle für Unternehmen wie China Mobile, China Telecom, Baidu, Sina, Taobao, Sony, Lenovo, People‘s Daily, China Daily usw. und genießt in China ein hohes Ansehen. </p>
</div>
<!--Über uns, Einführung unten-->
<div Klasse="aboutshow3">
<div Klasse="Showtime">
<img src="images/about_num1.gif" width="332px">
<p>Wir untersuchen und verstehen das Denken, Verhalten und die Ziele der Benutzer und erforschen ihre potenziellen Bedürfnisse hinsichtlich der Produktnutzung. Durch unsere umfassende Erfahrung in der Betreuung von Kunden in verschiedenen Branchen und kombiniert mit den Vorteilen der Marke führen wir Analysen durch, die es Benutzern ermöglichen, Produktinnovationen emotional und verhaltensmäßig wahrzunehmen und ein perfektes Erlebnis zu erleben. Über den Wert der Marke hinaus. </p>
</div>
<div Klasse="Showtime Showtimemargin">
<img src="images/about_num2.gif" width="332px">
<p>Wir sind ein leidenschaftliches und innovatives Team. Wir nutzen Design, um durch emotionalen Ausdruck eine natürliche Verbindung zwischen Benutzern und Produkten herzustellen. So können Benutzer Freude an der Verwendung des Produkts haben und ihre Erfahrung und Wahrnehmung des Produkts und der Marke wird gestärkt! Zeigen Sie es durch natürliche Interaktion und lebendiges Design und beeindrucken Sie Benutzer mit einem emotionalen Design! </p>
</div>
<div Klasse="Showtime">
<img src="images/about_num3.gif" width="332px">
<p>
Bieten Sie Ihren Kunden Markenlösungen aus einer Hand. Die Dienste umfassen das Internet, mobile Handheldgeräte, Desktop-Plattformen und Unterhaltungselektronik. Wir bieten unseren Kunden alles von Markendesign, Konzeptdesign, Interaktionsdesign, visuellem Design, Funktionsforschung und -entwicklung bis hin zur endgültigen Produktrealisierung. Bieten Sie Ihren Kunden ein wirklich innovatives Produkterlebnis.
</p>
</div>
</div>
</div>2.css
/*Titellayout der Dienste*/
.titleBar3{
Breite: 100 %;
Höhe: 70px;
Hintergrundbild: URL (Bilder/col_tit.gif);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: Mitte -140px;
Hintergrundfarbe: #f3f3f3;
Rand: 10px 0;
}
/*Layout des Dienstleistungszentrumbereichs*/
.um{
Breite: 100 %;
Höhe: 715px;
}
/*Dienste erster Teil Bildbereich Layout*/
.aboutshow{
Breite: 1000px;
Höhe: 260px;
Rand: 0 automatisch;
}
.zeigen{
schweben: links;
}
.showmargin{
Rand: 0 12,5px;
}、
/*Layout der mittleren Einführung zu Diensten*/
.aboutshow2{
Breite: 1000px;
Höhe: 120px;
Hintergrundfarbe: #f3f3f3;
Rand: 0 automatisch;
Rand: 0,5px durchgezogen #141414;
}
.auoutlogo{
schweben: links;
Polsterung rechts: 10px;
Polsterung oben: 5px;
}
.aboutshow2 p{
Breite: 800px;
Polsterung oben: 5px;
Rand rechts: 10px;
Hintergrundfarbe: #f3f3f3;
schweben: rechts;
Schriftart: 15px „Huawen Fangsong“;
}
/*Layout der Einführung zu den unteren Services*/
.aboutshow3{
Breite: 1000px;
Höhe: 300px;
Rand: 0 automatisch;
Rand oben: 30px;
}
.Show Time{
Breite: 332px;
Höhe: 299px;
Rahmen oben: 1px Anfang #787676;
Rahmen unten: 1px Anfang #787676;
schweben: links;
}
.showtimemargin{
Rahmen links: 1px Anfang #787676;
Rahmen rechts: 1px Anfang #787676;
}
.showtime p{
Schriftart: 15px „Chinesisches Lied“;
Polsterung oben: 20px;
}3. Layoutstil für Beiträge auf der Webseite
6. Abschnitt „Kontakt“ 1. HTML
<!--Kontakttitel-->
<div class="titleBar4" id="kontaktieren Sie uns"></div>
<!--Kontaktieren Sie uns, Hauptteil-->
<div Klasse="Kontakt">
<div Klasse="Kontaktbox">
<div Klasse="Kontaktbox1">
<ul>
<li class="contact_1"><h3>Sagen Sie uns, was Sie brauchen</h3></li>
<li Klasse="Kontakt_2">
<input type="text"value="Geben Sie Ihren Namen ein" class="clients_3">
<input type="text"value="Kontaktnummer">
</li>
<li class="clients_4"><input type="text" value="E-Mail" ></li>
<li class="clients_4"><input type="text" value="Ihr Unternehmen" ></li>
<li Klasse="Kunden_5">
<textarea cols="80" rows="20">Details eingeben</textarea>
<Eingabetyp="Senden">
</li>
</ul>
</div>
<div Klasse="Kontaktbox2">
<img src="images/bottomlogo.jpg" width="320px" alt="">
<div Klasse="Kontaktbox3">
<img src="images/temp_map.jpg" width="320px" alt="" class="bottom">
</div>
</div>
</div>2.css
/*Kontaktieren Sie uns, Titellayout*/
.titleBar4{
Breite: 100 %;
Höhe: 70px;
Hintergrundbild: URL (Bilder/col_tit.gif);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: Mitte -210px;
Hintergrundfarbe: #f3f3f3;
Rand: 10px 0;
}
/*Kontaktieren Sie uns Hauptlayout*/
.Kontakt{
Breite: 100 %;
Höhe: 620px;
}
.Kontaktbox{
Breite: 1000px;
Höhe: 620px;
Rand: 0 automatisch;
}
.Kontaktbox1{
Breite: 640px;
Höhe: 620px;
schweben: links;
Überlauf: versteckt;
}
/*ul-Layout*/
.kontakt ul{
Breite: 640px;
padding-inline-start: 0px; /*Den vom Symbol „li“ belegten Platz ausblenden*/
}
/*li-Layout*/
.Kontakt li{
Breite: 640px;
Rand: 0;
Polsterung oben: 10px;
Listenstiltyp: keiner;
Überlauf: versteckt;
}
.contact input[Typ=Text]{
Breite: 300px;
Höhe: 40px;
Schriftart: 15px „Chinesisches Lied“;
Hintergrundfarbe: rgba(250,250,250,0,8);
}
.contact Eingabe[Typ=Senden]{
Breite: 150px;
Höhe: 45px;
Hintergrundfarbe: #ff6666;
}
.clients_3{
Rand rechts: 18px;
}
.clients_4 Eingabe[Typ=Text]{
Breite: 630px;
}
.clients_5 {
Breite: 640px;
Höhe: 353px;
}
.contactbox2{
Breite: 320px;
Höhe: 630px;
schweben: rechts;
Polsterung oben: 34px;
}
.unten{
Polsterung oben: 86px;
}
.contactbox3{
Breite: 320px;
Höhe: 335px;
schweben: rechts;
}3. Layoutstil für Beiträge auf der Webseite
7. Quellcode und Bildlinks zum Aufbau der Webseite Verknüpfung: https://pan.baidu.com/s/1p-wi4g8rloHotNx4te4r5A Extraktionscode: 52hc Da es das erste Mal war, dass ich eine Website erstellte, war mir die Architektur der Webseite nicht ganz klar, der Fertigstellungsgrad der Webseitenerstellung war nicht besonders gut und der Code war nicht klar geschrieben. Bitte geben Sie mir einen Rat. Dies ist das Ende dieses Artikels zur Verwendung von HTML+CSS zum Erstellen einer TG-Vision-Homepage. Weitere relevante Inhalte zur Erstellung einer TG-Vision-Homepage mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 1
>>: Erläuterung der Methode zum Schreiben von SQL-Anweisungen zum Einfügen
Artikel empfehlen
Methodenbeispiel zum sicheren Abrufen tiefer Objekte von Object in Js
Inhaltsverzeichnis Vorwort Text Parameter Beispie...
Grafisches Tutorial zum Herunterladen, Installieren und Konfigurieren von MySQL 8.0.22.0
MySQL 8.0.22 Download-, Installations- und Konfig...
Der Nationalfeiertag steht vor der Tür. Verwenden Sie JS, um ein kleines Tool zum Generieren eines Avatars im Stil des Nationalfeiertags zu implementieren. Detaillierte Erläuterung des Implementierungsprozesses
Inhaltsverzeichnis 1. Seitenlayout 2. Bild-Upload...
Lernen Sie eine Minute am Tag, den Git-Server zu verwenden, um Debug-Zweige anzuzeigen und zu beheben
Debug-Zweig Während der normalen Entwicklung eine...
Führt MySQL die Aktualisierungsanweisung erneut aus, wenn sie dieselben Daten enthält wie die ursprüngliche?
Hintergrund In diesem Artikel wird hauptsächlich ...
Detaillierte Erläuterung der MySQL-Optimierung für Schreibprobleme im großen Maßstab
Zusammenfassung: Wenn über die Leistungsoptimieru...
So verhindern Sie mit Nginx die böswillige Auflösung von IP-Adressen
Zweck der Verwendung von Nginx Lassen Sie uns zun...
jQuery realisiert Bildhervorhebung
Es ist sehr üblich, Bilder auf einer Seite hervor...
MySQL Serie 4 SQL-Syntax
Inhaltsverzeichnis Tutorial-Reihe 1. Einführung u...
So implementieren Sie E-Mail-Benachrichtigungen in Zabbix
Umgesetzt gemäß Online-Tutorial. zabbix3.4, mithi...
So fragen Sie dieselbe Tabelle in einer MySQL-Datenbank gleichzeitig ab und aktualisieren sie
In gewöhnlichen Projekten stoße ich häufig auf di...
Detaillierter Prozess zur Installation von Presto und zum Verbinden von Hive in Docker
1. Einleitung Presto ist eine Open-Source-SQL-Abf...
Detaillierte Erklärung des Unterschieds und der Anwendung von CSS3-Filtern: Schlagschattenfilter und Box-Shadow
Um mit Standard-CSS3 den Schatteneffekt eines Ele...
Detaillierte Erklärung des unbekannten Fehlers 10061 bei der Verwendung von Navicat zur Verbindung mit einer Remote-Linux-MySQL-Datenbank
Bei der Verwendung von Navicat zum Herstellen ein...
Mehrere Möglichkeiten zum Berechnen des Alters anhand des Geburtstags in MySQL
Ich habe MySQL vorher nicht sehr oft verwendet un...