HTML与CSS（图解1）：标志

最新推荐文章于 2022-10-13 18:45:00 发布

weixin_34414650

最新推荐文章于 2022-10-13 18:45:00 发布

阅读量81

点赞数

集体选择器

选择器的嵌套

字母大小写

一个类似于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>

weixin_34414650

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS（图解1）：标志

集体选择器选择器的嵌套字母大小写一个类似于GOOGLE的标志：&lt;html&gt;&lt;head&gt; &lt;title&gt;Google&lt;/title&gt;&lt;style&gt;&lt;!--p{ font-size:80px; letter-sp...
复制链接

扫一扫