zoukankan      html  css  js  c++  java

  • html教程

    用div来占块，布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>用div来占块,布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
</head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

    用CSS来控制

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>用css来控制</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    div{
        height: 200px;
        background: blue;
    }

    #main {
        background: green;
    }

    #footer {
        background: gray;
    }
</style>
</head>
    <body>
        <div id="header"></div>
        <div id="main"></div>
        <div id="footer"></div>
    </body>
</html>

    效果图：

    浮动布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>浮动布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #lside{
        width:20px;
        height: 100px;
        background: green;
        float: left;
    }

    #rside{
        width: 20px;
        height: 100px;
        background: red;
        float: right;
    }
    #comm {
        width:300px;
        height: 300px;
        background: orange;
    }
</style>
</head>
    <body>
        <div id="lside">我是左</div>
        <div id="rside">我是右</div>
        <div id="comm">我是普通div</div>
    </body>
</html>

    效果图：

    清除浮动（clear: both;）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>清除浮动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    #lside{
        width:20px;
        height: 300px;
        background: green;
        float: left;
    }

    #rside{
        width: 20px;
        height: 200px;
        background: red;
        float: right;
    }
    #comm {
        height: 300px;
        background: orange;
        clear: both;
    }
</style>
</head>
    <body>
        <div id="lside">我是左</div>
        <div id="rside">我是右</div>
        <div id="comm">我是普通div</div>
    </body>
</html>

    效果图：

    新手常见错误：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新手常犯的错误</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #2{
        width: 300px;
        height: 300px;
        background: blue;
    }
</style>
</head>
    <body>
        <div id="2">
            1:不加doctype ,---导致低版本IE,解析效果不一样<br />
            2:id为数字<br />
            3:文件编码与charset声明不一致
        </div>
    </body>
</html>

    盒模型之margin设置（上右下左）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>盒模型之margin设置</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #cont{
        width:1000px;
        height:600px;
        background: green;
    }

    div {
        width:400px;
        height:200px;
        float:left;
    }

    #test{
        /*
        margin:10px;
        */
        /*
        
        margin-top:10px;
        margin-left: 20px;
        margin-bottom: 30px;
        margin-right: 40px;
        */

        /*margin:10px 20px;*/
        margin: 10px 20px 30px;
        background: red;
    }

    #test2 {
        background: orange;
    }

    #test3{
        width:1000px;
        background: blue;
    }
</style>
</head>
    <body>
        <div id="cont">
            <div id="test"></div>
            <div id="test2"></div>
            <div id="test3"></div>
        </div>
    </body>
</html>

    效果图：

    盒模型之border设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>盒模型之border设置</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    div{
        width: 800px;
        height: 800px;
        background: blue;
        /*border: 10px outset purple;*/

        /*单独设置某个方向的边框*/
        border-top:10px solid orange; 

        /*
        也可以单独设置边框的3要素之1,比如形色
        */
        border-style:dashed;

    }
</style>
</head>
    <body>
        <div>
            盒子的border 3要素 宽(border-width),形状(border-style),颜色(border-color)
        </div>
    </body>
</html>

    效果图：

    用css控制border画3角形

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> 用css控制border画3角形</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    #trip{
        width:100px;
        height: 100px;
        border-top: 50px solid blue;
        border-right: 50px solid red;
        border-bottom: 50px solid green;
        border-left: 50px solid orange;
    }
</style>
</head>
    <body>
            <div id="trip"></div>
    </body>
</html>

    效果图：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>用css控制border画3角形</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    #trip{
        width:0px;
        height: 0px;
        border-top: 50px solid blue;
        border-right: 50px solid red;
        border-bottom: 50px solid green;
        border-left: 50px solid orange;
    }
</style>
</head>
    <body>
            <div id="trip"></div>
    </body>
</html>

    效果图：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>用css控制border画3角形</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    div{
        height:200px;
        background: gray;
    }
    #trip{
        width:0px;
        height: 0px;
        border-top: 50px solid white;
        border-right: 50px solid white;
        border-bottom: 50px solid green;
        border-left: 50px solid white;
    }
</style>
</head>
    <body>
        <div>
            <div id="trip"></div>
        </div>
    </body>
</html>

    效果图：

     padding详解

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>padding详解</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    div{
        background: gray;
        /*padding: 10px;*/
        /*padding-top: 10px;
        padding-right: 30px;*/

        padding: 10px 20px 30px;
    }
</style>
</head>
    <body>
        <div>
            关于HTM，实际上HTM与HTML没有本质意义的区别，只是为了满足DOS仅能识别8+3的文件名而已，因为一些老的系统(win32)不能识别四位文件名，所以某些网页服务器要求index.html最后一个l不能省略。MSIE能自动识别和打开这些文件，但编写网页地址的时候必须是完全对应的，也就是说index.htm和index.html是两个不同的文件，对应着不同的地址。值得一提的是UNIX系统中对大小写敏感，不吻合的话就可能报没有文件或者找不到文件。   
关于shtml，shtml是一种基于SSI技术的文件，也就是Server Side Include--SSI 服务器端包含指令，一些Web Server如果有SSI功能的话就会对shtml文件特殊招待，服务器会先扫一次shtml文件看没有特殊的SSI指令存在，如果有的话就按Web Server设定规则解释SSI指令，解释完后跟一般html一起调去客户端。   
        </div>
    </body>
</html>

    效果图：

    padding与背景

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> padding与背景</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    div{
         200px;
        height: 200px;
        background: gray;
        border: 10px solid blue;
        padding: 20px;

    }
</style>
</head>
    <body>
        <div>
            hello world
        </div>
    </body>
</html>

    效果图：

    盒子模型总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>盒子模型总结</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    div{
         300px;
        height:300px;
        background: gray;
        border: 50px solid blue;
        padding:50px;
        margin: 50px;
    }
</style>
</head>
    <body>
        <div>
            一个盒子,有margin,border,padding,实占多少空间?<br />
            竖直方向:height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom<br />
            水平方向: width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
        </div>
    </body>
</html>

    效果图：

    利用margin实现水平居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>利用margin实现水平居中</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #container{
        1000px;
        height: 200px;
        margin:0px auto;
        background: blue;
    }
</style>
</head>
    <body>
        <div id="container"></div>
    </body>
</html>

    margin重叠现象研究

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>margin重叠现象研究</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    #test1{
        height:100px;
        background: blue;
        margin-bottom: 50px;
    }

    #test2 {
        height: 100px;
        background: green;
        margin-top: 80px;
    }
</style>
</head>
    <body>
        <div id="test1">
            上下相邻的普通元素,上下边距,并非简单的相加,<br />
            而是取其中较大的边距值<br />
            这种现象叫做margin重叠
        </div>
        <div id="test2"></div>
    </body>
</html>

    效果图：

    inline内联(行内元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>inline内联(行内元素)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    
#kurong {
     400px;
    height:400px;
    margin-top:10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    color:red;

    margin-left: 10px;
    padding-left: 20px;
}
</style>
</head>
    <body>
        <div>
            离离原上草，一岁一<span id="kurong">枯荣</span>。<br />
野火烧不尽，春风吹又生。<br />
远芳侵古道，晴翠接荒城。<br />
又送王孙去，萋萋满别情。<br />
        </div>
    </body>
</html>

    内联与块状的转化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>内联与块状的转化</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    span{
        200px;
        height:200px;
        background: blue;
        display: block;
    }
    div{
        200px;
        height:200px;
        background: orange;
        display: none;
        /*display: inline;*/
    }
</style>
</head>
    <body>
        <div>块状</div>
        <span>行内</span>
    </body>
</html>

    效果图：

    css控制段落文本

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> css控制段落文本</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #p1 {
        background: gray;
        text-indent: 20px;
        text-align: right;
    }
    #p2 {
        background: orange;
        text-decoration: line-through;
        letter-spacing: 20px;

    }
</style>
</head>
    <body>
        <p id="p1">记者注意到，在《决定》关于集体土地的表述中，并没有提及“小产权房”。对此，北京市房协秘书长陈志认为，《决定》提出的是改革的方向，包括土地制度改革的方向，而“小产权房”只是其中的一个具体问题，因此《决定》不会谈及如何解决“小产权房”这样具体的问题。</p>
        <p id="p2">“具体到‘小产权房’的问题，还需要相关部门根据《决定》的精神，研究具体的解决办法。”陈志说，从长远看，“小产权房”问题肯定要解决。</p>
    </body>
</html>

    效果图：

    文字控制

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>文字控制</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #test1 {
        color: blue;
        font-style: italic;
        font-weight: bold;
        font-size: 23px;
        line-height: 46px;
        font-family: "SimHei";
    }
    #test2 {
        font:italic bold 23px/46px "SimHei";
    }
</style>
</head>
    <body>
        <div id="test1">离离原上草，一岁一枯荣。<br />
野火烧不尽，春风吹又生。</div>
        <div id="test2">
            离离原上草，一岁一枯荣。<br />
野火烧不尽，春风吹又生。
        </div>
    </body>
</html>

    效果图

    字体控制精讲

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>字体控制精讲</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    #test1{
        font-family: '微软雅不黑','微软雅黑','黑体',sans-serif;
    }

    #test2{
        font-family: 'New Times','新宋','宋体',serif;
    }
</style>
</head>
    <body>
        <div id="test1">离离原上草，一岁一枯荣。<br />
野火烧不尽，春风吹又生。</div>

        <div id="test2">离离原上草，一岁一枯荣。<br />
野火烧不尽，春风吹又生。</div>
    </body>
</html>

    背景图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>背景图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    body {
        background-color: blue;
        background-image: url(small.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
</style>
</head>
    <body>
        <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>

    效果图：

    大图片背景

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>大图片背景</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #test1 {
        border: 1px solid orange;
        width: 500px;
        height:500px;
        background-image: url(small.jpg);
        background-repeat: no-repeat;
        background-position: center; center;
        
    }

    #test2 {
        width:50px;
        height:30px;
        border: 1px solid blue;
        /*
        background-image: url(bg.png);
        background-position: -150px -530px;
        */
        background: gray url(bg.png) no-repeat -150px -530px;
    }
</style>
</head>
    <body>
        <div id="test1"></div>
        <div id="test2"></div>
    </body>
</html>

    效果图：

    css选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>css选择器</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    #test1{
        width: 100px;
        height:50px;
        border: 1px solid blue;
    }

    .test2{
        width: 100px;
        height:50px;
        border: 1px solid red;
    }

    div{
        width: 100px;
        height: 50px;
        background: orange;
        margin-bottom: 10px;
    }

    div p {
        color:red;
    }
</style>
</head>
    <body>
        <div id="test1">test1</div>
        <div class="test2">test2</div>
        <div>普通div
            <p >我是div中的p标签</p>
        </div>
        <p>我是独立P标签</p>

        <div>id选择器, class选择器,标签选择器, 派生选择器</div>
    </body>
</html>

    效果图:

    css优先级

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>css优先级</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    p{
        color: red;
    }

    .test2{
        color: green;
    }

    #test1{
        color: blue;
    }

    div #test1 {
        color:pink;
    }
</style>
</head>
    <body>
        <div>
            <p id="test1" class="test2">天天向上</p>
        </div>
    </body>
</html>

    效果图：

    css引入方式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>css引入方式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<link rel="stylesheet" href="./23css.css" />
<style>
    body{
        background: blue;
    }
</style>
</head>
    <body>
        <div id="test1" style="color:white;">好好学习</div>
    </body>
</html>
    23css.css
    @import url(23-2.css);
#test1{
    width: 200px;
    height: 200px;
    background: red;
}
    23-2.css
    #test1 {
    border: 10px solid green;
}

    效果图：

    css初始化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> css初始化</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    /*css reset code */

/****  文字大小初始化,使1em=10px *****/
body {
font-size:62.5%;
} /* for IE/Win */
html>body {
font-size:10px;
} /* for everything else */

/*字体边框等初始化*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
 padding: 0;
 margin: 0;
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
fieldset,img {
 border: 0;
 }
 img {
 display:block;
 }
address,caption,cite,code,dfn,th,var {
 font-weight: normal;
 font-style: normal;
 }
ol,ul {
 list-style: none;
 }
caption,th {
 text-align: left;
 }
h1,h2,h3,h4,h5,h6 {
 font-weight: normal;
 font-size: 100%;
 }
q:before,q:after {
 content:'';
 }
abbr,acronym { border: 0;
 }

a {
text-decoration:none;
}
</style>
</head>
    <body>
        <div>
            相同的元素,如li,在不同的浏览器下,显示的效果稍有不同,<br />
            是因为,而浏览器对各元素的margin,border,font-size等略有不同,<br />
            如果杜绝这种情况,我们通过css强制让所有元素的属性值都一样,<br />
            这样,浏览器显示就一致了,减少了不兼容情况的发生.<br />
            这个过程,叫做css初始化
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
            </ul>
        </div>
    </body>
</html>

    h标签和p标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>h标签和p标签</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
</head>
    <body>
        <h1>title1</h1>
        <h2>title2</h2>
        <h3>title3</h3>
        <h4>title4</h4>
        <h5>title5</h5>
        <h6>title6</h6>
        <h7>title7</h7>
        <div>h1-6系列 表示1-6号标题,字越来越小</div>
        <p>p表示段落, 在新闻网站中,h与p经常一起出现,<br />
            新闻标题一般用h表示,而新闻的每一段内容,适合用p标签.
        </p>
    </body>
</html>

    效果图：

    img图片标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> img图片标签</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
</head>
    <body>
        <img src="http://img3.cache.netease.com/photo/0001/2013-11-19/9E1PPB1000AO0001.jpg" alt="" />
        <img src="../logo.png" alt="菊花图" title="鼠标放上去 他就显示" />
        <img src="juhua.jpg" alt="菊花图" title="鼠标放上去 他就显示" />
    </body>
</html>

    图片是内联还是块状?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>图片是内联还是块状?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    img{
        width: 300px;
        height:180px;
        margin: 0px;
        display: block;
    }
    #test1{
        width: 500px;
        height: 300px;
        border: 1px solid blue;
    }
</style>
</head>
    <body>
        <img src="./small.jpg" alt="" />
        <img src="./small.jpg" alt="" />
        <div id="test1">图片是内联元素,同时是 内联替换元素,替换元素是能设置宽高的</div>
    </body>
</html>

    效果图：

    有序列表与无序列表

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>有序列表与无序列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    ul li{
        list-style-type: square;
    }

    ol li {
        list-style-type: upper-roman;
    }
</style>
</head>
    <body>
        <ul>
            <li>春</li>
            <li>夏</li>
            <li>秋</li>
            <li>冬</li>
        </ul>

        <ol>
            <li>有序1</li>
            <li>有序2</li>
            <li>有序3</li>
            <li>有序4</li>
        </ol>
    </body>
</html>

    效果图：

    整齐的表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> 整齐的表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    table{
        /*border-collapse: separate;
        border-spacing: 20px;*/
        border-collapse: collapse;
    }
    td{
        border: 1px solid blue;
    }
</style>
</head>
    <body>
        <table>
            <tr>
                <td colspan="4">1</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td rowspan="2">24</td>
            </tr>
            <tr>
                <td>25</td>
                <td>26</td>
                <td>27</td>
            </tr>
        </table>
    </body>
</html>

    效果图：

    超链接标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>超链接标签</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
</head>
    <body>
        <a href="index.html" target="_blank">index</a>
        <a href="http://www.zixue.it" title="鼠标放上来">自学it网</a>
    </body>
</html>

    效果图：

    锚点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> 锚点</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
</head>
    <body>
        <a href="31-anchor.html#p1">p1锚点</a>
        <a href="31-anchor.html#p2">p2锚点</a>
        <a href="31-anchor.html#p3">p3锚点</a>

        <a name="p1"></a>
        <p>p1</p>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <a name="p2"></a>
        <p>p2</p>
        <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 />
        <a name="p3"></a>
        <p>p3</p>
        <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>

    css a标签伪类

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> css a标签伪类</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    a:link{
        color:gray;
    }
    
    a:visited {
        color:purple;
    }
    
    a:hover{
        color:orange;
    }

    a:active{
        color:black;
    }
</style>
</head>
    <body>
        <div>
            css允许我们针对a标签的4种状态设置各自的css特性,叫做css伪类<br />
            1:active一般不必写
            2:一定注意,顺序是 LVHA
            3: a:link可以简写为a
        </div>
        <div>
            <a href="#">空链接</a>
            <a href="#">空链接</a>
            <a href="#">空链接</a>
            <a href="#">空链接</a>
            <a href="#">空链接</a>
        </div>
    </body>
</html>

    效果图：

    字符实体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>字符实体</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
</head>
    <body>
        <div>
            在html开发中,有一些字符,不适于直接写出,如&gt; &lt;<br />
            一般的格式: &amp; + 实体名 + ;
            实体有很多,记住常用的
            &gt; &lt; &quot; &yen; &copy; 
        </div>
    </body>
</html>

    效果图：

    色彩的表示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>色彩的表示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
</head>
    <body>
        <pre>
            orange,white,#FFA083;
            1:颜色用数字来表示
            2:颜色由3原色组成的,红red 绿green 蓝blue  rgb
            3:3原色各在[0-255]之间变化

            综上:本质是组合3原色
            1:用16进制组合[0-255]-->[00,FF], <span style="color:#234567">#234567</span>
            2:用10进制来组合,如<span style="color:rgb(240,23,45)">rgb(240,25,25)</span>;
            3:html提供常用颜色的名称,如<span style="color:orange">orange</span>,<span style="color:pink">pink</span>,purple,red

            4:#EEEEEE-->#EEE, 当6个字符一样时,可以科室简写为3个字符,
        </pre>
    </body>
</html>

    尺寸的表示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>尺寸的表示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #par{
        width: 600px;
        height: 300px;
        background: green;
    }

    #son1 {
        width: 300px;
        height: 100px;
        background: blue;
    }

    #son2 {
        width: 50%;
        height: 50%;
        background: pink;
    }

    #test1 {
        font-size: 10px;
    }

    #p1 {
        font-size: 20px;
    }

    #p2 {
        font-size: 1.5em;
    }

</style>
</head>
    <body>
        <div id="par">
            <div id="son1">我用像素来表示</div>
            <div id="son2">我用百分比来表示,块状子元素要是不说宽度,默认占满父元素的宽度</div>
        </div>

        <div id="test1">
            父div
            <p id="p1">我用px表示文字大小</p>
            <p id="p2">我用em表示文字大小,em是相对大小,是指其父元素中的1个"M"的大小,简单理解为父元素的fon-size就是1个em单位</p>
        </div>

    </body>
</html>

    效果图：

    CSS画圆角

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>第52课 CSS画圆角</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 xhtml 12小时入门教程" />
<style>
    #test1 {
        width: 300px;
        height: 300px;
        border: 1px solid blue;
        border-radius: 15px;
    }

    #test2 {

        width: 300px;
        height: 300px;
        border: 1px solid red;
        border-radius: 150px;    
    }
</style>
</head>
    <body>
        <div id="test1">css画圆角,目前的主流浏览器都已经支持</div>
        <div id="test2">用css画1个圆</div>
    </body>
</html>

    效果图：

    相对定位与绝对定位

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>相对定位与绝对定位</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #test1{
        width: 300px;
        height: 300px;
        background: green;
    }

    p {
        margin: 0px;
        padding: 0px;
    }

    #p1 {
        width: 100px;
        height: 100px;
        background: blue;
        position: relative;
        /*top:20px;
        left: 20px;
        */
        right: 20px;
        bottom: 20px;
    }

    #p2 {
        width: 100px;
        height: 100px;
        background: orange;
    }


    #test2{
        width: 300px;
        height: 300px;
        background: pink;
        position: relative;
    }

    #p3 {
        width: 100px;
        height: 100px;
        background: black;
        position: absolute;
        top: 20px;
        left:30px;
        z-index: 1002;
    }

    #p4 {
        width: 100px;
        height: 100px;
        background: purple;
        position: absolute;
        top: 30px;
        left:40px;
        z-index: 1001;
    }
</style>
</head>
    <body>
        <div id="test1">
            <p id="p1">我是p1,相对定位是指元素在其正常的位置,偏移某些像素</p>
            <p id="p2">我是p2,相对定位是指元素在其正常的位置,偏移某些像素</p>
        </div>

        <div id="test2">
            用绝对定位时,父元素要求有position属性才行,否则将依据父父,父的父的父,...body,<br />
            哪个祖先有postion属性,相对哪个祖先,如果都没有,相对于body
            <p id="p3">我要绝对定位,绝对定位是指相对于父元素的top,left,right,bottom来定位</p>
            <p id="p4"></p>
        </div>
    </body>
</html>

    效果图：

    overflow溢出处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>overflow溢出处理</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
div{
    width:200px;
    height:200px;
    border:1px solid blue;
    overflow: auto;
}

p{
    border: 1px solid gray;
}
</style>
</head>
    <body>
        <div>
            <p>
                新华网北京11月20日电 今日出版的南方日报发布消息称，近日，中央批准：马兴瑞同志任广东省委委员、常委、副书记，朱明国同志不再担任广东省委副书记、常委职务。至此，经新一轮调整后，全国31位省级政协主席全部“退出”同级党委常委班子，4位省级党委专职副书记均不再兼任政协主席。新华网北京11月20日电 今日出版的南方日报发布消息称，近日，中央批准：马兴瑞同志任广东省委委员、常委、副书记，朱明国同志不再担任广东省委副书记、常委职务。至此，经新一轮调整后，全国31位省级政协主席全部“退出”同级党委常委班子，4位省级党委专职副书记均不再兼任政协主席。


新华网北京11月20日电 今日出版的南方日报发布消息称，近日，中央批准：马兴瑞同志任广东省委委员、常委、副书记，朱明国同志不再担任广东省委副书记、常委职务。至此，经新一轮调整后，全国31位省级政协主席全部“退出”同级党委常委班子，4位省级党委专职副书记均不再兼任政协主席。


新华网北京11月20日电 今日出版的南方日报发布消息称，近日，中央批准：马兴瑞同志任广东省委委员、常委、副书记，朱明国同志不再担任广东省委副书记、常委职务。至此，经新一轮调整后，全国31位省级政协主席全部“退出”同级党委常委班子，4位省级党委专职副书记均不再兼任政协主席。



            </p>
        </div>
        <div></div>
    </body>
</html>

    效果图：

    表单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> 表单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
</head>
    <body>
        <div>在用户注册,在线报名等场合时,
            需要把用户的信息,填写并提交,这时要用到表单来收集用户的信息<br />
        </div>
        <form action="http://www.baidu.com" method="post">
            <p>
                用户名: <input type="text" name="username" value="lisi" />
            </p>
            <p>
                密码: <input type="password" name="password" />
            </p>
            <p>
                性别: 男:<input type="radio" name="xingbie" value="男" />
                    女:<input type="radio" name="xingbie" value="女"  checked="checked" />
            </p>
            <p>
                爱好:篮球 <input type="checkbox" name="hobby" value="篮球" />
                    足球 <input type="checkbox" name="hobby" value="足球" />
                    台球 <input type="checkbox" name="hobby" value="台球" checked="checked" />
                    混球 <input type="checkbox" name="hobby" value="混球" />
            </p>
            <p>
                <select name="xueli">
                    <option value="大学">大学</option>
                    <option value="高中" selected="selected">高中</option>
                    <option value="初中">初中</option>
                </select>
            </p>
            <p>
                <textarea name="intro">i am from china</textarea>
            </p>
            <p>
                上传头像: <input type="file" name="pic" />
            </p>
            <p>
                隐藏域: 你看不见<input type="hidden" name="IP" value="192.168.1.100" />
            </p>
            <p>
                <input type="submit" value="提交" />
            </p>
            <p></p>
        </form>
    </body>
</html>

    效果图：

    框架集

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<head>
<title>框架集</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
</head>
    <!-- <frameset rows="200px,*">
        <frame src="16-css-text.html" ></frame>
        <frame src="09-padding.html" ></frame>
    </frameset> -->
    <!-- <frameset cols="30%,*">
        <frame src="16-css-text.html" ></frame>
        <frame src="09-padding.html" ></frame>
    </frameset> -->

    <frameset rows="200px,*">
        <frame src="16-css-text.html"></frame>
        <frameset cols="200px,*">
            <frame src="40-left.html"></frame>
            <frame src="xx.html" name="you"></frame>
        </frameset>
    </frameset>
</html>
  • 相关阅读:
    一些常用的Unix命令
    Shortcut Blocks with Symbol to_proc 通过to_proc为代码块逻辑命名
    Using with_scope 使用with_scope
    Move Find into Model 将查询方法从控制器上移至模型
    Find Through Association 使用级联查询
    Dynamic find_by Methods 使用动态的find_by方法
    Caching with Instance Variables 缓存与实例变量
    深入浅出object-c
    IT大神进化史-第二章
    IT大神进化史-第一章
  • 原文地址：https://www.cnblogs.com/yechangzhong-826217795/p/5047966.html
Copyright © 2011-2022 走看看