CSS经典布局
yuan5801551
这个作者很懒,什么都没留下…
展开
-
CSS经典布局之双飞燕布局
CSS经典布局之双飞翼 布局 双飞翼就是两边不变中间伸缩,看淘宝就知道了 第一种实现方法:flex布局 css代码 .content{ display: flex; } .content-left{ flex: 0 0 200px; width: 200px; hei...原创 2019-08-13 15:25:04 · 2026 阅读 · 0 评论 -
CSS经典布局之垂直、水平居中(在宽,高已知的情况下)
CSS经典布局之垂直、水平居中 垂直、水平居中是前端需求中很常见的 在图中我们可以看到span’水平居中’实现了垂直、水平居中,那么怎么实现呢 HTML代码 <div class="content"> <span class="content-span"> 水平居中 </span> </div>...原创 2019-08-13 16:15:42 · 238 阅读 · 0 评论 -
CSS3动画之行星运行轨迹(钟表也行)
CSS3动画之行星运行轨迹(钟表也行) 先看一下我们要的效果 当然圆球是可以动的,就像行星一样沿着轨迹动,手机里很多时间表也是这样动的 是不是非常有意思! 我们先介绍一下知识点 - CSS3动画-@keyframes - CSS3 2D旋转-transform:rotate(angle) 用法 @keyframes name{ from{somecode}to{somecode} ...原创 2019-08-14 16:21:10 · 787 阅读 · 0 评论 -
CSS中之高度坍塌及解决办法
高度坍塌是什么 高度坍塌:在流式布局中十分常见。当父元素没有高度,子元素设置了float时。 原因:子元素脱离文档流,无法撑开父元素 高度坍塌的’症状’: <div class="content"> 123 <div class="content-middle"> 高度坍塌问题 </div...原创 2019-08-14 23:02:32 · 2205 阅读 · 0 评论 -
CSS响应式布局加流式布局
CSS响应式布局 div{ border:1px solid rebeccapurple; } .header{ width: 80%; height: 100px; margin: 0 auto; background-color: #4CAF50; } .content{ ...原创 2019-08-15 01:48:20 · 545 阅读 · 0 评论 -
移动端1px(transform解决)
.divpx:after{ display: inline-block; width: 200%; position: relative; border-top: 1px solid black; content: ''; transform:scale(.5); ...原创 2019-08-30 15:35:00 · 269 阅读 · 0 评论