Several schemes for mixing CSS graphics and text_CSS/HTML

Baidu News homepage solution:

Copy code The code is as follows:

td>

…

The html structure is ugly, but the css is simple.
Sina Weibo homepage plan:

Copy code The code is as follows:

....

CSS:

Copy code The code is as follows:

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

Most test takers have this answer. If floating is used, the width must be fixed, and the structure will lose flexibility. At the same time, a series of problems caused by floating must be solved.
NetEase homepage plan:

Copy code The code is as follows:

• 


• …


• …


• …

CSS:

Copy code The code is as follows:

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

These writing methods lack understanding of the basic concepts of CSS. If you understand the concept of block formatting context (block-level formatting context), you won't write like this. For block-level elements that trigger BFC, their edges will not overlap the float box.
Recommended solution:

Copy code The code is as follows:

...

...

CSS:

Copy code The code is as follows:

.item .pic { float:left;margin-right:10px; }
.item .content { overflow:hidden;zoom:1; } /* Or use display:table-cell */

我写的一个实例

复制代码 代码如下:

   
       
       

       
       
       
   
   
   

左图右内容的效果实现

   

     

     

 

 

Title title title title

 

 
• Content content content content 1

 
• Content content content content 2

 
• Content content content content 3

 
• Content content content content 4

 

Summary
Used It's not technology, it's more skills
Since there is no systematic front-end development course in school, the understanding of the basic concepts of html/css/javascript is very weak. The learning method of most people is: first read the book, and then practice directly if the book is far from practice. When encountering problems, they search online, and what they find are basically "skills". Or you can learn from the "great people" in school and accept all kinds of good and bad experiences. For example, to realize the display effect of the content on the left and right of the picture, write HTML and CSS (see the picture below). This is one of my written test questions, it seems very simple. But no one has the best answer yet. If you look online and see how the big domestic websites achieve this, you can’t blame them.