首页 > 代码库 > css+div

css+div

2024-08-23 12:32:04   216人阅读

技术分享 
  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3  <head>
  4   <title> 学员感悟 </title>
  5   <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  6   <style type="text/css">
  7         body,img,p,a,ul,li{margin:0px;padding:0px;}
  8 
  9         .clear{clear:both;}
 10 
 11         ul,li{
 12             list-style:none;
 13             font-size:90%;
 14         }
 15 
 16         p{font-size:90%;}
 17 
 18         a:link,a:visited{
 19             color:#484848;
 20             text-decoration:none;
 21         }
 22 
 23         a:hover{
 24             color:#F00;
 25             text-decoration:none;
 26         }
 27 
 28         .xueyuan{
 29             width:630px;
 30             margin:50px auto;
 31             padding:10px;
 32         }
 33 
 34         .title{
 35             background-image:url(image/bg01.gif);
 36             height:34px;
 37             padding-left:40px;
 38             line-height:34px;
 39         }
 40 
 41         .span1{
 42             color:blue;
 43             font-weight:bold;
 44         }
 45 
 46         .span2{
 47             color:gray;
 48             font-size:50%;
 49             float:right;
 50         }
 51 
 52         .content{
 53             width:310px;
 54             line-height:150%;
 55             padding-top:10px;
 56         }
 57 
 58         .floatL{float:left;}
 59 
 60         .floatR{float:right;}
 61 
 62         img{
 63             float:left;
 64         }
 65 
 66         p{
 67             float:right;
 68             width:190px;
 69             text-indent:20px;
 70             line-height:150%;
 71             background:url(image/li06.gif) no-repeat left 5px;
 72         }
 73 
 74         ul{
 75             background:url(image/li07.gif) no-repeat left 12px;
 76             padding-left:20px;
 77         }
 78 
 79         li{
 80             height:30px;
 81             line-height:30px;
 82         }
 83 
 84         .red{
 85             color:red;
 86             font-weight:bold;
 87         }
 88 
 89         .span3{
 90             color:red;
 91             font-weight:bold;
 92         }
 93   </style>
 94  </head>
 95 
 96  <body>
 97 <!--整体-->
 98     <div class="xueyuan">
 99 <!--标题-->
100         <div class="title">
101         <span class="span1">学员</span>感悟
102         <span class="span2"><a href="#">+MORE</a></span>
103         </div>
104 <!--内容1-->
105         <div class="content floatL">
106             <img src="image/img08.jpg" />
107 
108             <p><a href="#">[php学员]钟玲玉:传智,我人生中重要的一站</a></p>
109             <div class="clear"></div>
110 
111             <ul>
112                 <li><span class="red">[php学员]</span><a href="#">李久杨:90后,月薪10k,一封迟..</a></li>
113                 <li><span class="red">[php学员]</span><a href="#">杜宏海:同学到其他机构学完..</a></li>
114                 <li><span class="red">[php学员]</span><a href="#">杨*斌:一个小学生的奋斗史..</a></li>
115                 <li><span class="red">[php学员]</span><a href="#">黄超:传智播客,让我月薪增长到..</a></li>
116                 <li><span class="red">[php学员]</span><a href="#">刘传华:传智,我人生中的转折点..</a></li>
117             </ul>
118         </div>
119 <!--内容2-->
120         <div class="content floatR">
121             <img src="image/img09.jpg" />
122             <p><a href="#">[php学员]王艳:美女网编,毕业薪水6500</a></p>
123             <div class="clear"></div>
124             <ul>
125                 <li><span class="red">[php学员]</span><a href="#">吴思阳:传智之旅-真正的升华..</a></li>
126                 <li><span class="red">[php学员]</span><a href="#">郝建设:短暂时光的改变..</a></li>
127                 <li><span class="red">[php学员]</span><a href="#">宋娇:幸好,我选择了传智..</a></li>
128                 <li><span class="red">[php学员]</span><a href="#">李玉宝:零基础学员,刚毕业就拿..</a></li>
129                 <li><span class="red">>>查看更多学员感言</span></li>
130             </ul>
131         </div>
132         <div class="clear"></div>
133     </div>
134  </body>
135 </html>
View Code

效果图:技术分享

css+div


联系
我们