---

尝试使用纯粹的 html+CSS 打造网页界面吧 ~

在我的新书里面，有这样一个范例，是为了说明 HTML 的一些元素通用属性，包含 style 、 class 以及 id 等等，透过勾选 checkbox 以及点选 radio 选项，可以改变这两组 li 的配置。

以下是所需的 HTML :

    

HTML
        
CSS
        
JavaScript
        
INPUT


Java
        
ASP.NET
        
PHP
        
CSS3
    

以下是所需的 CSS ：

以下是用到的 JavaScript ：

 function changeHandler(o) {	
     var technology_list_1 = document.getElementById('h_technology_1');            
     var technology_list_2 = document.getElementById('h_technology_2');
            if (o.id == 'ltype') {
                if (o.checked == true) {
                    technology_list_1.style.listStyleType = 'none';
                    technology_list_2.style.listStyleType = 'none';
                } else {
                    technology_list_1.style.listStyleType = 'disc';
                    technology_list_2.style.listStyleType = 'disc';
                }
            } else if (o.id == 'hor') {
                var lis = document.getElementsByTagName('li');
                if (o.checked == true) {
                    for (var key in lis)
                        lis[key].setAttribute('class', 'titem_h');
                } else {
                    for (var key in lis)
                        lis[key].setAttribute('class', 'titem_v');
                }
            } else if (o.id == 'ver') {
                var lis = document.getElementsByTagName('li');
                if (o.checked == true) {
                    for (var key in lis)
                        lis[key].setAttribute('class', 'titem_v');
                } else {
                    for (var key in lis)
                        lis[key].setAttribute('class', 'titem_h');
                }
            }
 }    

从这个小小范例中，我们可以稍微感受到用纯 HTML 打造网页界面的威力，这比你利用 ASP.NET 控件要简单太多了，甚至当你有一天需要实践具敏捷交互特性的网页，会发现只有纯粹的 HTML 才能实现你的创意，该是改变的时候了 ~~ :)

p.s. 直接在 blog 上无法呈现效果，因此先截图，后续等网站空间弄好再丢范例上来提供操作

原文:大专栏  透过 CSS 模式设定建立弹性的网页界面