<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> <style>/*三角形*//* div{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid;} *//*带角框*/div{width:100px;height:100px;border:2px solid;}div::before{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;bord...
先来看张图吧聪明的你应该已经看出来了，border的边框是由四个三角形组成的，接下来我们就使用这一原理来实现等边三角形吧~1.首先创建一个带边框的div<div class="triangle"></div> <style>.triangle {width: 50px;height: 50px;border-width: 50px;border-style: solid;border-color: red green blue brown;</style>2.将div的宽高设置为0 <style>.triangle {width: 0;height: 0;border-width: 50px;border-style: solid;border-...
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>图片投影效果</title><style>.box {position: absolute;padding: 2px;background: white;-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);box-shadow: 1px 2px 4px rgba(0,0,0,.5);}.box img {display:block;width:200px;height:220px;border: 1px inset #8a4419;background:#eee;}.box:after {content: ‘‘;-webkit-box-...
今天要给大家介绍的是css3按钮，里面包含四种特效的动画，如下图： 在线预览 下载源码实现html代码：<div align="center" class="fond"><br /><div class="bouton_1"><a href="#123"><img src="caddie.png"/><span class="texteduboutton_1">Ajouter au panier</span></a></div><br /> <br /><div class="bouton_2"><a href="#123"><img src="caddie.png"/><span class="texteduboutton_2">Ajouter au panier</span></a></div><...
网上有各种用CSS3画图标，画漫画的代码，实在是有点吊！如果能为自己的网站也绘制一套CSS3图标，那么就省去了用小图片的力气。虽然说各大浏览器对CSS3的支持性还不尽相同，但是大势所趋，写写更健康。首先，我们要做到使用简单，简单到给元素加个类就能使用图标，然后我们还要支持可定制，比如颜色，大小。看下面的代码：<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>...
水平大家都知道，一般固定宽度给个margin:0 auto；就可以了。下面实现水平垂直都居中HTML<div class="parent"></div>csshtml,body{width: 100%;height: 100%; } .parent{width: 750px;height: 400px;background: orange;/*水平居中*/margin: 0 auto;position: relative;top: 50%;margin-top: -200px;/*高度的一半*/ }都居中了。也可以把margin-top:-200;换为CSS3新属性:transform:translateY(-50%);原文：http://www.cnblogs.com/-...
我之前写九宫格自适应布局的时候，每个格子是使用媒体查询器（@media）或者js动态设置css，根据不同的手机屏幕宽度，适配不同手机，但是这样有个很大的缺点，那就是移动端的屏幕尺寸太多了，就得写很多代码，才能实现我们想要的效果。今天突发奇想，使用了纯css实现了我想要的效果，下面就和大家来分享，上代码;<!DOCTYPE html> <html><head><meta charset="utf-8"><title>九宫格</title><meta name="viewport" content="maximum-s...
1 <body>2 <ul id="list">3 <li>11</li>4 <li></li>5 <li></li>6 <li></li>7 <li></li>8 <li></li>9 <li></li> 10 <li></li> 11 <li id="last" class="last"></li> 12 </ul> 13 <script> 14var li=document.getElementsByTagName(‘li‘); 15for(var i=0;i<li.length;i++){ 16 li[i].addEventListener(‘mouseover‘,function () { 17this.style.background=‘red‘; 18 }); 1...
要怎么实现下面的效果.只要在列表项之间避免换行就行了,所以要把<li>转换为内联. HTML和CSS代码如下: 复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Lists as navigation</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel...
html结构：1 <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd"> 2 <img src="default.jpg" width="400" height="300"/> 3 </div>实现img位于外层div的居中显示，网上有很多在img外层嵌各式各样的span、div、li等等，以便于使用 text-align来进行居中，不推荐嵌套多层的方式。方法一（推荐）：1.demo{ 2 display:table-cell; text-align:center; vertical-align:middle; 3} 4.demo img{ 5 ...
分享一款基于jQuery+CSS3实现人物跳动特效。这是一款类似gif图片效果的CSS3动画特效代码。效果图如下：在线预览 源码下载实现的代码。html代码：<div class="charector-wrap " id="js_wrap"><div class="charector"></div></div><a class="run-xfast" href="#none">最快</a><a class="run-fast" href="#none">快</a><a class="run-normal" href="#none">正常</a><a class="run-slow" href="#none">慢</a><button class="btn-paus...
以前使用瀑布流都要用js，现在有了css3，可以轻松实现了。掌握点：1、column-count 把div中的文本分为多少列2、column-width 规定列宽3、column-gap 规定列间隙4、break-inside: avoid; 避免元素内部断行并产生新列注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。 实例： 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>CSS3瀑布流</title> 6<style> 7/*大层*/ 8 .con...
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。)方法一这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。<divid="...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>叮咚网登录</title><style type="text/css">.main{width:100%;height:920px;border:1px solid #000;text-decoration: none;}.top{width:100%;height:52px;border:1px solid #000;}.downMenu{width:100%;height:30px;font:normal normal 20px "宋体";color:#fff;background-color: #000000; }#search{margin-left:520px;}a{text-decoration: none;}#img1{margin-left:330...
<div id="demo"></div> #demo{ width: 0px;height: 0px; border-color: #0FF #00F #F00 #933; border-style: solid; border-width: 50px; }因为元素宽度、高度都为0，只有4px的边框transparent;将其他颜色置为透明，则得到三角形，如图所示 原文：http://www.cnblogs.com/yanran/p/5013684.html