远视图+五环（css练习）

1、’效果
1.1、五环

1.2远视图
2、技术css定位（position：relative/absolute/fixed）

2.1、绝对定位（absolute）
绝对定位的元素从文档流中拖出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。
绝对定位的定位方法：如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非相对于浏览器窗口，相对于窗口定位的是fixed）

2.2、相对定位（relative）
相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

2.3、固定定位（fixed）
固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。

源码部分：
1、html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>远视图+五环</title><link rel="stylesheet" type="text/css" href="index.css"></head><body><div><strong>css练习</strong></div><br><hr><div class="contents"><div class="contents1"><div class="contents2"><div class="contents3"><div class="contents4"></div></div></div></div></div><br><div class="wuhuan"></div><hr><div class="flexbj"><div class="aoyun1"></div><div class="aoyun2"></div><div class="aoyun3"></div><div class="aoyun4"></div><div class="aoyun5"></div></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></body>
</html>

2、css部分

*{margin: 0px;
}
strong{text-align: center;margin-left: 50%;font-size: 88px;font-weight: 800;
}
/*****/
.contents4{width: 100px;height: 100px;margin: 100px 100px;background-color: black;position: absolute;
}
.contents3{width: 300px;height: 300px;margin: 100px 100px;position: absolute;background-color: blue;
}
.contents2{width: 500px;height: 500px;margin: 100px 100px;position: absolute;background-color: black;
}
.contents{width: 700px;height: 700px;margin: 100px 100px;position: absolute;background-color: blue;
}/****/
.wuhuan{margin-top: 800px;width: 100px;height: 100px;}.flexbj{display: flex;justify-content: center;align-items: center;position: fixed;padding-left: 40%;
}.aoyun1{width: 300px;height: 300px;border: 10px solid blue;border-radius: 50%;position: relative;
}.aoyun2{width: 300px;height: 300px;border: 10px solid green;border-radius: 50%;position: absolute;margin-left: 200px;/* margin-left: -100px; *//* margin-left: 200px; */
}.aoyun3{width: 300px;height: 300px;position: absolute;margin-left: 400px;/* margin-left: 200px; */border: 10px solid goldenrod;border-radius: 50%;
}.aoyun4{width: 300px;height: 300px;position: absolute;margin-left: 100px;margin-top: 200px;/* margin-left: 200px; */border: 10px solid goldenrod;border-radius: 50%;
}.aoyun5{width: 300px;height: 300px;position: absolute;margin-left: 300px;margin-top: 200px;/* margin-left: 200px; */border: 10px solid goldenrod;border-radius: 50%;
}

远视图+五环（css练习）相关推荐

使用代码给 SAP UI5 XML 视图添加自定义 CSS
一个例子如下图所示: this.getView().addStyleClass(Device.system.desktop ? "sapUiSizeCompact" : " ...
实现图片从远到近css,如何利用景深效果，使图片近大远小，我的demo怎么是近小远大，代码如下：...
想要的效果是,旋转到屏幕前变大,旋转到屏幕里面变小(近大远小). img_3D @keyframes an1{ 0%{ transform: rotateY(0deg) ; } 50%{ trans ...
CSS代码中的属性，盒子模型
CSS中的属性是由属性名以及属性值来构成的. 字体大小:font-size:16px; 设置的是字体的高字体粗细:font-weight:?; ?包括lighter,normal,bold 字体样 ...
html css 磁贴,使用JS配合CSS实现Windows Phone中的磁贴效果
Windows Phone的tile设计的美丽对我来说有余音绕梁的效果.我从来不知道优雅的方块盒子布局能给我深刻的印象.因此我尝试在web里用CSS和Jquery去实现这种tile设计.我已尝试Til ...
css怎样给网页加页脚,在移动Web页面中使用CSS固定页脚
一种单页应用的页面结构面向移动端的单页应用(Single Page Web Application),从页面代码上来说,会使用较一般网页不同的结构.单页应用并不是说应用只需要一个视图,而是说可以将组 ...
kindle阅读html,html – Kindle Fire SilkBrowser阅读CSS
有没有人知道如何正确地实现Kindle Fire Silk浏览器阅读视图的CSS类? With Reading View on Silk, the content that you're intere ...
前端每周清单半年盘点之 CSS 篇
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID:front ...
lesson2--html-css基础主要知识点
1.浏览器的主要内核(有独立研发的内核) 内核 IE ----------- ...
前端面试题总结（转载）
DOM结构 -- 两个节点之间可能存在哪些关系以及如何在节点之间任意移动 1.DOM中两个节点存在的关系无非3种:1.1.包含与被包含,IE率先引入的contains()方法可检测,例 A.conta ...
Chrome 开发工具指南
Chrome 开发工具指南谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...

远视图+五环（css练习）

远视图+五环（css练习）相关推荐

最新文章

热门文章