css+css3
文章平均质量分 85
对按钮、弹框、小demo、背景图片等的记录!
橙子_tong
坚持很容易,放弃却很难。
展开
-
简述height:100%和height:auto的不同
height:auto(内容自动填充)是指根据块内内容自动调节高度。height:100%(随父级)是根据离它最近且有定义高度的父层的高度来定义高度。原创 2020-08-11 11:50:24 · 812 阅读 · 0 评论 -
搭建自适应网站(自适应网站设计)
“自适应网页设计”这个名词,指的是可以自动识别屏幕宽度,做出相应调整的网页设计。简单来讲,自适应网站就是能够适应不同分辨率屏幕的网站,一站通行,不需要再为每一个不同屏幕大小的设备重新制作一个网站版本。一、允许网页宽度自动调整首先,在网页代码的头部,加入一行viewport元标签。<meta name="viewport" content="width=device-width, initial-scale=1" />viewport是网页默认的宽度和高度,上面这行...原创 2020-07-17 15:32:59 · 3295 阅读 · 0 评论 -
css布局实例之去除行内元素间的空白间隙
css行内样式去掉空隙(间隙)总结一下,在布局中遇到的一些小问题如图:行内样式之间有空隙这个布局需注意的几个地方:1、行内并排可用display:inline-block;这个属性;2、细节问题:会发现avatar和content并排之间是有一个缝隙的,产生原因是其间有些空白字符。消除空白字符的办法–给其父元素设置font-size:0。给其父元素添加了font-siz...原创 2018-09-19 11:32:34 · 2516 阅读 · 0 评论 -
css background-image 画出横线
1.css代码: .newsOneMobGreyLine{ height: 3px; // 可自定义 background: url(../img/fFlower5.png); }2. fFlower5.png 如下图3. 最后效果:原创 2018-06-28 16:04:41 · 2443 阅读 · 0 评论 -
background 添加两张或多张背景图
谷歌,火狐,猎豹,ie,极速360亲测!background 语法:background: url(../img/bg1.png)no-repeat 0% 8%; url(../img/bg1.png)no-repeat 0%(左右距离) 8%(上下距离);1.添加两张或者多张背景图:background: url(../img/t_blueBanner...原创 2018-07-12 15:24:00 · 23512 阅读 · 0 评论 -
弹框 浮层(点击button按钮,弹出隐藏框)
1. html 部分:<div class="signWrap"> <div class="sign"> <a class="signClose" href="javascript:showSign();">点击关闭</a> <p class="signTitle">预约报名</p> <div cla...原创 2018-07-12 15:48:17 · 7142 阅读 · 0 评论 -
input[type='checkbox'] 自定义样式(使用自己的按钮图片)
关于 input 按钮自定义样式,碰到过无数次了,有直接使用div标签和img实现的,也有使用 input 然后再替换成自己的图片。以下,将input替换成自己图片的方法做一个总结,写成一个小栗子,方便参考使用。html 布局:<div class="shopL"> <label><input type="checkbox" name=...原创 2018-09-03 15:15:31 · 3769 阅读 · 0 评论 -
input[type='radio'] 自定义样式___通过label标签重置input[radio]样式
每次都要重新写一遍,麻烦,所以直接写一个完整小栗子,可直接复制粘贴再修改一哈哈,这样就省事多了。先给label标签绑定input,如此便可以,点击input或者label中包裹的文字时,都可以被选中。然后利用样式修改来实现。(注意:label行内元素哦)html代码:<div class="insteadKind"> <div class="insteadKind...原创 2019-01-04 17:21:04 · 1444 阅读 · 0 评论 -
css3动画 --- transform属性值:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
我们在画页面的时候,为了增加页面用户体验,会添加一些动态效果,下面就用css3动画,实现导航hover时向上滑动。transform:translateY(100%) 语法:Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CS...原创 2019-04-23 17:07:30 · 7814 阅读 · 0 评论 -
transform 、transition、animate动画
1. transition 过渡-webkit-transition: all .25s ease|linear|ease-in|ease-out|ease-in-out; -moz-transition: all .25s ease|linear|ease-in|ease-out|ease-in-out; -ms-transition: all .25s ease|linea...原创 2018-06-20 18:22:00 · 754 阅读 · 0 评论 -
css3-Loading加载动态效果及@keyframes用法
有时候,我们想要一个有关 加载 的旋转动态效果,插件没有自己满意的,那么下面介绍一个可以自己修改颜色,大小的方法。html部分:<div class="courseDetailMore" style="padding-bottom:55px;"> <a href="javascript:;" id="showMore">显示更多</a> &l...原创 2018-12-18 16:21:27 · 1147 阅读 · 0 评论