zoukankan      html  css  js  c++  java
  • HTML与CSS(图解1):标志

    集体选择器

    选择器的嵌套

    字母大小写

     

     

     一个类似于GOOGLE的标志:

    <html>
    <head>
        <title>Google</title>
    <style>
    <!--
    p{
        font-size:80px;
        letter-spacing:-2px;        /* 字母间距 */
        font-family:Arial, Helvetica, sans-serif;
    }
    .g1, .g2{ color:#184dc6; }
    .o1, .e{ color:#c61800; }
    .o2{ color:#efba00; }
    .l{ color:#42c34a; }
    -->
    </style>
       </head>
    
    <body>    
        <p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p>
    </body>
    </html>

    垂直对齐方式:vertical-align

    <html>
    <head>
        <title>垂直对齐</title>
    <style>
    <!--
    td.top{ vertical-align:top; }            /* 顶端对齐 */
    td.bottom{ vertical-align:bottom; }        /* 底端对齐 */
    td.middle{ vertical-align:middle; }        /* 中间对齐 */
    -->
    </style>
       </head>
    
    <body>
    <table cellpadding="2" cellspacing="0" border="1">
        <tr>
            <td><img src="02.jpg" border="0"></td>
            <td class="top">垂直对齐方式,top</td>
        </tr>
        <tr>
            <td><img src="02.jpg" border="0"></td>
            <td class="bottom">垂直对齐方式,bottom</td>
        </tr>
        <tr>
            <td><img src="02.jpg" border="0"></td>
            <td class="middle">垂直对齐方式,middle</td>
        </tr>    
    </table>
    </body>
    </html>

    首字下沉的效果

    <html>
    <head>
    <title>首字放大</title>
    <style>
    <!--
    body{
        background-color:black;        /* 背景色 */
    }
    p{
        font-size:15px;                /* 文字大小 */
        color:white;                /* 文字颜色 */
    }
    p span{
        font-size:60px;                /* 首字大小 */
        float:left;                    /* 首字下沉 */
        padding-right:5px;            /* 与右边的间隔 */
        font-weight:bold;            /* 粗体字 */
        font-family:黑体;            /* 黑体字 */
        color:yellow;                /* 字体颜色 */
    }
    /*
    p:first-letter{
        font-size:60px;
        float:left;    
        padding-right:5px;
        font-weight:bold;
        font-family:黑体;
        color:yellow;
    }
    p:first-line{
        text-decoration:underline;
    }*/
    -->
    </style>
       </head>
    <body>
        <p><span></span>秋节是远古天象崇拜——敬月习俗的遗痕。据《周礼·春官》记载,周代已有“中秋夜迎寒”、“中秋献良裘”、“秋分夕月(拜月)”的活动;汉代,又在中秋或立秋之日敬老、养老,赐以雄粗饼。晋时亦有中秋赏月之举,不过不太普遍;直到唐代将中秋与储娥奔月、吴刚伐桂、玉兔捣药、杨贵妃变月神、唐明皇游月宫等神话故事结合起,使之充满浪漫色彩,玩月之风方才大兴。</p>
        <p>北宋,正式定八月十五为中秋节,并出现“小饼如嚼月,中有酥和饴”的节令食品。孟元老《东京梦华录》说:“中秋夜,贵家结饰台榭,民间争占酒楼玩月”;而且“弦重鼎沸,近内延居民,深夜逢闻笙芋之声,宛如云外。间里儿童,连宵婚戏;夜市骈阗,至于通晓。”吴自牧《梦梁录》说:“此际金凤荐爽,玉露生凉,丹桂香飘,银蟾光满。王孙公子,富家巨室,莫不登危楼,临轩玩月,或开广榭,玳筵罗列,琴瑟铿锵,酌酒高歌,以卜竟夕之欢。</p>
    </body>
    </html>
     
  • 相关阅读:
    169. Majority Element
    283. Move Zeroes
    1331. Rank Transform of an Array
    566. Reshape the Matrix
    985. Sum of Even Numbers After Queries
    1185. Day of the Week
    867. Transpose Matrix
    1217. Play with Chips
    766. Toeplitz Matrix
    1413. Minimum Value to Get Positive Step by Step Sum
  • 原文地址:https://www.cnblogs.com/KeenLeung/p/2490917.html
Copyright © 2011-2022 走看看