html test2一. 代码........... 二. 网页效果图........... 三. 效果图.......

一. 代码

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>基础选择器</title>
          <link rel="stylesheet" href="xzq.css" type="text/css">
     </head>
     <body>
        <h1>月下独酌</h1>
        <h3>李白</h3>
        <p class="p_one">花间一壶酒，独酌无相亲。 </p>
         <p class="p_two">举杯邀明月，对影成三人。</p> 
         <p style="letter-spacing: 20px;">月既不解饮，影徒随我身。</p> 
         <p>暂伴月将影，行乐<spen id="xu">须</spen>及春。 </p>
         <p> 我歌月<spen id="paihuai">徘徊</spen>，我舞影零乱。</p>
         <p spen id="three">醒时同交欢，醉后各分散。</p> 
         <p>永结无情游，相期邈云汉。 </p>
         <div class="four">李白（701年-762年），字太白，号青莲居士又号“谪仙人”。
          是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。于杜甫并称为“李杜”...</div>
     </body>
</html>

p{/*1.标签选择器*/
    text-align:center;/*设置文本居中标签*/
}
.p_one{/*2.类选择器
    先给标签加class属性：再“.类名”写样式*/
    color:red;
}
.p_two{
    color:blue;
}
h1{
    text-align:center;
    text-shadow: 10px 10px 10px blue;
}
#three{
    /*id选择器
     先给标签添加ID属性:再加“#id名”写样式。*/
     color: blue;
}
h3{
    text-align:center;
    font-family:jianzhi; /*设置文本字体样式*/
}
/*安装服务器字体*/
@font-face{
    font-family: jianzhi;
    src:url(font/FZJZJW.TTF);
}
/*使用服务器字体*/
h1{
    font-family: jianzhi;
}
#paihuai{
    color: red;
}
#xu{
    color: red;
}
.four{
    font-size: 10px;
}
.disan{
    font-weight: bold;
    line-height: 20px;
}

二. 网页效果图

三. 效果图

月下独酌效果图.png