@font-face语法规则@font-face {font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}说明：YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；format：此值指...
1，向上的三角 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>border-radius</title> 6 <style> 7 div{ 8 width:0; 9 height:0;10 border-left:20px solid transparent;11 border-right:20px solid transparent;12 border-bottom:20px solid #ccc;13 }14 </style>15 </head>16 <body>17 <div>18 </div>19 </body>20 </html>2，向下的三角 1 <!doctype html> 2 <html> 3 <head>...
实现功能：隐藏浏览器滚动条，且不影响鼠标滚轮滚动页面适用：以大图片为背景或产品介绍页面（如果和视差滚动一起使用应该会效果更佳）所需技术：非常简单的css和js首先来看下对比效果（图1 => 图2，两者都能通过鼠标滚轮进行内容的滚动）（图1）（图2）可以明显的看到：图2的正文宽度明显比图1的宽度小，并发生了向右的偏移。这就是无滚动条页面的基本原理：移动(设置)正文的偏移量（margin/padding），使正文的滚动条出现在父节点...
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>账号注册</title><style>select {width: 100px;padding: 5px;font-size:16px;}</style> </head> <body> <!--要实现的功能: 账号 密码 性别 <爱好> 地址出生年月 头像 相册 邮箱 电话 肤色 音量 个人简介--> <form action="demo01.html"method="post"> <!--账号开始--><p>账号:<input type="text"name="userCode"required placeholder="请输入账号:...
题目与上面的两篇文章有所重复，但是内容与上两篇上有所区别，本文中，实现的图片集展示的效果为：1、详细图和缩略图的同步展示；2、图片的自动播放；3、显示图片的缩影图的焦点显示与别的图片的遮盖显示；4、鼠标移动至详图显示图片控制控件。具体效果图如下：初始化或者第一张状态中间状态最后一张状态这种方式的图片展示一般用的图片新闻或者类似的东西中比较常见，例如百度首页的新闻就是用类似的方式来展示的，如下：百度首页...
复制代码代码如下:<!doctype html> <html> <head> <meta charset="utf-8"> <title>轻松实现：垂直居中文字图片</title> <!-- START Plugin CSS --> <style type="text/css"> html{ font-size:12px; } .control{ width:600px; border:1px solid #000; padding:10px; margin:0 auto; } .main_header{ border:1px solid blue; height:100px } .main_body{ border:1px solid red; height:500px } .main_footer{ border:1px solid #ccc;...
http://blog.csdn.net/laokdidiao/article/details/51189476代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS3实现基本图形</title><style> #Circle{ width:100px; height:100px; float: left; background: #6fee1d; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;} #Oval { width: 200px; height: 100px; float: left; background: #e9880c; -webkit-border-rad...
之前为大家分享了推荐10款纯css3实现的实用按钮，今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，效果非常好看，一起看下效果图：在线预览 源码下载实现的代码。html代码：<div class="container"><a target="_blank" class="btn green" href="http://www.w2bc.com/"><span>Nominate Yourself</span></a><a target="_blank" class="btn orange" href="http://www.w2bc.com...
Webkit引擎定义了-webkit-box-reflect属性，该属性能够实现投影效果，具体语法如下：-webkit-box-reflect: <direction> <offset> <mask-box-image>属性取值说明如下：<direction>：定义反射方向，取指包括above、below、left和right。<offset>：定义反射偏移的距离，取指包括数值或者百分比，其中百分比是根据对象的尺寸进行确定，如果省略该参数值，则默认为0。<mask-box-image>：定义遮罩图像，该图像将覆盖投影区域。如果省略该...
本篇文章由：http://xinpure.com/css3-implementations-of-loading-an-animation-effect/Loading 的菊花图形组合的不太好，基本上实现这个功能了动画解析这个动画用到的 CSS3 特性:transform 主要使用 transform 属性的 rotate，将线条组合成 Loading 图形 (也就是常见的菊花图形)animation 实现将线条颜色由浅到深，再由深到浅来回变换的动画，通过 animation-delay 属性来使颜色的变换产生过渡的效果，从而达到类似于 Loading ...
方法一：cursor: not-allowed;document.getElementById(‘id‘).style.cursor="not-allowed";方法二：pointer-events:none; 原文：https://www.cnblogs.com/art-poet/p/12651768.html
html代码是这样的 <div class="arrow-up"><!--向上的三角--> </div> <div class="arrow-down"><!--向下的三角--> </div> <div class="arrow-left"><!--向左的三角--> </div> <div class="arrow-right"><!--向右的三角--> </div>下面用CSS3分别实现向上、下、左、右的三角形 /*箭头向上*/ .arrow-up {width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:30px solid #fff; }/*...
css实现运动光环的小Demo 效果图:实现代码:代码分析: Demo用到知识点: 1.CSS的常用选择器,transform属性居中 2.css的动画效果,动画延迟, 3.filer:模糊 HTML结构:<!DOCTYPE html> <html><head><meta charset="utf-8"><title>圆形光环</title><link rel="stylesheet" href="css/style02.css" /></head><body><!-- <div class="aura"></div> --><ul class="aura"><li></li><li></li><li></li></ul><div class="box"></div></body> </h...
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"/> 5<title>CSS实现div居中</title> 6<style> 7/*外层div居中*/ 8 #main { 9 position: absolute;/*极为重要*/10 background-color: blue;11 width:400px;12 height:200px;13 left:50%;14 top:50%;15 margin-left:-200px;16 margin-top:-100px;17 border:1px solid #00F;18}1920 #content {21 ...
1、行内元素居中 line-height（须知高度）.box{height:300px; } p{line-height:300px; } 2、table居中 display:table-cell;vertical-align:middle;.box{display:table; } p{display: table-cell;vertical-align: middle; } 3、绝对定位，top+margin-top:-xxpx（须知高度）.box{position:relative; } p{position:absolute;top:50%;margin-top:-50px; width:100px;height:100px; }4、绝对定位 top+tranform.box{p...