css运用
青菜馒头
这个作者很懒,什么都没留下…
展开
-
CSS和JS链接地址中带的问号是做什么的
细心的同学经常会发现一些新东西,学习了就会使之进步。如果平时不爱自己多钻研,只等着别人喂现成的,只会被时代淘汰。所以,不放过每一次学习的机会是非常重要的!这是我最近的工作体会,拿来和大家分享,也由这个感触引到下面的问题。 有同学问我,经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用,它的作用有两个:1、转载 2016-04-27 14:08:55 · 1003 阅读 · 0 评论 -
html段落开头空两格---css技巧text-indent
<p style="text-indent:2em;">你的文章内容!</p>实例:<div class="context"><p>第一段</p><p> 第二段</p></div>.context p{ text-align: justify; text-justify: inter-ideograph; text-indent: 2em;}其中text-align:justify; te原创 2016-10-26 13:43:19 · 33777 阅读 · 1 评论 -
手机页面点击电话进入拨号界面---a链接的tel属性
a标签属性href中的tel及mailto用处<a href=”tel:1234567898″>1234567898</a>指定电话的超链接<a href=”mailto:123456@163.com”>邮箱</a>指定邮箱的超链接原创 2016-10-25 18:11:12 · 9111 阅读 · 0 评论 -
jquery轮播特效(左右轮播)
html代码<div id="wrapper"><!-- 最外层部分 --> <div id="banner"><!-- 轮播部分 --> <ul class="imgList"><!-- 图片部分 --> <li><a href="#"><img src="http://i.mmcdn.cn/simba/img/TB1cQb6IpXXXXX3XVXXSutbFX原创 2016-09-07 17:13:37 · 631 阅读 · 0 评论 -
鼠标悬停,图片旋转360°特效代码
html代码<div class="picxz"></div>css代码* { margin:0; padding:0; list-style:none;}body { background:#1F1F1F;}.picxz { width: 220px; height: 220px; margin: 0 auto; backgr原创 2016-09-07 16:33:44 · 1184 阅读 · 0 评论 -
CSS3 动画效果整理
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及animation。**transform** rotate 设置元素顺时针旋转的角度,用法是: transform: rotate(x); 参数x必须是以deg结尾的角度数或0,可为负数表示反向。转载 2016-09-20 15:42:59 · 482 阅读 · 0 评论 -
css3动画垂直翻转180度
html代码<ul class="flatflipbuttons"> <li><a href="http://www.w2bc.com" title="Search"><span class="icon-search"></span> </a><b>Search</b></li> <li><a href="http://www.转载 2016-09-13 15:51:27 · 13581 阅读 · 0 评论 -
简单的二级导航页面(纯css实现,运用display属性hover)
html代码<div class="menu"> <ul> <li><a href="#" class="bccolor">首页</a></li> <li><a href="#">关于我们</a> <ul> <li><a href="#">公司简介</a></li> <li><a href="#">人才招原创 2016-09-14 11:35:09 · 13667 阅读 · 0 评论 -
CSS3饼状图loading旋转动画
CSS代码:.wrap { width: 64px; height: 64px; position: relative; }.outer { position: absolute; width: 100%; height: 100%; background: url(icon-spin-s.png) no-repeat; animation: spin 800ms infinite linear;转载 2016-09-13 15:30:29 · 1199 阅读 · 0 评论 -
css3动画的使用(@keyframes)
一、CSS3 @keyframes 规则 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 目前支持的浏览如下:opera,firefox,所有webkit内核浏览器(safair,chrome),IE10+。废话不多说,先看下在各个浏览器上的实现:@keyframes myfirst{from {bac原创 2016-09-13 10:51:50 · 1873 阅读 · 0 评论 -
css3动画如何在动作结束时保持该状态不变
animation-fill-mode : none | forwards | backwards | both;属性值值 描述 none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。 backwards 动画将应用在 animation原创 2016-09-13 10:46:10 · 23621 阅读 · 0 评论 -
CSS阴影效果(Box-shadow)介绍与用法
使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧,通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法,然后进一步了解::before和::after伪元素的用法。基本用法 <div class="box11 shadow"></div>.box11 { width: 300px; height: 100px;转载 2016-09-13 10:39:24 · 652 阅读 · 0 评论 -
文字下划线效果(标题hover效果)
文字下划线效果(标题hover效果) <!-- html结构 --><div><a href="javascript:void(0);" class="demo1">自己实现的hover效果</a></div>/* css样式 */ .demo1{ position: relative; text-decoration: non转载 2016-09-12 15:58:58 · 5950 阅读 · 0 评论 -
css盒模解析
ie中:margin和padding是包含在宽度中的,及 盒子宽度=文字宽度+margin宽度+padding宽度其他浏览器:margin和padding不算在宽度中,即 总宽度=盒子宽度+margin宽度+padding宽度; 例如: width:300px;margin:10px;padding:30px;总的就是340px转换为ie中盒模的方法:使用box-sizing: border-原创 2016-10-20 09:37:07 · 300 阅读 · 0 评论