CSS + radius 五环
使用CSS的外链方式,写了一个五环
CSS的布局 附加radius的使用 |
思路: 一个大盒子里放两个子盒子; 两个子盒子上下排列,分别放3个和2个盒子用来制作圆环; 大盒子给相对定位,连个子盒子设为绝对定位; 用到CSS中的 border-radius 方法制作圆环,前提是用来制作圆环的五个盒子要添加边框 border 这个属性 |
|
html代码 |
<!DOCTYPE html> <!--CSS的外链方式--> |
|
CSS代码 | /*给外面的盒子添加样式和定位,主要是为了给五个环一个整体的定位*/ .radius{ position: relative; width: 300px; height: 150px; margin: 0 auto; padding: 0; background-color: lightskyblue; } /*给五个将要设置成环的盒子统一设置CSS样式*/ /*然后对上三个环和下两个环进行绝对定位,构成一个五环标记图*/ |
这是最终的效果
陌陌说:我们在使用CSS的布局时,可以先构思出一个整体的画面和给对应盒子临时性添加背景颜色,这样是有帮助我们看清盒子之间的层级关系从而提高效率哦
CSS + radius 五环的更多相关文章
- html+css制作五环(代码极简)
五环 把五环做成一个浮动,总是位于屏幕中央的效果. 难点 定位的练习 position :fixed 位于body中间的时候 left:50%:top:50%; css内部样式表的使用 style=& ...
- HTML+CSS编写五环居中案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML 学习笔记 CSS3 (边框)
CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- Div+Css中transparent制作奥运五环
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html+css实现奥运五环(环环相扣)
<!DOCTYPE html> <html> <head> <title>奥运五环</title> <style type=" ...
- 用html和css制作奥运五环
<html><head><meta charset="utf-8"> <style>.circle1,.circle2,.circl ...
- 前端css框架SASS使用教程(转)
一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一 ...
- CSS系列——前端进阶之路:初涉Less
前言:最近帮一个朋友解决点问题,在查看组件源码的时候涉及到了less语法,这可难倒博主了.没办法,既然用到就要学呗,谁让咱是无所不能的程序猿呢!所以今天来学习下Less,算是笔记,也希望给初学less ...
随机推荐
- 洛谷——P1007 独木桥
P1007 独木桥 题目背景 战争已经进入到紧要时间.你是运输小队长,正在率领运输部队向前线运送物资.运输任务像做题一样的无聊.你希望找些刺激,于是命令你的士兵们到前方的一座独木桥上欣赏风景,而你留在 ...
- Oracle表空间 ORA-01653:
--1.查看表空间USERS使用情况SELECT T.TABLESPACE_NAME,D.FILE_NAME, D.AUTOEXTENSIBLE,D.BYTES,D.MAXBYTES,D.STATUS ...
- 用Visual Studio 2010 打开Visual Studio 2013 (C#专用)
1.更改.sln 1)将Microsoft Visual Studio Solution File, Format Version 12.00 改成11.00 2)将 # Visual Studi ...
- golang 跨平台编译——go 在windows上编译Linux平台的程序(Cross Compilation from Windows to Linux/Ubuntu)
Go Cross Compilation from Windows to Linux/Ubuntu I have GO 1.7 installed on my Windows 10. I create ...
- FTP Server完整篇 ubuntu 10.04
1. sudo apt-get install vsftpd #安裝FTP Server(vsftp:very secure FTP) 安装后,会自动生成ftp用户,和ftp的文件夹,如果没有自动 ...
- Kinect驱动的人脸实时动画
近期几年.realtime的人脸动画開始风声水起.不少图形图像的研究者開始在这个领域不断的在顶级会议siggraph和期刊tog上面发文章. 随着kinect等便宜的三维数据採集设备的运用.以及其功能 ...
- 兔子--CheckBox与Radiobutton的差别
RadioButton和CheckBox的差别: 1.单个RadioButton在选中后.通过点击无法变为未选中状态,单个CheckBox在选中后.通过点击能够变为未选中. 2.一组RadioButt ...
- 【Linux多线程】同步与互斥的区别
同步与互斥这两个概念经常被混淆,所以在这里说一下它们的区别. 一.同步与互斥的区别 1. 同步 同步,又称直接制约关系,是指多个线程(或进程)为了合作完成任务,必须严格按照规定的 某种先后次序来运行. ...
- git/svn里面的merge和rebase区别
现在一般都用界面化的东西了,这种用法相近的命令行知不知道区别都可以.但是有些人喜欢研究,那么我来个传送门: 当我们用命令行操作git的时候,merge和rebase 有什么区别,请参考 https:/ ...
- Linux 命令修改系统时间
修改linux的系统时间使用date指令,date命令的功能是显示和设置系统日期和时间. 输入date 查看目前系统时间. 修改时间需要 date -功能字符 修改内容 命令中各选项的含义分别为:-d ...