HTML5+CSS3 为图书简介页面添加图像及视频
生活随笔
收集整理的這篇文章主要介紹了
HTML5+CSS3 为图书简介页面添加图像及视频
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
以下是今日份學習網頁打卡
<!doctype html> <html> <head> <meta charset="utf-8"> <title>余華著長篇小說《活著》</title><link href="main.css" type="text/css" rel="stylesheet"/><style>body{background: #EDF9E9}h1{text-indent: 1em;}.p1{font-size: 24px;font-weight: bold;color: red}p{text-indent: 3em;}.p2{font-size: 15px;color: darkgray;}.p3{color: darkgray}blockquote.p3{font-style: italic}.hh1{text-shadow: 0.03em 0.03em 3px gray;color: white;}h3{text-indent: 2em; color:#293A80;text-shadow: 0.1em 0.1em 10px gray;font-weight: 700}h4{text-indent: 1em;}div{text-indent: 1em;}footer{text-align: right;font-size: 19px;color:darkred;}</style></head><body> <figure><img src="images/p1.jpg" alt="活著" height="200px" align="left"/><h1>《活著（典藏版）》</h1><p><span class="p1">¥14.00</span><sub><b>[5折]</b><span class="p3">[原價：<del>¥28.00]</del></span></sub></p><p class="p2">作者：余華 出版社：作家出版社 出版時間：2010年8月</p><p class="p3">《活著》是作家余華的代表作之一，講述了在大時代背景下，主人公徐富貴的人生和家庭不斷經受著苦難的故事，最終，<wbr>所有親人都先后離他而去，僅剩下年老的他和一頭老牛相依為命。</p></figure><h1 class="hh1">作品評價</h1><hr size="5" color="lightblue"><h3>《時代》周刊：</h3><blockquote class="p3">中國過去六十年所發(fā)生的一切災難，都一一發(fā)生在福貴和他的家庭身上。余華至真至誠的筆墨，將福貴塑造成了一個真實存在的英雄。當這部沉重的小說結束時，活著的意志，是福貴身上唯一不能被剝奪的東西。</blockquote><h3>《華盛頓郵報》：</h3><blockquote class="p3">《活著》是不失樸素粗糲的史詩，是斗爭與生存的故事。在余華的筆下，人物在動物本能和人性之間的苦苦掙扎。余華敘述的那種冷酷的意志，使小說超出了常規(guī)。</blockquote><h1 class="hh1">影視改編</h1><hr size="5" color="lightblue"><figure><div>葛優(yōu)、鞏俐主演電影</div><h4>《活著》——張藝謀</h4><video src="media/v1.mp4" controls="controls" height="500px">《活著》視頻</video> </figure><hr/><footer><address><p><ins>萬事通網上書店運營工作室</ins></p></address></footer></body> </html>在瀏覽器中打開顯示：
總結：
1.掌握< img/ >標簽
< img src=“路徑” alt=“替換文本” height=“高度數值” width=“寬度數值” border=“數值” align=“方向”>
2.掌握< video >和 < audio >標簽
< video src=“視頻地址” controls=“controls” auotoplay=“autoplay” loop=“l(fā)oop” >文字< /video >
< audio src=“音頻地址” controls=“controls” auotoplay=“autoplay” loop=“l(fā)oop” >文字< /audio >
autoplay 自動播放
loop 循環(huán)播放
總結
以上是生活随笔為你收集整理的HTML5+CSS3 为图书简介页面添加图像及视频的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机考研复试——离散数学知识点
- 下一篇： 如何设置vscode默认谷歌浏览器打开