写了一个小小的html

最新推荐文章于 2024-06-15 21:20:00 发布

kkkkkkkkkk*

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量135

点赞数 1

分类专栏：杂乱的学习收获文章标签： html

本文链接：https://blog.csdn.net/weixin_49480182/article/details/117909895

版权

杂乱的学习收获专栏收录该内容

4 篇文章 0 订阅

订阅专栏

因为只是小的作业，大概写一点东西，所以使用了文本文档写的，就。。。好累哦！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
body
{
background:url(girl.png);
background-size:100%;
padding-top:80px;
background-attachment:fixed;

}
.cities {
    color:white;
    margin:auto;
    padding:20px;
    width:60%;
    border: 1px solid black;
    float:right;
}	
</style>
</head>



<body>

<div class="cities">
<h2>页面主人的自我介绍</h2>
<table border="1">
<tr>
<td>名字：段孝钶</td>
<td>学号&#127380：201810113005</td>
</tr>
<tr>
<td>属相：&#128009</td>
<td>星座：&#9802</td>
</tr>
<tr>
<td>最令我惊奇的emoji:&#88776</td>
<td>emoji是乾卦，可能无法显示</td>
</tr>
<tr>
<td>此时心情：&#128516</td>
<td>写这一部分的原因：单纯因为想写emoji的功能&#128514</td>
</tr>
</table>
<p>乾（qián）卦是《周易》六十四卦第1卦。卦象是天，特性是强健。象曰：天行健，君子以自强不息。</p>
</div>

<div class="cities">
<h2>你现在听到的：</h2>
<p style="strong">其中我喜欢的一段歌词</h3>
<pre>
愿你被这个世界温柔以待
心中撷满爱
卸下所有防备自由自在
do what you wanna do
仰望星空宽广胸怀
紧紧守护着心爱
青丝变成白发梦想不败
do what you gonna do</pre>
<object height="100" width="100" data="李宇春 - 给女孩 (单曲).mp3"></object>
</div> 


<div class="cities">
<h2>端午节快乐
<img src="粽子.jpg"  width="100" height="100" align="right"></h2>
<br>
<pre>
在端午节互道“端午节快乐”是自古以来的传统。祝福“端午节安康”在古代是不存在的，只是近代才有的。
近年来，社交网络上流传端午节不适合跟朋友说“节日快乐”，因为端午是一个祭祀节日，悲壮的日子；过此节，可以送“安康”，但不建议互道“快乐”。对于流传的端午节不能互祝“快乐”、只能互送“安康”的说法，有人认为只是噱头罢了，并无依据。祝“端午节快乐”才是传统，古人的诗词也描绘了端午节喜气洋洋的节日气氛，古人也在道互道“端午节快乐”。
端午节，本是上古先民创立用于拜祭龙祖、祈福辟邪的节日。端午节是可以庆祝、可以快乐的节日，而真正起源于祭祀的节日同样也可以庆祝快乐  。中国很多传统的民俗大节，例如春节、中秋节、冬至等等，其习俗当中亦含有祭祀的成分。端午节设立初衷是一个欢乐的节日，端午节不能说快乐，是对中国文化缺乏基本了解的说法。
</div> 

<div class="cities">
<h2>一些很喜欢的网站</h2>
<wl>
<li><a href="https://www.w3school.com.cn/" target="_blank">网站建设教程</a>
感谢w3school帮我完成了这个作业 </li>
<li> <a href="https://www.csdn.net/" target="_blank">CSDN</a>
CSDN-专业开发者社区，最近开始在这里写一些博客</li>
<li><a href="https://www.bilibili.com/" target="_blank">B站</a>
众所周知，B站是一个学习的网站 </li>
</wl>
</div> 

<div class="cities">
<h2>别忘了，要天天开心，要好好生活！！！</h2></div> 

</body>
</html>

为什么写两个呢？因为加了备注后回去反而达不成原来的效果，气死我了！！！！

上面是达成我想法的，下面是加了备注的，如果有大佬看出来问题，请指教！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">   <!--声明Unicode-->
<style>
body
{
background:url(girl.png);     <!--背景图片路径-->
background-size:100%;         <!--背景图片的大小，更好占满页面-->
padding-top:80px;             <!--网页内容开始离最上面80px-->
background-attachment:fixed;  <!--背景图在滑动时不动，不重复，不会变白-->

}
.cities {                      <!--复制下来，class的名称没有更改-->
    color:white;               <!--块里面字体颜色白色-->
    margin:auto;               <!--？块的大小跟内容多少变化-->
    padding:20px;              <!--块的内容离框20px-->
    width:60%;                 <!--块的宽度，我觉得60%和背景图比较搭-->
    border: 1px solid black;   <!--块加了边框，宽度1px-->
    float:right;               <!--块整体靠右-->
}	
</style>
</head>



<body>

<div class="cities">
<h2>页面主人的自我介绍</h2>
<table border="1">
<tr>
<td>名字：段孝钶</td>
<td>学号&#127380：201810113005</td>               <!--&#加数字就是Unicode可以转换成emoji-->
</tr>
<tr>
<td>属相：&#128009</td>
<td>星座：&#9802</td>
</tr>
<tr>
<td>最令我惊奇的emoji:&#88776</td>
<td>emoji是乾卦，可能无法显示</td>
</tr>
<tr>
<td>此时心情：&#128516</td>
<td>写这一部分的原因：单纯因为想写emoji的功能&#128514</td>      <!--就，，觉得自己挺幼稚的-->
</tr>
</table>
<p>解释：乾（qián）卦是《周易》六十四卦第1卦。卦象是天，特性是强健。象曰：天行健，君子以自强不息。</p>
</div>

<div class="cities">
<h2>你现在听到的：</h2>
<p style="strong">其中我喜欢的一段歌词</h3>
<pre>                                             <!--pre可以保持换行-->
愿你被这个世界温柔以待
心中撷满爱
卸下所有防备自由自在
do what you wanna do
仰望星空宽广胸怀
紧紧守护着心爱
青丝变成白发梦想不败
do what you gonna do</pre>
<object height="100" width="100" data="李宇春 - 给女孩 (单曲).mp3"></object>
                                                   <!--插入音频，会打开网页自动播放-->
</div> 


<div class="cities">
<h2>端午节快乐                       <!--对这个图真的是不想仔细搞了，是在文字底下的-->
<img src="粽子.jpg"  width="100" height="100" align="right"></h2>
<br>                                <!--为了不和字重叠加了空的一行-->
<pre>
在端午节互道“端午节快乐”是自古以来的传统。祝福“端午节安康”在古代是不存在的，只是近代才有的。
近年来，社交网络上流传端午节不适合跟朋友说“节日快乐”，因为端午是一个祭祀节日，悲壮的日子；过此节，可以送“安康”，但不建议互道“快乐”。对于流传的端午节不能互祝“快乐”、只能互送“安康”的说法，有人认为只是噱头罢了，并无依据。祝“端午节快乐”才是传统，古人的诗词也描绘了端午节喜气洋洋的节日气氛，古人也在道互道“端午节快乐”。
端午节，本是上古先民创立用于拜祭龙祖、祈福辟邪的节日。端午节是可以庆祝、可以快乐的节日，而真正起源于祭祀的节日同样也可以庆祝快乐  。中国很多传统的民俗大节，例如春节、中秋节、冬至等等，其习俗当中亦含有祭祀的成分。端午节设立初衷是一个欢乐的节日，端午节不能说快乐，是对中国文化缺乏基本了解的说法。
</div> 

<div class="cities">
<h2>一些很喜欢的网站</h2>                    <!--插入链接，且从其他字点进去是链接-->
<wl>                                        <!--blank可以重新打开一个网页打开链接，不得不说这个功能真香-->     
<li><a href="https://www.w3school.com.cn/" target="_blank">网站建设教程</a>
感谢w3school帮我完成了这个作业 </li>
<li> <a href="https://www.csdn.net/" target="_blank">CSDN</a>
CSDN-专业开发者社区，最近开始在这里写一些博客</li>
<li><a href="https://www.bilibili.com/" target="_blank">B站</a>
众所周知，B站是一个学习的网站 </li>
</wl>
</div> 

<div class="cities">
<h2>别忘了，要天天开心，要好好生活！！！</h2></div> 
                                         <!--无论如何也要开心快乐-->
</body>
</html>

最后一句，端午节快乐！你吃粽子了没？

555555，这句祝福是我写完备注就提交时候写的，现在我一点都不快乐5555555555555555555

kkkkkkkkkk*

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
写了一个小小的html

因为只是小的作业，大概写一点东西，所以使用了文本文档写的，就。。。好累哦！<!DOCTYPE html><html><head><meta charset="utf-8"> <style>body{background:url(girl.png);background-size:100%;padding-top:80px;background-attachment:fixed;}.cities { color
复制链接

扫一扫