用CSS3实现瀑布流布局

以前使用瀑布流都要用js,现在有了css3,可以轻松实现了。

掌握点:

1、column-count 把div中的文本分为多少列

2、column-width 规定列宽

3、column-gap 规定列间隙

4、break-inside: avoid; 避免元素内部断行并产生新列

注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。

实例:

复制代码




CSS3瀑布流


1 convallis timestamp

2 convallis timestamp 2 Donec a fermentum nisi.

3 Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.

4 Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue.

5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.



复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3瀑布流</title>
    <style>
    /*大层*/
    .container{width:80%;margin: 0 auto;}
    /*瀑布流层*/
    .waterfall{
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari 和 Chrome */
        column-count:4;
        -moz-column-gap: 1em;
      -webkit-column-gap: 1em;
      column-gap: 1em;
    }
    /*一个内容层*/
    .item{
      padding: 1em;
      margin: 0 0 1em 0;
      -moz-page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
     border: 1px solid #000;
    }
    .item img{
        width: 100%;
        margin-bottom:10px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="waterfall">
            <div class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=f3d4063328738bd4d02cba63c0e2ecb3/a2cc7cd98d1001e910616de1be0e7bec55e797fa.jpg">
                <p>1 convallis timestamp</p>
           </div>



            <div class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=03948ea9b4315c60579863bdecd8a076/8326cffc1e178a825a6b5d1cfe03738da977e833.jpg">
                <p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
           </div>




            <div class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=3d645bf2d0ca7bcb6976cf7ddf600006/6d81800a19d8bc3efe5f64fb858ba61ea8d345af.jpg">
                <p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula 
        faucibus suscipit. Suspendisse rutrum turpis quis nunc 
        convallis quis aliquam mauris suscipit.</p>
           </div>



            <div class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=fbc3501b0a087bf469e15fbb93ba3c49/bf096b63f6246b60ea65dd24e3f81a4c510fa273.jpg">
                <p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut 
        sagittis vitae, egestas at augue. </p>
           </div>

  <div class="item">
                <img src="https://imgsa.baidu.com/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=9fe1d71697ef76c6c4dff379fc7f969f/b03533fa828ba61ed2efcd184634970a304e5987.jpg">
                <p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
           </div>
        </div>
    </div>
</body>
</html>

html5 css3 实现瀑布流布局

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Consectetuer adipiscing elit.
  • Eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet
  • Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Vestibulum auctor dapibus neque.

.example {
-webkit-columns: 150px;
-moz-columns: 150px;
columns: 150px;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
}

body {
font-size: 12px;
font-family: ‘Georgia’, serif;
font-weight: 400;
line-height: 1.45;
color: #333;
background: #ecf0f1;
padding: 1em;
}

li {
background: white;
padding: 1em;
margin-bottom: 1.3em;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}

html 表格布局 简单dome


<style type="text/css">
/*表格*/
.table_vs .td1{background:#ded1e9;width: 30%; height: 45px;}
.table_vs .td2{background: #efe9ff;}
.table_vs .td3{background:#fee2b5; width: 35%;}
</style>

<table align="center" border="0" cellpadding="0" cellspacing="1" style="text-align: center;" width="100%" class="table_vs">
<thead>
<tr>
<td class="td1" style="background-color: #ee2a39; color:#fff; text-align:center; font-weight:bold; font-size:17px; padding-top:2%; padding-bottom:2%;">真爱医院</td>
<td class="td2" style="background-color: #ffdadd; color:#fff; font-weight:bold; font-size:17px; padding-top:2%; padding-bottom:2%">VS</td>
<td class="td3" style="background-color: #4c4c4c; color:#fff; text-align:center; font-weight:bold; font-size:17px; padding-top:2%; padding-bottom:2%;">其他医院</td>
</tr>
</thead>
<tbody>
<tr >
<td class="td1">
<p>必要的检查,大约在200元左右</p></td>
<td class="td2">
术前</td>
<td class="td3">
<p>200-500元</p></td>
</tr>

<tr >
<td class="td1">
<p>根据孕囊大小、手术方式不同,价格大约在600-2000元不等</p></td>
<td class="td2">
术中</td>
<td class="td3">
<p>1000-3000元</p></td>
</tr>

<tr >
<td class="td1">
<p>术后消炎药约百元左右 </p></td>
<td class="td2">
术后</td>
<td class="td3">
<p>1000-3000元</p></td>
</tr>

<tr >
<td class="td1">
<p>1000-2000元左右</p></td>
<td class="td2">
总计</td>
<td class="td3">
<p>1000-3000元</p></td>
</tr>
</tbody>
</table>

CSS解决段落缩进图片不缩进问题

段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进text-indent。
text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。

<style type="text/css">
p{
text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/
}
</style>

注:div标签不要忘记起始符。text-indent只对p或div标签有效,对br标签不生效,原因是br标签是换行标签不是分段标签。
用CSS实现段落首缩进两个字符,实现首行缩进的通用方法是加四个小角空格。
在style里定义如下缩进样式:.suojin{text-indent:2em}
在需要缩进的地方使用class=”suojin”即可,比如用一个div定义一整块段落首先缩进,
凡在div区域里,浏览器一碰上p语句(即一个新段的开始),就会执行.suojin所定义的缩进。
也可以在正文中使用嵌入式CSS样式来定义,下面举个实例(使用时请将尖括号改为小角尖括号):

<div style="text-indent:2em">
<p>段落一</p>
<p>段落二</p>
<p>段落三<p>
</div>

可加了这个缩进后当遇到正文内容中有独立段落的图片时,图片也会被缩进,这样会很影响排版。而且对于缩进后的图片大小也不好把握,对于自适应主题尤其如此。所以很多人因为搞不定图片这个问题最后放弃了使用段落首行缩进。
其实text-indent有个很奇怪的属性,就是其内部元素遇到float或者display: block后就不继承外部这个缩进的属性了,也就是说,只要给图片加上float或者display: block的 CSS 属性后,图片的缩进会自动失效。
但是为了排版的效果,一般都使用display:block;,这样图片就不会与文字并排,图片单独占一行。

烟花 canvas html html5

<html><head>
<meta charset=”UTF-8″>
<title>canvas basic – firework – happy new year!</title>
<style>
*{margin: 0px;padding: 0px;}
canvas {display: block;}
</style>
</head>

<body>
<canvas id=”canvas” width=”1920″ height=”933″></canvas>
<script src=”http://www.100sucai.com/js/jquery.js”></script>

<script src=”js/index.js”>
$(function() {
var canvas = $(‘#canvas’)[0];
canvas.width = $(window).width();
canvas.height = $(window).height();
var ctx = canvas.getContext(‘2d’);

// init
ctx.fillStyle = ‘#000’;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// objects
var listFire = [];
var listFirework = [];
var fireNumber = 10;
var center = { x: canvas.width / 2, y: canvas.height / 2 };
var range = 100;
for (var i = 0; i < fireNumber; i++) {
var fire = {
x: Math.random() * range / 2 – range / 4 + center.x,
y: Math.random() * range * 2 + canvas.height,
size: Math.random() + 0.5,
fill: ‘#fd1’,
vx: Math.random() – 0.5,
vy: -(Math.random() + 4),
ax: Math.random() * 0.02 – 0.01,
far: Math.random() * range + (center.y – range)
};
fire.base = {
x: fire.x,
y: fire.y,
vx: fire.vx
};
//
listFire.push(fire);
}

function randColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = ‘rgb($r, $g, $b)’;
color = color.replace(‘$r’, r);
color = color.replace(‘$g’, g);
color = color.replace(‘$b’, b);
return color;
}

(function loop() {
requestAnimationFrame(loop);
update();
draw();
})();

function update() {
for (var i = 0; i < listFire.length; i++) {
var fire = listFire[i];
//
if (fire.y <= fire.far) {
// case add firework
var color = randColor();
for (var i = 0; i < fireNumber * 5; i++) {
var firework = {
x: fire.x,
y: fire.y,
size: Math.random() + 1.5,
fill: color,
vx: Math.random() * 5 – 2.5,
vy: Math.random() * -5 + 1.5,
ay: 0.05,
alpha: 1,
life: Math.round(Math.random() * range / 2) + range / 2
};
firework.base = {
life: firework.life,
size: firework.size
};
listFirework.push(firework);
}
// reset
fire.y = fire.base.y;
fire.x = fire.base.x;
fire.vx = fire.base.vx;
fire.ax = Math.random() * 0.02 – 0.01;
}
//
fire.x += fire.vx;
fire.y += fire.vy;
fire.vx += fire.ax;
}

for (var i = listFirework.length – 1; i >= 0; i–) {
var firework = listFirework[i];
if (firework) {
firework.x += firework.vx;
firework.y += firework.vy;
firework.vy += firework.ay;
firework.alpha = firework.life / firework.base.life;
firework.size = firework.alpha * firework.base.size;
firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
//
firework.life–;
if (firework.life <= 0) {
listFirework.splice(i, 1);
}
}
}
}

function draw() {
// clear
ctx.globalCompositeOperation = ‘source-over’;
ctx.globalAlpha = 0.18;
ctx.fillStyle = ‘#000’;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// re-draw
ctx.globalCompositeOperation = ‘screen’;
ctx.globalAlpha = 1;
for (var i = 0; i < listFire.length; i++) {
var fire = listFire[i];
ctx.beginPath();
ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = fire.fill;
ctx.fill();
}

for (var i = 0; i < listFirework.length; i++) {
var firework = listFirework[i];
ctx.globalAlpha = firework.alpha;
ctx.beginPath();
ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = firework.fill;
ctx.fill();
}
}
})
</script>

</body></html>

jquery 回到顶部

<html>
<head>
<title></title>
</head>
<body>
<style type=”text/css”>
.go-top-trigger {
width: 52px;
height: 52px;
cursor: pointer;
z-index: 10;
right: 13px;
bottom: 132px;
position: fixed;
background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/n/nvn/static/news/imgs/go-top_b1fff84.png) no-repeat;
background-size: 52px auto;
-webkit-background-size: 52px auto;
background-position: right center;}
</style>
<div class=”go-top-trigger” style=”display:none;” ></div>

</body>
<script type=”text/javascript” src=”http://www.jq22.com/js/jquery.min.js”></script>
<script type=”text/javascript”>
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 300){
$(‘.go-top-trigger’).fadeIn(300);
}else{
$(‘.go-top-trigger’).fadeOut(300);
}
});
$(‘.go-top-trigger’).click(function(){
$(‘html,body’).animate({scrollTop: ‘0px’}, 800);});
});
</script>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
<div style=”height:100px;”>55555</div>
</html>

html首行缩进2字符,可以使用CSS属性中的【text-indent】进行设置。

html首行缩进2字符,可以使用CSS属性中的【text-indent】进行设置。

设置代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>缩进2字符</title>
<style type="text/css">
p{ text-indent:2em;}
</style>
</head>
<body>
<p>首行缩进2字符的案例展示如下。需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果。</p>
</body>
</html>

说明:

text-indent表示段落首行缩进,2em表示缩进2字符。

html 实现 消息咨询提示框 微信提示框 微信咨询按钮

需要引用jquery    图标


&lt;style&gt;
#ding {width:100%; max-width:640px; max-height:100px; position:fixed; top:0; z-index:999999; background-color:#000; background:transparent; color:#FFF; background-color:rgba(0,0,0,0.70);}
.wxin { width:10%; height:100%; overflow:hidden; padding-top:8px; padding-bottom:8px; padding-left:8px; padding-right:8px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #c7c5c5; }
.wxin img { width:100%; max-height:74px;}
.wenz { width:60%; height:100%; overflow:hidden; float:left; margin-left:8px; padding-top:2%;}
.wenz { color:#FFF; font-size:14px;}
.huifu { width:18%; height:100%; overflow:hidden; float:left; background-color:#3daf35; border-radius:6px; text-align:center; padding-top:4px; padding-bottom:4px; margin-top:15px;}
.huifu span { font-size:14px; color:#FFF;}
&lt;/style&gt;
&lt;div id="ding" style="display:none;"&gt;
&lt;div class="wxin"&gt;&lt;img src="/images/wx1.png"&gt;&lt;/div&gt;
&lt;div class="wenz"&gt;&lt;p&gt;真爱在线医生&lt;br&gt;您好,请问有什么可以帮您?&lt;/p&gt;&lt;/div&gt;
&lt;div class="huifu"&gt;&lt;a href="javascript:void(0)" onClick="openZoosUrl();LR_HideInvite();return false;"&gt;&lt;span&gt;回复&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
$(function () {
//绑定滚动条事件
//绑定滚动条事件
$(window).bind("scroll", function () {
var sTop = $(window).scrollTop();
var sTop = parseInt(sTop);
if (sTop &gt;= 10) {
if (!$("#ding").is(":visible")) {
try {
$("#ding").slideDown();
} catch (e) {
$("#ding").show();
}
}
}
else {
if ($("#ding").is(":visible")) {
try {
$("#ding").slideUp();
} catch (e) {
$("#ding").hide();
}
}
}
});
})
&lt;/script&gt;

html css 实现网页遮罩层

<html>
<head>
<title></title>
<style type=”text/css”>
.layershade{
background-color: rgba(0,0,0,.7);
pointer-events: auto;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;}
</style>
</head>
<body>
<div class=”layershade”></div>
</body>
</html>