html代码和css代码有什么区别?

html-css010

html代码和css代码有什么区别?,第1张

HTML代码和CSS代码有什么区别:

第一种方法:通用方法

1、打开浏览器右键查看源码代码

2、打开一个网页,在该网页中点击左键,如图

3、点击查看源代码,如图,看到了吗,这一大堆字母就是你这个网页的源代码了。

4、上面那个太复杂了,点击工具,点击开发者工具,如图,

5、这样就可以见到更简截的源代码了,如图。

第二种方法:在IE浏览器中查看

1、

2、用IE浏览器打开一个页面,如图。点击网页,

3、点击查看源文件,如图

这样就看到了这个网页的源代码了,如图

4、这个太复杂了看不懂,同样可以看到简截的,点击工具,如图

点击开者工具,如图

5、在这里就看到了HTML代码和CSS代码,如图

看看合不合你用

<!DOCTYPE html>

<html>

  

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style type="text/css">

        * {margin: 0overflow: hidden}

        i,em,strong{font-style: normal}

        .bar{border-radius: 10pxwidth: 450pxbox-sizing: }

        .sndli em{display: blockfloat: rightheight: 30pxborder-right: 1px dashed #666margin: 5px 0 0 0}

        a{text-decoration: noneheight: 40pxwidth: 150pxline-height: 40pxcolor: #000000display: blockbackground:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8))}

        ul,li{margin: 0padding: 0}

        .outli>li{list-style: nonefloat: leftbox-sizing: border-boxtext-align: centerposition: relative}

        .inli li{list-style: nonebox-sizing: border-boxtext-align: centerbackground:#DCDCDC}

        ul.inli{display: none}

        .inli0>li{float: leftwidth: 33%}

        .inli0>li:hover{background: #AAA}

        ul.outli>li.sndli:hover>ul{display: block}

    </style>

    <body>

    <div class="bar">

        <ul class="outli">

            <li class="sndli">

                <a href="javascript:void(0)">1<em></em></a>

                <ul class="inli">

                    <li>

                        <ul class="inli0">

                            <li>1.1</li>

                            <li>1.12</li>

                            <li>1.13</li>

                        </ul>

                    </li>

                    <li>

                        <ul class="inli0">

                            <li>1.21</li>

                            <li>1.22</li>

                            <li>1.23</li>

                        </ul>

                    </li>

                    <li>

                        <ul class="inli0">

                            <li>1.31</li>

                            <li>1.32</li>

                            <li>1.33</li>

                        </ul>

                    </li>

                </ul>

            </li>

            <li class="sndli">

                <a href="javascript:void(0)">2<em></em></a>

                <ul class="inli">

                    <li>

                        <ul class="inli0">

                            <li>2.1</li>

                            <li>2.12</li>

                            <li>2.13</li>

                        </ul>

                    </li>

                    <li>

                        <ul class="inli0">

                            <li>2.21</li>

                            <li>2.22</li>

                            <li>2.23</li>

                        </ul>

                    </li>

                    <li>

                        <ul class="inli0">

                            <li>2.31</li>

                            <li>2.32</li>

                            <li>2.33</li>

                        </ul>

                    </li>

                </ul>

            </li>

            <li class="sndli">

                <a href="javascript:void(0)">3</a>

                <ul class="inli">

                    <li>

                        <ul class="inli0">

                            <li>3.1</li>

                            <li>3.12</li>

                            <li>3.13</li>

                        </ul>

                    </li>

                    <li>

                        <ul class="inli0">

                            <li>3.21</li>

                            <li>3.22</li>

                            <li>3.23</li>

                        </ul>

                    </li>

                    <li>

                        <ul class="inli0">

                            <li>3.31</li>

                            <li>3.32</li>

                            <li>3.33</li>

                        </ul>

                    </li>

                </ul>

            </li>

        </ul>

    </div>

    </body>

</html>

写样式表文件。如:<html><head><title></title><style type="text/css">

#divs{

width: 200px

display: inline

}

</style>

</head>

<body>

<div id="divs" class="divs"><img src="" id="left" alt="" width="200px" onclick="leftImg('left')" /></body></html>

</div>