<!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. BFS和DFS详解

    BFS和DFS详解以及java实现 前言 图在算法世界中的重要地位是不言而喻的,曾经看到一篇Google的工程师写的一篇<Get that job at Google!>文章中说到面试官问 ...

  2. SQL Server中日志

    再谈SQL Server中日志的的作用 简介 之前我已经写了一个关于SQL Server日志的简单系列文章.本篇文章会进一步挖掘日志背后的一些概念,原理以及作用.如果您没有看过我之前的文章,请参阅: ...

  3. IceMx.Mvc 我的js MVC 框架 一、html代码的分离（视图）

    介绍 本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...

  4. Redis系统学习 二、数据结构

    一.字符串     1.在Redis里,字符串是最基本的数据结构.当你在思索着关键字-值对时,你就是在死锁着字符串数据结构.不要被名字给搞混了. 常见实例: set users:leto " ...

  5. S2SH整合

    Struts2.Spring.Hibernate三大框架在一个项目中的具体职责分配如下: 三大框架整合,导入各个框架和整合所需的包(本项目采用的是Struts2.3+spring3.0+hiberna ...

  6. JSP引擎的工作原理

    JSP运行环境: 执行JSP代码需要在服务器上安装JSP引擎,比较常见的引擎有WebLogic和Tomcat.把这些支持JSP的web服务器配置好后.就可以再客户端通过浏览器来访问JSP页面了.默认端 ...

  7. Hadoop学习之Ubuntu12.04 Hadoop 环境搭建笔记

    SSH无密码配置 Hadoop在Ubuntu12.04上搭建环境 报错及问题 SSH无密码配置 参考:Linux(Centos)配置OpenSSH无密码登陆 注意问题: Hadoop集成环境三台机器都 ...

  8. Time_wait问题小结

    TIME_WAIT的产生原因 因为TCP连接是双向的,所以在关闭连接的时候,两个方向各自都需要关闭.先发FIN包的一方执行的是主动关闭:后发FIN包的一方执行的是被动关闭.主动关闭的一方会进入TIME ...

  9. 关于JAVA中split方法使用竖线异常的问题

    split表达式,其实就是一个正则表达式. *  ^ | 等符号在正则表达式中属于一种有特殊含义的字符,如果使用此种字符作为分隔符,必须使用转义符即\\加以转义.不然分割的结果就不是你想要的.

  10. IOS之frame和bounds区别

    用最简单的语言来解释就是:setFrame和setBounds都是为了把子view加载到父view上去,但设置的参数坐标系不同,setFrame是该view在父view坐标系统中的位置和大小,setB ...