ポップを達成49CSS

： `` `htmlの実行
<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル> </ TITLE> 
    <スタイル> 
        * { 
            マージン：0; 
            パディング：0; 
        } 
        .appearMark {幅：100％;高さ：100％;背景：cadetblue; Zインデックス：2;位置：絶対;表示：なし;上部：0。不透明度：0.2;} 
        .appearMarkInner {幅：1000px;高さ：555px;背景：白;マージン：オート;位置：絶対;表示：なし;上部：0;右：0;底：0;左：0;不透明度： 1; Z-度：4;} 
        .appearMarkInner .detail {高さ：40ピクセル、行の高さ：40ピクセル;パディング左：20ピクセル、背景：deepskyblue;色：白;フォントサイズ：14px;}
        .appearMarkInner .detailスパン{表示：インラインブロック;フロート：右;マージン右：20ピクセル、カーソル：ポインタ;ユーザ選択：なし} 
        .appearMarkInnerのDL {パディング：5pxのは50px;} 
        .appearMarkInnerのDLのDT {ボーダー底：1ピクセル固体dimgray;高さ：30px;フォントサイズ：16pxに;色：deepskyblue;} 
        .appearMarkInnerのDLのDD {パディング：5pxの0;フォントサイズ：14px;} 
        .appearMarkInner DL dd.dd_eventContent {幅：447px;ディスプレイ：インラインブロック;} 
        .appearMarkInner DL dd.dd_eventProtocol {幅：447px;表示：インラインブロック;} 
        .appearMarkInnerのDL DDスパン{表示：インラインブロック;} 
        .appearMarkInnerのDLのDD span.float {フロート：左; font-サイズ：14px;} 
        .appearMarkInnerのDLのDD P {幅：902px;フォントサイズ：14px;} 
    </スタイル>
</ HEAD> 
<BODY> 
<DIV ID = "clickAppear">点击</ DIV> 
<DIV CLASS = "appearMark" ID = "appearMark"> </ div> 
<DIV CLASS = "appearMarkInner" ID = "appearMarkInner"> 
    <Pクラス= "詳細">事件信息<スパンID = "clickDisappear">关闭</スパン> </ P> 
    <DL> 
        <DT>事件内容</ DT> 
        <DDクラス= "dd_eventContent">事件等级。 <スパンID = "eventGrade"> 111111 </スパン> </ DD> 
        <DDクラス= "dd_eventContent">风险等级<スパンID = "riskGrade"> 111111 </スパン> </ DD> 
        <DDクラス=」 dd_eventContent ">事件类别：<スパンID =" eventCategory ">111111 </スパン> </ DD> 
        <DDクラス= "dd_eventContent">发生日期<スパンID = "happenDate"> 111111 </スパン> </ DD> 
        <DDクラス= "dd_eventContent">发生时间：<スパンID = "happenTime"> 111111 </スパン> </ DD> 
    </ DL> 
    <DL>
        <DT>イベント・プロトコル</ DT> 
        <DDクラス= "dd_eventProtocol">ネットワーク層プロトコル：<スパンID = "networkLayerProtocol"> 111111 </スパン> </ DD> 
        <DDクラス= "dd_eventProtocol">ネットワークアプリケーションプロトコル： <スパンID = "networkApplicationProtocol"> 111111 </スパン> </ DD> 
        <DD>注：<スパンID = "備考"> 111111 </スパン> </ DD> 
        <DD>プロトコルの詳細：<スパンID = " protocolDetails "> 111111 </スパン> </ DD> 
    </ DL> 
    <DL> 
        <DT>ルール</ DT> 
        <DD>ルール<スパンID =" ruleItem " > 111111 </スパン> </ DD > 
    </ DL> 
    <DL> 
        <DT>イベントパッケージ</ DT> 
        <DD>长度<スパンID = "長さ"> 111111 </スパン> </ DD>
        <DD> <スパンクラス=「フロート」> コンテンツ：</ span>の<p個のID =「コンテンツ」> DDの長さを制限するためのタブを、フローティングのままにされるラベルにまたがる; Pタグは浮きません。「コンテンツ」フォントがどこより大きくすることはできませんフォント、またはここにテキストが次の行にプッシュされます！コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</ P> </ DD> 
    </ DL> 
</ divの> 
</ BODY> 
</ HTML> 
<スクリプト> 
    VAR clickAppear =のdocument.getElementById（ "clickAppear"）; 
    VAR appearMark =のdocument.getElementById（ "appearMark"）; 
    VAR appearMarkInner =のdocument.getElementById（ "appearMarkInner"）; 
    VARのclickDisappear document.getElementById =（ "clickDisappear"）; 
    clickAppear.onclick =関数（）{ 
        appearMark.style.display = "ブロック"。
        appearMarkInner.style.display =「ブロック」。
    }。
    clickDisappear.onclick =関数（）{
        appearMark.style.display =「なし」。
        appearMarkInner.style.display =「なし」。
    } 
</ SCRIPT> 

`` `
おすすめ
