开班信息CSS实现

<!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>

16年面授开班计划

近期开班

Java云计算就业班

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

CSS实例练习
蓝色导航为图片,用background-image实现. 排版用到ul,li标签,下划线运用border-bottom中的dashed,右边文字用到CSS浮动float. 实例: 代码: <!D ...
DIV+CSS综合实例【传智PHP首页】
1.首页结构 2.准备工作所有素材放到与当前网页同级的目录下: 网页背景色.背景图: 主页宽度:1000px: 创建CSS文件,将CSS文件引入到当前的HTML文件中. 3.实现效果图: HTML ...
HTML&CSS基础-ps的基本操作
HTML&CSS基础-ps的基本操作作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们工作中可能会经常需要将一个图片做成一个网页,而图片中的字体大小,行间距,图中lo ...
HTML+CSS基础知识（4）简单的广告界面
文章目录 1.网页实例 1.1 代码 1.2 测试效果 1.网页实例 1.1 代码 css样式 /* 清除页面样式 */ *{ margin:0; padding: 0; } /* 统一页面的样式 * ...
36、重新复习html和css之二
(1)由于公司是意大利的网段, (2)而且公司的电脑是保密的, (3)文件发不出去, (4)U盘插不进去. (5)而且我们组的项目整体上已经开发完毕,客户暂时没有什么大的需求, 所以如果我不把这些技术 ...
Web前端开发中的各种CSS规范
Reference: http://yusi123.com/2866.html 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和 ...
HTML标签的命名/CSS标准化命名大全
在一个内容较多的HTML页面中,需要设计许多不同的框架,再为这些不同的框架及内容进行分类,给予相应的名称,从而使得网页结构更加清晰,也为工作提供了方便.许多新手朋友在设计一个HTML文件时,可能只会依 ...
前端开发之css
<!--页面中的组成部分通常随便打开一个网页,有文字,图片,视频,表格,音频,表单(注册信息) css 属性/尺寸/边框/背景 1.css的尺寸属性,就是大小width max-width mi ...
前端css规范
文章整理了Web前端开发中的各种CSS规范,包括文件规范.注释规范.命名规范.书写规范.测试规范等. 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CS ...

随机推荐

author模块
一.auth模块简介 1.什么是auth模块,auth模块主要是解决什么问题还是那句话,‘没有无缘无故的爱,也没有无缘无故的恨凡是必有因’, 像我们开发一个网站,不可避免的设计网络用户系统,比 ...
简单的试了试async和await处理异步的方式
今天无意中就来试了试,感觉这个新的方法还是非常行的通的,接下来我们上代码这段代码想都不用想输出顺序肯定是//null null 233,当然出现这个问题还是因为它是同步,接下来我们就进行异步方式来处 ...
利用js+ajax在jsp与servlet间进行简单数据交换
直接上代码 jsp <%@ page language="java" contentType="text/html; charset=utf-8" pag ...
在Idea中jdk11和jdk8环境变量的切换
先配置好jdk11和jdk8环境变量 idea(2019.3)中jdk版本切换(jdk8和jdk11) 快捷键ctrl + shift + alt +s ,将jdk11修改为jdk1.8 完成后,显示 ...
P2214 [USACO14MAR]哞哞哞Mooo Moo
链接:Miku ---------------------- 这道题还是个背包 --------------------- 首先看一下声音的组成,对于每一个农场的声音,它是由两部分组成的 :上一个农场 ...
python数据类型（第三弹）
本文着重介绍python语言的两种数据类型——列表和元组列表相比于整型.浮点型等数据类型,列表是一个复合数据类型,它更像一个容器,可以容纳多种不同类型的数据. 如上图:列表a中装进去了字符串&qu ...
解决vue-cli使用组件报错
今天使用vue-cli,明明写的没错,都是vue-cli自动生成的,编译时怎嘛就会报错呢? 报错信息如下: 浏览器端报错: Failed to compile. ./src/components/Hi ...
Nginx简单的负载均衡（一）
Nginx是一个高性能的http和反向代理服务器,官方测试nginx能够支支撑5万并发链接,并且cpu.内存等资源消耗却非常低,运行非常稳定. 1.应用场景 1.http服务器.Nginx是一个htt ...
安卓自定义View实例-----跟随手指移动的鸟
今天学习了一些安卓开发中的自定义布局,编写了简单一个实例,“跟随手指移动的鸟”,需要两张图片,背景图片和鸟的图片,鸟的图片可以在屏幕中跟随手指的移动而移动. 1.将两张图片导入到mipmap中: 2. ...
LeetCode 704. 二分查找
题目链接:https://leetcode-cn.com/problems/binary-search/ 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函 ...

开班信息CSS实现

近期开班

Java云计算就业班

Java云计算就业班

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

随机推荐

热门专题