Scribd Logo
Upload

Welcome to Scribd!

  • 5

    Uploaded by

    Muhammad Ali Haider
    5 views6 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views6 pages

    5

    Uploaded by

    Muhammad Ali Haider

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    <!

    DOCTYPE html>
    <html>
    <head>
    <style>
    /*span {
    display: block;
    }
    a {
    display: block;
    }
    h1.hidden {
    display: none;
    }
    h2.hide {
    visibility: hidden;
    }

    div.static {
    position: static;
    border: 3px solid #73AD21;
    }

    div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
    }

    div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
    }

    div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
    }

    div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
    }
    div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;
    }
    img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    }
    */
    /*
    .container {
    position: relative;
    }

    .topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
    }

    .topright {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 18px;
    }
    .bottomleft {
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 18px;
    }
    .bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
    }
    .center {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
    }
    img {
    width: 100%;
    height: auto;
    opacity: 0.3;
    }
    span.a {
    display: inline;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;
    background-color: #f3a1c3;
    }
    span.b {
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;
    background-color: yellow;
    }

    span.c {
    display: block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;
    background-color: #33f4c1;
    }
    .nav {
    background-color: lightblue;
    list-style-type: none;
    text-align: center;
    padding: 0;
    margin: 0;
    }

    .nav li {
    display: inline-block;
    font-size: 20px;
    padding: 20px;
    }

    div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
    }
    */
    div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: hidden;

    /*overflow: auto;*/
    overflow: scroll;

    </style>
    </head>
    <body>
    <!--
    <div class="sticky">I am sticky!</div>
    <span>A display property with a value of "block" results in</span> <span>a line
    break between the two elements.</span>
    <p>Display links as block elements:</p>

    <a href="/html/default.asp" target="_blank">HTML</a>


    <a href="/css/default.asp" target="_blank">CSS</a>
    <a href="/js/default.asp" target="_blank">JavaScript</a>

    <h1>This is a visible heading</h1>


    <h1 class="hidden">This is a hidden heading</h1>
    <p>Notice that the h1 element with display: none; does not take up any space.</p>

    <h2>This is a visible heading</h2>


    <h2 class="hide">This is a hidden heading</h2>
    <p>Notice that the hidden heading still takes up space.</p>

    <h2>position: static;</h2>
    <div class="static">
    This div element has position: static;
    </div>
    <h2>position: relative;</h2>

    <div class="relative">
    This div element has position: relative;
    </div>

    <h2>position: fixed;</h2>
    <div class="fixed">
    This div element has position: fixed;
    </div>

    <h2>position: absolute;</h2>

    <p>An element with position: absolute; is positioned relative to the nearest


    positioned ancestor (instead of positioned relative to the viewport, like
    fixed):</p>

    <div class="relative">This div element has position: relative;


    <div class="absolute">This div element has position: absolute;</div>

    <H3>THIS IS A PRACTICE TEXT</H3>


    <H3>THIS IS A PRACTICE TEXT</H3>
    <H3>THIS IS A PRACTICE TEXT</H3>
    <H3>THIS IS A PRACTICE TEXT</H3>
    <H3>THIS IS A PRACTICE TEXT</H3>
    <H3>THIS IS A PRACTICE TEXT</H3>
    <H3>THIS IS A PRACTICE TEXT</H3>
    <H3>THIS IS A PRACTICE TEXT</H3>
    <H3>THIS IS A PRACTICE TEXT</H3>
    <H3>THIS IS A PRACTICE TEXT</H3>

    <h1>This is a heading</h1>
    <img src="123.jpg" width="100" height="140">
    <p>Because the image has a z-index of -1, it will be placed behind the text.</p>
    <div class="container">
    <img src="1.jpg" alt="picture not found" width="1000" height="300">
    <div class="topleft">Top Left</div>
    <div class="topright">Top Right</div>
    <div class="bottomleft">Bottom Left</div>

    <div class="bottomright">Bottom Right</div>


    <div class="center">Centered</div>

    </div>

    <h1>The display Property</h1>

    <h2>display: inline</h2>
    <div>
    The term air force may also refer to a <span class="a">tactical air force</span> or
    <span class="a">numbered air force</span>, which is an operational formation either
    within a national air force or comprising several air components from allied
    nations. Air forces typically consist of a combination of fighters, bombers,
    helicopters, transport planes and other aircraft.
    </div>
    <h2>display: inline-block</h2>

    <div>
    The term air force may also refer to a <span class="b">tactical air force</span> or
    <span class="b">numbered air force</span>, which is an operational formation either
    within a national air force or comprising several air components from allied
    nations. Air forces typically consist of a combination of fighters, bombers,
    helicopters, transport planes and other aircraft.
    </div>

    <h2>display: block</h2>
    <div>
    The term air force may also refer to a <span class="c">tactical air force</span> or
    <span class="c">numbered air force</span>, which is an operational formation either
    within a national air force or comprising several air components from allied
    nations. Air forces typically consist of a combination of fighters, bombers,
    helicopters, transport planes and other aircraft.
    </div>

    <ul class="nav">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#clients">Our Clients</a></li>
    <li><a href="#contact">Contact Us</a></li>
    </ul>

    <h2>CSS Overflow</h2>
    <p>By default, the overflow is visible, meaning that it is not clipped and it
    renders outside the element's box:</p>

    <div>You can use the overflow property when you want to have better control of the
    layout. The overflow property specifies what happens if content overflows an
    element's box.</div>
    -->
    <h2>CSS Overflow</h2>
    <p>With the hidden value, the overflow is clipped, and the rest of the content is
    hidden:</p>
    <p>Try to remove the overflow property to understand how it works.</p>

    <div>You can use the overflow property when you want to have better control of the
    layout. The overflow property specifies what happens if content overflows an
    element's box.</div>
    </body>
    </html>

    You might also like