html test2

66 阅读1分钟

一. 代码

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

二. 网页效果图

1.png

三. 效果图

月下独酌效果图.png