因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：float:left 这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高。display:inline-block 即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie*display:inline; *zoom:1;<...
效果图如下（鼠标放置显示二级导航）：先使用浮动和盒模型完成页面布局，再使用定位使二级导航不占据空间，不影响下面轮播图的布局，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>二级导航</title> <style> *{ margin: 0; padding: 0; } a{ t...
1.box-shadow:0 0 0 1px #feaa9e,0 0 0 5px #fd696f 2.border:1px solid #feaa9e; outline:5px solid #fd696f; 原文：https://www.cnblogs.com/huanghuali/p/11450995.html
@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; }/*...