style,网站css样式集合

手机端、移动端@media 自适应样式的使用

2022-11-06

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。通用手机端样式： @media all and (orientation : portrait) { /*竖屏*/ } @media all and (orientation : landscape) { /*横屏*/ }

HTML CSS 伪元素添加元素 :before和:after的使用

2022-08-15

1178 0

HTML CSS 伪元素添加元素 :before和:after的使用，可以给标签加背景加字体，并可以设置背景图片和文字。1、元素开始位置添加元素:before{ ;;content: '开始位置'; ;;color: green; } 2、元素结束位置添加元素:after{ ;;content: '结束位置'; ;;color: green; } 3、添加一个带背景的元素:before{ display:block; ;;content: ''; ;;width: 100px; ;;height: 100px; ;;background-image: url('../图片路径.png'); ;;background-size: 100% 100%; }

一个css动画loading收藏

2022-04-19

685 0

有时我们在开发项目需要等待加载完毕后再显示数据，我们可以给它加个loading动画，以下是收藏的一个动画效果供大家参考和使用<!DOCTYPE html> <html lang="en"> <head> ;;<meta charset="UTF-8"> ;;<meta http-equiv="X-UA-Compatible" content="IE=edge"> ;;<meta name="viewport" content="width=device-width, initial-scale=1.0"> ;;<title>loading</title> </head> <style> ; ;;.loading__anim {;; ;;;;width: 35px; ;;;;height: 35px; ;;;;display: inline-block; ;;;

css关闭a标签点击出现蓝色背景问题

2022-03-26

1097 0

在做手机端页面的时候，会发现a标签点击会出现背景颜色问题，我们可以通过css样式来设置，解决这个问题。body { -webkit-tap-highlight-color:rgba(0,0,0,0); } 这句代码加上去之后就不会出现点击背景颜色问题了。

css实现导航鼠标悬停走动酷炫效果

2021-09-25

953 0

我们有时做项目需要使用到类似上面的效果，可以参考下面的代码实现方法html页面代码：;;;<div class="header"> ;;;;;;;;<ul> ;;;;;;;;;;<li><a href="#">首页</a></li> ;;;;;;;;;;<li><a href="#">最新活动</a></li> ;;;;;;;;;;<li><a href="#">项目介绍</a></li> ;;;;;;;;;;<li><a href="#">关于我们</a></li> ;;;;;;;;;;<span class="move"> </span> ;;;;;;;;</ul> ;;;;</div> css代码实现：;&l

animate.css动画执行时间修改方法

2021-04-23

1799 0

Animate.css;作为一款强大的预设css3动画库，很值得我们在项目中引用。但是统一的动画时间不是很好看。可以通过下面css对其进行修改。.ssxin1为class，可以独立为每个动画设置.ssxin1.animated;{ ;;;;-webkit-animation-duration:;1s;; ;;;;animation-duration:;2.5s;; ;;;;-webkit-animation-fill-mode:;both; ;;;;animation-fill-mode:;both; }

解决foundation5下CSS伪元素::after在iOS14以上系统不显示问题

2021-03-19

1618 0

最近在写页面，发现ios下不显示，安卓和pc折叠导航下的CSS伪元素::after都能正常显示。解决方法：因为官方默认高度为0没有加上高度height对此，我们只需增加一段样式<style> ;;.top-bar;.toggle-topbar.menu-icon;a;span::after{ ;;;;height:;1px; ;;;;background:;#fff ;;} </style>即可解决该问题。

解决苹果ios手机下select标签和input标签显示问题

2020-09-01

2103 0

手机端页面在苹果ios下select标签和input标签显示颜色很奇怪？而安卓上显示没问题。出现这个问题的原因：因为ios有自己自带的样式，我们需要将默认样式取消掉，然后在设计自己的样式input[type=datetime-local]{ ;;;;;;-webkit-appearance:none; ;;;;;;outline:none; ;;;;;;border:none; } select{ ;;;;-webkit-appearance:;none;;;/*这样select默认的样式就没有了，后面的箭头也没有了，自己找个图标添加进去就可以了*/ ;;;;padding-right:30px;;;;;/*给右边图标留位置*/ ;;;;background:;url("arrow.png");no-repeat;

html,css 如何设置input的placeholder样式

2020-08-31

1771 0

html,css 如何设置input的placeholder样式，在做前端开发时，如果想写对input设置字体，文字大小，颜色等，我们该如何设置呢？通过如下设置兼容主流浏览器：-webkit-input-placeholder; ;;/* WebKit browsers */input::-moz-placeholder;;/* Mozilla Firefox 19+ */input::-ms-input-placeholder /* Internet Explorer 10+ */以下是个简单的例子，对input设置字体颜色和字体大小，如果需要其他的样式，加入即可。.rj_zyyform;input::-webkit-input-placeholder;{;/*;WebKit;browsers;*/ ;;color:;#7f7f7f; ;;font-size:;0.96rem; }

如何使用css给网站图片加灰色

2020-04-07

1571 0

2020年4日4，为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院发布公告，决定2020年4月4日举行全国性哀悼活动。从4月3日下午起，娱乐诸多网站自发更换灰色，以悼念逝者，致敬英雄，你发现，生活常见的网站以及app都变成灰色，现在来说下说是如何实现的。网站设置灰色html{ -webkit-filter:;grayscale(100%);;/*;webkit;*/ -moz-filter:;grayscale(100%);;/*firefox*/ -ms-filter:;grayscale(100%);;/*ie9*/ -o-filter:;grayscale(100%);;/*opera*/ filter:;grayscale(100%); filter:progid:DXImageTr

使用css截取字符串，保留省略号

2019-10-21

2011 0

文字过多，可以使用css来截取字符串，保留省略号，兼容性也是最好的。<p;class="p1">哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或</p> <p;class="p2">啦啦啦啦啦啦啦拉拉阿拉啦啦啦阿拉啦啦啦啦啦啦啦啦</p> <style> 显示一行，超出隐藏，保留省略号 .p1{ width:20rem; ;;;;font-size:;1.6rem; ;;;;text-overflow:;ellipsis; ;;;;overflow:;hidden; ;;;;white-space:;nowrap; ;;;;display:;block; } 截取两行，超出隐藏，保留省略号 .p2{ c

html 单选框placeholder及字体颜色设置

2019-10-17

2444 0

html 单选框placeholder及字体颜色设置.deal_sell4;input{;;text-align:;right;;color:;#555;;font-size:;0.92rem;;} .deal_sell4;input::-webkit-input-placeholder{;font-size:;0.88rem;;color:;#cccccc;};;; .deal_sell4;input:-moz-placeholder{;font-size:;0.88rem;;color:;#cccccc;};;;;;;;;;; .deal_sell4;input::-moz-placeholder{;font-size:;0.88rem;;color:;#cccccc;};;;;;;;;;; .deal_sell4;input:-ms-input-placeholder{;font-size:;0.88rem;;color:;#cccccc;}

css3flexbox布局实现元素垂直水平居中

2019-10-16

1802 0

Flex垂直水平居中<div;class="flex"> Flex垂直水平居中 </div><style> .flex{ font-size:;25px; height:;200px; border:;1px;solid;black; display:;flex; align-items:;center; justify-content:;center; </style>

css六种隐藏元素的方法

2019-03-21

2459 0

1、display，使用none值会让元素从文档中直接删除，”直接消失不见了”用法：display:none优点：简单暴力，不需要多余代码。不占空间，对布局没影响。缺点：元素从文档删除，不利于seo2、text-indent，一般是首行缩2个中文字的用法是text-indent:2em。但当给他一个足够大的负值，大到一般我们浏览器无法显示。用法：text-indent:-999em优点：利于搜索引擎缺点：它的作用其实就是把文字提到段落前面，不让我们看见，不影响宽度？会影响布局。3、position，假如说一个元素的距离我们的视窗（电脑显示屏幕）足够大，大到我们浏览器也无法显示出

CSS3：线性渐变+各种分布

2017-10-22

1856 0

CSS3：线性渐变+各种分布<!DOCTYPE;html>;; <html>;; <head>;; <meta;charset="utf-8">;;; <title>网页title</title>;;; <style>;; #grad1;{;; ;;;;height:;40px;;; ;;;;background:;-webkit-linear-gradient(0deg,;red,;blue);;/*;Safari;5.1;-;6.0;*/;; ;;;;background:;-o-linear-gradient(0deg,;red,;blue);;/*;Opera;11.1;-;12.0;*/;; ;;;;background:;-moz-linear-gradient(0deg,;red,;blue);;/*;Firefox;3.6;-;15;*/;; ;;;;background:;linear-gradient(0deg,;red

css实现360度无限旋转

2017-10-26

3066 0

css实现360度无限旋转目标{animation:;2s;;rotate;linear;infinite} @keyframes;rotate;{ ;;;;0%{} ;;;;100%{transform:rotate(360deg);} }

css3实现鼠标悬停图片翻转

2017-11-01

2032 0

css3实现鼠标悬停图片翻转.last_btn;img{-moz-transition:all;0.5s;linear;0s; ;;;;webkit-transition:all;0.5s;linear;0s; ;;;;transition:all;0.5s;linear;0s;;} .last_btn;a:hover;img{ ;-moz-transform:rotateY(360deg);perspective(200px); ;-ms-transform:rotateY(360deg);perspective(200px); ;-o-transform:rotateY(360deg);perspective(200px); ;-webkit-transform:rotateY(360deg);perspective(200px); ;transform:rotateY(360deg);perspective(200px); }

css3实现正六边形图片+悬停效果

2017-11-26

2236 0

html代码<div;class="boxF;pic1"> ;;;;;;;;<div;class="boxS"> ;;;;;;;;;;;;;;;;<div;class="boxT";style="background-image:;url(1.jpg);"> ;;;;;;;;;;;;;;;;;;;;;<div;class="overlay"> ;;;;;;;;;;;;;;;;;;;;;;;;;;<a>正六边形</a> ;;;;;;;;;;;;;;;;;;;;;;</div> ;;;;;;;;;;;;;;;;;</div> ;;;;;;;;;</div> ;</div>css代码;;.lineF,;.lineS ;;;;;;;;{ ;;;;;;;;;;;;position:;absolute; ;;;;;;;;;;;;visibili

html常见样式代码、小结

2017-12-04

2501 0

outline: none; ; ; ; ; ----文本框去掉鼠标点击边框颜色box-sizing:border-box; ;----给li列表加hover悬停效果会出现抖动问题可以加这句代码letter-spacing:5px ; ; ;----给文字加左右边距resize:none; ; ; ;----禁止textarea鼠标点击拉动大小

css3实现舞台灯管效果

2018-03-24

2239 0

<!DOCTYPE;html> <html> <head> ;<meta;charset="UTF-8"> ;<title>Document</title> </head> <body> <div;class="head;pr">;;;; ;;;;<a;href="";target="_blank">;;;; ;;;;;;<img;src="images/banner_01.jpg";alt="">;;;;; ;;;;;;<i;class="hoverlight"></i> ;;;;;;<i;class="hoverlight1"></i>;;;;; ;;;;</a>;;;;;;; </div>;;;;

HTML动画，花飘动效果

2018-06-14

2366 0

html代码<div;id="banner"> ;;;;;;;;<img;src="images/2018/fiveActive/banner_01.jpg";alt=""> ;;;;;;;;<a;href="javascript:void(0)";onclick="openS();return;false;";class="btn"> ;;;;;;;;;;;;<img;src="images/2018/fiveActive/btn1_03.png";alt=""> ;;;;;;;;</a> ;;;;;;;;<div;class="hua;hua1"><img;src="images/2018/fiveActive/hua1.png";alt=""></div>