第一次尝试编写html和css

HTML的相关内容
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>你是人间四月天</title>
<link rel="stylesheet" href="text.css">
<link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
</head>
<body>
<div id="beijing">
<div class="container">
<div class="jumbotron">
<div class="row">
<h1>你是人间四月天</h1>
<h2>林徽因</h2>
<div id="page">

</div>
<div id="zhengwen">
<p>我说你是人间的四月天;</p>
<p>笑响点亮了四面风;</p>
<p>轻灵在春的光艳中交舞着变。</p>
<p>你是四月早天里的云烟,</p>
<p>黄昏吹着风的软,</p>
<p>星子在无意中闪,</p>
<p>细雨点洒在花前。</p>
<p>那轻,那娉婷,你是,</p>
<p>鲜妍百花的冠冕你戴着,</p>
<p>你是天真,庄严,</p>
<p>你是夜夜的月圆。</p>
<p>雪化后那片鹅黄,你像;</p>
<p>新鲜初放芽的绿,你是;</p>
<p>柔嫩喜悦,</p>
<p>水光浮动着你梦期待中白莲。</p>
<p>你是一树一树的花开,</p>
<p>是燕在梁间呢喃,</p>
<p>——你是爱,是暖,是希望,</p>
<p>你是人间的四月天!</p>
</div>
<div id="mingyan">
<blockquote>
<p>答案很长,我准备用一生的时间来回答,你准备要听了吗?</p>
<footer><cite>——林徽因</cite></footer>
</blockquote>
</div>
<div id="suggest">
<label><input type="radio" name="suggest">❤❤❤</label>
<label><input type="radio" name="suggest">❤❤</label>
<label><input type="radio" name="suggest">❤</label>
<button type="submit">提交</button>
</div>
<div id="lianjie">
<h3>想了解
<a rel="nofollow" rel="noreferrer"href="http://baike.baidu.com/link?url=oIUT9JKp0f6yTWPsOKpAcijBSxhwufnPstBJSJ4EoRkqkjWIQJd7d1WwVppi9TLczRCZGa5NTfa3VeYXkdYHK-tkIarL1IBL4qmGSjDAQaOU8pK1EdcTR8NSAidonitP" target="_blank">
更多
</a>
</h3>
<br />
<br />

</div>
   </div>

</div>
</div>
</div>

<div id="yemei">
<footer class="text-center">
<hr>
<p>Written and coded by <a rel="nofollow" rel="noreferrer"href="http://www.jianshu.com/users/b9cf8b2a47b3/timeline" target="_blank">Jinyufeng</a>.</p>

</footer>
</div>

</body>

CSS内容
body{
margin-top: 5px;
width: 100%;
height: 100%;
}
h1{
text-align: center;
font-family:"微软雅黑","黑体","宋体";
font-weight: normal
}
h2{
text-align: center;
font-family:"微软雅黑","黑体","宋体";
font-weight: normal
}

page{

text-align: center;

}

suggest{

text-align: center;
font-family: "sans-serif";    

}

zhengwen{

text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 19px;
color: #000000;    

}

mingyan{

text-align: center;
font-family:"微软雅黑","黑体","宋体";
font-size:21px; 

}

lianjie{

text-align: center;
font-family:"微软雅黑","黑体","宋体";
font-size:12px;

}

yemei{

text-align: center;
font-family:"微软雅黑","黑体","宋体";
font-size:12px;

}

beijing{

background-color: #CCC;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 5,863评论 2 2
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,917评论 0 6
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,079评论 1 4
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,275评论 0 40
  • “按语”的目的:“按语”就像是一道开胃菜,用生动的文字激发读者想要去读内容的兴趣。 首先,我鼓励大家都可以运用自己...
    heis照亮阅读 6,893评论 0 0