recherche

Maison  >  Article  >  interface Web  >  Plusieurs schémas pour mélanger les graphiques CSS et text_CSS/HTML

Plusieurs schémas pour mélanger les graphiques CSS et text_CSS/HTML

WBOY
WBOYoriginal
2016-05-16 12:03:462209parcourir
La solution pour la page d'accueil de Baidu News :
Copiez le code Le code est le suivant :







< /tbody>
…


La structure HTML est moche, mais le CSS est simple.
Solution de la page d'accueil de Sina Weibo :
Copier le code Le code est le suivant :




< ; img src="" ...>



....
< ;/div>


CSS :
Copier le code Codez comme suit :

.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;}

La plupart des candidats ont cette réponse. Si le flottement est utilisé, la largeur doit être fixe et la structure perdra en flexibilité. En même temps, une série de problèmes causés par le flottement doivent être résolus.
Solution de page d'accueil NetEase :
Copier le code Le code est le suivant :

CSS :
Copier le code Le code est le suivant :

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

Ces méthodes d'écriture ne comprennent pas les concepts de base du CSS. Si vous comprenez le concept de contexte de formatage de bloc (contexte de formatage au niveau du bloc), vous n'écrirez pas comme ça. Pour les éléments de niveau bloc qui déclenchent BFC, leurs bords ne chevaucheront pas la boîte flottante.
Solution recommandée :
Copier le code Le code est le suivant :


...

...



CSS :
Copier le code Le code est le suivant :

.item .pic { float:left;margin-right:10px; }
.item .content { overflow:hidden;zoom:1 } /* ou utilisez display:table- cellule */


Un exemple que j'ai écrit
Copier le code Le code est le suivant :



   
       


       
       
       
   
   
   
左图右内容的效果实现

   

     


      < ;/div>
     

       

标题标题标题标题


& lt; ul & gt;
& lt; li & gt; & lt; a href = "" & gt; 内容内容内容内容 1 & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "" & gt;内容内容内容内容2
         
  • 内容内容内容内容3

    •            内容内容内容内容4
           
         

       


       

     
    总结
    用的不是技术，更多是技巧
    由于在学校里没有系统的前端Description du produit，html/css/javascript和实践离得很远就直接实践，遇到问题就去网上搜，而搜到的基本都是« 技巧 »性的东西。或者是跟着学校里的« 牛人 »学，掺着各种好的、坏的经验全盘接受。比如实现一个左图右内容的显示效果，写出html et css.网上看，国内那些大网站们是怎么实现的，就不能怪他们了。
    Déclaration：
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Article précédent：3 solutions pour un fonctionnement normal des sites Web HTML5+CSS3 avec des versions inférieures d'IE_Experience ExchangeArticle suivant：3 solutions pour un fonctionnement normal des sites Web HTML5+CSS3 avec des versions inférieures d'IE_Experience Exchange

    Articles Liés

    Voir plus