zoukankan html css js c++ java

CSS 一个完整的例子

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;
}

查看全文

相关阅读:
HDU 5486 Difference of Clustering 图论
 HDU 5481 Desiderium 动态规划
 hdu 5480 Conturbatio 线段树单点更新，区间查询最小值
 HDU 5478 Can you find it 随机化数学
 HDU 5477 A Sweet Journey 水题
 HDU 5476 Explore Track of Point 数学平几
 HDU 5475 An easy problem 线段树
 ZOJ 3829 Known Notation 贪心
 ZOJ 3827 Information Entropy 水题
 zoj 3823 Excavator Contest 构造

原文地址：https://www.cnblogs.com/xkxf/p/7044354.html