Baidu News Homepage of the program:
Copy Code code as follows:
<table>
<tbody>
<tr>
<TD class= "Topic-pic" ><a href= "></a></td>
<TD class= "Topic-txt" >...</td>
</tr>
</tbody>
</table>
HTML structure is ugly, but CSS is simple.
Sina Weibo homepage of the program:
Copy Code code as follows:
<div class= "Twit_item mib_linedot2" >
<div class= "Twit_item_pic" >
<a href= "" target= "_blank" >
</a>
</div>
<div class= "Twit_item_content" >
....
</div>
</div>
Css:
Copy Code code 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 candidates are the answer. If you use a float, you must set the width, the structure loses flexibility, and you must solve a series of problems caused by floating.
NetEase Homepage Scheme:
Copy Code code as follows:
<ul>
<li class= "list-figure" ><a href= "></a></li>
<li><a href= "" >...</a></li>
<li><a href= "" >...</a></li>
<li><a href= "" >...</a></li>
</ul>
Css:
Copy Code code as follows:
. list-figure {float:left; _display:inline; width:130px; Margin-left: -140px; margin-top:6px;}
These are written in a lack of understanding of the basic concepts of CSS. If you understand the concept of the block-formatting context (chunk-level formatting contexts), you won't write that. Triggers the block-level element of the BFC, and its edges do not overlap with the float box.
Recommended Scenarios:
Copy Code code as follows:
<div class= "Item" >
<div class= "pic" >...</div>
<div class= "Content" >...</div>
</div>
Css:
Copy Code code as follows:
. Item. pic {float:left;margin-right:10px;}
. Item. content {overflow:hidden;zoom:1;}/* or with Display:table-cell */
I wrote an example of
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
<meta name= "viewport" content= "Width=device-width" >
<style type= "Text/css" >
Body {
margin:0;
Padding:1em 0;
Background-color: #f3f3f3;
font:16px/1.7 Arial, Helvetica, Sans-serif;
Color: #5a5a5a
}
A
Color: #08c;
Text-decoration:none
}
Header h1{
Text-align:center
}
ul{margin:0;padding:0}
UL li{list-style:none;margin:0;font-size:13px;}
h3{line-height:1.7;margin:0}
. Item. pic {float:left;margin-right:10px;}
. Item. content {overflow:hidden;zoom:1;}/* or with Display:table-cell */
</style>
<!--[If Lt IE 9]>
<script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script>
<! [endif]-->
<body>
<div class= "Item" >
<div class= "pic" >
</div>
<div class= "Content" >
<ul>
<li><a href= "" > Content content Content 1</a></li>
<li><a href= "" > Content content Content 2</a></li>
<li><a href= "" > Content content Content 3</a></li>
<li><a href= "" > Content content Content 4</a></li>
</ul>
</div>
</div>
</body>
Summarize
It's not technology, it's more skill.
The lack of a systematic front-end development course in schools has led to a weak understanding of the basic concepts of html/css/javascript. Most people learn the way is: Read First, and then feel that the book and practice far away from the direct practice, encountered problems on the Internet search, and found the basic is "skills" of things. or follow the school's "cow" learning, mixed with a variety of good, bad experience to accept the overall. For example, to achieve a left image of the right content display, write HTML and CSS (see figure below). This is one of my questions, it looks very simple. But no one has answered the best answer. If you go to the Internet to see how the domestic big sites are how to achieve, it can not blame them.
