IMWeb前端学习笔记——Day2

来源：互联网发布：专业报复淘宝卖家编辑：程序博客网时间：2024/06/02 07:02

今日任务目标：

用HTML写一首诗并配上图片，需要满足诗的格式。可以结合学习的html知识对页面进行加工。

代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body {    font-size: 11px;    font-family: 'Open Sans', sans-serif;    color: #4A4A4A ;    text-align: center;    background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492347523542&di=78337634289574affdd0c83088464e47&imgtype=0&src=http%3A%2F%2Fh6.86.cc%2Fwalls%2F20151118%2F1440x900_a3ff9f859984eaf.jpg);background-size: cover;}.poem {    background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492347771473&di=63e3c1dd96794d0357faa9f59c82e69a&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F10%2F54%2F87%2F83b1OOOPIC2a.jpg);    background-size: cover;    margin: 30px auto;    display: block;    width: 300px;    height: 310px;    padding:20px;    border-radius: 2px 2px 2px 2px;     box-shadow: 0 1px 4px     rgba(0, 0, 0, 0.3), 0 0 40px     rgba(0, 0, 0, 0.1) inset;}h1{    font-size: 20px;    font-weight: bold;    margin-top: 15px;     text-shadow: 1px 1px 3px rgba(0,0,0,0.3);}p{     margin-top: 30px;    text-align: center;    font-size: 16px;    font-family: "楷体","楷体_GB2312";  }p.author{font-size: 14px;font-family: "微软雅黑";}</style></head><body><div class="poem">    <h1>木兰词·拟古决绝词柬友</h1>       <p class="author">纳兰性德</p><p>人生若只如初见， 何事秋风悲画扇。</p><p>等闲变却故人心， 却道故人心易变。</p><p>骊山语罢清宵半， 泪雨零铃终不怨。</p><p>何如薄幸锦衣郎， 比翼连枝当日愿。</p></div></body></html>

其中使用了CSS3的属性：

box-shadow：设置盒子的阴影，其中inset是指将外部阴影改为内部阴影。

语法：box-shadow: h-shadow v-shadow blur spread color inset;

text-shadow：设置文本阴影效果。

语法：text-shadow: h-shadow v-shadow blur color;

background-size：cover；：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

效果如图：

1 0