Google [站内搜索]
分类: HTML/CSS预览模式: 普通 | 列表

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

编辑:dnawo  日期:2016-10-22

引言

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

什么是 base64 编码?

查看更多...

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

CSS display:table使用示例

编辑:dnawo  日期:2016-10-15



复制内容到剪贴板程序代码 程序代码
<style type="text/css">
.table {display:table; text-align:center;}
.row {display:table-row;}

查看更多...

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

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

编辑:dnawo  日期:2016-10-13



复制内容到剪贴板程序代码 程序代码
<audio id="audio1" controls="controls"></audio><br/>
<input name="btnPlay" id="btnPlay" type="button" value="播  放">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

查看更多...

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

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

编辑:dnawo  日期:2014-06-06

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



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

查看更多...

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

HTML页面基本样式(CSS)

编辑:dnawo  日期:2014-03-31





复制内容到剪贴板程序代码 程序代码
<style type="text/css">

查看更多...

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

DIV固定浮动在网页顶端或底部代码

编辑:dnawo  日期:2014-03-12

1、DIV固定浮动在网页顶端代码

复制内容到剪贴板程序代码 程序代码
<div style="position:fixed; top:0; z-index:100">top</div>

说明：要使div里的文本居中，增加“width:100%; text-align:center;”即可（下同）。

查看更多...

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

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

编辑:dnawo  日期:2013-07-29

复制内容到剪贴板程序代码 程序代码
<!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 | 查看次数: 7055

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

编辑:dnawo  日期:2013-05-08

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

查看更多...

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

css+ul实现多行多列显示内容示例

编辑:dnawo  日期:2013-02-27

复制内容到剪贴板程序代码 程序代码
<style type="text/css">
    * {margin: 0px; padding:0px;}
    ul {list-style: none; width:200px;}
    li {float: left;}        
    .w50 {width: 50px;}

查看更多...

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

HTML4和HTML5之间的10个主要不同

编辑:dnawo  日期:2011-11-17

HTML5是最新的HTML标准，或迟或早，所有的web程序员都会发现需要使用到这个最新的标准，而且，很多人都会感觉到，重新开发一个HTML5的网站，要比把一个网站从HTML4迁移到HTML5上容易的多，这是因为这两个版本之间有很大不同之处。

事实上，HTML5并没有对HTML4做什么重大的修改，它们很多东西都是相似的。

可是，其中有一些很重要的区别你需要知道。下面列出的就是一些HTML4和HTML5之间主要的不同之处(并不是全部，全部列出来是不可能的)：

查看更多...

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