最模板 - 外贸网站建设,外贸网站模板

最模板

当前位置: 首页 > 建站教程 > html/css/js教程 >

纯CSS在列表项前面加三角形的问题

时间:2014-05-26 23:50来源:未知 作者:最模板zuimoban 点击:
纯CSS在列表项前面加三角形的问题 在实际网站上的呈现: 纯CSS在列表项前面加三角形的问题 !doctypehtml html lang = en head meta charset = UTF-8 title Document / title style ulli{ list-style:none; } ul#my-id{ margin:0.
纯CSS在列表项前面加三角形的问题

纯CSS在列表项前面加三角形的问题

 

在实际网站上的呈现:

 
纯CSS在列表项前面加三角形的问题

纯CSS在列表项前面加三角形的问题
 

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     ul li{
  8.         list-style:none;
  9.     }
  10.     ul#my-id{
  11.         margin: 0.75em 0;
  12.         padding: 0 1em;
  13.         list-style: none;
  14.     }
  15. /*     li:before {
  16.     content: "";
  17.     border-color: transparent red;
  18.     border-style: solid;
  19.     border-width: 0.35em 0 0.35em 0.45em;
  20.     display: block;
  21.     height: 0;
  22.     width: 0;
  23.     left: -1em;
  24.     top: 0.9em;
  25.     position: relative;
  26.     color:red;
  27. } */
  28. ul#my-id li:before {
  29.     display:        inline-block;
  30.     width:      0;
  31.     height:     0;
  32.     content:        ' ';
  33.     border-top:     solid transparent;
  34.     border-bottom:  solid transparent;
  35.     border-left:            solid #f00;
  36.     border-width:   5px;
  37.     margin-right:   5px;
  38. }
  39.     </style>
  40. </head>
  41. <body>
  42.     <ul id="my-id">
  43.         <li>aaa</li>
  44.         <li>ddd</li>
  45.         <li>fff</li>
  46.         <li>ggg</li>
  47.         <li>hhh</li>
  48.     </ul>
  49.     <ul>
  50.         <li>ddd</li>
  51.         <li>fff</li>
  52.         <li>ggg</li>
  53.     </ul>
  54. </body>
  55. </html>

(责任编辑:最模板)
------分隔线----------------------------
栏目列表
推荐内容