<!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style>
             *{
                 margin: 0;
                 padding: 0;
             }
             a{
                 text-decoration: none;
             }

             /*大体div*/
             .big{
                 width: 300px;
                 height: 310px;
                 margin: 100px auto;
             }
             /*顶部*/
             .top{
                text-align: center;
                height: 25px;
                line-height: 25px;
                border-bottom: 2px solid darkred;
             }
             h4{
                 float: left;
                 width: 90px;
             }
             .top a{
                 float: left;
                 width: 50px;
                 color: black;
                 display: block;
                 margin-left: 2px;
                 font-size: 14px;
                 background-color: gainsboro;
             }
             .top a:hover{
                 background-color: darkred;
                 color: white;
             }

             /*news 新闻*/
             .new{
                 height: 280px;
             }
             .new ul{
                 background: url(bg.gif) no-repeat 5px 9px;
                 padding-left: 28px;
             }
             .new li{
                 font-size: 13px;
                 list-style: none;
                 line-height:29px;
             }
             .new li a{
                 color: gray;
                 display: block;
                 width:270px;
                 height:29px ;
             }
             .new li a:hover{
                 color: #8B0000;
                 color: white;
                 background-color:darkred ;
             }
             /*more 更多*/
             p{
                 text-align: right;
                 font-size: 13px;
             }
             p a{
                 color: gray;
             }
         </style>
     </head>
     <body>
         <div class="big">
             <div class="top">
                 <h4>新闻排行</h4><a href="#">国内</a><a href="#">国内</a><a href="#">国内</a><a href="#">国内</a>
             </div>
             <div class="new">
                 <ul>
                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
                     <li><a href="#">广州传智播客php基础班23期 312室</a></li>
                 </ul>
             </div>
             <p><a href="#">...more</a></p>
         </div>
     </body>
 </html>

12.04 css小测div+css...的更多相关文章

  1. CSS学习笔记--Div+Css布局（div+span以及盒模型）

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

  2. css两端对齐——div+css布局实现2端对齐的4种方法总结

    div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. <div class=" ...

  3. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  4. CSS学习笔记--Div+Css布局实战(入门)

    基本页面布局 本教程带着大家做一个简单的页面布局 最重效果如下: 1.第一部,先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang ...

  5. 使用Div+CSS布局设计网站的优点

    网页设计业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div ...

  6. div+css布局记扎

    实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系 ...

  7. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  8. DIV+CSS规范命名大全集合

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-19)   网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DI ...

  9. div+css命名规范大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么 ...

随机推荐

  1. 温故而知新之java的collection framwork

    经常用到的List,Map等这些数据结构,都是来自于java的util包下,而java对于其整体设计,简称为collection framwork.(ps.其实,Map接口并不继承自collectio ...

  2. IE6的那些css常见bug（汇总）

    IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...

  3. NPinyin 中文转换拼音代码

    Mono 3.2 测试NPinyin 中文转换拼音代码   C#中文转换为拼音NPinyin代码  在Mono 3.2下运行正常,Spacebuilder 有使用到NPinyin组件,代码兼容性没有问 ...

  4. LigerUI权限系统之角色管理

    角色管理比前面几个页面都稍显复杂点.好吧,还是先看图. 左边是角色列表,右边是页面列表,它们也是多对多的关系,即一个角色可以访问多个页面,同时一个页面也可以被多个角色访问. 点击左边的角色,刷新右边页 ...

  5. oracle中backup模式

    在数据库打开的情况下备份(归档模式),把表空间或者数据库置于backup 模式下, 如: SQL> alter database  begin  backup; Database altered ...

  6. JavaScript中变量声明有var和没var的区别

    JavaScript中变量声明有var和没var的区别 JavaScript中有var和没var的区别 Js中的变量声明的作用域是以函数为单位,所以我们经常见到避免全局变量污染的方法是 (functi ...

  7. Left 、right join使用笔记

    用过很多次left join,right join,看到查询出的结果,知道可能是没用left join.或者right join导致的结果,但都是用一次,网上查一次使用规则,学到的东西只是皮毛.今天用 ...

  8. 最小包围多边形（凸包；最小包围点集）——C代码例子

    本文来自:http://alienryderflex.com/smallest_enclosing_polygon/ 这个C代码例子需要一群2维点集,如下图所示: 要获得包含这些点的最小多边形如下图所 ...

  9. 【入门】安装Elasticsearch5.0 部署Head插件

    部署5.0版本的ES 5.0版本的ES跟之前的版本最大的不同之处就是多了很多环境的校验,比如jdk,max-files等等. 设置内核参数 vi /etc/sysctl.conf # 增加下面的内容 ...

  10. 01--css编码技巧--css揭秘

    一 尽量减少代码重复 1.按钮 #btn { padding: .3em .8em; border: 1px solid #446d88; background: #58a linear-gradie ...