前端-css
黎成诃月
不辜负每一份热情,不讨好任何冷漠。
展开
-
input placeholder属性的样式修改
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909;}input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909;}input::-moz-placeholder { /* Mozilla Fir...原创 2019-10-24 17:19:01 · 115 阅读 · 0 评论 -
去掉input框的默认样式
input{ -webkit-appearance: none;/*系统默认阴影*/ outline:none; border:none;}原创 2019-10-24 17:15:12 · 235 阅读 · 0 评论 -
超出隐藏...
//多行文本超出隐藏...----------------------------------------------------------------------------display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ...原创 2019-10-24 17:04:26 · 145 阅读 · 0 评论 -
底部三角边框
content: ''; display: block; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 6px solid #4a90e2; position: absolute; bottom: 0; le...原创 2018-12-18 15:37:42 · 171 阅读 · 0 评论 -
inline-block 垂直居中布局(登陆框)
<div class="box"> <div class="inner">123</div></div>.box{ width: 600px; height: 600px; border: 1px solid #ccc; text-align: center;}.inner{ width:...原创 2018-08-07 16:32:58 · 2897 阅读 · 0 评论 -
内联 padding
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0;margin: 0原创 2018-08-06 18:06:37 · 219 阅读 · 0 评论 -
浮动后父级边框塌陷的四种解决办法
浮动后父级边框塌陷的四种解决办法当设置某个元素浮动后 父级元素边框会出现塌陷问题,即,父级元素高为0.尽管clear可以清除浮动对其他元素造成的影响,但是依然解决不了父级边框塌陷问题。 以下为四种解决办法: 1. 设置父元素的高度 2. 给父元素添加overflow:hidden属性 3. 给父级添加伪类after 4. 在浮动元素后面添加空div <!DOCTYPE html...转载 2018-08-06 16:26:51 · 979 阅读 · 0 评论 -
推荐大家使用的CSS书写规范、顺序
CSS书写顺序1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animat...转载 2018-08-09 15:20:16 · 112 阅读 · 0 评论 -
css左右滑动
<div class="main"> <ul> <li> <div> <span>英语</span> <span>English</span> </div> </li>原创 2018-07-05 12:51:14 · 2045 阅读 · 0 评论 -
引入特殊字体
@font-face { font-family: digifacewide; src: url(../font/digifacewide.ttf);}原创 2018-05-23 11:57:25 · 697 阅读 · 0 评论 -
不固定宽度高度div垂直居中显示
<div class="center">52</div><style> .center { position: fixed; top: 50%; left: 50%; background-color: #fff; transform: translateX(-50%) t...原创 2018-05-25 16:10:39 · 346 阅读 · 0 评论 -
动画特效
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style>.wrapper>.jxz{ width: 200px;height: 200px; border-radius:原创 2018-05-10 15:04:25 · 202 阅读 · 0 评论 -
CSS3动画的属性transform,animate.css
rotate设置元素顺时针旋转的角度,用法是:transform: rotate(x);参数x必须是以deg结尾的角度数或0,可为负数表示反向。scale设置元素放大或缩小的倍数,用法包括:transform: scale(a); 元素x和y方向均缩放a倍transform: scale(a, b); 元素x方向缩放a倍,y方向缩放b倍transform: scaleX(a); 元素x方向缩放a倍...原创 2018-05-10 14:41:51 · 205 阅读 · 0 评论 -
ul中最后一个li不加样式
.menu ul li:not(:last-child) a::after{ background: url(./images/head_3.png); background-size: 100% 100%; width: 0.02rem; height: 0.4rem; content: ""; position: absolute; ...原创 2018-04-11 11:07:44 · 2872 阅读 · 0 评论 -
怎么在导航栏目之间加短竖线?导航after定义小图片
<style> .menu ul{ display: flex; justify-content: center; background: #f2f2f2; padding: 0.1rem 0; } .menu ul li{ float: left; width: 1.46rem; position: r...原创 2018-04-11 11:05:38 · 3216 阅读 · 0 评论 -
swiper轮播图切换
<!-- html轮播 --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide phone"><img src="images/3.原创 2018-03-14 18:16:15 · 1634 阅读 · 0 评论 -
搜索框 放大镜图标处理
.expert-query{ width:17.86rem; height: 1.86rem;/* line-height: 1.86rem;*/ position: relative; margin: 0.53rem auto 0.48rem;/* border-bottom: 1px solid #e27719; paddi原创 2018-01-26 15:04:44 · 9968 阅读 · 0 评论 -
修改输入框placeholder文字默认颜色
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000; opacity:1; }input ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000;opacity:1;}input:-ms-input-placeholde原创 2018-01-26 14:45:44 · 420 阅读 · 0 评论