lmarkov

Lists - nested items

Nov 25th, 2012
118
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.81 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.        
  6.         <title>Упражнение № 2 - Lists</title>
  7.                
  8.         <link rel="stylesheet" type="text/css" href="reset.css"/>
  9.         <link rel="stylesheet" type="text/css" href="style.css"/>
  10.        
  11.     </head>
  12.     <body>
  13.         <div id="content">
  14.             <p>
  15.                 Preceding Text
  16.             </p>
  17.            
  18.             <ul class="listTypeUpperRoman">
  19.                 <li>
  20.                     List item 1
  21.                         <ul class="listTypeLowerLatin">
  22.                             <li>
  23.                                 Nested item 1.1
  24.                             </li>
  25.                             <li>
  26.                                 Nested item 1.2
  27.                             </li>
  28.                         </ul>
  29.                 </li>
  30.                 <li>
  31.                     List item 2
  32.                         <ul class="listTypeDecimal">
  33.                             <li>
  34.                                 Nested item 2.1
  35.                             </li>
  36.                             <li>
  37.                                 Nested item 2.2
  38.                                     <ul class="listTypeCircle">
  39.                                         <li>
  40.                                             Nested item 2.2.1
  41.                                         </li>
  42.                                         <li>
  43.                                             Nested item 2.2.2
  44.                                                 <ul class="listTypeDisc">
  45.                                                     <li>
  46.                                                         Nested item 2.2.2.1
  47.                                                     </li>
  48.                                                     <li>
  49.                                                         Nested item 2.2.2.2
  50.                                                     </li>
  51.                                                 </ul>
  52.                                         </li>
  53.                                         <li>
  54.                                             Nested item 2.2.3
  55.                                         </li>
  56.                                     </ul>
  57.                             </li>
  58.                             <li>
  59.                                 Nested item 2.3
  60.                             </li>
  61.                         </ul>
  62.                 </li>
  63.                 <li>
  64.                     List item 3
  65.                     <ul class="listTypeDisc">
  66.                             <li>
  67.                                 Nested item 3.1
  68.                             </li>
  69.                             <li>
  70.                                 Nested item 3.2
  71.                             </li>
  72.                             <li>
  73.                                 Nested item 3.3
  74.                             </li>
  75.                         </ul>
  76.                 </li>
  77.             </ul>
  78.         </div>
  79.     </body>
  80. </html>
  81.  
  82. ********************************************
  83. CSS
  84. *****************************
  85.  
  86. body
  87. {
  88.     font-family:  Times New Roman;
  89.     font-size: 1em;
  90.     color: #000000;
  91. }
  92.  
  93. #content
  94. {
  95.     margin: 20px;
  96. }
  97.  
  98. h1
  99. {
  100.     padding: 10px 0px 20px 0px;
  101. }
  102.  
  103. p
  104. {
  105.     padding: 0px 0px 10px 0px;;
  106. }
  107.  
  108. ul
  109. {
  110.     margin: 0px 0px 0px 30px;
  111. }
  112.  
  113. ul.listTypeUpperRoman li
  114. {
  115.     list-style-type: upper-roman;
  116. }
  117.  
  118. ul.listTypeLowerLatin li
  119. {
  120.     list-style-type: lower-latin;
  121. }
  122.  
  123. ul.listTypeDecimal li
  124. {
  125.     list-style-type:  decimal;
  126. }
  127.  
  128. ul.listTypeCircle li
  129. {
  130.     list-style-type:  circle;
  131. }
  132.  
  133. ul.listTypeDisc li
  134. {
  135.     list-style-type:  disc;
  136. }
  137.  
  138. hr
  139. {
  140.     width: 50%;
  141.     height: 2px;
  142.     color: #000000;
  143.     margin: 15px 0px 15px 0px;
  144.     text-align: left;
  145. }
Advertisement
Add Comment
Please, Sign In to add comment