蓝色导航为图片，用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. python序列，字典备忘

    初识python备忘: 序列:列表,字符串,元组len(d),d[id],del d[id],data in d函数:cmp(x,y),len(seq),list(seq)根据字符串创建列表,max( ...

  2. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  3. CSS3 border-radius 圆角属性

    使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. -webkit- 或 -moz- ...

  4. Httpster –世界各地最潮的网页设计案例聚合网站

    Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...

  5. 记录一次Quartz2D学习(四)

    (三)内主要讲了图片与文字的绘制 本次主要讲解 绘制状态的保存与恢复,以及对它的使用 4.绘制状态 4.1 绘制状态的保存与恢复,以及对它的应用 TIP:通过对保存恢复绘制状以及多次的渲染,可以绘制出 ...

  6. 用application实现一个网页的浏览计数器

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. 华为手机浏览器不支持PUT提交方式的解决方案

    最近所在技术团队在开发webapp项目,前端angularjs+后端.Net MVC API,API登录接口定义为PUT提交方式,在做兼容测试时发现UC.safari.微信浏览器下都可以登录,但在华为 ...

  8. Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds

    错误:Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds 错误提示就是我们限定了部署的时间导致的错 ...

  9. x01.BSheepTree: 树

    数据结构,无外乎三: 1. 一对一,线性表,数组是也: 2. 一对多,树,菜单是也: 3. 多对多,图,网络是也. 涉及到树,有一个平衡的问题,左旋转,右旋转,转得人晕晕乎乎.好在陈广的<数据结 ...

  10. 1869: Mathematics and Geometry

    这是郑州轻工业学校的一次校赛的校内选拔赛,看名字是计算几何 的题 题目地址: http://acm.zzuli.edu.cn/zzuliacm/problem.php?id=1869 Descript ...