html/css-五环图样制作(网页居中定位广告制作)
时间:2019-03-12
本文章向大家介绍html/css-五环图样制作(网页居中定位广告制作),主要包括html/css-五环图样制作(网页居中定位广告制作)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
五环图样制作
要求:制作五环图样,使其居中于网页中央,并且随着滑动永远居中;
思路:首先定制一个容器能够将五个图样容器装下,此容器采用fixed定位,使其实现网页滑动定位;五个环形图样容器,采用absolute定位,根据大容器也就是它的父标签进行定位,从而达到协调相互位置的目的;
- html代码:
注意: class一般不要用汉字,本博客为了清晰表达才使用;
<!DOCTYPE html>
<html lang="em">
<head>
<meta charset="UTF-8">
<title>五环制作</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="box">
<div class="蓝"></div>
<div class="紫"></div>
<div class="红"></div>
<div class="黄"></div>
<div class="绿"></div>
<strong ><h3>滚动五环制作</h3></strong>
</div>
</body>
</html>
- css代码:
*{
/*左右容器外边距,内边距初始化为0*/
margin:0;
padding:0;
}
.绿,
.黄,
.紫,
.红,
.蓝{
/*设置五环共有特性*/
position:absolute;/*根据父标签进行定位*/
width:100px;/*五环容器大小*/
height:100px;
border:10px solid ; /* 边框像素,边框实体*/
border-radius:50%;/*50%的边框圆角形成圆*/
z-index:0; /*所处层级,因为他是大容器,所以层级最低*/
}
strong{
position:absolute;
left:50%;
margin-left:-3em;
/*想要文本居中,那么外边框就需要左移一半的em(1em代表一个汉字)*/
top:180px;
}
.box{
position: fixed;/*滑动定位*/
/*居中设置*/
left:50%;/*左边框处于网页左右居中位置,*/
top:50%;
margin-left:-190px;
/*边框往左移动左右距离的一般正好使容器居中*/
margin-top:-93px;
/*border:5px solid black;*/ /*大容器测试用例*/
height:186px;
width:380px;
}
.蓝{
border-color:blue;
/*相对于父标签的位置*/
top:45px;
left:55px;
z-index:3;
}
.紫{
border-color:purple;
top:45px;
left:185px;
z-index:3;
}
.红{
border-color:red;
left:0;
top:0;
}
.黄{
border-color:yellow;
left:260px;
top:0px;
}
.绿{
border-color:green;
left:130px;
top:0px;
}
- 图片样式:
- 轻量级压力测试工具 - AB
- Spring Cloud中Hystrix的请求合并
- Spring Cloud中Hystrix的请求缓存
- mysql主从复制配置
- Spring Cloud系列勘误
- Spring Cloud Stream使用细节
- Redis3 对集群进行重新分片
- Spring Cloud Stream初窥
- jquery事件绑定性能测试
- Spring Cloud Bus整合Kafka
- 图解Mac下如何安装管理MySQL
- Spring Cloud Bus整合RabbitMQ
- 结合Scikit-learn介绍几种常用的特征选择方法(下)
- Spring Cloud Bus之RabbitMQ初窥
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Laravel 中使用简单的方法跟踪用户是否在线(推荐)
- 浅析php怎么实现爬取数据原理
- 在 Laravel 中动态隐藏 API 字段的方法
- php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
- Thinkphp 5.0实现微信企业付款到零钱
- 实现php删除链表中重复的结点
- YII分模块加载路由的实现办法
- ThinkPHP5.0框架实现切换数据库的方法分析
- php微信公众号开发之微信企业付款给个人
- tp5框架的增删改查操作示例
- PHP使用函数用法详解
- 微信企业转账之入口类分装php代码
- 多个Laravel项目怎么共用migrations详解
- layui数据表格自定义每页条数limit设置
- Laravel 集成微信用户登录和绑定的实现