Heim Web-Frontend H5-Tutorial Nachahmung der teilweise statischen Seitenanzeige von Sina

Nachahmung der teilweise statischen Seitenanzeige von Sina

Jul 14, 2017 pm 06:15 PM
展示 statisch 页面

<span style="color: #008080"> 1</span> <span style="color: #800000"><!DOCTYPE html>
</span><span style="color: #008080"> 2</span> <span style="color: #800000"><html xmlns="http://www.w3.org/1999/xhtml">
</span><span style="color: #008080"> 3</span> <span style="color: #800000"><head>
</span><span style="color: #008080"> 4</span> <span style="color: #800000"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</span><span style="color: #008080"> 5</span> <span style="color: #800000">    <title></title>
</span><span style="color: #008080"> 6</span> <span style="color: #800000">    <link href="css/demo.css" rel="stylesheet" />
</span><span style="color: #008080"> 7</span> <span style="color: #800000"></head>
</span><span style="color: #008080"> 8</span> <span style="color: #800000"><body>
</span><span style="color: #008080"> 9</span> <span style="color: #800000">    <div id="dnews">
</span><span style="color: #008080">10</span> <span style="color: #800000">        <div id="dhead"><a href="#" target="_blank" >汽车/在线购车</a></div>
</span><span style="color: #008080">11</span> <span style="color: #800000">        <div id="news">
</span><span style="color: #008080">12</span> <span style="color: #800000">            <div id="newspic"><a href="#"><img src="img/1.jpg" /></a></div>
</span><span style="color: #008080">13</span> <span style="color: #800000">            <div id="newstitle"><a href="#">选贵的也要选对的 热销豪华中型SUV推荐</a></div>
</span><span style="color: #008080">14</span> <span style="color: #800000">        </div>
</span><span style="color: #008080">15</span> <span style="color: #800000">        <ul id="tabs">
</span><span style="color: #008080">16</span> <span style="color: #800000">            <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
</span><span style="color: #008080">17</span> <span style="color: #800000">            <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
</span><span style="color: #008080">18</span> <span style="color: #800000">            <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
</span><span style="color: #008080">19</span> <span style="color: #800000">            <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
</span><span style="color: #008080">20</span> <span style="color: #800000">            <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
</span><span style="color: #008080">21</span> <span style="color: #800000">            <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
</span><span style="color: #008080">22</span> <span style="color: #800000">            <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li>
</span><span style="color: #008080">23</span> <span style="color: #800000">        </ul>
</span><span style="color: #008080">24</span> <span style="color: #800000">    </div>
</span><span style="color: #008080">25</span> <span style="color: #800000"></body>
</span><span style="color: #008080">26</span> <span style="color: #800000"></html></span>
Nach dem Login kopieren
<span style="color: #008080"> 1</span> <span style="color: #800000">a</span>{
<span style="color: #008080"> 2</span> <span style="color: #ff0000">    text-decoration</span>:<span style="color: #0000ff">none</span>;
<span style="color: #008080"> 3</span> }
<span style="color: #008080"> 4</span> <span style="color: #800000">#dnews</span>{
<span style="color: #008080"> 5</span> <span style="color: #ff0000">    width</span>:<span style="color: #0000ff">320px</span>;
<span style="color: #008080"> 6</span> <span style="color: #ff0000">    height</span>:<span style="color: #0000ff">264px</span>;
<span style="color: #008080"> 7</span>   
<span style="color: #008080"> 8</span> }
<span style="color: #008080"> 9</span> <span style="color: #800000">#dhead</span>{
<span style="color: #008080">10</span> <span style="color: #ff0000">    width</span>:<span style="color: #0000ff">320px</span>;
<span style="color: #008080">11</span> <span style="color: #ff0000">    height</span>:<span style="color: #0000ff">30px</span>;
<span style="color: #008080">12</span> <span style="color: #ff0000">    padding-left</span>:<span style="color: #0000ff">10px</span>;
<span style="color: #008080">13</span> <span style="color: #ff0000">    box-sizing</span>:<span style="color: #0000ff">border-box</span>;
<span style="color: #008080">14</span> <span style="color: #ff0000">    line-height</span>:<span style="color: #0000ff">30px</span>;
<span style="color: #008080">15</span> <span style="color: #ff0000">    background-color</span>:<span style="color: #0000ff">rgba(76,255,0,0.1)</span>;
<span style="color: #008080">16</span> }
<span style="color: #008080">17</span> <span style="color: #800000">#dnews #dhead a:hover</span>{
<span style="color: #008080">18</span> <span style="color: #ff0000">    color</span>:<span style="color: #0000ff">blue</span>;
<span style="color: #008080">19</span> }
<span style="color: #008080">20</span> <span style="color: #800000">#news</span>{
<span style="color: #008080">21</span> <span style="color: #ff0000">    width</span>:<span style="color: #0000ff">320px</span>;
<span style="color: #008080">22</span> <span style="color: #ff0000">    height</span>:<span style="color: #0000ff">70px</span>; 
<span style="color: #008080">23</span> <span style="color: #ff0000">    margin-top</span>:<span style="color: #0000ff">10px</span>;
<span style="color: #008080">24</span> }
<span style="color: #008080">25</span> <span style="color: #800000">#news #newspic</span>{
<span style="color: #008080">26</span> <span style="color: #ff0000">    float</span>:<span style="color: #0000ff">left</span>;
<span style="color: #008080">27</span> <span style="color: #ff0000">    width</span>:<span style="color: #0000ff"> 36%</span>;
<span style="color: #008080">28</span> }
<span style="color: #008080">29</span> <span style="color: #800000">#news #newstitle</span>{
<span style="color: #008080">30</span> <span style="color: #ff0000">      width</span>:<span style="color: #0000ff"> 64%</span>;
<span style="color: #008080">31</span>     <span style="color: #008000">/*</span><span style="color: #008000"> padding-left: 10px; </span><span style="color: #008000">*/</span>
<span style="color: #008080">32</span> <span style="color: #ff0000">    font-size</span>:<span style="color: #0000ff"> 16px</span>;
<span style="color: #008080">33</span>     <span style="color: #008000">/*</span><span style="color: #008000"> margin-left: 5px; </span><span style="color: #008000">*/</span>
<span style="color: #008080">34</span>     <span style="color: #008000">/*</span><span style="color: #008000"> padding-left: 4px; </span><span style="color: #008000">*/</span>
<span style="color: #008080">35</span> <span style="color: #ff0000">    float</span>:<span style="color: #0000ff"> left</span>;
<span style="color: #008080">36</span> }
<span style="color: #008080">37</span> <span style="color: #800000">#news #newstitle a:hover</span>{
<span style="color: #008080">38</span> <span style="color: #ff0000">    color</span>:<span style="color: #0000ff">blue</span>;
<span style="color: #008080">39</span> }
<span style="color: #008080">40</span> <span style="color: #800000">#tabs</span>{
<span style="color: #008080">41</span> <span style="color: #ff0000">    list-style-type</span>:<span style="color: #0000ff">none</span>;
<span style="color: #008080">42</span> <span style="color: #ff0000">    color</span>:<span style="color: #0000ff">black</span>;
<span style="color: #008080">43</span> <span style="color: #ff0000">    font-size</span>:<span style="color: #0000ff">14px</span>;
<span style="color: #008080">44</span> <span style="color: #ff0000">    line-height</span>:<span style="color: #0000ff">20px</span>;
<span style="color: #008080">45</span> <span style="color: #ff0000">    float</span>:<span style="color: #0000ff">left</span>;
<span style="color: #008080">46</span> <span style="color: #ff0000">    margin</span>:<span style="color: #0000ff"> 0px  -40px</span>;
<span style="color: #008080">47</span>       
<span style="color: #008080">48</span> }
<span style="color: #008080">49</span> <span style="color: #800000">#tabs .tab a:hover</span>{
<span style="color: #008080">50</span> <span style="color: #ff0000">    color</span>:<span style="color: #0000ff">red</span>;
<span style="color: #008080">51</span> }
<span style="color: #008080">52</span> <span style="color: #800000">.tab</span>{
<span style="color: #008080">53</span> <span style="color: #ff0000">    background-image</span>:<span style="color: #0000ff">url(../img/2.png)</span>;
<span style="color: #008080">54</span> <span style="color: #ff0000">    background-repeat</span>:<span style="color: #0000ff">no-repeat</span>;
<span style="color: #008080">55</span> <span style="color: #ff0000">    padding-left</span>:<span style="color: #0000ff">20px</span>;
<span style="color: #008080">56</span> <span style="color: #ff0000">    background-position-y</span>:<span style="color: #0000ff">center</span>;
<span style="color: #008080">57</span> }
Nach dem Login kopieren

 

Das obige ist der detaillierte Inhalt vonNachahmung der teilweise statischen Seitenanzeige von Sina. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So kopieren Sie eine Seite in Word So kopieren Sie eine Seite in Word Feb 20, 2024 am 10:09 AM

Möchten Sie eine Seite in Microsoft Word kopieren und die Formatierung beibehalten? Dies ist eine kluge Idee, da das Duplizieren von Seiten in Word eine nützliche zeitsparende Technik sein kann, wenn Sie mehrere Kopien eines bestimmten Dokumentlayouts oder -formats erstellen möchten. Diese Anleitung führt Sie Schritt für Schritt durch den Prozess des Kopierens von Seiten in Word, unabhängig davon, ob Sie eine Vorlage erstellen oder eine bestimmte Seite in einem Dokument kopieren. Diese einfachen Anweisungen sollen Ihnen dabei helfen, Ihre Seite einfach neu zu erstellen, ohne bei Null anfangen zu müssen. Warum Seiten in Microsoft Word kopieren? Es gibt mehrere Gründe, warum das Kopieren von Seiten in Word sehr vorteilhaft ist: Wenn Sie ein Dokument mit einem bestimmten Layout oder Format kopieren möchten. Im Gegensatz dazu, die gesamte Seite von Grund auf neu zu erstellen

Wie verwende ich Vue, um Miniaturansichten von Bildern zu generieren und anzuzeigen? Wie verwende ich Vue, um Miniaturansichten von Bildern zu generieren und anzuzeigen? Aug 21, 2023 pm 09:58 PM

Wie verwende ich Vue, um Miniaturansichten von Bildern zu generieren und anzuzeigen? Vue ist ein beliebtes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es bietet umfangreiche Funktionalität und ein flexibles Design, sodass Entwickler problemlos interaktive und reaktionsfähige Anwendungen erstellen können. In diesem Artikel wird erläutert, wie Sie mit Vue Miniaturansichten von Bildern erstellen und anzeigen. Vue.js installieren und einführen Zuerst müssen Sie Vue.js installieren. Vue.js kann über CDN eingeführt oder mit npm installiert werden. Weiterleitung über CDN

So passen Sie den Standby-Modus auf dem iPhone an und bearbeiten ihn: Was ist neu in iOS 17? So passen Sie den Standby-Modus auf dem iPhone an und bearbeiten ihn: Was ist neu in iOS 17? Sep 21, 2023 pm 04:01 PM

Standby ist eine neue Funktion im iOS 17-Update, die eine neue und verbesserte Möglichkeit bietet, auf Informationen zuzugreifen, wenn Ihr Telefon schnell inaktiv ist. Mit StandBy können Sie bequem die Uhrzeit überprüfen, bevorstehende Ereignisse anzeigen, Ihren Kalender durchsuchen, Wetteraktualisierungen für Ihren Standort abrufen und vieles mehr. Nach der Aktivierung wechselt das iPhone intuitiv in den Standby-Modus, wenn es während des Ladevorgangs auf Querformat eingestellt wird. Diese Funktion eignet sich perfekt für kabellose Ladestationen wie Ihren Nachttisch oder wenn Sie Ihr iPhone während der täglichen Aufgaben nicht aufladen können. Sie können damit durch verschiedene im Standby-Modus angezeigte Widgets wischen, um auf verschiedene Informationssätze aus verschiedenen Anwendungen zuzugreifen. Möglicherweise möchten Sie diese Widgets jedoch ändern oder einige sogar löschen, je nach Ihren Vorlieben und den Informationen, die Sie häufig benötigen. Also lasst uns eintauchen

Wie kann ich eine Webseite schnell aktualisieren? Wie kann ich eine Webseite schnell aktualisieren? Feb 18, 2024 pm 01:14 PM

Bei der täglichen Nutzung eines Netzwerks kommt es häufig zu Seitenaktualisierungen. Wenn wir eine Webseite besuchen, treten manchmal Probleme auf, z. B. wenn die Webseite nicht geladen wird oder nicht ordnungsgemäß angezeigt wird. Zu diesem Zeitpunkt entscheiden wir uns normalerweise dafür, die Seite zu aktualisieren, um das Problem zu lösen. Wie kann die Seite also schnell aktualisiert werden? Lassen Sie uns die Tastenkombinationen für die Seitenaktualisierung besprechen. Die Tastenkombination für die Seitenaktualisierung ist eine Methode zum schnellen Aktualisieren der aktuellen Webseite über Tastaturoperationen. In verschiedenen Betriebssystemen und Browsern können die Tastenkombinationen für die Seitenaktualisierung unterschiedlich sein. Im Folgenden verwenden wir das gebräuchliche W

Wie man mit dem Problem umgeht, dass die Laravel-Seite CSS nicht korrekt anzeigen kann Wie man mit dem Problem umgeht, dass die Laravel-Seite CSS nicht korrekt anzeigen kann Mar 10, 2024 am 11:33 AM

„Wie man mit dem Fehler umgeht, dass Laravel-Seiten CSS nicht korrekt anzeigen, sind spezifische Codebeispiele erforderlich.“ Wenn Sie das Laravel-Framework zum Entwickeln von Webanwendungen verwenden, tritt manchmal das Problem auf, dass die Seite CSS-Stile nicht korrekt anzeigen kann, was dazu führen kann Seite, um abnormale Stile darzustellen. In diesem Artikel werden einige Methoden vorgestellt, um mit dem Versagen von Laravel-Seiten bei der korrekten Anzeige von CSS umzugehen, und spezifische Codebeispiele bereitgestellt, um Entwicklern bei der Lösung dieses häufigen Problems zu helfen. 1. Überprüfen Sie den Dateipfad. Überprüfen Sie zunächst den Pfad der CSS-Datei.

Verwenden Sie ThinkPHP6, um eine schöne 404-Seite zu implementieren Verwenden Sie ThinkPHP6, um eine schöne 404-Seite zu implementieren Jun 20, 2023 am 11:06 AM

Mit der Weiterentwicklung des Internets sind viele Websites oder Anwendungen nach und nach komplexer geworden. Wenn Benutzer es verwenden, stoßen sie häufig auf Fehlerseiten, von denen die 404-Seite am häufigsten ist. Die 404-Seite bedeutet, dass die Seite, auf die zugegriffen wird, nicht existiert und eine häufige Fehlerseite ist. Bei Websites oder Anwendungen kann eine schöne 404-Seite das Benutzererlebnis erheblich verbessern. In diesem Artikel stellen wir vor, wie Sie mit ThinkPHP6 schnell eine schöne 404-Seite implementieren. Eine Route erstellen Zuerst müssen wir im Routenordner eine Route erstellen

So ordnen Sie iPhone-Startbildschirmseiten neu an, deaktivieren und löschen sie So ordnen Sie iPhone-Startbildschirmseiten neu an, deaktivieren und löschen sie Nov 29, 2023 am 08:22 AM

Unter iOS ermöglicht Apple Ihnen, einzelne Startbildschirmseiten auf Ihrem iPhone zu deaktivieren. Es ist auch möglich, die Reihenfolge der Startbildschirmseiten neu zu ordnen und Seiten direkt zu löschen, anstatt sie nur zu deaktivieren. So funktioniert das. So ordnen Sie die Seiten des Startbildschirms neu an: Berühren und halten Sie die Leertaste auf dem Startbildschirm, um in den Jitter-Modus zu wechseln. Tippen Sie auf die Punktreihe, die die Seiten des Startbildschirms darstellt. Berühren und ziehen Sie im angezeigten Raster des Startbildschirms eine Seite, um sie relativ zu anderen Seiten neu anzuordnen. Andere bewegen sich als Reaktion auf Ihr Ziehen. Wenn Sie mit Ihrer neuen Anordnung zufrieden sind, tippen Sie in der oberen rechten Ecke des Bildschirms auf „Fertig“ und anschließend erneut auf „Fertig“, um den Dither-Modus zu verlassen. So deaktivieren oder entfernen Sie Startbildschirmseiten: Berühren und halten Sie die Leertaste auf dem Startbildschirm, um in den Dither-Modus zu wechseln. Tippen Sie hier, um den Startbildschirm anzuzeigen

Eingehende Analyse der Rolle und Verwendung des statischen Schlüsselworts in der C-Sprache Eingehende Analyse der Rolle und Verwendung des statischen Schlüsselworts in der C-Sprache Feb 20, 2024 pm 04:30 PM

Eingehende Analyse der Rolle und Verwendung des Schlüsselworts „static“ in der Sprache C. In der Sprache C ist „static“ ein sehr wichtiges Schlüsselwort, das bei der Definition von Funktionen, Variablen und Datentypen verwendet werden kann. Die Verwendung des Schlüsselworts static kann die Linkattribute, den Umfang und den Lebenszyklus des Objekts ändern. Lassen Sie uns die Rolle und Verwendung des Schlüsselworts static in der C-Sprache im Detail analysieren. Statische Variablen und Funktionen: Variablen, die mit dem Schlüsselwort static innerhalb einer Funktion definiert werden, werden als statische Variablen bezeichnet, die einen globalen Lebenszyklus haben

See all articles