蓝色导航为图片，用background-image实现。

排版用到ul,li标签，下划线运用border-bottom中的dashed，右边文字用到CSS浮动float。

实例：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,div,a,span,ul,li{margin:0px;padding:0px;}
body{
    background-color:#cccccc;
    }
div{
    background-color:#FFFFFF;
    }
ul,li{list-style:none;}
a:link,a:visited{color:#0066CC;text-decoration:none;}
.red{color:red}
.green{color:green}

h4{
    color:#333;
    }
.kaiban{
    width:295px;
    margin:100px auto;
    font-family:"Microsoft Yahei";
    font-size:14px;

    }
.kaiban .title{
    height:35px;
    line-height:35px;
    padding-left:35px;
    color:#fff;
    backgroudn-repeat:no-repeat;
    background-image:url(righttitle.gif);
    }
.conten h4{
    margin:5px;
    }
.conten{
    margin:0px;
    padding:10px;
    }
.conten li{
    height:23px;
    line-height:23px;
    color:#333;
    font-size:12px;
    border-bottom:1px dashed #cccccc;
    }
.conten li span{
    font-weight:bold;
    float:right;
    }
</style>
</head>

<body>
    <div class="kaiban">
        <div class="title">PHP培训开班信息</div>
            <div class="conten">
                <ul><h4>PHP基础班</h4>
                    <li><a href="#">北京第--27期(3月30号)</a><span class="red">爆满已开班</span></li>
                    <li><a href="#">广州第--28期(4月30号</a>)<span class="green">预约报名</span></li>
                    <li><a href="#">湖北第--27期(6月30号)</a><span class="green">预约报名</span></li>
                    <li><a href="#">天津第--27期(8月30号)</a><span class="green">预约报名</span></li>
                </ul>
                    <ul><h4>PHP就业班</h4>
                    <li><a href="#">北京第--27期(3月30号)</a><span class="red">爆满已开班</span></li>
                    <li><a href="#">广州第--28期(5月30号)</a><span class="green">预约报名</span></li>
                    <li><a href="#">湖北第--27期(6月30号)</a><span class="green">预约报名</span></li>
                    <li><a href="#">天津第--27期(6月30号)</a><span class="green">预约报名</span></li>
                </ul>
                    <ul><h4>网页UI就业班</h4>
                    <li><a href="#">北京第--27期(5月30号)</a><span class="red">爆满已开班</span></li>
                    <li><a href="#">广州第--28期(6月30号)</a><span class="green">预约报名</span></li>
                    <li><a href="#">湖北第--27期(7月30号)</a><span class="green">预约报名</span></li>
                    <li><a href="#">天津第--27期(8月30号)</a><span class="green">预约报名</span></li>
                </ul>
            </div>
    </div>
</body>
</html>

CSS实例练习的更多相关文章

  1. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  2. LESS CSS 实例

    值得参考的 10 个 LESS CSS 实例   2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...

  3. CSS：CSS 实例

    ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...

  4. CSS实例 display display 边距

    CSS学习大纲 在标签上设置style属性: background-color:#2459a2 ; height:48px ; 编写CSS样式: 1.标签的style属性 2.写在head里面,sty ...

  5. div+css实例教程

    DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...

  6. CSS实例详解：Flex布局

    本文由云+社区发表 本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题. 一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现,可以对比 ...

  7. CSS实例：图片导航块

    1.认识CSS的 盒子模型. 2.CSS选择器的灵活使用. 3.实例: a.图片文字用div等元素布局形成HTML文件. b.新建相应CSS文件,并link到html文件中. c.CSS文件中定义样式 ...

  8. CSS实例：鼠标滑过超级链接文字时改变背景颜色

    先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...

  9. HTML+CSS实例——漂亮的背景（一）

    一.网址:http://www.csszengarden.com/?cssfile=213/213.css 二.效果 三.CSS body { background-color:#F0ECD6; ba ...

随机推荐

  1. GJM: 设计模式 - 观察者模式

    GJM : 观察者模式 视频地址: http://www.imooc.com/learn/415 本课程通过一个天气预报的发布和订阅案例,来讲解观察者模式在Java项目中的应用.主要包括观察者模式的结 ...

  2. 遍历map的四种方法

    方法一  在for-each循环中使用entries来遍历这是最常见的并且在大多数情况下也是最可取的遍历方式.在键值都需要时使用.注意:for-each循环在Java 5中被引入所以该方法只能应用于j ...

  3. 负载均衡之LVS集群

    h3 { color: rgb(255, 255, 255); background-color: rgb(30,144,255); padding: 3px; margin: 10px 0px } ...

  4. 深入理解javascript闭包（二）

    在上次的分享中javascript--函数参数与闭包--详解,对闭包的解释不够深入.本人经过一段时间的学习,对闭包的概念又有了新的理解.于是便把学习的过程整理成文章,一是为了加深自己闭包的理解,二是给 ...

  5. 通过安装一个描述文件在控制台获得设备的udid

    在我的这篇博客里面说明了本地获得设备udid的方法,但是只能在模拟器中获得http://www.cnblogs.com/liyy2015/p/6090204.html 当然可以在设备上集成苹果的MDM ...

  6. android Fragments介绍

    Fragments是Android3.0引入的概念,译为片段.碎片,为了解决不同屏幕分辩率的动态和灵活UI设计. Fragment表现Activity中UI的一个行为或者一部分.可以将多个fragme ...

  7. iOS网络1——NSURLConnection使用详解

    原文在此 一.整体介绍 NSURLConnection是苹果提供的原生网络访问类,但是苹果很快会将其废弃,且由NSURLSession(iOS7以后)来替代.目前使用最广泛的第三方网络框架AFNetw ...

  8. 拥抱.NET Core，跨平台的轻量级RPC：Rabbit.Rpc

    不久前发布了一篇博文".NET轻量级RPC框架:Rabbit.Rpc",当初只实现了非常简单的功能,也罗列了之后的计划,经过几天的不断努力又为Rabbit.Rpc增加了一大波新特性 ...

  9. Say goodbye to my photos&videos

    刚刚得知一个悲惨的消息:虽然2012已经过去了,但是世界末日并未过去.嗯,我不是来严肃的,我是来搞笑的.毕竟,我已经如此伤心了.中午结束考试,下午看了一半的电影然后躺室友的床上睡了一觉,醒来看到阿姨发 ...

  10. BenUtils组件和DbUtils组件

    BenUtils组件和DbUtils组件 [TOC] 1.BenUtils组件 1.1.简介 程序中对javabean的操作很频繁,所有Apache提供了一套开源api,方便javabean的操作!即 ...