3：html（CSS)：基础语法3

3.1网页布局与id

3.1.1网页布局

在这里将使用<div>分成一个一个的块，然后进行CSS的美化。这里要说一下html是一个前端的代码，但是它写出来的东西单调缺少美感，CSS就是进行美化的，这里我们使用类的概念来美化我们的网站。

我们首先举一个例子：

html 复制代码

<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<hr>
<style>
.song {
    background-color:rgb(35, 33, 33);
    color:white;
    margin:40px;
    padding:40px;
} 
</style>
<body>
<div class="song">
<h2>《和平颂》</h2>
<p>
    选自交响诗《和平颂》第三乐章"人类之声"，由周深与交响乐团共同演绎，
    并于2024年联合国中文日推出，用音乐向世界传达中华文明的价值内核：和合、和谐、和平。 
    十分钟的音乐里，从旋律的情愫万千中，温暖的种子生根发芽，逐渐变得坚定，直至宽广地抒怀。
    音乐的段落里，有善意的歌声，也有对自然的描绘、对生命的咏叹，作曲罗威把爱的语言转换为音符，献给我们共同家园------地球。
     每个人善意的能量虽微弱，却也因为真挚而坚定有力。作词许诺用最简单、纯净、温暖的文字抵达爱，以真诚的请求层层推进，用诗意的深情呼唤爱。
    愿这曲《和平颂》能唤醒沉睡在每个人心底那个满怀善意的自己，让人们感受到命运彼此相连、生命息息相关
</p>
</div> 
</body>
<a href="https://www.163.com/v/video/VKV885BTL.html">这个是他在联合国的演唱（视频来自网易）</a>

<!-- 不重要的注释 -->
</body>
</html>

这段文字来自与百度和平颂（周深演唱的歌曲）_百度百科 (baidu.com)的介绍，视频来自与网易。

周深联合国第十五届中文日献唱和平颂|大陆综艺|国语歌曲|奔跑吧|华语歌手_网易视频 (163.com)

这里你会发现<style>这个标签下面你并不看得懂，这个是CSS的代码，就是设置了这个<div>（块）的颜色，背景颜色，大小。这个怎么设置啥意思将会在解释CSS的时候具体解释。

还有这个块<div>这个标签之下的全是这个模块的，并且这个<div class="song">这个指的是这个模块将使用关于song这个的CSS的布局，也就是说我这个模块的大小布局就是在song这里写好了。

然后结果网页现在成为了：

中间的这个就是关于对于《和平颂》的介绍。

但是他的歌又不是一首，有好多，所以我们可以建造多个块来介绍他的其他歌（当然这里肯定搞不了这么多，我只选一些歌曲。加上了我喜欢的《大鱼》

python 复制代码

<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<hr>
<style>
.song {
    background-color:rgb(35, 33, 33);
    color:white;
    margin:40px;
    padding:40px;
} 
</style>
<body>
<div class="song">
<h2>《和平颂》</h2>
<p>
    选自交响诗《和平颂》第三乐章"人类之声"，由周深与交响乐团共同演绎，
    并于2024年联合国中文日推出，用音乐向世界传达中华文明的价值内核：和合、和谐、和平。 
    十分钟的音乐里，从旋律的情愫万千中，温暖的种子生根发芽，逐渐变得坚定，直至宽广地抒怀。
    音乐的段落里，有善意的歌声，也有对自然的描绘、对生命的咏叹，作曲罗威把爱的语言转换为音符，献给我们共同家园------地球。
     每个人善意的能量虽微弱，却也因为真挚而坚定有力。作词许诺用最简单、纯净、温暖的文字抵达爱，以真诚的请求层层推进，用诗意的深情呼唤爱。
    愿这曲《和平颂》能唤醒沉睡在每个人心底那个满怀善意的自己，让人们感受到命运彼此相连、生命息息相关
</p>
</div> 
</body>
<a href="https://www.163.com/v/video/VKV885BTL.html">这个是他在联合国的演唱（视频来自网易）</a>

<div class="song">
    <h2>《大鱼》</h2>
<a href="https://baike.baidu.com/item/%E5%A4%A7%E9%B1%BC/19675903"> 
    歌曲《大鱼》是尹约与钱雷共同为动画电影《大鱼海棠》量身定制的电影印象曲，
    该曲亦是二人继创作电影《何以笙箫默》的插曲《默》后的二度合作，二人在合作中产生了新的想法 。
    在与音乐人高晓松熟悉了以后，周深又认识了尹约与钱雷，于是三人便有了该曲中的合作 。
    而为了让周深演唱时更加精准地演绎歌曲情感，词作者尹约逐词逐句地告诉周深该曲歌词的意义以及歌词背后的故事。
    在录音过程中，尹约为了升华该曲的感情，在歌曲的最后部分决定让周深自己和自己合唱.
</a>
</div>
</body>


<!-- 不重要的注释 -->
</body>
</html>

在这段代码中我将介绍大鱼的文字改成了一个超链接。

可以看一下是怎么样的

如果不喜欢这个颜色的，这个实在CSS的代码中改一下颜色就好了。

3.1.2id

id与之前的class有点像，但是与class有是有一定区别的。

id与class的用处其实是一样的，对于html中的块有指定的CSS代码，这样可以设计我们的代码，但是id在html中是唯一的，并且它的CSS格式使用#开始（与之前的.不一样）

python 复制代码

<html>
<body>
<title> Charles Wesley</title>
<h1>周深</h1>
<p>一个非常优秀的歌手</p>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196">这个是他的介绍</a>
<hr>
<style>
#song {
    background-color:rgb(35, 33, 33);
    color:white;
    margin:40px;
    padding:40px;
} 
</style>
<body>
<div id="song">
<h2>《和平颂》</h2>
<p>
    选自交响诗《和平颂》第三乐章"人类之声"，由周深与交响乐团共同演绎，
    并于2024年联合国中文日推出，用音乐向世界传达中华文明的价值内核：和合、和谐、和平。 
    十分钟的音乐里，从旋律的情愫万千中，温暖的种子生根发芽，逐渐变得坚定，直至宽广地抒怀。
    音乐的段落里，有善意的歌声，也有对自然的描绘、对生命的咏叹，作曲罗威把爱的语言转换为音符，献给我们共同家园------地球。
     每个人善意的能量虽微弱，却也因为真挚而坚定有力。作词许诺用最简单、纯净、温暖的文字抵达爱，以真诚的请求层层推进，用诗意的深情呼唤爱。
    愿这曲《和平颂》能唤醒沉睡在每个人心底那个满怀善意的自己，让人们感受到命运彼此相连、生命息息相关
</p>
</div> 
</body>
<a href="https://www.163.com/v/video/VKV885BTL.html">这个是他在联合国的演唱（视频来自网易）</a>
</body>
</html>

在这里就使用了id的元素，结果其实是一样的，可以看一下

这个id可以使用多次，可以看一下与之前同样的效果。