随笔分类 -  DIV+CSS

布局方面
CSS实现文本，DIV垂直居中
摘要：https://blog.csdn.net/linayangoo/article/details/88528774 1.水平居中 1.行内元素水平居中 text-align:center; 利用text-align:center可以实现在块级元素内部的行内元素水平居中。此方法对inline,inli 阅读全文
posted @ 2019-12-05 10:41 努力~努力再努力~ 阅读(225) 评论(0) 推荐(0)
table中设置tr行间距
摘要：CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框 值 描述 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spaci 阅读全文
posted @ 2019-11-27 16:07 努力~努力再努力~ 阅读(2896) 评论(0) 推荐(0)
css flex弹性布局学习总结
摘要：一、简要介绍 flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。 主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持： 其中在webkit内核的浏览器中使用时，必须加上-webkit-前缀 采用Flex布局的元素， 阅读全文
posted @ 2019-11-04 18:28 努力~努力再努力~ 阅读(250) 评论(5) 推荐(0)
css中border-sizing属性详解和应用
摘要：box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式，不再冗赘。 1. 属性讲解 content-box 默认值，也是css2.1中的盒子模 阅读全文
posted @ 2019-10-24 16:39 努力~努力再努力~ 阅读(1794) 评论(0) 推荐(1)
css中（单冒号）：after和（双冒号）：：after的区别
摘要：：after是伪元素 。::after是伪类 什么是伪类? CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。 ::after表示法是在CSS 3中引入的，::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支 阅读全文
posted @ 2019-10-23 11:14 努力~努力再努力~ 阅读(2476) 评论(0) 推荐(0)
html 中video标签视频不自动播放的问题
摘要：有个需求，客户想做个打开官网自动播放一段视频，楼主使用了video标签，即下面的代码：：于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop”然而通过地址栏进去的时候，视频并没有自动播放，最后，找资料发现，添加 muted 属性，就可以通过地址栏进入网页的 阅读全文
posted @ 2019-10-20 17:03 努力~努力再努力~ 阅读(18344) 评论(2) 推荐(2)
input 修改placeholder颜色
摘要：.logIn .loginCon .boxUser form input::-webkit-input-placeholder{ color:#DCDCDC; } .logIn .loginCon .boxUser form input:-moz-placeholder{ color:#DCDCDC 阅读全文
posted @ 2019-10-17 14:25 努力~努力再努力~ 阅读(6592) 评论(0) 推荐(0)
html5 css写出一个实心三角形和空心三角行
摘要：原理：css中的border属性的特殊性。 实心三角形： html5: <div id="mydiv"></div> css: #mydiv{ height: 0px; width: 0px; z-index: 1;/*这个与后面的空心三角形有关*/ border-left: 50px solid 阅读全文
posted @ 2019-08-30 15:09 努力~努力再努力~ 阅读(890) 评论(0) 推荐(0)
弹出新页面并使整个旧页面背景变暗功能的实现代码
摘要：效果： HTML： CSS： div#cover{ background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: no 阅读全文
posted @ 2019-08-28 15:10 努力~努力再努力~ 阅读(600) 评论(0) 推荐(0)
radio 单选按钮 选中多个
摘要：<input type="radio" name="a"/> <input type="radio" name="b"/> <input type="radio" name="c"/> </body> </html> <input type="radio" name="a"/> <input typ 阅读全文
posted @ 2019-08-28 14:59 努力~努力再努力~ 阅读(1217) 评论(0) 推荐(0)
鼠标悬停图片放大效果与鼠标悬停文字或者图片向左、向右移动
摘要：鼠标悬停图片放大效果： img{ transition: all .6s; //过渡属性完成时间 } img：hover{ transform: scale(1.2); //放大倍数 } 鼠标悬停文字或者图片向左、向右移动： a:hover{ padding-left: 10px; 或者：margi 阅读全文
posted @ 2019-08-08 18:52 努力~努力再努力~ 阅读(1483) 评论(0) 推荐(0)
CSS控制文字，超出部分显示省略号
摘要：<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 效果如图： 实现方法： 实现方法： 实现方法： 适用范围：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优 阅读全文
posted @ 2019-07-29 17:47 努力~努力再努力~ 阅读(480) 评论(0) 推荐(0)
flex布局取消子元素（img、div等）缩放：
摘要：取消子元素（img、div等）缩放： 父元素： display: flex ; 子元素： flex-shrink: 0; 阅读全文
posted @ 2019-07-29 17:36 努力~努力再努力~ 阅读(10309) 评论(0) 推荐(0)