蓝色导航为图片，用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. Socket编程——怎么实现一个服务器多个客户端之间的连接

      package coreBookSocket; import java.io.IOException; import java.net.ServerSocket; import java.net. ...

  2. PHP 原型模式

    原型模式:原型模式是先创建好一个原型对象,然后通过拷贝原型对象来创建新的对象.适用于大对象的创建,因为创建一个大对象需要很大的开销,如果每次new就会消耗很大,原型模式仅需内存拷贝即可.也可以用作动态 ...

  3. Workflow笔记2——状态机工作流

    状态机工作流 在上一节Workflow笔记1——工作流介绍中,介绍的是流程图工作流,后来微软又推出了状态机工作流,它比流程图功能更加强大. 状态机工作流:就是将工作流系统中的所有的工作节点都可以看做成 ...

  4. switch语句的妙用

    switch语句的普通用法很简单,如下: var a = 3; switch (a) { case 1: console.log(a); break; case 2: case 3: console. ...

  5. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  6. 两listview联动

    package com.mttz; import java.util.ArrayList;import java.util.List; import com.mttz.adapter.CaiDanAD ...

  7. 怎么修改与设置.jsp文件属性？

    1.首先  打开  >>  Myeclipse或Eclipse.(我用的是Myeclipse) 2.打开  >>  Window  >>  Preferences  ...

  8. Oracle Partition Outer Join 稠化报表

    partition outer join实现将稀疏数据转为稠密数据,举例: with t as (select deptno, job, sum(sal) sum_sal from emp group ...

  9. jmeter之连接mysql和SQL Server配置

    下载jdbc驱动 在使用jmeter做性能或自动化测试的时候,往往需要直接对数据库施加压力,或者某些参数只能从数据库获取,这时候就必须使用jmeter连接数据库. 1.下载对应的驱动包 mysql驱动 ...

  10. 基于英特尔® 至强 E5 系列处理器的单节点 Caffe 评分和训练

    原文链接 在互联网搜索引擎和医疗成像等诸多领域,深度神经网络 (DNN) 应用的重要性正在不断提升. Pradeep Dubey 在其博文中概述了英特尔® 架构机器学习愿景. 英特尔正在实现 Prad ...