HTML+CSS基础知识（4）简单的广告界面
1、网页实例
1.1 代码
css样式
/* 清除页面样式 */
*{
margin:0;
padding: 0;
}
/* 统一页面的样式 */
body{
font:12px/1 宋体;
}
/* 设置outer大小 */
.outer{
width: 300px;
/* height: 500px;
background-color: #bfa; */
margin:50px auto;
}
/* 设置title的样式 */
.title{
/* 设置上边框 */
border-top:2px #019e8b solid;
/* 设置盒子的高度 */
height: 36px;
/* 设置背景样式 */
background-color: #f5f5f5;
/* 设置title的行高*/
line-height: 36px;
/* 设置title的内边距 */
padding: 0px 22px 0px 16px;
}
.title a{
text-decoration: none;
float: right;
color: red;
}
.title h3{
font:16px/36px "微软雅黑";
}
/* 设置内容 */
.content{
border:1px solid #deddd9;
/* 设置内边距 */
padding: 0px 28px 0px 20px;
}
.content h3{
margin-top: 14px;
margin-bottom: 16px;
}
/* 设置内容中的超链接 */
.content a{
color: black;
/* 去除超链接下划线 */
text-decoration: none;
/* 设置字体大小 */
font-size:12px
}
/* 为超链接添加一个hover伪类 */
.content a:hover{
color: red;
}
/* 设置右侧的a的样式 */
.content .right{
/* 设置向右浮动 */
float: right;
}
/* 设置url的样式 */
.content ul{
/* 去除项目符号 */
list-style: none;
/* 为ul设置一个下边框 */
border-bottom: 1px dashed #deddd9;
}
/* 取消最后一个ul的边框 */
.content .no-border{
border:none;
}
/* 设置li的样式 */
.content li{
margin-bottom: 15px;
}
.content .red{
color: red;
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页1</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- 创建一个外层div，容纳整个内容 -->
<div class="outer">
<!-- 开班信息的头部 -->
<div class="title">
<a href="#">java练习营</a>
<h3>近期开班</h3>
</div>
<!-- 开班信息的主要内容 -->
<div class="content">
<h3><a href="#">JavaEE+云计算-全程就业班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span class="red">无座，名额饱满</span></a>
<a href="#">开班时间：<span class="red">2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span >开班盛况</span></a>
<a href="#">开班时间：<span>2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span >开班盛况</span></a>
<a href="#">开班时间：<span >2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span >开班盛况</span></a>
<a href="#">开班时间：<span>2020-4-30</span></a>
</li>
</ul>
<h3><a href="#">Android+人工智能+全程就业班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span >无座，名额饱满</span></a>
<a href="#">开班时间：<span >2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2020-4-30</span></a>
</li>
</ul>
<h3><a href="#">前端+HTML5-全程就业班</a></h3>
<ul class="no-border">
<li>
<a class="right" href="#"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2020-4-30</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2020-4-30</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
1.2 测试效果
不加css样式
加css样式
HTML+CSS基础知识（4）简单的广告界面的更多相关文章
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- (转)第一天 XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- DIV+CSS专题：第一天 XHTML CSS基础知识
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础 ...
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- CSS基础知识01
一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold; 正常用:norma ...
- Web学习篇之---css基础知识（一）
css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...
- HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用
文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...
随机推荐
- DP 优化方法合集
0. 前言 写完这篇文章后发现自己对于 DP 的优化一窍不通,所以补了补 DP 的一些优化,写篇 blog 总结一下. 1. 单调队列/单调栈优化 1.2 算法介绍 这应该算是最基础的 DP 优化方法 ...
- docker compose搭建redis7.0.4高可用一主二从三哨兵集群并整合SpringBoot【图文完整版】
一.前言 redis在我们企业级开发中是很常见的,但是单个redis不能保证我们的稳定使用,所以我们要建立一个集群. redis有两种高可用的方案: High availability with Re ...
- UOJ#XX A+B Problem （罔烙硫）
题面 背景 题目描述 从前有个 n n n 个方格排成一行,从左至右依此编号为 1 , 2 , ⋯ , n 1,2,⋯,n 1,2,⋯,n. 有一天思考熊想给这 n n n 个方格染上黑白两色. 第 ...
- QQ国际版V8.0.11.4530
简洁,快速,无广告,好用! 预览图 下载地址 QQ国际版.apk 其他简洁版本如下 在线观看 视频地址[灰常简洁占用超低!]
- echarts学习笔记(一)
echarts学习笔记(一) echarts开发步骤 创建一个新的html文件 在html文件head头部信息中导入echarts 声明一个容器(可以理解为画布),用于存放echarts 实例化ech ...
- day01-GUI坦克大战01
JavaGUI-坦克大战 1.Java绘图坐标体系 坐标体系介绍:下图说明了一个Java坐标体系.坐标原点位于左上角,以像素为单位.在Java坐标体系中,第一个是x坐标,表示当前位置为水平方向,距离坐 ...
- KingbaseES的表空间
表空间的概念 KingbaseES中的表空间允许在文件系统中定义用来存放表示数据库对象的文件的位置.实际上表空间就是给表指定一个存储目录. 表空间的作用 通过使用表空间,管理员可以控制一个Kingba ...
- Springboot log4j2总结
Log4j2 PS: Log4j 已不再维护,而最新的是Log4j2, Log4j2 是全部重写了Log4j,并拥有更加优秀的性能 1. 引入依赖,和去掉logging的依赖 <dependen ...
- docker学习笔记一-docker安装与卸载
环境查看 # 1 查询当前centOS的版本,官方要求版本为7以上 uname -r 查询系统内核 cat /etc/os-release 系统版本 安装 # 1.卸载旧版本 yum remove d ...
- Taurus.MVC 微服务框架 入门开发教程：项目集成：6、微服务间的调用方式：Rpc.StartTaskAsync。
系统目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 开源地址:https://github.com/cyq1162/Taurus.MVC 本系列第一篇:Tauru ...