<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

            /*h3，p等样式默认会有一些不同的默认内外边距，把他们去掉以便更好的布局*/

        }

        body{

            font-size: 12px;

        }

        .outer{

            border: 1px solid grey;

            width: 300px;

            margin: 50px auto;

            padding-bottom: 5px;

        }

        .title{

            border-top: 1px solid blue;

            height: 20px;

            background-color: lavender;

            padding: 10px 20px;

        }

        .title a{

            float: right;

        }

        .content{

            padding: 0 15px;

        }

        .content ul{

            list-style: none;

            border-bottom: 1px dashed blue;

        }

        .content h3{

            margin: 15px 0 10px 0 ;

        }

        .content li{

            margin: 5px;

        }

        .content a{

            text-decoration: none;

        }

        .content a:hover{

            text-decoration: underline;

        }

        .content .red{

            color: red;

        }

        .content .right{

            float: right;

        }

    </style>

</head>

<body>

    <div class="outer">

        <div class="title">

            <a href="#">16年面授开班计划</a>

            <h3>近期开班</h3>

<!--            h3是块元素，为了避免h3在前面，把a标签给挡住-->

        </div>

        <div class="content">

            <h3>Java云计算就业班</h3>

            <ul>

                <li><a href="#">开班时间：<span class="red">2017-03-03</span></a>

                    <a class="right " href=""><span class="red">预约报名</span></a>

                </li>

                <li><a href="#">开班时间：<span class="red">2017-03-03</span></a>

                    <a class="right " href=""><span class="red">预约报名</span></a>

                </li>

                <li><a href="#">开班时间：<span class="red">2017-03-03</span></a>

                    <a class="right " href=""><span class="red">预约报名</span></a>

                </li>

                <li><a href="#">开班时间：<span >2017-03-03</span></a>

                    <a class="right " href=""><span >预约报名</span></a>

                </li>

                <li><a href="#">开班时间：<span>2017-03-03</span></a>

                    <a class="right " href=""><span >预约报名</span></a>

                </li>

            </ul>

            <h3>Java云计算就业班</h3>

            <ul>

                <li><a href="#">开班时间：<span class="red">2017-03-03</span></a>

                    <a class="right " href=""><span class="red">预约报名</span></a>

                </li>

                <li><a href="#">开班时间：<span class="red">2017-03-03</span></a>

                    <a class="right " href=""><span class="red">预约报名</span></a>

                </li>

                <li><a href="#">开班时间：<span class="red">2017-03-03</span></a>

                    <a class="right " href=""><span class="red">预约报名</span></a>

                </li>

                <li><a href="#">开班时间：<span >2017-03-03</span></a>

                    <a class="right " href=""><span >预约报名</span></a>

                </li>

                <li><a href="#">开班时间：<span>2017-03-03</span></a>

                    <a class="right " href=""><span >预约报名</span></a>

                </li>

            </ul>

        </div>

    </div>

</body>

</html>

开班信息CSS实现的更多相关文章

  1. CSS实例练习

    蓝色导航为图片,用background-image实现. 排版用到ul,li标签,下划线运用border-bottom中的dashed,右边文字用到CSS浮动float. 实例: 代码: <!D ...

  2. DIV+CSS综合实例【传智PHP首页】

    1.首页结构 2.准备工作 所有素材放到与当前网页同级的目录下: 网页背景色.背景图: 主页宽度:1000px: 创建CSS文件,将CSS文件引入到当前的HTML文件中. 3.实现 效果图: HTML ...

  3. HTML&CSS基础-ps的基本操作

    HTML&CSS基础-ps的基本操作 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   我们工作中可能会经常需要将一个图片做成一个网页,而图片中的字体大小,行间距,图中lo ...

  4. HTML+CSS基础知识（4）简单的广告界面

    文章目录 1.网页实例 1.1 代码 1.2 测试效果 1.网页实例 1.1 代码 css样式 /* 清除页面样式 */ *{ margin:0; padding: 0; } /* 统一页面的样式 * ...

  5. 36、重新复习html和css之二

    (1)由于公司是意大利的网段, (2)而且公司的电脑是保密的, (3)文件发不出去, (4)U盘插不进去. (5)而且我们组的项目整体上已经开发完毕,客户暂时没有什么大的需求, 所以如果我不把这些技术 ...

  6. Web前端开发中的各种CSS规范

    Reference: http://yusi123.com/2866.html 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和 ...

  7. HTML标签的命名/CSS标准化命名大全

    在一个内容较多的HTML页面中,需要设计许多不同的框架,再为这些不同的框架及内容进行分类,给予相应的名称,从而使得网页结构更加清晰,也为工作提供了方便.许多新手朋友在设计一个HTML文件时,可能只会依 ...

  8. 前端开发之css

    <!--页面中的组成部分通常随便打开一个网页,有文字,图片,视频,表格,音频,表单(注册信息) css 属性/尺寸/边框/背景 1.css的尺寸属性,就是大小width max-width mi ...

  9. 前端css规范

    文章整理了Web前端开发中的各种CSS规范,包括文件规范.注释规范.命名规范.书写规范.测试规范等. 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CS ...

随机推荐

  1. java Reflection（反射）基础知识讲解

    原文链接:小ben马的java Reflection(反射)基础知识讲解 1.获取Class对象的方式 1.1)使用 "Class#forName" public static C ...

  2. 一个最简单的Dockfile实践

    一:一个Dockerfile文件 FROM bash COPY . /usr/jinliang/ WORKDIR /usr/jinliang/ CMD [ "sh", " ...

  3. javascript中如何使用js脚本模拟"request"获取url后参数值呢？

    转自:猫猫小屋--js获取url后参数信息 摘要: 下文讲述javascript中使用js代码获取url地址后面的参数值的方法分享,如下所示: 实现思路: 使用正则表达式对参数值进行匹配,获取参数后的 ...

  4. centos的安装与配置，Linux下基本命令、权限控制，解压缩文件以及软件的安装与卸载

    centos安装与网络配置 关机:shutdown -h now 重启:shutdown -r now 或 reboot linux目录结构与操作命令 使用ls命令查看目录结构 目录查看: ls [- ...

  5. Phpstorm 2020-01-04试了可用的激活码【亲测可用】WebStrom

    [直接点击试用30天] http://myphp.vip/ 测试时间:2018-10-12可用(v2019.2) 测试时间:2019-12-24可用(v2019.2) 测试时间:2020-01-04可 ...

  6. 如何修复MacBook Pro过热：保持MacBook散热的13个技巧

    尽管MacBook Pro是一台能处理繁重工作量的高能效机器,但它却无法像市场上其他笔记本电脑一样避免过热.至于什么可以防止发热,那不是一两个技巧就能解决的问题.相反,这是一组技巧可以解决的挑战. 因 ...

  7. Excel创建下拉列表限制数据有效性

    方法 选中目标区域,点击菜单栏[数据]-[数据验证]-验证条件选择[序列]-输入所需文本即可

  8. idea插件不兼容问题

    https://plugins.jetbrains.com/ 找对应版本的插件

  9. 代数式转换为c语言表达式(很简单)

  10. Selenium3+python自动化016-多线程

    1.进程 什么是进程? 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基 ...