HTML CSS [A]

HTML+CSS

在这里插入图片描述

HTML+CSS 1: HTML Basics

  • Structure (XHTML, XML)
  • Expression (CSS)
  • Behaviour (DOM, ECMAScript(JS))
  • Special Chars
    在这里插入图片描述
    在这里插入图片描述
  • basics
  • !DOCTYPE ; html; head; body; h1; p; a; img; div; p
  • ul; ol; li ; dl; dt; dd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>HTML</title>
</head>
<body>
<div style="width:500px; height:100px; background:#f00;"></div>
<!--href="#anchor"-->
<a href="#headers" name="header1">
    <h1>HEADER 1</h1>
</a>
<h2>HEADER 2</h2>
<h3>HEADER 3</h3>
<h4>HEADER 4</h4>
<h5>HEADER 5</h5>
<h6>HEADER 6</h6>
<em>Italicised &lt;em&gt;</em><!--italicised header-->
&nbsp;<i>Italicised &lt;i&gt;</i><!--italicised header-->
&nbsp;<strong>Strong&lt;strong&gt;</strong>
&nbsp;<b>Bold &lt;b&gt;</b>
<span>&quot;SPAN&quot; &copy; Span</span>
<div>DIV</div>
<p>PARAGRAPH</p>
<hr/> <!--horizontal row-->
TEXT
<!--list ul li-->
<ul type="circle">
    <li>list1</li>
    <li>list2</li>
</ul>
<ol type="disc">
    <li>list1</li>
    <li>list2</li>
</ol>
<ul type="square">
    <li>
        <ul type="circle">
            <li>list1</li>
        </ul>
        <ul type="disc">
            <li>list2</li>
        </ul>
        <ol type="A">
            <li>list3</li>
            <li>list4</li>
        </ol>
        <ol type="I">
            <li>list3</li>
            <li>list4</li>
        </ol>
        <ol type="a">
            <li>list6</li>
            <li>list7</li>
        </ol>
    <li/>
</ul>
<hr/> <!--horizontal row-->
<!--definition list dl dt dd-->
<dl>
    <dt>List</dt>
    <dd>list dd</dd>
    <dt>List</dt>
    <dd>list dd</dd>
    <dt>List</dt>
    <dd>list dd</dd>
</dl>
<!--anchor to header-->
<a href="Basics2.html">IMGS</a>
<a href="#header1" name="headers">headers</a>
</body>
</html>
  • images
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>HTML2</title>
</head>
<body>
<!--image-->
<!--<img src="path" alt="text" title="text" width="x" height="y"/>-->
<img src="D:\webstorm\HTML_CSS\HTML\img\img.jpeg" alt="text" title="floatingText" width="100" height="116"/>
<!--image absolute path-->
<img src="img/img2.jpg" alt="text" title="floatingText" width="100" height="116"/>
<!--image relative path-->
<p>
    <img src="D:\webstorm\HTML_CSS\HTML\img\img.jpeg" alt="text" title="floatingText" width="100" height="116"/>
    <!--image absolute path-->
    <img src="img/img2.jpg" alt="text" title="floatingText" width="100" height="116"/>
    <!--image relative path-->
</p>
<hr/>
<!--<a href="link">LINKNAME</a>-->
<a href="Basics1.html">Basics1</a>
<!--target=_blank ; new page-->
<a href="Basics1.html" target="_blank">
    <img src="D:\webstorm\HTML_CSS\HTML\img\img.jpeg" alt="text" title="floatingText" width="100" height="116"/>
</a>
<a href="Basics1.html" target="_self">
    <!--image absolute path-->
    <img src="img/img2.jpg" alt="text" title="floatingText" width="100" height="116"/>
    <!--image relative path-->
</a>
<!--anchor to header-->
<a href="Basics1.html#headers">headers</a>
<dl>
    <dt>List</dt>
    <dd><a href="Basics1.html" target="_blank">text</a>
        <a href="Basics1.html" target="_blank">
            <img src="D:\webstorm\HTML_CSS\HTML\img\img.jpeg" alt="text" title="floatingText" width="100" height="116"/>
        </a>
    </dd>
    <dd>
        <a href="Basics1.html" target="_blank">
            <img src="D:\webstorm\HTML_CSS\HTML\img\img.jpeg" alt="text" title="floatingText" width="100" height="116"/>
        </a>
    </dd>
</dl>
</body>
</html>

在这里插入图片描述

  • text; password, textarea, radio, file, checkbox, select, submit, reset

在这里插入图片描述在这里插入图片描述

  • form: action, method (get, post);
    在这里插入图片描述
    在这里插入图片描述
  • input: name, type, value, size, maxlength, checked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>Form1</title>
</head>
<body>
<form action="" metho="post">
    <div>
        <label for="user">username:</label>
        <input type="text" name="user" id="user" value="enter" maxlength="10" size="30"/>
    </div>
    <div>
        <label for="name">name: </label>
        <input type="text" name="name" id="name" value="DEFAULT NAME" disabled="disabled" size="30"/>
    </div>
    <div>
        <label for="code">code:</label>
        <input type="text" name="code" id="code" value="123456" readonly="readonly" size="30"/> (a-z, 0-9)
    </div>
    <div>
        <label for="pwd">password: </label>
        <input type="password" name="pwd" id="pwd" value="enter" size="30"/> (6 char min)
    </div>
    <div>
        <label for="pwd1">password again:</label>
        <input type="password" name="pwd1" id="pwd1" value="enter" size="30"/> (6 char min)
    </div>
    <div>
        <label for="email">email: </label>
        <input type="text" name="mail" id="email" value="enter" size="30"/> (include @)
    </div>
    <div>
        sex:
        <label><input type="radio" name="sex" id="sex"/>male</label>
        <label><input type="radio" name="sex"/>female</label>
        <label> <input type="radio" name="sex" checked="checked"/>secret</label>
    </div>
    <div>
        hobbies
        <label><input type="checkbox" name="hobby"/>talking</label>
        <label> <input type="checkbox" name="hobby"/>movies</label>
        <label><input type="checkbox" name="hobby"/>sports</label>
        <label> <input type="checkbox" name="hobby"/>games</label>
    </div>
    <div>
        <input type="file" value="File"/>
    </div>
    <div>
        <input type="submit" value="Submit"/>
        <input type="reset" value="Reset"/>
        <input type="button" value="Button"/>
        <input type="hidden" value="Hidden"/>
    </div>
    <div>
        <input type="image" name="img" src="img/img2.jpg"/>
    </div>
</form>
</body>
</html>
  • input: select; option; textarea
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>Form2</title>
</head>
<body>
<form action="" method="post">
    <div>
        DATE
        <select>
            <option>Select</option>
            <option value="1">1/3</option>
            <option value="2">2/3</option>
            <option value="3">3/3</option>
            YEAR
        </select>
        <select>
            <option>Select</option>
            <option value="1">1/3</option>
            <option value="2">2/3</option>
            <option value="3">3/3</option>
            MONTH
        </select>
        <select>
            <option>Select</option>
            <option value="1">1/3</option>
            <option value="2">2/3</option>
            <option value="3">3/3</option>
            DATE
        </select>
    </div>
    <div>
        TEXT AREA
        <textarea name="user" cols="20" rows="3"></textarea>
    </div>
    <div>
        <input type="submit" value="Submit"/>
        <input type="reset" value="Reset"/>
        <input type="button" value="Button"/>
        <input type="hidden" value="Hidden"/>
    </div>
</form>
</body>
</html>
  • table: tr; td; th;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>Table1</title>
</head>
<body>
    <table border="1"  width="100%" cellspacing="0" cellpadding="0" bgcolor="#f0ffff">
        <caption>TITLE</caption>
        <tr bgcolor="#7fffd4">
            <td bgcolor="#ffe4c4">line1</td>
            <td>line1</td>
        </tr>
        <tr>
            <td bgcolor="#ffe4c4">line1</td>
            <td>line1</td>
        </tr>
    </table>
    <table  border="1" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f0ffff">
        <caption>TITLE</caption>
        <thead bgcolor="#ffe4c4">
        <th>header</th>
        <th>header</th>
        </thead>
        <tbody>
        <tr>
            <td>line1</td>
            <td>line1</td>
        </tr>
        </tbody>
        <tfoot bgcolor="#ffe4c4">
        <tr>
            <td>footer</td>
            <td>footer</td>
        </tr>
        </tfoot>
    </table>
</body>
</html>
  • table rowspan colspan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>Table2</title>
</head>
<body>
<table border="1"  width="300" cellspacing="0" cellpadding="0" bgcolor="#f0ffff">
    <tr>
        <th colspan="3">Grade</th>
    </tr>
    <tr>
        <td rowspan="2">Bob</td>
        <td>Language</td>
        <td>98</td>
    </tr>
    <tr>
        <td>Math</td>
        <td>87</td>
    </tr>
    <tr>
        <td rowspan="2">Dian</td>
        <td>Language</td>
        <td>98</td>
    </tr>
    <tr>
        <td>Math</td>
        <td>98</td>
    </tr>
</table>
</body>
</html>
  • iframe: src; width; height; scrolling; frameborder; name
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>iframe</title>
</head>
<body>
<p>
    iframe

</p>
    <iframe src="Table2.html" frameborder="1" width="500" height="100" name="iframe"
    scrolling="yes">

    </iframe>
</body>
</html>
  • span, strong, em, b, i, input, a, img
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>review</title>
</head>
<body>
<span>SPAN</span>
<i style="border:1px solid #0005ff; width:200px; ">i</i>
<em style="border:1px solid #f00; width:200px;">em</em>
<strong style="border:1px solid #ffda00; width:200px; ">strong</strong>
<img src="img/img.jpeg" width="300"/>
<input type="text">input</input>
<a href="Table2.html">a href</a>
<div>div</div>
<p>p</p>
<textarea name="" id="" cols="" rows="">textarea</textarea>
<h1>h1</h1>
<ul>
   <li>enter things at the same time press alt then select</li>
</ul>
<ol>
    <li>enter things at the same time press alt then select</li>
</ol>
<dl>
    <dt>
        <dd>enter things at the same time press alt then select</dd>
    </dt>
</dl>
<form action="Table2.html">form</form>
<hr/>
<br/>
</body>
</html>

HTML+CSS 2: CSS Basics

在这里插入图片描述

  • style by type
    在这里插入图片描述
  • style by class: add .classname
    在这里插入图片描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>CSS1</title>
<style type="text/css">
    /*css comments*/
    p{color: red;}
    h1{font-weight: 300; font-size: 50px;}
    div{}
    /* by class*/
    .box{font-weight: bold; color: #0005ff;}
    /*by id*/
    #small{background: green}
    #big{background: cyan}
</style>
</head>
<body>
<h1>header1</h1>
<p>paragraph</p>
<div class="box">div</div>
<span id="small">span</span>
<span id="big">span</span>
</body>
</html>
  • style combined
  • 在这里插入图片描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>CSS1</title>
    <style type="text/css">
        /*Override all*/
        *{ color: yellow }
        p, #three, .two {
            background-color: pink
        }
        /*no space for id or class*/
        h3.two {
            color: #0005ff
        }
        h3#three {
            color: #990000
        }
    div h3{ color: purple}
        div p{ color: green}
        /*add space for children nodes*/
    div .para{background-color: black}
    </style>
</head>
<body>
<h3>first header</h3>
<h3 class="two">second header</h3>
<p>paragraph</p>
<h3 id="three">third header</h3>
<hr/>
<div class="box">
    <h3>header</h3>
    <p class="para">paragraph</p>
    <p>paragraph</p>
</div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>CSS3</title>
    <style type="text/css">
        div p span {
            font-family: "Arial";
            font-style: italic;
            font-size: 18px;
            font-weight: normal;
        }
        div em {
            font-variant: small-caps;
        }
        div p {
            line-height: 100px;
            text-align: center;
        }
        div span {
            color: blue;
            text-decoration: underline;
            text-decoration-color: yellow;
        }
    </style>
</head>
<body>
<div>
    <h2>HEADER 2</h2>
    <h3>HEADER 3</h3>
    <p><span>SPAN: </span> PARAGRAPH</p>
    <p><span>SPAN: </span> PARAGRAPH</p>
    <p><span>SPAN: </span> PARAGRAPH</p>
    <em>em all cap test</em>
</div>
</body>
</html>

在这里插入图片描述

  • list style
    在这里插入图片描述
  • mouse
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>CSS4</title>
    <link type="text/css" rel="stylesheet" href="CSS4_style.css"/>
</head>
<body>
<div id="nav">
    <h3>Library</h3>
    <ul>
        <li><a href="#">Books  </a><a href="#">Books  </a><a href="#">Books  </a></li>
        <li><a href="#">Books  </a><a href="#">Books  </a><a href="#">Books  </a></li>
        <li><a href="#">Books  </a><a href="#">Books  </a><a href="#">Books  </a></li>
        <li><a href="#">Books  </a><a href="#">Books  </a><a href="#">Books  </a></li>
        <li><a href="#">Books  </a><a href="#">Books  </a><a href="#">Books  </a></li>
        <li><a href="#">Books  </a><a href="#">Books  </a><a href="#">Books  </a></li>
        <li><a href="#">Books  </a><a href="#">Books  </a><a href="#">Books  </a></li>
        <li><a href="#">Books  </a><a href="#">Books  </a><a href="#">Books  </a></li>
    </ul>
</div>
</body>
</html>
  • css for html above
@charset "utf-8";
/*css doc*/
#nav {
    width: 360px;
    background-color: #c1c1c1;
}
#nav h3 {
    font-size: 80px;
    color: #fff;
    line-height:120px;
    /*background-color: #990000;*/
    /*background-image: url(img/img2.jpg);*/
    /*background-repeat: no-repeat;*/
    /*background-position: 150px 10px;*/
    background:  #990000 url(img/img.png) no-repeat right center;
    cursor: pointer;
}
#nav ul li{
    list-style-image: url(img/img.PNG);
    font-size: 20px;
    line-height:50px;
    background:  #ffda00 url(img/img.png) no-repeat right center;
}
#nav ul li a{
    font-family: "Courier New";
    font-size: 20px;
    color: darkgreen;
    text-decoration: none;
}
#nav ul li a:link{color: red;}
#nav ul li a:visited{color: purple;}
#nav ul li a:hover{color: green; text-decoration: underline}
#nav ul li a:active{color: yellow;}

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>CSS5</title>
    <style type="text/css">
        div, h3, form, table, tr, td, input {
            margin: 0;
            padding: 0;
        }
        #box {
            width: 300px;
            margin-left: auto;
            margin-right: auto;
            /*border-width: 5px;*/
            /*border-color: red;*/
            /*border-style: dashed;*/
            border: 1px solid grey;
            /*border-width: 1px 3px 5px 8px;*/
        }
        #box form {
            margin: 30px 20px;
        }
        #box h3 {
            text-align: center;
            height: 35px;
            line-height: 35px;
            font-size: 16px;
            background-color: slategrey;
            color: white;
        }
        td {
            padding: 2px;
        }

        td.right {
            text-align: right;
        }
        td input.btn {
            margin-left: 53px;
        }
        .box1 a{
            display: block;
            margin: 0 2 px;
            border: 1px solid #990000;
            width:500px;
        }
        .box2 a{
            display: inline;
            margin: 0 2 px;
            border: 1px solid #ff8c00;
            width:500px;
        }
        .box3 a{
            visibility:hidden;
        }
    </style>
</head>
<body>
<div id="box">
    <h3>User Login</h3>
    <form action="" method="post" name="myform">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td class="right">Name:</td>
                <td><input type="text" name="user"/></td>
            </tr>
            <tr>
                <td class="right">Email:</td>
                <td><input type="text" name="email"></td>
            </tr>
            <tr>
                <td class="right">Phone:</td>
                <td><input type="text" name="tel"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" name="enter" value="Enter" class="btn"/>
                </td>
            </tr>
        </table>
    </form>
</div>
<div class="box1">
    <p><a href="CSS4.html">CSS4.html</a></p>
    <p><a href="CSS4.html">CSS4.html</a></p>
    <p><a href="CSS4.html">CSS4.html</a></p>
</div>
<div class="box2">
    <p><a href="CSS4.html">CSS4.html</a></p>
    <p><a href="CSS4.html">CSS4.html</a></p>
    <p><a href="CSS4.html">CSS4.html</a></p>
</div>
<div class="box3">
    space
    <p><a href="CSS4.html">CSS4.html</a></p>
    <p><a href="CSS4.html">CSS4.html</a></p>
    <p><a href="CSS4.html">CSS4.html</a></p>
    space
</div>
</body>
</html>
  • Float
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>CSS6</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px
        }
        .box {
            width: 100px;
            height: 400px;
            border: 1px solid pink;
        }
        .box1 {
            float: left;
            background-color: red;
        }
        .box2 {
            float: left;
            background-color: blue;
        }
        .box3 {
            float: left;
            background-color: yellow;
        }
        .boxx {
            width: 400px;
            height: 100px;
            border: 1px solid pink;
        }

        .boxx1 {
            float: right;
            background-color: red;
        }
        .boxx2 {
            float: right;
            background-color: blue;
        }
        .boxx3 {
            float: right;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
<div class="boxx">
    <div class="boxx1"></div>
    <div class="boxx2"></div>
    <div class="boxx3"></div>
</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>CSS7</title>
    <style>
        div{margin:10px;padding:10px; overflow: scroll; zoom:1;}
        #box{float: left; border: 1px dashed #990000; background: gray}
        #box:after{clear: both; content:'.'; display:block;width:0;
        height:0;visibility:hidden;}
        .box1{padding:10px; float: left;border: 1px dotted #0005ff}
        .box2{padding:10px;float: left;border: 1px dotted #0005ff}
        .box3{padding:10px;float: left;border: 1px dotted #0005ff}
        .box4{padding:10px;float: left;border: 1px dotted #0005ff}
        .box5{padding:10px;float: left;border: 1px dotted #0005ff; font-size: 25px; line-height: 30px}
/*inner box float outerbox must also float*/
        .clear{clear:both;}
        /*use clear to rid float  or box:after or overflow:hidden*/
        p{clear:both}
    </style>
</head>
<body>
<div id="box">
    <div class="box1"><img src="img/img.png" alt="float"/></div>
    <div class="box2"><img src="img/img.png" alt="float"/></div>
    <div class="box3"><img src="img/img.png" alt="float"/></div>
    <div class="box4"><img src="img/img.png" alt="float"/></div>
    <div class="clear"></div>
    <div class="box5">box can float left and right</div>
</div>
<p>123456789</p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>CSS8</title>
    <style>
        .box1,.box2,.box3{width:100px; height:100px;}
        .box1{position:relative; left:100px; background: red;z-index: 1;}
        .box2{position: absolute; left:50px; top:50px;background: blue;}
        .box3{background: yellow; position:fixed; }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
  • Advert img
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>CSS8</title>
    <style>
    #advert{position: relative; width:500px;height:500px;}
        #number{position:absolute;right: 5px; bottom:0px}
        #number li{float:left;width:30px; height:20px; line-height: 20px;
        margin-right:5px; text-align: center; font-size: 12px; border:1px solid #666;
        list-style:none; cursor: pointer; background:#c1c1c1}
    </style>
</head>
<body>
<div id="advert">
    <img src="img/img.jpeg" alt="fluffy"/>
    <ul id="number">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>CSS10</title>
    <style>
        div,p,h3, span, em, form, input{margin:0; padding:0;}
        .bg{position: absolute; left:0; top:0; width: 100%; height:100%; background:#000;
            background: rgba(0,0,0,0.5);  background:#000\9; filter:alpha(opacity=30); opacity:0.3;}
        .opinion { position: absolute;left:50%; top:50%;width: 500px; height: 350px; margin-left:-250px;
            margin-top: -150px; border:1px solid #c1c1c1; background:#fff;}
        .opinion h3{margin: 15px; padding-bottom: 10px; font-size: 16px; border-bottom: 1px solid
        #d9d9d9; font-weight:500; color:green;}
        .opinion h3 em{ float: right; width: 20px; height: 50px; background: url(img/img.PNG) no-repeat}
        .opinion p{margin:5px 20px; font-size: 12px; line-height: 25px;}
        .opinion div{ margin:5px 20px;}
        .opinion input.email{margin-top:7px; padding:5px;width:440px; height: 30px; line-height: 40px; border: 1px solid
        #d9d9d9;}
        .opinion textarea{width: 440px; height:100px; padding:5px; margin-top:15px; padding:5px; border:1px solid
        #d9d9d9;}
        .opinion input.btn{width:100px; height:30px; margin-top: 12px; background: #fa7f12;
            color: #fff; font-size: 14px; border:0; cursor:pointer;}
    </style>
</head>
<body>
    <div class="bg"></div>
    <div class="opinion">
        <h3><span>Comments</span><em class="col"></em></h3>
        <p>Hello! please leave comment:</p>
        <div>
            <form action="" method="post" id="myForm">
                <input type="text" class="email" name="email"/>
                <textarea></textarea>
                <input type="button" class="btn" value="Enter"/>
            </form>
        </div>
    </div>
</body>
</html>
  • simple page example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>PAGE1</title>
    <style>
        div{margin:0; padding:0;}
        #header,#main,#footer{width:960px; margin:0 auto;/*auto center*/
            border:1px solid red; text-align:center;}
        #header{height:240px;}
        #main{overflow:hidden;}
        #main .left, #main .main, #main .right{float: left; height:300px; }
        #main .left{width:200px; background:green;}
        #main .main{width:560px; background:steelblue;}
        #main .right{width:200px; background:yellow;}
        #footer{height:80px;}
    </style>
</head>
<body>
<div id="header">header</div>
<div id="main">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
  • basic menu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>PAGE2</title>
    <!--<link href="css/page2style.css" rel="stylesheet" type="text/css"/>-->
    <style>
        h1,div,ul,li, a,body{margin:0; padding:0;}
        li{list-style: none;}
        img{border:0;}
        a{text-decoration: none; color: #525252;}
        a:hover{text-decoration: underline;}
        #header{ width:960px; margin:0 auto; }
        /*HeaderTop*/
        .headerTop{border:1px solid #ffffff; padding: 0 5px;
            height:30px; line-height:30px; overflow: hidden;
            background: url(img/img2.png) repeat;}
        .headerTopLeft{float: left;}
        .headerTopRight{float: right;}
        .headerTopRight li{float: left;}
        .headerTopRight li a{margin:0px 5px;}
        .headerTopRight li a img{margin-right:5px; vertical-align:middle;}
        /*HeaderMiddle*/
        .headerMid{overflow: visible;border:1px solid #c1c1c1; margin-top:1px;
            height: 58px; padding: 15px 15px 0px 15px;}
        .headerMid h1{ float: left; width:50px; margin-top:0px;}
        .headerMid .menuLeft{ float: left; width:700px; margin-top:5px;}
        .headerMid .menuLeft li{ float: left}
        .headerMid .menuLeft li.first{height: 20px; width:1px; background:#666666;}
        .headerMid .menuLeft li.last{ height: 20px; width:1px; background: #666666;}
        .headerMid .menuLeft li a{ margin: 0 5px; font-weight: 700;}
        .headerMid .menuRight{float: right; width:800px;margin-top: 5px}
        .headerMid .menuRight li{float:right;height:28px; line-height:28px;
            text-align: center; margin:0 2px;}
        .headerMid .menuRight li a{margin:0 4px; color: #9B2B0F; font-weight:700;}
        .headerMid .menuRight li.two{width: 120px; background:url(img/img2.png)repeat;}
        /*menu*/
        .menu{border:1px solid #ffffff; width:960px; margin:0 auto;}
        .menu .first{float:left; width: 10%; height:28px; line-height:28px;
            background:#525252}
        .menu .sort{ height:30px; line-height:28px;background: #525252;
            color: #FFFFFF;margin:0 auto;}
        .menu .sort a{color: #ffffff; padding: 0 5px;}
    </style>
</head>
<body>
<div id="header">
<div class="headerTop">
    <div class="headerTopLeft">
        Welcome to the gift shop![<a href="">login</a>|<a href="">register for free</a>]
    </div>
    <ul class="headerTopRight">
        <li><a href=""><img src="img/front.PNG" width="20px"/>shopping cart</a>|</li>
        <li><a href="">recommended items</a>|</li>
        <li><a href="">gift cards</a>|</li>
        <li><a href="">groupon</a>|</li>
        <li><a href="">my gift shop <img src="img/front.PNG" width="20px"/></a>|</li>
        <li><a href="">help</a></li>
    </ul>
</div>
<div class="headerMid">
    <h1><a href="" title="logo"><img src="img/com.ico" width="40px" alt="logo"/></a></h1>
    <ul class="menuLeft">
        <li class="first"></li>
        <li><a href=""> Home</a>|</li>
        <li><a href=""> Books</a>|</li>
        <li><a href=""> Music</a>|</li>
        <li><a href=""> Movies</a>|</li>
        <li><a href=""> Sports</a>|</li>
        <li><a href=""> Clothes</a>|</li>
        <li><a href=""> Appliances</a>|</li>
        <li><a href=""> Makeup</a>|</li>
        <li><a href=""> Baby</a>|</li>
        <li><a href=""> Food</a>|</li>
        <li><a href=""> Electronics</a></li>
        <li class="last"></li>
    </ul>
    <ul class="menuRight">
        <li class="two"><a href=""> Market Street</a></li>
        <li class="two"><a href=""> Discounts</a></li>
        <li class="two"><a href=""> Top Sells <img src="img/front.PNG"></a></li>
        <li class="two"><a href=""> Community</a></li>
        <li class="two"><a href=""> Reading Online</a></li>
    </ul>
</div>
</div>
<div class="menu">
    <span class="first"></span>
    <div class="sort">
        <a href="">fiction</a>|
        <a href="">teen</a>|
        <a href="">history</a>|
        <a href="">fitness</a>|
        <a href="">children</a>|
        <a href="">travel</a>|
        <a href="">magazine</a>|
        <a href="">recommended</a>|
        <a href="">sale</a>|
        <a href="">new books</a>|
        <a href="">all</a>
    </div>
</div>
</div>
</body>
</html>

HTML+CSS 3: CSS Sprite

  • triangle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>Tri</title>
    <style type="text/css">
        body,div{margin:0;padding:0;}
        .box{ postition:relative;width:110px;height:20px; margin:20px auto; }
        .box .one{position: absolute;width:0; top:25px;height:0; border-width: 9px;
            border-style:solid; border-color: #f00 #fff #fff #fff;}
        .box .two{position: absolute;width:0; top:60px;height:0; border-width: 9px;
            border-style:solid; border-color: #fff #f00 #fff #fff;}
        .box .three{position: absolute;width:0; top:95px;height:0; border-width: 9px;
            border-style:solid; border-color: #fff #fff #f00 #fff;}
        .box .four{position: absolute;width:0; top:140px;height:0; border-width: 9px;
            border-style:solid; border-color: #fff #fff #fff #f00;}
    </style>
</head>
<body>
<div class="box">My Account<i class="one"></i></div>
<div class="box">My Account<i class="two"></i></div>
<div class="box">My Account<i class="three"></i></div>
<div class="box">My Account<i class="four"></i></div>
</body>
</html>
  • icon
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"/>
    <!--UTF-8 includes all languages; GB2312 includes Chinese-->
    <title>css12</title>
    <style type="text/css">
        body, ul, li, a, i{margin:0; padding:0;}
        li{list-style:none;}
        a{text-decoration: none; color:#0005ff; font-size: 16px;}
        ul{width:700px; margin:20px auto;border: 1px solid;}
        ul li{}
        ul li i{display: inline-block; width: 200px;
            height:150px; background: url(img/img2.jpg) no-repeat;}
        ul li i.one{background-position: -280px -90px}
        ul li i.two{background-position: -280px -270px}
        ul li i.three{background-position: -280px -420px}
        ul li i.four{background-position: -280px -580px}
    </style>
<body>
<ul>
    <li><i class="one"></i><a href="" title="">hotels</a></li>
    <li><i class="two"></i><a href="" title="">plane</a></li>
    <li><i class="three"></i><a href="" title="">taxi</a></li>
    <li><i class="four"></i><a href="" title="">train</a></li>
    <li><i class="one"></i><a href="" title="">guides</a></li>
    <li><i class="two"></i><a href="" title="">vip</a></li>
</ul>
</body>
</html>
# css # html
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

用 OpenAI Assistants 做大模型应用开发

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区