lt;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>34-jQuery電影排行榜之頁面布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 450px;
margin: 50px auto;
border: #000000 solid 1px;
}
.box>h1{
font-size: 20px;
line-height: 35px; /*設置行間的距離(行高)。*/
color: deeppink;
padding-left: 10px;
border: #000000 dashed 1px; /* 邊框虛線黑色 1像素 */
}
ul>li{
list-style: none; /*去除li標簽前面的點*/
padding: 5px 10px;
border: #000000 dashed 1px; /* 邊框虛線黑色 1像素 */
}
ul>li:nth-child(-n+3) span{ /* 這句話只選擇前三個span標簽 比較特別,,需要了解一種方法*/
background: deeppink;
}
ul>li>span{
display: inline-block; /*在元素之后不添加換行符,因此該元素可以位于其他元素旁邊*/
width: 20px;
height: 20px;
background: #ccc;
text-align: center; /* 就是把HTML元素中的文本排列到中間的意思*/
line-height: 20px; /* 行高,也可以定義行間距 用line-height只對文字起作用 對于圖片時失效 */
margin-right: 10px;
}
.content{
overflow: hidden; /* 給一個盒子定義了一個顯示范圍。內部的物體。只有在這個范圍內部才會被顯示。不然就被隱藏。 */
margin-top: 5px;
}
.content>img{
width: 80px;
height: 120px;
float: left; /* 左浮動 */
}
.content>p{
width: 180px;
height: 120px;
float: right; /* 右浮動 */
font-size: 12px;
line-height: 20px; /* 行高,也可以定義行間距 */
}
</style>
<script src="../static/js/jquery-3.6.0.js"></script>
<script>
$(function(){
})
</script>
</head>
<body>
<div class="box">
<h1>電影排行榜</h1>
<ul>
<li><span>1</span>電影名稱
<div class="content">
<img src="../static/image/電影.jpg" >
<p>戰神再現 甲賀忍發帖 赤影 生死格斗 忍者小英雄 《RED SHADOW 赤影》(2001年) 改編自 橫山光輝 的漫畫作品《仮面の忍者 赤影》 劇情簡介:為了世界的光明,赤影成為了影子武士。在戰國時期的騷亂中,赤影擔負著成為影子武士一族首領的命運</p>
</div>
</li>
<li><span>2</span>電影名稱</li>
<li><span>3</span>電影名稱</li>
<li><span>4</span>電影名稱</li>
<li><span>5</span>電影名稱</li>
<li><span>6</span>電影名稱</li>
</ul>
</div>
</body>
</html>
頻是網頁承載內容很重要的一個元素,也是必不可少的網頁表現形式(圖、文、表、視、音)之一。曾經網頁要想播放視頻、制作游戲,必須得用第三方插件flash。不僅編寫代碼要使用額外的語言,瀏覽器也必須得裝第三方插件,非常不方便。隨著html5標準逐漸普及,移動端、pc端開始拋棄flash,如今幾乎所有的瀏覽器都使用html5來制作視頻。
目標
flash是Adobe公司其中之一的產品。它發起于W3C與WHATWG的第五代web標準之爭,它撿了個大便宜,乘機定義網頁媒體標準。
W3C與WHATWG的第五代web標準之爭
flash填補了當時網頁只有文字和圖片的單調世界,將媒體(視頻、音頻、游戲)引入了網頁,將網頁帶進多彩的世界。
Flash能夠用僅僅十幾K到幾百K的體積,呈現出放大也不會失真的矢量彩色動圖,甚至還能夠做出足以令人沉迷一整天的Flash小游戲。
火柴人
Flash用第三方插件的身份,幾乎制霸了網頁媒體的標準,讓W3C尷尬不已,甚至從某種程度上說,讓真正的網頁標準推廣受阻。
2010年4月,蘋果CEO公開表示從此蘋果所有產品不再支持flash。flash從此慢慢喪失移動端的市場和地位。
喬布斯支持html5
2012年,安卓宣布不再支持Flash,從此flash徹底失去了移動端市場和地位。
2012年html5標準確立,html5在逐漸制霸移動端的地位時,也直接沖擊了flash僅剩的桌面市場,flash桌面市場的份額在逐步下降。
各大瀏覽器逐步默認禁用Flash,現2019年幾乎都全部禁用。
默認禁用Flash
Adobe將在2020年停止開發和更新flash。
2020年停止開發和更新flash
Flash以第三方插件的身份,做著平臺該做的事情,但沒有推動行業標準統一化,反而企圖私立標準。
隨著功能的增多,能解碼編碼H.264,能進行3D渲染,能播放7.1聲道環繞聲等,功能集于一身變得臃腫,效率變得低下。
Flash非常不安全。Flash能夠運行相當復雜的代碼,這讓Flash非常容易被滲透。加上Adobe在安全方面的不上心,這令Flash安全問題頻發。
Flash很不穩定。作為一個插件,它自身頻頻崩潰也就罷了,還經常拉著瀏覽器乃至操作系統一起殉情。
Flash加劇了手機的耗電量。
作用是在 HTML 頁面中嵌入視頻元素。Video定義視頻,比如電影片段或其他視頻流。
視頻播放
有四個是必須的屬性:src、controls、width、height屬性。
視頻播放代碼
<video> 元素支持三種視頻格式: MP4, WebM, 和 Ogg。
<source> 元素可以鏈接不同格式的視頻文件。瀏覽器將使用第一個可識別的格式。
支持多格式的視頻
video標簽體系
薦18個小眾冷門但功能強大的在線神器,不用安裝免費用!
這款軟件,可以說是我電腦必備了,沒有它我都不習慣了!它可以滿速下載網頁上的軟件、視頻、文件、圖片.......等等,告別限速煩惱!
比如說我從網上下載一個1G大小的視頻,如果不用IDM,估計得下載個兩三小時;通過IDM下載,估計不到3分鐘左右就能下載完成。更別說那些小文件了,秒速下載!
它會自動識別網頁視頻,同時支持選擇不同格式下載:
支持下載的文件格式也非常多,能夠滿足日常下載需求:
地址:https://www.6pian.cn/zimu.html
字幕,是視頻必不可少的元素,特別是在各短視頻平臺發布的視頻,如果你的視頻沒有字幕,觀眾極有可能聽不明白你在說什么,直接劃走!
對于各博主來說,傳統的字幕添加方法,太過繁雜,不能快速出片。
這款智能字幕工具,在上傳視頻后,會自動為視頻添加上字幕,速度很快,顯示的字幕還會自動匹配視頻內容。還支持在線編輯、在線翻譯等功能。
并且支持上傳的音視頻格式、識別的語種,以及導出的字幕文件格式都還蠻多的:
?特別是新版界面,支持翻譯的語言足足有104種:
地址:https://www.flexclip.com/
一個操作簡單,功能簡單地在線剪輯工具。
網站內主要提供的內容有模板、制作、工具、學習這4大模板,“制作”和“模板”內都是提供的視頻模板。
“工具”模塊的話,主要提供的是幻燈片制作、表情包生成、GIF生成、屏幕錄制、裁剪視頻、合并視頻、壓縮視頻、視頻格式轉換.....等功能。
“學習”模塊提供有視頻編輯技巧、視頻編輯工具合集、視頻錄制、視頻營銷、視頻格式轉換...等學習教程。
?最值得稱贊的是,它提供數百萬免版權的音頻、視頻和圖片資源,可以隨意搜索、查看,并添加到視頻中。
地址:https://www.7mjs.com/
如果你想做影視解說類的視頻,但是自己又不會寫解說文案。此時,我們就可以來這個網站拿現成的,各種類型的影視劇解說文案,并且還提供有相應的影視資源。
不過在網站上智能看到解說文案的前一部分,后面的文案和影視資源需要VIP或者貓幣才能獲取:
地址:https://www.6pian.cn/koutu.html
一個超智能的摳圖工具,支持批量摳圖,并且摳圖效果嘎嘎好,摳圖邊緣過渡很自然,毫無摳圖痕跡。
上傳圖片后,網站會自動識別出圖片主體,實現智能摳圖,并且還可以選擇摳圖模式:通用、汽車、食品、logo。
?最最最贊的是,復雜背景也能摳得很干凈:
地址:https://yijiangaitu.com/
一款簡單易用的在線圖片處理工具。
包含的處理功能有:壓縮圖片質量/尺寸、生成縮略圖、任意裁剪、生成內切圓圖片、打磨圓角、轉換格式、添加水印、添加馬賽克)、旋轉圖片、銳化、模糊、調整亮度、調整對比度、查看exif 信息等...
地址:https://bigjpg.com/
有時候我們下載的圖片尺寸太小,手動拉伸的話,圖片雖然放大了,但也糊了。
這個網站可以把圖片無損放大2倍、4倍、8倍、16倍(8倍和16倍需要升級才能使用),放大后的圖片質量跟原圖沒什么差別!
地址:https://www.fotor.com/
一個功能超級全的在線圖片編輯器,它所包含的功能有裁剪、旋轉、調整、調色、一鍵摳圖、高級處理、曲線調節、添加濾鏡、添加元素、添加框架、面部精修....
不過有部分功能,需要專業版才能用,非專業版使用的話,會有水印!
人像精修:
添加濾鏡:
地址:https://essay.1ts.fun/
一個可以生成論文的生成器,網站內已經收集超30W篇的數據文獻,各個學科都有。這不比花錢買論文香嗎!
輸入文章題目、學科、主關鍵詞、副關鍵詞,就可以生成一篇小論文了。 生成的小論文是分段式的,每一段都可重新生成:
還支持在線編輯,完了可以直接復制:
?雖然這些論文直接拿來用不現實,但是可以參考啊,把自己論文的關鍵詞一輸入,就得到一篇差不多的論文,然后修修改改,不就成自己的了嗎!
地址:https://dayipaper.com/
一個論文排版工具,它提供快捷模式和編輯器模式兩種方案。快捷模式是對已有的文檔進行快速排版,編輯器模式是將論文元素作組件化處理。
在編輯時,可以根據你所在學校的論文寫作規范,自動調整你的論文格式,你只用專注于內容寫作即可。
?像頁眉、頁腳、文獻引用、腳注尾注、目錄、縮進、空行、字體...... 都可以一鍵生成。
地址:https://www.cn-ki.net/
一個由北京大學、清華大學、浙江大學、復旦大學等師生學者共同籌建的網站,旨在促進知識的傳播和最新學術科技的共享。
iData平臺上所有信息均為公開發表的學術文獻,由學者自由上傳,并提供有限的免費瀏覽、下載。
如果想通過idate下載中國知網的論文,可以點擊右上角的“cnki鏡像搜索”:
此時搜到的知網參考文獻,都可免費下載:
地址:https://airportal.cn/
一個可以跨設備傳輸文件的網站,可以說是一個臨時文件傳送網站,不限速也不用注冊。
?選擇文件后,可以設置打開密碼,下載次數以及保存時間:
?接收方可以通過取件碼、復制鏈接、以及掃碼下載文件:
地址:https://webrename.cn/
一個支持在線文件重命名的網站,支持批量重命名,并且支持多種重命名模式。如果你在日常工作生活中,并不是經常對文件批量重命名,那么完全不用下載專門的軟件,用這個網站就足夠了。
?上傳文件后,按照自己的需求,選擇工具欄的功能即可,不過這些功能不能疊加使用,但作為一款免費的工具,咱還要啥自行車啊。
地址:https://cloudconvert.com/
一個支持有200+種文件格式轉換的轉換器,支持有音頻、視頻、文檔、電子書、存檔、圖像、電子表格和演示格式等。
我之前轉換一個200多兆的Keynote文件,雖然速度慢點,但也能轉換成PPT格式,比很多格式轉換工具好多了!
地址:https://cloudconvert.com/
一個免費無限制的PDF轉換工具,支持的功能有格式轉換、PDF拆分、合并、壓縮等。并且在轉換6小時后會自動把文件刪除,很安全!
地址:https://www.67tool.com/
一個有著239款實用工具的網站,它的工具類別有:視頻、音頻、圖片、PDF、辦公輔助、設計、文本、數字、加密、單位轉換...等10種工具。
每個大類別下是各種實用小工具,比如視頻工具下,有視頻剪切、格式轉換、錄屏、視頻壓縮、視頻倒放......等33個小工具。
地址:https://233heji.com/8.html
這個網站,雖說網站界面看著跟筆記似的,但資源是真的豐富!
目測這個網站里面收錄的網站有上千個,共有25個類別,每一個類別下,都收錄了大量的同類型網站。
在線影視合集站,包含有影視網站、有影視APP、還有歐美劇網站合集、動漫網站合集、日韓劇網站合集.....
電子書小說網站合集,包含有網絡小說網站、小說搜索網站、電子書搜索網站、小說APP......
地址:https://www.6pian.cn/tool.html
一個收錄有40個影視相關工具的網站,比如剛開始推薦的rive,網站內就有收錄。
網站內收錄的工具,說實話,都比較小眾,但都很實用。比如說影視解說文案網站、三維動畫制作工具、視頻去背、像素風3D建模、視頻壓縮工具......
牛片的一系列好用工具:
牛片AI主播配音:在線配音,免費主播音隨意選
牛片一鍵智能字幕:為視頻一鍵添加字幕,音視頻轉文字稿
牛片一鍵智能摳圖:AI智能在線摳圖,一鍵摳出圖片主體
牛片圖片動漫化:圖片動漫化在線處理
牛片圖片年齡變化:年齡變化面貌
牛片人聲分離:歌曲背景音樂伴奏提取
牛片工具箱:影視創作流程必備效率神器
*請認真填寫需求信息,我們會在24小時內與您取得聯系。