Heim >Web-Frontend >CSS-Tutorial >Mehrere Schemata zum Mischen von CSS-Grafiken und Text_CSS/HTML
Mehrere Schemata zum Mischen von CSS-Grafiken und Text_CSS/HTML
- WBOYOriginal
- 2016-05-16 12:03:462227Durchsuche
Die Lösung für die Baidu News-Homepage:
Die HTML-Struktur ist hässlich, aber das CSS ist einfach.
Sina Weibo Homepage-Lösung:
CSS:
.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:
CSS :
.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:
CSS:
Ein Beispiel, das ich geschrieben habe
Kopieren Sie den Code Der Code lautet wie folgt:
| … |
Die HTML-Struktur ist hässlich, aber das CSS ist einfach.
Sina Weibo Homepage-Lösung:
Code kopieren Der Code lautet wie folgt:
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;
Empfohlene Lösung:
Code kopieren Der Code lautet wie folgt:
...
...
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 */
.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:
左图右内容的效果实现
总结
사용할 수 없는 용도开发课程，导致对html/css/javascript基本概念的理解不常薄弱。대부분인학习方式是：先看书，然后觉得书和实践离得很远就直接实践，遇到问题就去网上搜，而搜到的基本道是"技巧"性东西。或者是跟着着school校里的"牛人"학,掺着各种好的,坏的经验全盘接受。比如实现一个左图右内容的显示效果，写ude html과 css(见下图)。这是我的一道笔试题，看起来很简单吧。但是还没有人答流最佳答案。如果去网上看，國内那些大网站们是怎么实现的，就不能怪他们了。
总结
사용할 수 없는 용도开发课程，导致对html/css/javascript基本概念的理解不常薄弱。대부분인학习方式是：先看书，然后觉得书和实践离得很远就直接实践，遇到问题就去网上搜，而搜到的基本道是"技巧"性东西。或者是跟着着school校里的"牛人"학,掺着各种好的,坏的经验全盘接受。比如实现一个左图右内容的显示效果，写ude html과 css(见下图)。这是我的一道笔试题，看起来很简单吧。但是还没有人答流最佳答案。如果去网上看，國内那些大网站们是怎么实现的，就不能怪他们了。
Stellungnahme：
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
Vorheriger Artikel：3 Lösungen für den normalen Betrieb von HTML5+CSS3-Websites mit niedrigeren Versionen von IE_Experience ExchangeNächster Artikel：3 Lösungen für den normalen Betrieb von HTML5+CSS3-Websites mit niedrigeren Versionen von IE_Experience Exchange