蓝色导航为图片，用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. webuploader上传文件，图片

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.官方地址:http://fex.baidu.com/webupload ...

  2. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  3. 第三方开源库和jar包的区别

    jar包和第三方开源库的根本区别在于,开源库的功能比jar包功能更强大,通过引入库项目可以访问java文件以及该开源库项目下的资源文件,例如图片,layout等文件 jar包中只能放class文件 引 ...

  4. 移动信息化不能延续PC时代的痛

    当下,随着移动时代的到来,手机功能逐步完善,各个行业针对这一现象纷纷制定了相应的营销计划,于是霎时间兴起了一股网上订票/网上订饭/网上预约的热潮. 而对于IT行业,成为企业信息化最火的代名词莫过于移动 ...

  5. iOS学习15之OC集合

    1.数组类 1> 回顾C语言数组 数组是一个有序的集合, 来存储相同数据类型的元素. 通过下标访问数组中的元素,下标从 0 开始. 2> 数组 数组是一个有序的集合,OC中的数组只能存储对 ...

  6. h5上传图片及预览

    第一次做图片上传,记录一些问题. 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址.而网页上的每一个图片,都是需要消耗一个http请求下载而来的,使用base ...

  7. centos本地yum源安装

    1.为DVD或U盘创建一个用于挂载的目录 [root@localhost ~]# mkdir /media/CentOS/ 2.查看DVD或U盘所在的路径 [root@localhost ~]# fd ...

  8. 解决ubuntu eclipse中 Android SDK Manager 图标不见的方法

    在eclipse中选择的步骤如下:   Window ---> Custom Perspective  --> command Group Availability ----> an ...

  9. 图片下方出现多3px的原因及解决方法

    产生原因:主要是因为图片的垂直对齐方式vertical-align引发的,默认值是baseline,默认为此值时图片下方就会多出3px. 解决方案: 1.将图片的垂直对齐方式vertical-alig ...

  10. BZOJ1298[SCOI2009]骰子的学问

    Description Input 第一行为两个整数n, m.第二行有n个整数,为a1,a2, -, an. Output 包含n行,每行m个1~n×m的正整数,各不相同,以空格分开.如果有多解,输出 ...