遮罩的几种写法_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

遮罩的几种写法_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

遮罩一：

 1 <!DOCTYPE > 2 <html > 3 <head> 4     <title>DIV CSS遮罩层</title> 5     <script language="javascript" type="text/javascript"> 6 function showdiv() { 7             document.getElementById("bg").style.display ="block"; 8             document.getElementById("show").style.display ="block"; 9         }10 function hidediv() {11             document.getElementById("bg").style.display ='none';12             document.getElementById("show").style.display ='none';13         }14     </script>15     <style type="text/css">16         #bg {17             display: none;18             position: absolute;19             top: 0%;20             left: 0%;21             width: 100%;22             height: 100%;23             background-color: black;24             z-index: 1001;25             -moz-opacity: 0.7;26             opacity: .70;27             filter: alpha(opacity=70);28         }29 30         #show {31             display: none;32             position: absolute;33             top: 25%;34             left: 22%;35             width: 53%;36             height: 49%;37             padding: 8px;38             border: 8px solid #E8E9F7;39             background-color: white;40             z-index: 1002;41             overflow: auto;42         }43     </style>44 </head>45 <body>46     <input id="btnshow" type="button" value="打开" onclick="showdiv();" />47     <div id="bg"></div>48     <div id="show">49         内容测试50         <input id="btnclose" type="button" value="关闭" onclick="hidediv();" />51     </div>52 </body>53 </html>

图片预览：

遮罩二：

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5     <meta name="viewport" content="width=device-width, initial-scale=1"> 6     <title></title> 7     <meta charset="utf-8" /> 8  9     <script src="jquery-1.9.1.min.js"></script>10     <link href="bootstrap.min.css" rel="stylesheet" />11     <script>12         //显示框13         function showdiv() {14             document.getElementById("bg").style.display = "block";15             document.getElementById("show").style.display = "block";16             var height = document.documentElement.clientHeight;17             $("#bg").height(height);18 19         }20         function hidediv() {21             document.getElementById("bg").style.display = 'none';22             document.getElementById("show").style.display = 'none';23         }24         $(function () {25             $(".shangchuanbtn").on("click", function () {26                 showdiv();27             })28         })29     </script>30     <style>31          #bg {32             display: none;33             position: absolute;34             top: 0%;35             left: 0%;36             width: 100%;37             height:100%;38             background-color: black;39             z-index: 1001;40             -moz-opacity: 0.7;41             opacity: .70;42             filter: alpha(opacity=70);43         }44 45           #show {46             display: none;47             position: fixed;48             top:0;//改为bottom则在下面显示49             left:0;50             vertical-align:bottom;51             width:100%;52        text-align:center;53             background-color: white;54             z-index: 1002;55             overflow: auto;56            57         }58          #show .table a{ color:#ff8d0e;font-size:14px;}59            #show .table a:hover{text-decoration:none;}60          #show .table td{line-height:30px;}61          #show .table i{font-size:16px; color:#ff8d0e}62     </style>63 </head>64 <body>65    66     <button type="button" class="btn btn-default btn-lg btn-block shangchuanbtn">67         <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>68         <span class="spcontents sppicload"><span id="sptext">上传凭证一次一张</span></span>69     </button>70     <section>71         <div id="bg"></div>72         <div id="show">73             <table class="table">74                 <tr>75                     <td><i class="glyphicon glyphicon-camera"></i>  <a id="a_takephoto" >拍  照</a></td>76                 </tr>77                 <tr>78                     <td>79 80                         <a href="javascript:;" class="file" >81                             <i class="glyphicon glyphicon-picture"></i> 选择图片82                         </a>83                     </td>84                 </tr>85                 <tr>86                     <td><i class="glyphicon glyphicon-home"></i>  <a onclick="hidediv()">取  消</a></td>87                 </tr>88             </table>89         </div>90     </section>91 </body>92 </html>

图片预览

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract