CSSは、柔軟なWebインターフェイスモードを確立するために設定されています



〜Webインターフェイスを構築するために、純粋なHTML + CSSを使用してみてください

内部の私の新しい本では、そのような例がある、など、スタイル、クラスやIDを含むHTMLの共通属性のいくつかの要素を説明するチェックボックスをチェックして、オプションを介して無線をクリックして、あなたは、Liこれら2組の構成を変更することができます。



以下は、必要な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とWebインタフェースのパワーを感じて作成することができ、それはあまりにも多くのページがあなたが速攻インタラクティブな機能を備えた一日の練習をする必要がある場合でも、あなたよりもASP.NETコントロールを利用します取りますこれは変化の時である、唯一の純粋なHTMLがあなたの創造性を達成することがわかった:) ~~

PS直接的な影響はブログなので、最初のショット、および他のフォローアップWebスペース上でレンダリングして、何とか操作の例を提供するように失われることができません


オリジナル:大列  CSSモードによる柔軟なWebインターフェイスを作成するように設定


おすすめ

転載: www.cnblogs.com/petewell/p/11444876.html