首页 > 代码库 > 12.04 css小测div+css...

12.04 css小测div+css...

2024-08-25 05:52:36   220人阅读

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             *{
  8                 margin: 0;
  9                 padding: 0;
 10             }
 11             a{
 12                 text-decoration: none;
 13             }
 14             
 15             /*大体div*/
 16             .big{
 17                 width: 300px;
 18                 height: 310px;
 19                 margin: 100px auto;
 20             }
 21             /*顶部*/
 22             .top{
 23                text-align: center;
 24                height: 25px;
 25                line-height: 25px;
 26                border-bottom: 2px solid darkred;
 27             }
 28             h4{
 29                 float: left;
 30                 width: 90px;
 31             }
 32             .top a{
 33                 float: left;
 34                 width: 50px;
 35                 color: black;
 36                 display: block;
 37                 margin-left: 2px;
 38                 font-size: 14px;
 39                 background-color: gainsboro;
 40             }
 41             .top a:hover{
 42                 background-color: darkred;
 43                 color: white;
 44             }
 45             
 46             /*news 新闻*/
 47             .new{
 48                 height: 280px;
 49             }
 50             .new ul{
 51                 background: url(bg.gif) no-repeat 5px 9px;
 52                 padding-left: 28px;
 53             }
 54             .new li{
 55                 font-size: 13px;
 56                 list-style: none;
 57                 line-height:29px;
 58             }
 59             .new li a{
 60                 color: gray;
 61                 display: block;
 62                 width:270px;
 63                 height:29px ;
 64             }
 65             .new li a:hover{
 66                 color: #8B0000;
 67                 color: white;
 68                 background-color:darkred ;
 69             }
 70             /*more 更多*/
 71             p{
 72                 text-align: right;
 73                 font-size: 13px;        
 74             }
 75             p a{
 76                 color: gray;
 77             }
 78         </style>
 79     </head>
 80     <body>
 81         <div class="big">
 82             <div class="top">
 83                 <h4>新闻排行</h4><a href="#">国内</a><a href="#">国内</a><a href="#">国内</a><a href="#">国内</a>
 84             </div>
 85             <div class="new">
 86                 <ul>
 87                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
 88                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
 89                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
 90                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
 91                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
 92                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
 93                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
 94                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
 95                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
 96                 </ul>
 97             </div>
 98             <p><a href="#">...more</a></p>
 99         </div>
100     </body>
101 </html>

技术分享

12.04 css小测div+css...


联系
我们