標籤: HTML

寬屏圖片居中的兩種方法

現在有些網站比較流行用100%寬度的圖片（div）佔滿屏幕，來營造出比較整體或是大氣的感覺。如果直接放一張大圖進去並禁止縮放，會發現瀏覽器是從圖片左側開始展示圖片，而我們想要的是主要顯示中間重要部分。有兩種方法可以做到，一種是利用CSS的背景居中，另一種是用js調整圖片的位置。Talking is cheap, here comes the code:

<style>
.wideBanner {background: rgba(0, 0, 0, 0) url("../images/bg.jpg") no-repeat scroll center center;height: 19px;}
</style>
<div id="wideBanner"></div>

<script type="text/javascript"> 
    $(document).ready(function(){
        var offset=($(window).width()-$("#wideBanner").css("width"))/2;
        $("#wideBanner").css("left",offset);
});
</script>
<div id="wideBanner"></div>

未知寬度div居中https://github.com/simaQ/cssfun/issues/3

     .container{width:500px;height:80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;}
     .center{display:inline-block;border:2px solid #fff;}
     .center{_display:inline;} /*针对ie6 hack*/
     .center a{float:left;border:1px solid #fff;padding:5px 10px;margin:10px;color:#fff;text-decoration:none;}

     <div class="container">
     <div class="center"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
     <div style="clear:both"></div></div>

本文更新於 2015/12/11。

標籤 HTML

程序

Js AES加解密

文章作者作者: 42
文章發佈日期 2014/09/25
在〈Js AES加解密〉中尚無留言

密码：
原文：

密文：

加密js用的是Jeff.Mott.OR的crypto-js。

本文更新於 2016/04/22。

標籤 HTML

网站

PURE CSS3 3D CUBE

文章作者作者: 42
文章發佈日期 2014/09/19
在〈PURE CSS3 3D CUBE〉中尚無留言

上面例子運行效率很差，在低版本的火狐中竟不能運行，所以如果真要做CSS 3D Cube是不推薦的。性能更佳的案例請參考：Create a CSS Cube。

本文更新於 2016/10/20。

標籤 HTML

网站

sliderkit自适应大小

文章作者作者: 42
文章發佈日期 2014/09/07
在〈sliderkit自适应大小〉中尚無留言

其实这个sliderkit之前介绍过，只是那篇没有自适应的功能。用jquery实现元素的自适应，其实很简单。要实现这个slider自适应首先要设置这个slider属于photoslider-mini类自适应尺寸，然后让slider中的图片自适应尺寸。通过如下代码：

$(document).ready(function(){
    //slider图片尺寸是 960px*340px， container是slider的父容器
    var sliderWidth=$("div.container").width()>960 ? 960 : $("div.container").width();
    $("div.photoslider-mini").css({"width":sliderWidth,"height":sliderWidth*340/960});
    //如果使用了bootstrap的话，只要给img添加.img-responsive就可以了，效果更好
    $(".sliderkit-panel > img").css({"width":sliderWidth,"height":sliderWidth*340/960});
});

效果：

最终失败了，估计是和sliderkit的原理有关。另外还了解到要调用WordPress的jquery要像下面这样，因为它设置了jQuery.noConflict();

    jQuery(document).ready(function($) {
        //显示jquery版本号
        alert($.fn.jquery);
    });

標籤 HTML

其它

HTML5 Location

文章作者作者: 42
文章發佈日期 2013/11/13
在〈HTML5 Location〉中尚無留言

做了个记录位置的小玩意儿，带登录一共六个文件：

login.php 登录页
checklogin.php 登录验证页
loc.php 获取地理位置页
loc.js ajax提交数据给loc-in.php
loc-in.php 将数据写入数据库
loc-out10.php 将数据从数据库调出

登录之做了简单的实现，帐号密码就保存在checklogin.php中，靠session判断是否登录。所获取的地理位置无论是PC上浏览器基于HTML5的还是手机上基于GPS的，都是真实地理位置，而非火星地理位置。所以在正版地图中均存在西北方向的偏移，用卫星图看就正常了。关于调出数据库后的数据处理可以参考《html5地理位置示例》，我这里也没写。

源码：loc.7z

后来在使用中发现很有两个很必要功能没有实现：离线保存数据并在有网络时写入数据库、修改数据库内容。不知道有没有空完善一下。

標籤 HTML, 建站

网站

注释

文章作者作者: 42
文章發佈日期 2013/09/21
在〈注释〉中尚無留言

HTML注释：

在HTML中，使用标签进行注释。

<html>
<body>
<!--这是一段注释。注释不会在浏览器中显示。-->
</body>
</html>

CSS注释：

在CSS中，使用/*...*/进行注释。

/*
Theme Name:     AttorneyChild
Description:    Child theme for the Attorney theme 
Author:         Zengl
Author URI:     http: //ft.wupo.info/about/
Template:       attorney
Version:        0.1.0
*/

閱讀全文

本文更新於 2014/10/09。

標籤 HTML

网站

SkyDrive外链生成器

文章作者作者: 42
文章發佈日期 2013/07/19
在〈SkyDrive外链生成器〉中有 2 則留言

功能

从输入的Skydrive的（MP3歌曲等类型的文件）共享地址，生成对应的外链地址。文件名随意取，即生成的链接的后面？后是随意的。

本来还想做个复制粘的按钮方便使用呢，但是搜了下JavaScript单独做不到，就算了。其实全选后拖放也很方便啊。

参考地址：http://www.crifan.com/files/tool/html/genSkydriveExtLink.html‎

標籤 HTML, 建站