Mehrere Schemata zum Mischen von CSS-Grafiken und Text_CSS/HTML

Die Lösung für die Baidu News-Homepage:

Kopieren Sie den Code Der Code lautet wie folgt:

< /tbody>

…

Die HTML-Struktur ist hässlich, aber das CSS ist einfach.
Sina Weibo Homepage-Lösung:

Code kopieren Der Code lautet wie folgt:

< ; img src="" ...>

....
< ;/div>

CSS:

Code kopieren Code wie folgt:

.twit_list dd .twit_item_pic{float:left;width:66px;padding-top:2px;} .twit_list dd .twit_item_content{float:left;width:316px;color: #666 ;line-height:18px;}

Die meisten Kandidaten haben diese Antwort. Wenn Floating verwendet wird, muss die Breite festgelegt werden und die Struktur verliert an Flexibilität. Gleichzeitig müssen eine Reihe von Problemen gelöst werden, die durch Floating verursacht werden.
NetEase-Homepage-Lösung:

Code kopieren Der Code lautet wie folgt:

• …


• …
  
• …

CSS :

Code kopieren Der Code lautet wie folgt:

.list-figure { float: left ; _display: inline; width: -140px; margin-top: 6px;

Diesen Schreibmethoden fehlt das Verständnis der Grundkonzepte von CSS. Wenn Sie das Konzept des Blockformatierungskontexts (Formatierungskontext auf Blockebene) verstehen, werden Sie nicht so schreiben. Bei Elementen auf Blockebene, die BFC auslösen, überlappen ihre Kanten die Float-Box nicht.
Empfohlene Lösung:

Code kopieren Der Code lautet wie folgt:

...

...

CSS:

Code kopieren Der Code lautet wie folgt:

.item .pic { float:left;margin-right:10px }
.item .content { overflow:hidden;zoom:1 } /* oder verwenden Sie display:table- Zelle */

Ein Beispiel, das ich geschrieben habe

Code kopieren Der Code lautet wie folgt:

   
       


       
       
       
   
   
   

左图右内容的效果实现

   

     

      < ;/div>
     

       

标题标题标题标题

         
• 内容内容内容内容1

         
• 内容容内容内容2

         
• 内容内容内容内容3

          内容内容内容内容4
       

     

   

   

 

总结
사용할 수 없는 용도开发课程，导致对html/css/javascript基本概念的理解不常薄弱。대부분인학习方式是：先看书，然后觉得书和实践离得很远就直接实践，遇到问题就去网上搜，而搜到的基本道是"技巧"性东西。或者是跟着着school校里的"牛人"학,掺着各种好的,坏的经验全盘接受。比如实现一个左图右内容的显示效果，写ude html과 css(见下图)。这是我的一道笔试题，看起来很简单吧。但是还没有人答流最佳答案。如果去网上看，國内那些大网站们是怎么实现的，就不能怪他们了。

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

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

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

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

1 Monate vor By DDD

R.E.P.O. Beste grafische Einstellungen

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7409

15

Java-Tutorial

1631

14

CakePHP-Tutorial

1358

52

Laravel-Tutorial

1268

25

PHP-Tutorial

1218

29

Mehr anzeigen