![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
捞起月亮的渔民~
本科学习的是前端开发,目前在读研,后面会分享深度学习相关知识和自己所踩得坑,很开心能和大家一起交流。
展开
-
css——实现正六边形的两种方法
注意:宽度可以随便定义,高度是要根据宽度计算出来的。公式:height = widthcos(30°)2以下两种方法都可以实现。【第一种】使用div+border,通过伪元素来实现<style> .block{ width: 100px; height: 173.2px; background-color: skyblue; position:relative;原创 2022-05-11 18:40:54 · 1807 阅读 · 0 评论 -
css三栏布局——两边宽度固定中间宽度自适应方法总结
【方法一】使用flex布局,是最简便的。为中间区域的父盒子添加dispaly:flex,将该布局变为flex布局,flex-direction:row表示布局的排列方式为按行排列。flex:1表示来分配剩余空间,5来表示占多少份数//html代码<div class="layout"> <header>#header</header> <div class="container"> <div原创 2022-03-31 09:00:00 · 4055 阅读 · 0 评论 -
CSS-div垂直居中方法总结
【第一种方法】该方法是通过position定位去实现的,通过将上下左右的偏移值全设为0,再利用margin:auto,让盒子上下,左右宽度相同,将盒子挤到中间。//css样式.outer{ width: 500px; height: 500px; background-color: rgb(158, 177, 194); position: relative; } .box原创 2022-03-29 08:36:28 · 4391 阅读 · 0 评论 -
解决HTML缩小窗口页面内容排版全部打乱问题
【方法一】下图缩小窗口排版全乱给body 加上这两行代码,让上下外边距为0,左右两个外边距自动相等,和方法二结果相同,给隐藏的部分加上导航条。width: 1200px;margin: 0 auto;加上这两句结果如下图所示:【方法二】如下图所示,缩小窗口,页面布局全部打乱在body的css中加上这两句话,当窗口最小宽度min-width <1200px 时,会生成导航条将内容隐藏,但是页面的排版布局不会乱 width: 100%; min-width: 1200px;原创 2021-08-10 14:54:05 · 26484 阅读 · 0 评论 -
CSS3动画简单案例
CSS3动画简单案例刚学习完h5和c3,做了两个简单动画。1.动画的放大缩小:代码如下: <style> @keyframes move { 0%{ transform: scale(1); } 25%{ transform: scale(1.1); } 50%{ transform: scale(1); } 75%{ transform: scal原创 2021-04-08 02:08:36 · 1304 阅读 · 0 评论 -
网页定位(position)——父相子绝
网页定位(position)position属性static:默认值,没有定位relative:相对定位,相对于自己原来的位置进行偏移absolute:绝对定位,是以它最近一个已经定位的祖先元素为基准进行偏移(若父元素没有定位,则根据浏览器窗口定位)fixed:固定定位,不会随着鼠标的滚动而滚动,定位基准是浏览器窗口偏移量:top:顶端偏移量,相对于其父标签上边线的距离buttom:底部偏移量,相对于其父标签下边线的距离left:左侧偏移量,相对于其父标签左边线的距离right:右原创 2021-03-26 14:19:09 · 3294 阅读 · 1 评论