用html制作五环,html+css制作五环（代码极简）

##五环把五环做成一个浮动，总是位于屏幕中央的效果。

##难点

定位的练习 position ：fixed

位于body中间的时候 left：50%；top:50%;

css内部样式表的使用 style="text/css"

#方法

使用border-radius: 50%再加上z-index设置层叠关系

首先我们用5个块级元素来形成5个环的颜色和形状，并把这5个环放置到一个父级容器div内，再将这个父级元素div放置到浏览器中间位置。

#设计须知

div的作用:div是一个块级元素。它可以将html分割成独立的、不同的部分。如果用id和class来标记div，那么该标签便可以被css所使用变的更有效，通过id或class设计各种的样式。

#设计细节 html的设计：

首先给5个环设置class用来css文件关联样式，并把这5个环放置一个父级div中

div class ="plat">

css样式设计：

通过绑定html中设置好的class，然后绘制五个环的形状和大小还有位置 .a1,.a2,.a3,.a4,.a5{

position:absolute;

width: 100px;

height: 100px;

background-color: transparent;

border: 10px solid;

border-radius: 110px;

}

绘制每个环的颜色和位置： .a1{

border-color: blue;

left: 0;

top: 0;

}

.a2{

border-color: black;

top: 0px;

left: 130px;

z-index: 4;

}

.a3{

border-color: yellow;

top: 0px;

left: 260px;

z-index: 4;

}

.a4{

border-color: red;

top: 65px;

left: 65px;

z-index: 5;

}

.a5{

border-color: green;

top: 65px;

left: 198px;

z-index: 6;

}

设计父级div的位置：

首先要知道，我们设计的5环是在div内部，所以调整div的位置便可以实现浏览器居中i效果。

.plat{

position: fixed;

top: 50%;

left: 50%;

margin-left:-140px;

margin-top: -70px;

width: 280px;

height: 140px;

}

##代码

居中五环

.a1,.a2,.a3,.a4,.a5{

position:absolute;

width: 100px;

height: 100px;

background-color: transparent;

border: 10px solid;

border-radius: 110px;

}

.plat{

position: fixed;

top: 50%;

left: 50%;

margin-left:-140px;

margin-top: -70px;

width: 280px;

height: 140px;

}

.a1{

border-color: blue;

left: 0;

top: 0;

}

.a2{

border-color: black;

top: 0px;

left: 130px;

z-index: 4;

}

.a3{

border-color: yellow;

top: 0px;

left: 260px;

z-index: 4;

}

.a4{

border-color: red;

top: 65px;

left: 65px;

z-index: 5;

}

.a5{

border-color: green;

top: 65px;

left: 198px;

z-index: 6;

}

##效果

原文出处：https://www.cnblogs.com/gzyc/p/10604474.html

用html制作五环,html+css制作五环（代码极简）相关推荐

html css 制作网站,HTML/CSS制作网页
HTML/CSS代码练习要求效果图 polo360.jpg 用ps裁剪提取要用的图片 3.png html代码 polo360练习 HOME Back to home PRODUCTS What w ...
html5电子相册在线制作,Html5+jQuery+CSS制作相册小记录
本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...
html如何制作美观搜索栏,css制作好看的搜索框
做网站开发我们肯定少不了一种最基本的功能,就是搜索框,那么搜索框样式也能让一个网站看起来更加美观上档次.现在我们就教大家一种如何把搜索框做的很美观的方法. 效果图: 实现这种效果有两种方法:一是整体处 ...
如何用html制作彩虹,用 CSS 制作彩虹
昨天晚上,林柯突然对木可说,你不是在学前端吗,那你能用代码画出一个彩虹吗?木可笑着说,虽然我技术不高,但或许可以一试.话一说完,木可当即打开了代码编辑器. 第一步,创建一个 div 元素,用 CSS ...
【web开发网页制作】Html+Css网页制作关于我的家乡（6页面）【附源码下载】
[写在前面]之前学生时代自己也做了不少页面,现在毕业后也希望能慢慢的分享出来给大家,希望能给刚接触web开发的你带来一些启发.其实关于网页制作,没有大家想象中的那么难,接下来给大家详细介绍一下如何实现 ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
如何用CSS制作横向菜单?
管在我的网站和文章里都有提到CSS制作菜单的方法,但很多初学者还是不太清楚如何实现,以及实现原理,我想专门写一篇详细教程会对大家比较有帮助. 我们先来看一个菜单的例子,最终效果是: 首页产品介绍服 ...
html语言制作留言条,利用DIV+CSS制作右下角弹出留言板
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...
html中多边形图形怎么制作,CSS制作图形速查表
前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不同图形的方法.今天花了点时间将这方面的制作成一份清单,方便大家急用时有地方可查.别的不多说了,直接看代码. 为了节省时间,下 ...

用html制作五环,html+css制作五环（代码极简）

用html制作五环,html+css制作五环（代码极简）相关推荐

最新文章

热门文章