网页组件制作之手风琴效果

发表于 2016-11-07 | 分类于 coding | | 阅读次数

在该笔记中将学到列表展示中手风琴效果的方法与展示效果

效果介绍

手风琴效果的显示效果是，在多项列表进行展示的时候，当鼠标悬停在其中一项上，对该项的显示效果进行凸显：比如字体放大，图片放大，亮度变高等。

显示效果如下：

当鼠标悬停在其他的项目时：

阅读全文 »

网页组件制作之表单美化

发表于 2016-11-02 | 分类于 coding | | 阅读次数

在该笔记中将学到一些常用的表单美化的方法与展示效果

单选按钮美化

在表单中，原本单选按钮的实现方法是 form + input( type=”radio”) + lable 来实现的，这样在点击该单选按钮的时候，该元素自带的 CSS 动作就可以添加到按钮上。

但是，如果需要对单选按钮被点击的效果进行美化，比如去掉单选按钮之前的小圆点，更好的方法是放弃使用 input(type=”radio”)，而是使用 dl + dt + dd(或者使用 ul + li 和 ol + li ) 来实现。这样更加方便添加需要的 CSS 效果。

<html>
    <head>
        <title>单选按钮的美化</title>
        <meta charset="utf-8">
        <style type="text/css">
            * {
                margin:0;
                padding:0;
            }
            body{
                font-size: 12px;
            }
            .type {
                width: 400px;
                height: 32px;
                margin: 30px auto;
                border: 1px solid #DFDFDF;
            }
            .type dl{
                margin-left: 15px;
                height: 32px;
                line-height: 32px;
            }
            .type dd{
                float: left;
                margin: 0 10px 0 8px;
            }
            .type dt{
                float: left;
            }
            .type dd a{
                text-decoration: none;
                color: black;
                margin-left: 5px;
            }
            .type dd a:hover{
                color: #CC0000;
                text-decoration: underline;
            }
            .type dd a:hover i,.type .selected i{
                background-position:-1px -108px;
            }
            .type dd i{
                display: inline-block;
                width: 12px;
                height: 10px;
                float: left;
                margin-top: 10px;
                border: 1px solid #DFDFDF;
                background: url("http://ofjjubwp5.bkt.clouddn.com/image/png/img29.png") no-repeat;
                background-position: 0 -7px;
            }
        </style>
    </head>
    <body>
        <div class="type">
            <!--<form action="#" method="POST" name="formType">
                <label>配送类型：</label>
                <input type="radio" name="type" checked><label>全部</label>
                <input type="radio" name="type"><label>京东配送</label>
                <input type="radio" name="type"><label>第三方配送</label>
            </form>-->
            <dl id="sendType">
                <dt >配送类型：</dt>
                <dd class="selected" onclick="show(0)"><a href="#"><i></i>全部</a></dd>
                <dd onclick="show(1)"><a href="#"><i></i>京东配送</a></dd>
                <dd onclick="show(2)"><a href="#"><i></i>第三方配送</a></dd>
            </dl>
        </div>
        <script>
        function show(index){
            var dd = document.getElementById("sendType").getElementsByTagName("dd"),
            len, i;
            for(i=0, len=dd.length; i<len; i++){
                if(i === index) {
                    dd[i].className = "selected";
                } else{
                    dd[i].className = null;
                }
            }
        }
    </script>
    </body>
</html>

显示效果为：

阅读全文 »

网页组件制作之回到顶部

发表于 2016-10-31 | 分类于 coding | | 阅读次数

在该笔记中将学到一些常用的回到顶部的制作方法与展示效果

可以使用锚链接实现回到顶部，使用锚链接进行跳转到页面的位置上的方法有一下优缺点：

优点：简单快速，没有兼容性问题
缺点：视觉上不够直观，直接就跳转到指定位置，用户视觉体验不够好

主要知识点：

使用 document.documentElement.scrollTop 来读写滚动条数值
使用 window.onscroll 在滚动的时候触发事件
使用 setInterval() 函数来决定页面滚动的快慢

使用 btn.onclick，在点击按钮的时候，配合 setInterval 事件，使页面回到顶部，并且可以控制速度来使回去的速度由快变慢。在 window.onscroll 事件中监听用户在回到顶部的动作中是否滑动了滚轮，如果滑动了滚轮，则停止用户回到顶部的动作。

显示效果如下，可以根据需要修改 CSS 样式：

阅读全文 »

网页组件制作之分页码

发表于 2016-10-31 | 分类于 coding | | 阅读次数

网页组件制作笔记之分页码

在该笔记中将学到一些常用的分页码的制作方法与展示效果

使用 div + a 来制作分页码

在网页中添加 < 和 > 等特殊符号的时候，不能直接在 HTML 代码里写 < 或 >，而是要通过 html 实体标签来代替该符号，如 < 的实体标签是 < 而 > 的实体标签是 >

<html>
    <head>
        <title>Page 展示</title>
        <meta charset="utf-8">
        <style type="text/css">
            .page-normal .page-prev{
                padding:5px 7px;
                border:1px solid #ffe3c6;
                color:#ffe3c6;
            }
            .page-normal .page-curr{
                border:1px solid #ff6500;
                background-color:#ffbe94;
                color:#ff6500;
                padding:5px 7px;
            }
            .page-normal a{
                text-decoration:none;
                color:#ff6500;
                border:1px solid #ff9600;
                padding:5px 7px;
            }
            .page-normal a:hover{
                border:1px solid #ff6500;
                background-color:#ffbe94;
            }
            .page-normal{
                color:#ff6500;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class="page-normal">
            <span class="page-prev">&lt;</span>
            <span class="page-curr">1</span>
            <a href="">2</a>
            <a href="">3</a>
            <a href="">4</a>
            <a href="">5</a>
            ...
            <a href="">99</a>
            <a href="">100</a>
            <a href="">&gt;</a>
        </div>
    </body>
</html>

显示效果如下：

网页组件制作之字体图标

发表于 2016-10-31 | 分类于 coding | | 阅读次数

在该笔记中将学到一些常用的网页字体图标的制作方法与展示效果

小图标(icon)的制作

使用 CSS Sprite 在网页中画 Icon 小图标

CSS Sprite：把网页中零星的背景图片整合到一张图片文件中，再利用 CSS 的背景图片定位到要显示的位置，因此也叫”图片拼合“技术，这样做的好处是可以减少文件的体积和服务器的请求次数，提高效率。

非常重要的一点是，背景图片中小图标的排列一定要有规律，这样在添加和修改背景图片的时候，方便计算得到 background-position 的坐标值

要使用的知识点：

background-image(整合好的背景图片)
background-position(用来定位每个小图标的位置)

同样，可以在鼠标放在每个 li 上的时候，添加 onmouseover 和 onmouseout 动作，来修改背景的颜色和背景的图片。

<!DOCTYPE html>
<html>
    <head>
        <title>icon 案例演示</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            ul{
                list-style:none;
            }
            .sprite li{
                width:110px;
                height:30px;
                background-color: #F06;
                margin-top:1px; 
                list-style:none;
            }
            .sprite li a{
                text-decoration:none;
                line-height:30px;
                font-size:14px;
                color:white;
                font-weight:bold;
            }
            .i-icon{
                height:17px;
                width:17px;
                display:block;
                background-image:url("http://ofjjubwp5.bkt.clouddn.com/image/png/icon-sprite.png");
                float:left;
                margin:6px 6px;
            }
        </style>
    </head>
    <body>
        <ul class="sprite">
            <li><i class="i-icon" style="background-position: -16px -127px"></i><a href="">菜单选项1</a></li>
            <li><i class="i-icon" style="background-position: -33px -127px"></i><a href="">菜单选项2</a></li>
            <li><i class="i-icon" style="background-position: -50px -128px"></i><a href="">菜单选项3</a></li>
            <li><i class="i-icon" style="background-position: -67px -128px"></i><a href="">菜单选项4</a></li>
            <li><i class="i-icon" style="background-position: -84px -128px"></i><a href="">菜单选项5</a></li>
            <li><i class="i-icon" style="background-position: -101px -128px"></i><a href="">菜单选项6</a></li>
            <li><i class="i-icon" style="background-position: -118px -128px"></i><a href="">菜单选项7</a></li>
            <li><i class="i-icon" style="background-position: -135px -128px"></i><a href="">菜单选项8</a></li>
            <li><i class="i-icon" style="background-position: -153px -128px"></i><a href="">菜单选项9</a></li>
            <li><i class="i-icon" style="background-position: -0px -128px"></i><a href="">菜单选项10</a></li>
        </ul>
    </body>
</html>

显示效果如下：

阅读全文 »

网页组件制作之导航菜单

发表于 2016-10-31 | 分类于 coding | | 阅读次数

在该笔记中将学到一些常用的网页导航菜单的制作方法与展示效果

导航菜单的制作

导航菜单的特点

门户类网站的导航特点：导航在上方平铺展示(因为不需要展开)

商城类网站的导航特点：竖向列表，横向伸缩

垂直菜单的制作

用无序列表构建垂直菜单

因为在点击菜单的时候，要实现跳转功能，所以在 li 里面包裹 a 标签来实现跳转。同时，li 是块级元素，可以设置 width，height 属性，但是 a 不是块级元素无法设置这些属性，我们可以使用 display:block 将 a 设置为块元素，从而将 li 里面的属性都放在 a 之中，不会影响显示效果。

使用了 a:hover 设置了鼠标进入的样式：

<html>
    <head>
        <title>导航菜单制作</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            ul {
                list-style:none;
                width:none;
                font-size:14px;
            }
            a{
                text-decoration:none;
                display:block;
                height:30px;
                line-height:30px;
                background-color:#ccc;
                width:100px;
                margin-top:1px;
                text-indent:10px;
            }
            a:hover{
                background-color:#f60;
                color:#fff;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="">首  页</a></li>
            <li><a href="">新闻快讯</a></li>
            <li><a href="">
            产品展示</a></li>
            <li><a href="">售后服务</a></li>
            <li><a href="">联系我们</a></li>
        </ul>
    </body>
</html>

显示效果如下：

阅读全文 »

网页结构与表现原则

发表于 2016-10-28 | 分类于 coding | | 阅读次数

在该笔记中，介绍的是网页制作中，如何从更深层次上理解结构(HTML)与表现(CSS)之间的关系。

结构(HTML)与表现(CSS)相分离的思想

当我们拿到一个网页的设计图的时候，首先观察网页的文字内容和内容模块之间的关系，将重点放在语义化的 HTML 代码上，而不要过多考虑设计图上的样式。当把 HTML 内容编写完成之后，再考虑样式如何实现(增加 div span 等操作)，力求在不改变现有结构的基础上，完成现有设计图的效果。

下面的例子是对该思想的具体阐述：

阅读全文 »

网页布局笔记

发表于 2016-10-27 | 分类于 coding | | 阅读次数

在该笔记中，将学到的是多种不同的网页风格的实现或者多种不同风格的组件实现方法

网页布局基础

使用 CSS 实现不同的网页布局，其中最重要的是理解 CSS 中的 3 种定位机制，分别是：

标准文档流( Normal flow )：从左到右，从上到下，输出文档的内容。由块级元素和行级元素组成
浮动( Floats )
绝对定位( Absolute position )

块级元素：从左到右撑满页面，独占一行，碰到页面边缘会自动换行。(div, ul, li, dl, dt, p …)

行级元素：在同一行内显示，不会独占一行，不会改变文档的结构。(span, strong, img, input …)

块级元素和行级元素都是盒子模型的基础

盒(框)模型示意：

阅读全文 »

使用 OpenVPN 搭建翻墙服务器

发表于 2016-10-24 | 分类于 coding | | 阅读次数

已有教程

网上教程上介绍的均为使用国外的 vps (Ubuntu) 搭建的 OpenVPN Server，按照教程上一步步进行即可，故不再赘述。本教程所介绍的内容，针对网上教程中的一些错误点。进行改成，并且提供了在 windows、Ubuntu和 MAC 上搭建 OpenVPN Client 的方法，亲测可用。

在使用 OpenVPN 创建翻墙服务器的时候，可以使用 ipv4 和 ipv6（需要网络支持 ipv6）模式。一般 vultr 的 ipv4 地址没有被墙，digital ocean 要看脸。

下面两篇教程是使用 ipv6 网络来翻墙的教程，如果需要使用 ipv4 来翻墙，只需要添加 ipv4 地址，并且保证 ipv4 地址没有没墙即可。

校园网免流量之基于IPV6的OPENVPN搭建 _ Timothy’s Blog.pdf

【教程】使用IPv6 Openvpn加速访问外国网站pt吧百度贴吧.pdf

上面提供的教程，在一些地方已经无法配置成功。所以在按照上面的教程配置的时候，需要参考下面的修改点，对其中的一些步骤进行修改。

修改点与注意点

阅读全文 »