开班信息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>
近期开班
开班信息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 ...
随机推荐
- CentOS、Ubuntu的安装
Linux使用最广泛的2个发行版:CentOS.Ubuntu. CentOS安全性高,常用作企业的服务器,Ubuntu常用作个人桌面. 常见的虚拟机有2个: VM VirtualBox,这个是Orac ...
- (Hourglass)Windows倒计时软件 v1.9 电脑版
(Hourglass)Windows倒计时软件是一款电脑系统小工具,能帮助大家快速进行最新的电脑系统倒计时设计,你可以设置自己的关机时间,帮助大家更好的管理自己的电脑应用. 链接:https://pa ...
- .NET CORE(C#) WPF亚克力窗体
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF亚克力窗体 阅读导航 本文背景 代码实现 本文参考 源码 1 ...
- 这 100 道 Python 题,拿去刷!!!
2020年,学 Python 还有价值吗? 根据 2020 年 2 月的 TIOBE 编程语言排行榜显示,Python仍然稳居第三位. 此排行榜排名基于互联网上有经验的程序员. 课程和第三方厂商的数量 ...
- akka设计模式系列-消息模型(续)
在之前的akka设计模式系列-消息模型中,我们介绍了akka的消息设计方案,但随着实践的深入,发现了一些问题,这里重新梳理一下设计方法,避免之前的错误.不当的观点给大家带来误解. 命令和事件 我们仍然 ...
- 关于GC(垃圾回收)
当我用new创建一个对象时,当可分配的内存不足GC就会去回收未使用的对象,但是GC的操作是非常复杂的,会占用很多CPU时间,对于移动设备来说频繁的垃圾回收会严重影响性能.下面的建议可以避免GC频繁操作 ...
- windows系统安装python
1.python3 下载 官网下载:https://www.python.org百度网盘下载:https://pan.baidu.com/s/1dH0UZg_7Q-YcppR0PjUfzQ提取码:xl ...
- css3基础-动画案例(没啥实用性,纯粹好玩的)
会动的汉克狗: <!doctype html> <html lang="en"> <head> <meta charset="U ...
- java.lang.ClassCastException:java.util.LinkedHashMap不能转换为com.testing.models.xxx
后台接收前台的json字符串 转pojo 问题(Object 对应定义的pojo) ObjectMapper mapper=new ObjectMapper(); Object object = ma ...
- Vim 全选命令
ggVG稍微解释一下上面的命令gg 让光标移到首行,在vim才有效,vi中无效V 是进入Visual(可视)模式G 光标移到最后一行选中内容以后就可以其他的操作了,比如:d 删除选中内容y ...