# Define hang {width: 220px; background-color: # EDF0F3; padding: 10px 5px ;}
[Xmlns] # define hang {height: 300px; width: 230px;}/* css hack technology is used here: [xmlns] added before an object is recognized only by non-ie browsers */
. Tit_bg {position: relative; left: 10px; background-repeat: no-repeat; float: left ;}
. Tit_txt {float: left; padding-left: 20px; font-size: 15px; font-weight: bold; color: #5442C0 ;}
. More {float: right; padding: 1px ;}
# Top10 {float: left; margin: 0px; padding: 10px 5px 0px 5px; background-color: # fff; list-style-type: none; width: 220px ;} /* for ul objects, you must set the width */
# Top10. topimg {float: left; padding-left: 2px; margin: 0px;}/* li cannot be added before the class. Otherwise, It is abnormal and involves the relationship between the list and div */
# Top10 h1, # top10 h3 {font-size: 12px; font-weight: normal; float: left ;}
# Top10 h2 {font-size: 12px ;}
# Top10 li. t1 h1 {clear: right; width: 126px; border-bottom: 1px #33 ccff dashed; margin: 0px; padding: 8px 5px 3px 5px; font-weight: bold ;}
# Top10 li. t1 h2 {float: left; display: block; margin: 10px 5px; font-weight: normal; width: 90px ;}
# Top10 li. t1 h3 {float: left; display: block; color: # ff0000; clear: right; margin: 10px 0px; padding-left: 5px; border-left: 2px solid # ff0000 ;}
# Top10 li. t2, # top10 li. t3, # top10 li. t4 {float: left; border-top: 1px dashed # 349DEE; background-image: url(arrow_t1.gif); background-repeat: no-repeat; background-position: 0px 65%; margin: 0px 0px 0px 5px; line-height: 22px ;}
# Top10 li. t2 h1, # top10 li. t3 h1, # top10 li. t4 h1 {float: left; color: # 349DEF; clear: left; width: 155px; padding-left: 25px; margin: 0px ;}
# Top10 li. t2 h3, # top10 li. t3 h3, # top10 li. t4 h3 {float: left; color: # 349DEF; padding-left: 5px; margin: 0px 0px 0px 0px ;}
-->
</Style>
<Body>
<Div id = "paihang">
<Div class = "title">
<Span class = "tit_bg"> </span>
<Span class = "tit_txt"> Chinese entertainment rankings </span>
<Span class = "more"> </span>
</Div>
<Div id = "top10">
<Li class = "t1">
<Div class = "topimg"> </div>
<H1> <a href = "#"> I will marry you tomorrow </a> <H2> <a href = "http://www.chaojibaby.com/"> ARTIST: Super Girl </a> & Lt; h3 & gt; 1267 & lt;/h3 & gt;
</Li>
<Li class = "t2">
<H1> <a href = "#"> 10 years </a> & Lt; h3 & gt; 847 & lt;/h3 & gt;
</Li>
<Li class = "t3">
<H1> <a href = "#"> flowers and plants </a> & Lt; h3 & gt; 634 & lt;/h3 & gt;
</Li>
<Li class = "t4">
<H1> <a href = "#"> waves (female edition) </a> & Lt; h3 & gt; 598 & lt;/h3 & gt;
</Li>
<Li class = "t4">
<H1> <a href = "#"> where are you? </a> & Lt; h3 & gt; 548 & lt;/h3 & gt;
</Li>
<Li class = "t4">
<H1> <a href = "#"> faith (true edition) </a> & Lt; h3 & gt; 439 & lt;/h3 & gt;
</Li>
<Li class = "t4">
<H1> <a href = "#"> Red Bean 8 overhead </a> & Lt; h3 & gt; 324 & lt;/h3 & gt;
</Li>
<Li class = "t4">
<H1> <a href = "#"> dating and love-nine days </a> & Lt; h3 & gt; 287 & lt;/h3 & gt;
</Li>
<Li class = "t4">
<H1> <a href = "#"> love you for 10 thousand years </a> & Lt; h3 & gt; 156 & lt;/h3 & gt;
</Li>
<Li class = "t4">
<H1> <a href = "#"> where are you? </a> <H3> 67 </Li>
</Div>
</Div>
</Body>
</Html>
Note:
1. If DW shows a mess during the test of code writing, most of the reasons are that the attributes of the object are not fully written, such as the width and height setting and the right floating. This is especially important in the list layout.
2. css hack technology is used here to solve browsing incompatibility issues. For example, if you add the top-pole selector [xmlns] to the front of an object, it will only be recognized by non-ie browsers. Of course, the premise is that the xmlns attribute has been added to the html Tag:
<Html xmlns = "http://www.w3.org/1999/xhtml">
Of course, there are other methods to achieve this, which will be explained in subsequent tutorials.
3. # top10 li. t1 h1 {} Instead of # top10 li. t1 h1 {}. A blank link in the middle indicates the parent-child relationship of the object. T1 appears as a class. li. t1 h1 indicates that the class is the h1 sub-object in the list of ti.
4. If you want to display several objects in the same row, you can use the span selector and the span selector can also be nested. If it is not displayed in the same row, try not to use the span selector. In this case, the div selector will be used. As we have said before, the default display modes of these two delimiters are inter-line and block display.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
