蓝色导航为图片，用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. 用大白话聊聊JavaSE -- 如何理解Java Bean（一）

    首先,在开始本章之前,先说一个总的概念:所谓的Java Bean,就是一个java类,编译后成为了一个后缀名是 .class的文件.这就是Java Bean,很多初学者,包括当年的我自己,总是被这些专 ...

  2. java 正则匹配括号对以及其他成对出现的模式

    最近,我们有个大调整,为了控制代码的质量,需要使用一些伪代码让业务人员编写应用逻辑(其实这么做完全是处于研发效能的考虑,95%以上的代码不需要特别注意都不会导致系统性风险,),然后通过工具自动生成实际 ...

  3. Eclipse搭建Maven Prooject（终于）

    今天我们一起来探讨eclipse搭建maven项目的步骤 一.建一个maven项目, 1.找到File ,点击 2.弹出窗口,再点击new 3.弹出窗口,点击other 4.输入maven,找到mav ...

  4. javascript 表单

    在HTML中,表单是由<form>元素来组成的.在js中,表单对应的则是HTMLFormElement类型.它和其他HTML元素一样具有相同的默认属性.下面是HTMLFormElement ...

  5. 让代码更简单——自定义toBean实现

    经过历时三天的鏖战,终于将阶段性项目——新闻发布系统做完了.在编码过程中,发现了很多冗余代码,统一流程,却需要不断重复编码——将用户输入实例化为对象的过程. 例: Person.set("i ...

  6. 介绍几个好用的vs插件

    1.打开扩展管理器. 1.jsenhancement插件. 参考文章:http://www.cnblogs.com/dudu/archive/2011/02/27/vs2010_extension_J ...

  7. Windows Server 2012 虚拟化实战：网络（二）

    关于Windows Server的虚拟化网络,前文描述了在操作系统层面上的出现的配置变化.其中的一些配置通过Windows Server提供的小工具即可实现,如网卡组的配置,而有些需要安装Window ...

  8. poll机制

    使用POLL机制代替linux输入子系统(input subsystem)之按键输入和LED控制中的异步通知,实现同样的效果. 1.代码 只简单修改input_subsys_test.c, input ...

  9. 64位下pwntools中dynELF函数的使用

    这几天有同学问我在64位下怎么用这个函数,于是针对同一道题写了个利用dynELF的方法 编译好的程序 http://pan.baidu.com/s/1jImF95O 源码在后面 from pwn im ...

  10. linux基础知识3_根文件系统详解

    文件系统: rootfs:根文件系统 /boot:系统启动相关的文件,如内核.initrd以及grub /dev:设备文件 块设备:随机访问 字符设备:线性访问,按字符为单位 设备号:主设备号(maj ...