1. <ul id="ebalq"></ul>
      ;color:#cc33cc”>
        Please select a picture: <\/p>\/\/*Set font size, name, color*\/\/
       

       

        \/\/*Import an image with the identifier container1*\/\/
        < p style=\"font-family:cursive script;color:#cc9933;font-size:12pt\">
       Name: Desert<\/p>\/\/*Set font name, color, size*\/\/
         <\/dd>
         <\/div>
        

        

        \/\/*Import another type of image, the identifier is container2*\/\/
       


       Name: The sea<\/p>
        <\/dd>
       Button*\/\/
       

       onclick=\"container1.style.visibility='visible';
       container2.style.visibility=' hidden'\">
      \/\/*Define the mouse click event to make picture 1 visible and picture 2 invisible*\/\/
         container1. style.visibility='hidden';
      onclick=\"container2.style.visibility='visible';
      container1.style.visibility='hidden'\"><\/p>
      Define mouse click event picture 1 as invisible, picture 2 as visible*\/\/
       <\/form>
       Techniques to control the visibility value in css.

      The above example only talks about the flat layout. Tutuo’s previous css knowledge ends here. However, there is a z-index parameter above, which is used to Stereoscopically positioned, so div can also be stereoscopic. Here is a simple stereoscopic example:

       
        zindex<\/title> <\/p>   <style type=\"text\/css\"> <p>   <!--   <br \/>  .pile{position:absolute;left:2in;top:2in;<br \/>width:3in;height:3in; }\/\/*Defines the class pile and its position*\/\/ <br \/> .pile1{position:absolute;left:3in;top:2in;<br \/> width:1in;height:1in;} \/\/*Definition class pile1, and its location *\/\/<br \/>  --> <br>  <\/style> <br>  <\/head> <br> ss01010.jpg\" class=\"pile\" id=\"image\" <br> Style=\"z-index:1\"><br> \/\/*Import an image to make it a pile class, z-index attribute definition is 1, the position is at the bottom <br>  *\/\/ <br>  <div id="377j5v51b" class=\"pile\" id=\"text1\" <br \/> style=\"color:#ffff33;z-index:2\" > This paragraph The text will be overlaid on the image. <br> <\/div>\/\/*Define the color and z-index attributes of a piece of text to be 2, in the middle position*\/\/<br> <img src=\"075.gif\" class=\"pile1\" id= \"image\"<br \/> style=\"z-index:3\"> <br>   \/\/*Import the second image, make it the \"pile1\" class, the z-index attribute is 3, and the position is at the top<br> Square*\/\/<br>  <\/body> <br>  <\/html> <br> <br><br><br> <br> <br><\/p>"} </script> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <script>var V_PATH="/";window.onerror=function(){ return true; };</script> </head> <body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2"> <h1><a href="http://m.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1> <link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css"> <header> <div id="377j5v51b" class="head"> <div id="377j5v51b" class="haed_left"> <div id="377j5v51b" class="haed_logo"> <a href="http://m.miracleart.cn/" title="" class="haed_logo_a"> <img src="/static/imghw/logo.png" alt="" class="haed_logoimg"> </a> </div> <div id="377j5v51b" class="head_nav"> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Community" class="head_nava head_nava-template1">Community</a> <div class="377j5v51b" id="dropdown-template1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/article.html" title="Articles" class="languagechoosea on">Articles</a> <a href="http://m.miracleart.cn/faq/zt" title="Topics" class="languagechoosea">Topics</a> <a href="http://m.miracleart.cn/wenda.html" title="Q&A" class="languagechoosea">Q&A</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Learn" class="head_nava head_nava-template1_1">Learn</a> <div class="377j5v51b" id="dropdown-template1_1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/course.html" title="Course" class="languagechoosea on">Course</a> <a href="http://m.miracleart.cn/dic/" title="Programming Dictionary" class="languagechoosea">Programming Dictionary</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Tools Library" class="head_nava head_nava-template1_2">Tools Library</a> <div class="377j5v51b" id="dropdown-template1_2" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/toolset/development-tools" title="Development tools" class="languagechoosea on">Development tools</a> <a href="http://m.miracleart.cn/toolset/website-source-code" title="Website Source Code" class="languagechoosea">Website Source Code</a> <a href="http://m.miracleart.cn/toolset/php-libraries" title="PHP Libraries" class="languagechoosea">PHP Libraries</a> <a href="http://m.miracleart.cn/toolset/js-special-effects" title="JS special effects" class="languagechoosea on">JS special effects</a> <a href="http://m.miracleart.cn/toolset/website-materials" title="Website Materials" class="languagechoosea on">Website Materials</a> <a href="http://m.miracleart.cn/toolset/extension-plug-ins" title="Extension plug-ins" class="languagechoosea on">Extension plug-ins</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="http://m.miracleart.cn/ai" title="AI Tools" class="head_nava head_nava-template1_3">AI Tools</a> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Leisure" class="head_nava head_nava-template1_3">Leisure</a> <div class="377j5v51b" id="dropdown-template1_3" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/game" title="Game Download" class="languagechoosea on">Game Download</a> <a href="http://m.miracleart.cn/mobile-game-tutorial/" title="Game Tutorials" class="languagechoosea">Game Tutorials</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="head_search"> <input id="key_words" onkeydown="if (event.keyCode == 13) searchs('en')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value=""> <a href="javascript:;" title="search" onclick="searchs('en')"><img src="/static/imghw/find.png" alt="search"></a> </div> <div id="377j5v51b" class="head_right"> <div id="377j5v51b" class="haed_language"> <a href="javascript:;" class="layui-btn haed_language_btn">English<i class="layui-icon layui-icon-triangle-d"></i></a> <div class="377j5v51b" id="dropdown-template" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a> <a href="javascript:;" title="English" class="languagechoosea">English</a> <a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a> <a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a> <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a> <a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a> <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a> <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a> </div> </div> </div> <span id="377j5v51b" class="head_right_line"></span> <div style="display: block;" id="login" class="haed_login "> <a href="javascript:;" title="Login" class="haed_logina ">Login</a> </div> <div style="display: block;" id="reg" class="head_signup login"> <a href="javascript:;" title="singup" class="head_signupa">singup</a> </div> </div> </div> </header> <main> <div id="377j5v51b" class="Article_Details_main"> <div id="377j5v51b" class="Article_Details_main1"> <div id="377j5v51b" class="Article_Details_main1M"> <div id="377j5v51b" class="phpgenera_Details_mainL1"> <a href="http://m.miracleart.cn/" title="Home" class="phpgenera_Details_mainL1a">Home</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://m.miracleart.cn/web-designer.html" class="phpgenera_Details_mainL1a">Web Front-end</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://m.miracleart.cn/div-tutorial.html" class="phpgenera_Details_mainL1a">HTML Tutorial</a> <img src="/static/imghw/top_right.png" alt="" /> <span>CSS DIV Day 2_html/css_WEB-ITnose</span> </div> <div id="377j5v51b" class="Articlelist_txts"> <div id="377j5v51b" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">CSS DIV Day 2_html/css_WEB-ITnose</h1> <div id="377j5v51b" class="Articlelist_txts_info_head"> <div id="377j5v51b" class="author_info"> <a href="http://m.miracleart.cn/member/887227.html" class="author_avatar"> <img class="lazy" data-src="https://img.php.cn/upload/avatar/000/887/227/63bb7851c9547215.jpg" src="/static/imghw/default1.png" alt="WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB"> </a> <div id="377j5v51b" class="author_detail"> <a href="http://m.miracleart.cn/member/887227.html" class="author_name">WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB</a> </div> </div> </div> <span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2016 pm 12:33 PM</span> </div> </div> <hr /> <div id="377j5v51b" class="article_main php-article"> <div id="377j5v51b" class="article-list-left detail-content-wrap content"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3461856641"> </ins> <p class="sycode"> </p> <p class="sycode"> </p> <p>Start the second day. Yesterday I learned the basic usage of css, including css references and some common css attributes. Mastering the basic usage of CSS is only the first step in CSS div layout. When it comes to layout, the most important thing is positioning. When we use tables for typesetting, we directly draw grids on the web page and fill the content into the corresponding grids. The same principle applies when using CSS, but CSS cannot draw grids directly. It has its own set of positioning methods. Today’s goal is to master the positioning of css. </p> <br> <p>First, introduce two definitions: relative positioning and absolute positioning. Relative positioning allows for offsets from the original position of the document. Absolute positioning allows arbitrary positioning. The following are several attributes needed for positioning: </p> <br> <p></p> <br> <p>Because positioning is not generally important, here is a detailed introduction to the role of each parameter: </p> <br> <p>position: static | absolute |relative <br>static: No special positioning, the object follows HTML positioning rules <br>absolute: Drag the object out of the document flow, using left, right, top, bottom and other attributes Perform absolute positioning. And its cascading is defined through the z-index attribute. At this time, the object does not have margins, but there are still padding and borders <br>//We generally use this attribute when using absolute positioning. <br>relative: Objects cannot be stacked, but will be offset in the normal document flow based on left, right, top, bottom and other attributes <br></p> <br> <p>left: auto|lenth <br>auto : No special positioning, allocated in the document stream according to HTML positioning rules <br> length : A length value composed of a floating point number and a unit identifier | Percentage. The position attribute value must be defined as absolute or relative for this value to take effect. <br>Example: div { position: absolute; left: 1in; } <br>The usage of top and left are the same. It should also be noted that the position attribute value must be defined as absolute or relative for this value to take effect. <br></p> <br> <p>width: auto|lenth <br>auto: no special positioning, allocated in the document stream according to HTML positioning rules <br>length: composed of floating point numbers and unit identifiers Length value | Percent. <br>height has exactly the same syntax as width. And it does not need to define position must be absolute </p> <br> <p>clip : auto | rect ( number number number number ) <br>auto : Object without clipping <br>rect ( number number number number ) : Based on The order of top-right-bottom-left provides four offset values ??calculated from the upper left corner of the object as the (0,0) coordinate. Any of these values ????can be replaced with auto, that is, this edge is not cut </p> <br> <p>overflow: visible | auto | hidden | scroll <br>visible: Does not cut content or add scroll bars. If this default value is explicitly declared, the object will be clipped to the size of the window or frame containing the object. And the clip attribute setting will be invalid <br>//The result of this attribute is like when there is no div, as much content as there is will be displayed. <br>auto: This is the default value of the body object and textarea. Cut content and add scrollbars when needed<br>hidden: Don’t show content that exceeds object size<br>scroll: Always show scrollbars</p> <br> <p>z-index: auto | number <br>auto: Follow the positioning of its parent object<br>number: A unitless integer value. Can be negative<br>//It should be used to produce some three-dimensional effects</p> <br> <p>visibility: inherit | visible | collapse | hidden<br>inherit: Inherit the visibility of the previous parent object<br>visible: Object visible hidden: Object hidden<br>collapse: Mainly used to hide table rows or columns. Hidden rows or columns can be used by other content. For other objects outside the table, its function is equivalent to hidden. IE5.5 does not yet support this property. <br></p> <br> <p>The position, width, height, left, top, z-index in the above attributes are used to position the div, and the clip, overflow, and visibility are used to control the alignment. For content display, these properties can be regarded as the basic properties of a layer. After mastering the basic properties of layers, we can look at an example of using layers to position and control display: </p> <br> <p><html><br> <head><br> <title>dingwei css
      !--
        #container1{position: absolute; top: 100}
      //*position: absolute; define container1 as the absolute position*//
      #container2{position: absolute; top: 100; visibility: hidden;}
          //*Define container2 as absolute positioning, and the initial visibility is hidden*//
         p{font-size: 12pt;}//*Define the font of p*//
        -->
        
        
         ;color:#cc33cc”>
        Please select a picture:

      //*Set font size, name, color*//
       

       

        //*Import an image with the identifier container1*//
        < p style="font-family:cursive script;color:#cc9933;font-size:12pt">
       Name: Desert

      //*Set font name, color, size*//
        

        

        

        

        //*Import another type of image, the identifier is container2*//
       

       onclick="container1.style.visibility='visible';
       container2.style.visibility=' hidden'">
      //*Define the mouse click event to make picture 1 visible and picture 2 invisible*//
         container1. style.visibility='hidden';
      onclick="container2.style.visibility='visible';
      container1.style.visibility='hidden'">


      Define mouse click event picture 1 as invisible, picture 2 as visible*//
       
       Techniques to control the visibility value in css.

      The above example only talks about the flat layout. Tutuo’s previous css knowledge ends here. However, there is a z-index parameter above, which is used to Stereoscopically positioned, so div can also be stereoscopic. Here is a simple stereoscopic example:

       
        zindex

        
       
       ss01010.jpg" class="pile" id="image"
      Style="z-index:1">
      //*Import an image to make it a pile class, z-index attribute definition is 1, the position is at the bottom
        *//
        
       style="color:#ffff33;z-index:2" > This paragraph The text will be overlaid on the image.
       
      //*Define the color and z-index attributes of a piece of text to be 2, in the middle position*//
        style="z-index:3">
         //*Import the second image, make it the "pile1" class, the z-index attribute is 3, and the position is at the top
      Square*//
        
        





      Statement of this Website
      The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

      Hot AI Tools

      Undress AI Tool

      Undress AI Tool

      Undress images for free

      Undresser.AI Undress

      Undresser.AI Undress

      AI-powered app for creating realistic nude photos

      AI Clothes Remover

      AI Clothes Remover

      Online AI tool for removing clothes from photos.

      Clothoff.io

      Clothoff.io

      AI clothes remover

      Video Face Swap

      Video Face Swap

      Swap faces in any video effortlessly with our completely free AI face swap tool!

      Hot Tools

      Notepad++7.3.1

      Notepad++7.3.1

      Easy-to-use and free code editor

      SublimeText3 Chinese version

      SublimeText3 Chinese version

      Chinese version, very easy to use

      Zend Studio 13.0.1

      Zend Studio 13.0.1

      Powerful PHP integrated development environment

      Dreamweaver CS6

      Dreamweaver CS6

      Visual web development tools

      SublimeText3 Mac version

      SublimeText3 Mac version

      God-level code editing software (SublimeText3)

      How do I stay up-to-date with the latest HTML standards and best practices? How do I stay up-to-date with the latest HTML standards and best practices? Jun 20, 2025 am 08:33 AM

      The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.

      How do I use the  element to represent the main content of a document? How do I use the element to represent the main content of a document? Jun 19, 2025 pm 11:09 PM

      The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.

      How do I create a basic HTML document? How do I create a basic HTML document? Jun 19, 2025 pm 11:01 PM

      To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.

      How do I create checkboxes in HTML using the  element? How do I create checkboxes in HTML using the element? Jun 19, 2025 pm 11:41 PM

      To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.

      How do I minimize the size of HTML files? How do I minimize the size of HTML files? Jun 24, 2025 am 12:53 AM

      To reduce the size of HTML files, you need to clean up redundant code, compress content, and optimize structure. 1. Delete unused tags, comments and extra blanks to reduce volume; 2. Move inline CSS and JavaScript to external files and merge multiple scripts or style blocks; 3. Simplify label syntax without affecting parsing, such as omitting optional closed tags or using short attributes; 4. After cleaning, enable server-side compression technologies such as Gzip or Brotli to further reduce the transmission volume. These steps can significantly improve page loading performance without sacrificing functionality.

      How do I use the  element to represent the footer of a document or section? How do I use the element to represent the footer of a document or section? Jun 25, 2025 am 12:57 AM

      It is a semantic tag used in HTML5 to define the bottom of the page or content block, usually including copyright information, contact information or navigation links; it can be placed at the bottom of the page or nested in, etc. tags as the end of the block; when using it, you should pay attention to avoid repeated abuse and irrelevant content.

      How has HTML evolved over time, and what are the key milestones in its history? How has HTML evolved over time, and what are the key milestones in its history? Jun 24, 2025 am 12:54 AM

      HTMLhasevolvedsignificantlysinceitscreationtomeetthegrowingdemandsofwebdevelopersandusers.Initiallyasimplemarkuplanguageforsharingdocuments,ithasundergonemajorupdates,includingHTML2.0,whichintroducedforms;HTML3.x,whichaddedvisualenhancementsandlayout

      How do I use the tabindex attribute to control the tab order of elements? How do I use the tabindex attribute to control the tab order of elements? Jun 24, 2025 am 12:56 AM

      ThetabindexattributecontrolshowelementsreceivefocusviatheTabkey,withthreemainvalues:tabindex="0"addsanelementtothenaturaltaborder,tabindex="-1"allowsprogrammaticfocusonly,andtabindex="n"(positivenumber)setsacustomtabbing

      See all articles