CSS 一个完整的例子

最新推荐文章于 2023-03-26 00:02:30 发布

bangtuo9862

最新推荐文章于 2023-03-26 00:02:30 发布

阅读量148

点赞数

原文链接：http://www.cnblogs.com/xkxf/p/7044354.html

版权

My first web page

What this is

A simple page put together using HTML. I said a simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.

Why this is

To learn HTML
To show off
1. To my boss
2. To my friends
3. To my cat
4. To the little talking duck in my brain
Because I have fallen in love with my computer and want to give her some HTML loving.

Where to find the tutorial

Some random table

Row 1, cell 1	Row 1, cell 2	Row 1, cell 3
Row 2, cell 1	Row 2, cell 2	Row 2, cell 3
Row 3, cell 1	Row 3, cell 2	Row 3, cell 3
Row 4, cell 1	Row 4, cell 2	Row 4, cell 3

Some random form

Note: It looks the part, but won't do a damned thing.

//上述内容完全copy自html dog.

Name:

Comments:

Your comments

Are you:

Male

Female

An hermaphrodite

Asexual

//上述内容完全copy自html dog.

<!DOCTYPE html>

<html>

    <head>

        <title>My first web page</title>

        <!-- This is a comment, by the way -->
        <style type="text/css">
            body {
                font-family: arial, helvetica, sans-serif;
                font-size: 14px;
                color: black;
                background-color: #ffc;
                margin: 20px;
                padding: 0;
            }
            /* This is a comment, by the way */
            
            p {
                line-height: 21px;
            }
            
            h1 {
                color: #ffc;
                background-color: #900;
                font-size: 2em;
                margin: 0;
                margin-bottom: 7px;
                padding: 4px;
                font-style: italic;
                text-align: center;
                letter-spacing: 0.5em;
                border-bottom-style: solid;
                border-bottom-width: 0.5em;
                border-bottom-color: #c00;
            }
            
            h2 {
                color: white;
                background-color: #090;
                font-size: 1.5em;
                margin: 0;
                padding: 2px;
                padding-left: 14px;
            }
            
            h3 {
                color: #999;
                font-size: 1.25em;
            }
            
            img {
                border-style: dashed;
                border-width: 2px;
                border-color: #ccc;
            }
            
            a {
                text-decoration: none;
            }
            
            strong {
                font-style: italic;
                text-transform: uppercase;
            }
            
            li {
                color: #900;
                font-style: italic;
            }
            
            table {
                background-color: #ccc;
            }
        </style>

    </head>

    <body>

        <h1>My first web page</h1>

        <h2>What this is</h2>
        <p>A simple page put together using HTML. <em>I said a simple page put together using HTML.</em> A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>

        <h2>Why this is</h2>
        <ul>
            <li>To learn HTML</li>
            <li>
                To show off
                <ol>
                    <li>To my boss</li>
                    <li>To my friends</li>
                    <li>To my cat</li>
                    <li>To the little talking duck in my brain</li>
                </ol>
            </li>
            <li>Because I have fallen in love with my computer and want to give her some HTML loving.</li>
        </ul>

        <h2>Where to find the tutorial</h2>
        <p>
            <a href="http://www.htmldog.com"><img src="http://www.htmldog.com/badge1.gif" width="120" height="90" alt="HTML Dog"></a>
        </p>

        <h3>Some random table</h3>
        <table>
            <tr>
                <td>Row 1, cell 1</td>
                <td>Row 1, cell 2</td>
                <td>Row 1, cell 3</td>
            </tr>
            <tr>
                <td>Row 2, cell 1</td>
                <td>Row 2, cell 2</td>
                <td>Row 2, cell 3</td>
            </tr>
            <tr>
                <td>Row 3, cell 1</td>
                <td>Row 3, cell 2</td>
                <td>Row 3, cell 3</td>
            </tr>
            <tr>
                <td>Row 4, cell 1</td>
                <td>Row 4, cell 2</td>
                <td>Row 4, cell 3</td>
            </tr>
        </table>

        <h3>Some random form</h3>
        <p><strong>Note:</strong> It looks the part, but won't do a damned thing.</p>

        <form action="somescript.php" method="post">

            <p>Name:</p>
            <p><input name="name" value="Your name"></p>

            <p>Comments: </p>
            <p><textarea rows="10" cols="20" name="comments">Your comments</textarea></p>

            <p>Are you:</p>
            <p><input type="radio" name="areyou" value="male"> Male</p>
            <p><input type="radio" name="areyou" value="female"> Female</p>
            <p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
            <p><input type="radio" name="areyou" value="asexual" checked> Asexual</p>

            <p><input type="submit"></p>

        </form>

    </body>

</html>

上述内容完全copy自html dog.

cnblogs_css样式保存

body {
font-family:'comic sans ms',sans-serif;
background: #00FF00 url(http://images2015.cnblogs.com/blog/1042431/201706/1042431-20170627223321649-1166499380.png) no-repeat fixed top;
}

#content {
                background: #FFF;
                box-shadow:0 10px 20px rgba(0,0,0,0.5);
                /*参数：水平阴影 竖直阴影 模糊距离！阴影的距离 阴影的颜色*/
  opacity:0.971;
}

#top {
display: none;
}

#sub {
visibility:hidden;
}

#green_channel {
display: none;
}

#ad_t2 {
display: none;
}

#cnblogs_c1 {
display: none;
}

.itnews c_ad_block {
display: none;
}

#cnblogs_c2 {
display: none;
}

转载于:https://www.cnblogs.com/xkxf/p/7044354.html

bangtuo9862

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 一个完整的例子

My first web pageWhat this isA simple page put together using HTML. I said a simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTM...
复制链接

扫一扫