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

    HTML Dog

    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:

    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;
}
  • 相关阅读:
    sqlserver数据库的备份与还原——完整备份与还原
    sqlserver中为节约存储空间的收缩数据库机制
    sqlserver数据库的分离与附加
    sqlserver的数据库状态——脱机与联机
    sqlserver打开对象资源管理器管理的帮助文档的快捷键
    sqlserver使用SQL语句创建数据库登录对象、数据库用户以及对为该用户赋予操作权限
    sqlserver window身份验证时切换账户的快捷键
    向现有数据库中添加文件组和数据文件
    使用SQL语句创建数据库2——创建多个数据库文件和多个日志文件
    Java中怎样判断一个字符串是否是数字?
  • 原文地址：https://www.cnblogs.com/xkxf/p/7044354.html
Copyright © 2011-2022 走看看