Google [站内搜索]

分类: HTML/CSS预览模式: 普通 | 列表

【前端攻略】:玩转图片Base64编码[转]

引言

图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 编码。标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的 base64 编码,为什么我们要用它,我们如何使用并且方便的使用它,并让你懂得如何去在前端的实际工作中运用它。

什么是 base64 编码?

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 605

CSS display:table使用示例



<style type="text/css">
.table {display:table; text-align:center;}
.row {display:table-row;}

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 818

HTML5 <audio>实现播放列表示例



<audio id="audio1" controls="controls"></audio>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 770

img和input顶部对不齐解决方法

页面中img和input顶部总对不齐,预览效果如下:



img和input设置vertical-align:middle即可解决:

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5850

HTML页面基本样式(CSS)





<style type="text/css">

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4149

div固定在页面底部不随滚动条移动示例

<!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>
<style type="text/css">
body{margin:0px;padding:0px;}

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 7995

css设置table边框1px并居中显示

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css设置table边框1px并居中显示-Mzwu.COM</title>

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4545

找出页面没使用的css并移除

CSS Usage是Firefox的扩展(依赖于Firebug),用它可以扫描出页面哪些css有使用,哪些没有使用,并支持导出干净的css,这样非常方便找出页面没使用的css并移除:

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3454