tnblog
首页
视频
资源
登录
原

html/css样式

2790人阅读 2019/6/6 19:52 总访问：13537 评论：0 收藏：0 手机
分类: 我的文章

                 

  1. 代码：

  2. <!DOCTYPE html>

  3. <html>

  4. 	<head>

  5. 		<meta charset="utf-8" />

  6. 		<title></title>

  7. 	

  8. 		<style type="text/css">

  9. 			*{

  10. 	padding: 0;

  11. 	margin: 0;

  12. 	

  13. }

  14. .loading-screen{

  15. 	width: 100%;

  16. 	height: 100%;

  17. 	background: #6a89cc;

  18. 	/*成绝对定位*/

  19. 	position: fixed;

  20. 	top: 0;

  21. 	left: 0;

  22. 	z-index: 9999;

  23. 	display: flex;

  24. 	/*居中*/

  25. 	align-items: center;

  26. }

  27. .loading-screen::before{

  28. 	content: "";

  29. 	/*这个是绝对定位*/

  30. 	position: absolute;

  31. 	width: 80px;

  32. 	height: 80px;

  33. 	background: #f8c291;

  34. 	left: 20%;

  35. 	 /*把元素沿着横向(x轴)移动自身宽度的50% 旋转*/

  36. 	transform: translateX(-50%) rotate(0);

  37. 	border-radius:20px ;

  38. 	/*规定完成动画所花费的时间,以秒或毫秒计*/

  39. 	animation: loading 4s infinite linear;

  40. 	

  41. }

  42. /* @keyframes创建动画,创建动画是通过逐步改变从一个CSS样式到另一个CSS样式,在动画过程中*/

  43. @keyframes  loading{

  44. 	from{

  45. 		transform: translate(-50%) rotate(0deg);

  46. 	}

  47. 	50%{

  48. 		left: 80%;

  49. 	}

  50. 	to{

  51. 		transform: translate(-50%) rotate(1440deg);

  52. 	}

  53. }

  54. 

  55. 		</style>

  56. 	</head>

  57. 	<body>

  58. 		<div class="loading-screen"></div>

  59. 	</body>

  60. </html>


评价

如何修改CSS中存在的element.style内联样式
改腾讯地图的时候调整了下样式，发现样式一直存在问题，修改style里面的值，一点用都没有，html中这个值还找不到是在哪里出...

echarts中tooltip 基本样式问题处理
在echarts中遇到几个样式问题，现总结如下：1、tooltip中样式中 值换行在tooltip中修改加上一句代码formatter:&#39;{b0}:{c...

修改电脑的鼠标指针样式
安装完系统之后呢，觉点电脑自带的鼠标指针样式特别丑，下面推荐更换电脑鼠标指针的方法1.鼠标指针的下载地址：http://www....

css3样式学习代码
上代码！上代码！不说了&lt;!DOCTYPEhtml&gt; &lt;htmllang=&quot;en&quot;&gt; &lt;head&gt; &lt;metacharset=&quot;UT...

复制样式小技巧
可以直接找到相关的样式重复在样式文件中复制出来不要直接在浏览器右键查看的状态下找，那样很容易找不全，很坑

jqurey 冒泡事件 样式叠加解决三种方法
同时设置不同层的事件会叠加$(function () { $(&quot;.one&quot;).click(function () { console.log(event.target) console...

使用jquery操作元素的css样式（获取、修改等等）
使用jquery操作元素的css样式（获取、修改等等） //1、获取和设置样式 $(&quot;#tow&quot;).attr(&quot;class&quot;)...

bootstrap分页条样式
其实就是一个pagination即可&lt;divclass=&quot;dataTables_paginatepagination&quot;&gt; &lt;ulid=&quot;pagination&quo...

css基础选择器和字体相关样式
今天学习了css基础选择器感觉自己又成长了1、内部样式表&lt;head&gt; &lt;styletype=&quot;text/CSS&quot;&gt; 选择器{属...

css样式标签
css中的选择器包括：1、ID选择器：#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}通配符选择器：*{属性1:属性值1;属性...

vue样式绑定
我们可以传给 v-bind:class 一个对象，以动态地切换 class：&lt;divv-bind:class=&quot;{active:isActive}&quot;&gt;&lt;/d...

jquery设置样式 !important
直接贴代码： $(&quot;choise&quot;).css(&quot;cssText&quot;, &quot;padding-bottom:&quot; + ($(&#39;[cm-text]&#39;)....

自定义滚动条样式。去掉与隐藏默认的滚动条
自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从...

form表单导致的样式问题
可以考虑一下是不是没有加!DOCTYPE标签的原因，不同的标签默认解析方式不一样，会造成布局不一样

编写jquery设置样式的插件
js:$.fn.extend({ &quot;mycss&quot;:function(json){ this.html(&quot;我自己的css方法&quot;); //把jquery对象(jque...
开心的度过每一天
博主信息
排名
77
文章
3
粉丝
0
评论
0
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术