目标

实现下列网页样式

成果

代码展示

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">
*{font-family: SimSun;}hr{width: 400px;height: 10px;background-color: red;}</style>
</head>
<body background="bg.jpg"><h2>目录</h2><ul><li><a href="#1">基本信息</a></li><li><a href="#2">作品原文</a></li><li><a href="#3">注释译文</a></li><li><a href="#">作品鉴赏</a></li><li><a href="#4">作品简介</a></li></ul><h2><a id="1">基本信息</a></h2><p style="line-height: 2px">【作品名称】《江村即事》</p><p style="line-height: 2px">【创作年代】中唐</p><p style="line-height: 2px">【作者姓名】司空曙</p><p style="line-height: 2px">【作品名称】七言绝句</p><h2><a id="2">作品原文</a></h2><p style="font-size: 35px;color: #930093;text-align: center"><u>江村即事</u></p><p style="font-size: 20px;color: red;text-align: center;font-family: YouYuan">（唐）司空曙 </p><hr><p style="font-size: 18px;color: blue;text-align: center;font-weight: bold;font-family: LiSu">钓罢归来不系船，</p><p style="font-size: 18px;color: blue;text-align: center;font-weight: bold;font-family: LiSu">江村月落正堪眠。</p><p style="font-size: 18px;color: blue;text-align: center;font-weight: bold;font-family: LiSu">纵然一夜风吹去，</p><p style="font-size: 18px;color: blue;text-align: center;font-weight: bold;font-family: LiSu">只在芦花浅水边。</p><h2><a id="3">注释</a></h2><ol><li>罢：完了。系：系好。</li><li>正堪眠：正是睡觉的好时候。</li><li>纵然：即使。</li><li>即事：以当前的事物为题材所做的诗。</li></ol><h2><a id="4">作者简介</a></h2><p style="text-indent: 2em;">司空曙(约720-790年)，字 文明，或作文初。广平（今河北永年县东南）人，大历十 才子之一，唐代诗人。约唐代宗大历初前后在世。大历年进 士，磊落有奇才，与李约为至交。性耿介，不干权要。家无 担石，晏如也。尝因病中不给，遣其爱姬。韦辠节度剑南， 辟致幕府。授洛阳主簿。未几，迁长林县丞。累官左拾遗。 终水部郎中。曙诗有集二卷，登进士第，不详何年。曾官主 簿。大历五年任左拾遗，贬长林(今湖北荆门西北)丞。贞元 间，在剑南西川节度使韦皋幕任职，官检校水部郎中，终虞 部郎中。曙为卢纶表兄，亦是"大历十才子"之一。其诗多为 行旅赠别之作，长于抒情，多有名句。胡震亨曰："司空虞 部婉雅闲淡，语近性情。"(《唐音癸签》卷七)有《司空文 明诗集》。其诗朴素真挚，情感细腻，多写自然景色和乡情 旅思，长于五律。诗风闲雅疏淡。</p><img src="司空曙.jpg">
</body>
</body>
</html>

网页展示

除背景图与字体等其他因素外，基本还原了目标网页。

HTML/CSS 学习记录#1相关推荐

css学习记录三：文本属性
css学习记录三:CSS文本属性一.文本属性的作用二.文本颜色三.文本对齐四.装饰文本五.文本缩进六.行间距一.文本属性的作用 CSSS Text(文本)属性可定义文本的外观,比如文本的 ...
WEB开发零基础到入门之HTML+CSS(学习记录)
序言之前一直想把自己的一个学习记录,以文章形式记录下来,方便于自己后期查找和温故.自己想了想准备建个人博客站来做记录,但是又想到了csdn的大家庭:所以就放弃了用个人站记录的想法,关于这里简单说明下 ...
CSS学习记录（二）
文章目录八.CSS 的复合选择器 8.1 什么是复合选择器 8.2 后代选择器 (重要) 8.3 子选择器 (重要) 8.4 并集选择器 (重要) 8.5 伪类选择器 8.5.1 链接伪类选择器 8 ...
CSS学习记录（一）
文章目录一.CSS介绍 1.1 CSS-网页的美容师 1.2 CSS 语法规范 1.3 CSS代码风格二.CSS基础选择器 2.1 选择器的作用 2.2 选择器分类 2.3 标签选择器 2.4 类 ...
CSS学习记录3.2/设置标签的背景颜色/控制背景图片的平铺方式/控制背景图片的位置/背景图片关联方式/背景图片和插入图片的区别/捕鱼达人背景练习/精灵图
设置标签的背景颜色: CSS中的background-color:属性,就是专门用来设置标签.bc+table 设置背景图片: CSS中的background-image: url( );的属性就是设 ...
css学习记录day1
一.初识css及其发展 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显 ...
HTML+CSS学习记录01--VScode编辑器安装与配置
https://www.cnblogs.com/csji/p/13558221.html 1.转为中文 ctrl+shift+p 找到configure display language,选择zh-c ...
CSS学习记录9/3D的正方体的两种编写方式/3D长方体的编写方式/3D动画/3D播放器
什么是2D什么是3D? 2D就是一个平面,只是宽度和高度,没有厚度. 3D就是一个立体,有宽度有高度,还有厚度. 默认情况下所有的元素都是呈2D展现的. 如何让某个元素呈3D展现? 和透视一样,只需给 ...
CSS学习总结#【博学谷学习记录】超强总结，用心分享
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.CSS基础 CSS有三种写法: 主要的选择器优先级从低到高有: CSS字体和文字样式: 复合选择器显示模式 CS ...

HTML/CSS 学习记录#1

目标

成果

HTML/CSS 学习记录#1相关推荐

最新文章

热门文章