2018.11.10 网页中使用Css+Html的圆形布局
2018.11.10 网页中使用Css+Html的圆形布局
在大多数的日常网页中,会选择垂直布局或者水平布局,因为网页中的块级元素提供了浮动(float)属性,但是有时候圆形布局会更具美感和设计感。
几种实现网页中圆形布局的简单方法。
- 使用上边距(top)属性和左边距(left)属性组合的方式实现网页中的圆形布局
Html代码:
<div class="main"> <--父级元素--><div id="main_inner"></div> <--参照元素--><div id="main_1" class="main_inner_base"></div> <--子元素--><div id="main_2" class="main_inner_base"></div><div id="main_3" class="main_inner_base"></div><div id="main_4" class="main_inner_base"></div><div id="main_5" class="main_inner_base"></div><div id="main_6" class="main_inner_base"></div>
</div>
.main父级元素,在父级元素中N个.main_inner_base子元素实现圆形布局;
为了观看效果明显,在.main父级元素中加了一个#main_inner子元素作为参照元素。
Css代码:
.main {width: 500px;height: 500px;border-radius: 50%;border-style: solid;border-width: 0px;background-color: gray;position: relative;}#main_inner {width: 60%;height: 60%;border-radius: 50%;border-style: solid;border-width: 0px; background-color: white; position: absolute; left: 20%;top: 20%;}.main_inner_base {width: 18%;height: 18%;border-radius: 50%;border-style: solid; border-width: 0px;background-color: white;position: absolute;box-sizing: border-box;}
.main父级元素设置为相对定位(position:relative;)便于子元素相对其绝对定位;
.main_inner_base子元素设置为绝对定位(position:absolute;)使其脱离文档流定位;
所有子元素的距离参数全部使用百分数,继承父级元素的统一长度,便于修改。
原理:
通过比较简单的数学几何知识可知,确定平面内一圆形需要半径(R)和圆心位置(X,Y)两个参数。
但是在使用绝对定位的网页中,我们需要获取的是圆上每一个点到其父元素左上角定位点的水平距离(left)和垂直距离(top)。
在具体计算中还需要考虑Sin和Cos的值在不同取值区间正负不同;
为了方便使用,我还用C语言编写了生成Css代码的小程序,方便读者使用。
C语言代码:
#include <stdio.h>
#include <math.h>
#define PI 3.1415926535
int main(){double angle = 0;double R = 0;int n = 0;double top = 0;double left = 0;printf("请输入半径:");scanf("%lf",&R); printf("请输入子元素数目:");scanf("%d",&n);angle = 360/n;for(int i=0;i<n;i++){double ang = i*angle*PI/180;if(ang>=0&&ang<PI/2){top = R - R*cos(ang);left = R + R*sin(ang); }if(ang>=PI/2&&ang<PI){top = R + R*cos(ang);left = R - R*sin(ang); }if(ang>=PI&&ang<=PI*3/2){top = R - R*cos(ang);left = R + R*sin(ang); }if(ang>=PI*3/2&&ang<=PI*2){top = R + R*cos(ang);left = R - R*sin(ang); }printf("#main_%d{top:%2.2f%%;left:%2.2f%%;}\n",i+1,top,left);}return 0;
}
直接将生成的Css片段放到Css文件中便可以布局完成。
最终样式:
2018.11.10 网页中使用Css+Html的圆形布局相关推荐
- css样式加入的法方,初学必知:XHTML网页中加入CSS的五种方_css
在Xhtml网页中如何加入css呢?这篇教程告诉大家引入CSS的几种方式. XHTML文件是通过CSS样式进行显示的控制的,也就是结合XHTML与CSS来表现页面内容.那么到底有哪些方式在XHTML文 ...
- 如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
- Unity3d 在 twitter 转载(周报) 2018.11.10
选自过去1~2周的内容: https://twitter.com/unity3d 日文: Unity WebGL启动过程 Unity减少内存使用方法(主要是WebGL) 2) Shader: 决定扩展 ...
- 网页中使用CSS样式表的五种方法
一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: < ...
- 2018.3.29 网页中嵌套网页的两种方法
第一种: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- 如何在html网页中利用css实现动画效果
animation动画 1.@keyframes 定义关键帧动画 以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 1 ...
- 网页中的css代码是写在哪的,网页里面的空格的代码怎么写
空格字符由&+n+b+s+p+;组成字符,后面的分号记住不能少了.这组空格字符一定输入到HTML代码里,才能实现空格效果. 如果有多个空格我们就复制粘贴输入多次" "即可. ...
- html5怎么加网页外边框,在HTML5网页中添加CSS边框更改定位
当我在 HTML 5文档中添加边框时,我遇到了移动页面元素的问题. 我期望包含的标题元素(灰色)出现在屏幕的顶部,但它似乎从内部div(红色)获取边距.但是,如果我在标题中添加一个边框,它会出现在我预 ...
- 2018.11.10计算未来轻沙龙——听九个清华大神聊大数据
昨天,很荣幸参加了PaperWeekly和清华大学联合举办的"大规模数据存储与挖掘"系列讲座,汇报人是九个清华大学的研究生,从硬件加速.字符串查找.推荐系统.可视化等几个方面介绍了 ...
最新文章
- EyeDropper 开发实践
- mysql mybatis 主键id_MyBatis+MySQL 返回插入的主键ID-Go语言中文社区
- SpringCloud Zuul初体验
- java web实现页面跳转页面_JavaWeb过滤器实现页面跳转至登录页面
- 一看就懂,图解 Spring 循环依赖,写得老好了!
- 非专业转行python的几点建议
- Python这些位运算的妙用,绝对让你大开眼界
- python3基础:字符串、文本文件
- 安装Office2007找不到OfficeMUI.msi解决方案
- SAP License:SAP学习心得
- vega56刷64_AMD Vega 56显卡能刷成Vega 64真相了
- 豪华气派!这些院校的图书馆也太美了!
- 宏基 4560G笔记本 AMD APU A6-3400试用报告
- google搜索语法与技巧
- 计算机模拟自由落体,CSS3 方块自由落体运动模拟
- 《麦田里的守望者》 经典摘录
- [bzoj4796][CERC2016]Key Knocking_乱搞
- 经常看到RS485和MODBUS写在一起,它们的区别和联系?
- 交通-城市规划专业常用——10分钟步行圈(百度API)
- 5G NRRC Inactive state是什么状态?