當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML--猫眼电影---浮动练习

發布時間：2025/3/19 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML--猫眼电影---浮动练习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML–貓眼電影—浮動練習

這次是一次回顧的練習。
代碼照常都是含有詳細解釋。

效果圖

首先是HTML代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>貓眼電影</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./css/common.css"> </head> <body><div class="main"><nav class="nav"><a href="#">正在熱映</a><a href="#" class="select">即將上映</a><a href="#">經典影片</a></nav><div class="container "><div class="choose-area"><div class="choose-item clearfix" ><div class="left">類型：</div><div class="right"><ul class=" clearfix"><li class="select"><a href="#">Lorem.</a></li><li><a href="#">Sequi.</a></li><li><a href="#">Saepe.</a></li><li><a href="#">Tempore?</a></li><li><a href="#">Ducimus!</a></li></ul></div></div><div class="choose-item clearfix"><div class="left">區域：</div><div class="right"><ul class=" clearfix><li class="select"><a href="#">Lorem.</a></li><li><a href="#">Sequi.</a></li><li><a href="#">Saepe.</a></li><li><a href="#">Tempore?</a></li><li><a href="#">Ducimus!</a></li><li><a href="#">Perferendis?</a></li></ul></div></div><div class="choose-item clearfix no-line"><div class="left">年代：</div><div class="right"><ul class=" clearfix><li class="select"> <a href="#">Lorem.</a></li><li><a href="#">Sequi.</a></li><li><a href="#">Saepe.</a></li><li><a href="#">Tempore?</a></li><li><a href="#">Ducimus!</a></li><li><a href="#">Perferendis?</a></li></ul></div></div></div><div class="movies clearfix">/* 細致的再將這個div 分為三部分一是圖片二是電影名字三是評分底下的都是一樣的我這里只寫啦一個樣板剩下的復制即可*/<div class="movies-item"><div class="poster"><a href="#"><img src="./img/1.jpg" alt=""></a></div><div class="name"><a href="">唐人街探案</a></div><div class="score">9.4</div></div></div></div><div class="pager"><a href="#">上一頁</a><a href="#">1</a><a href="#" class="select">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a><a href="#">10</a><a href="#">下一頁</a></div></div> </body> </html>

CSS 代碼

/* 給全局設置文字的顏色其他的再做局部調整 */ body{color: #333; } /* 解決高度塌陷 */ .clearfix::after{content: "";display: block;clear: both; } /* 設置整體行高 */ .main{line-height: 1.5; } /* 劃分導航區域 */ .main .nav{height: 60px;background-color:rgb(71,70,74) ;font-size: 14px;color: #999;line-height: 60px;text-align: center; } /* 設置導航中 a 的左右間距 */ .main .nav a{margin: 0 38px; } /* 鼠標懸停效果 */ .main .nav a:hover{color: #fff; }/* 選中效果切換是靠 js和其他代碼控制 */ .main .nav a.select{color: rgb(239,68,70); } /* 第二部分定寬 */ .main .container{width: 1120px;margin: 0 auto; } /* 第二部分的第一個部分 */ .main .container .choose-area{border: 1px solid #e5e5e5;margin: 40px 0;font-size: 14px;line-height: 30px;padding: 0 30px; }.main .container .choose-area .choose-item {margin:1em 0; border-bottom:1px solid #e5e5e5; }.main .container .choose-area .choose-item.no-line{border: none; }.main .container .choose-area .choose-item .left{float: left;color: #999; }.main .container .choose-area .choose-item .right{float: left;width: 1010px; }.main .container .choose-area .choose-item .right li{float: left;margin: 0 9px;padding: 0 6px; }.main .container .choose-area .choose-item .right li:hover{color: rgb(239,68,70); }.main .container .choose-area .choose-item .right li.select{background-color: rgb(239,68,70);color: #fff;border-radius: 15px; }.main .container .movies .movies-item{float: left;width: 160px;margin: 10px 32px 10px 0 ;}.main .container .movies .movies-item:nth-child(6n){margin-right:0 ; }.main .container .movies .movies-item .poster img{width: 160px;height: 220px; }.main .container .movies .movies-item .name{white-space: nowrap;/* 設置文本內的換行無效。 */overflow: hidden;/* 內容會被修剪，并且其余內容不可見 overflow: hidden; 補充：1、默認值。內容不會被修剪，會呈現在元素框之外 overflow: visible;2、內容會被修剪，并且其余內容不可見 overflow: hidden;3、內容會被修剪，瀏覽器會顯示滾動條以便查看其余內容 overflow: scroll;4、由瀏覽器定奪，如果內容被修剪，就會顯示滾動條 overflow: auto;5、規定從父元素繼承overflow屬性的值 overflow: inherit; */text-overflow: ellipsis;/* text-overflow CSS 屬性確定如何向用戶發出未顯示的溢出內容信號。它可以被剪切，顯示一個省略號（'...'，U + 2026 HORIZONTAL ELLIPSIS）或顯示一個自定義字符串 */padding: 0 2px;text-align: center; } .main .container .movies .movies-item .score{color: #ffb400;text-align: center;line-height: 2.5;/* 斜體 */font-style: italic; } .main .container .movies .movies-item .score::first-letter{font-size: 1.5em; }

公共樣式

/* 多頁面的公共樣式底部的換頁的。因為很多頁面底部需要那個換行的所以直接設置為一個公共的css代碼 */ .pager{margin: 2em 0;text-align: center; } .pager a{border: 1px solid #d8d8d8;padding: 5px 10px; } .pager a:hover{border-color:#ef4238; } .pager a.select{background-color: #ef4238;color: #fff;border: none; }

重置的樣式是在我單獨的一篇博客里，這里就沒有放出來啦。
希望大家可以互相交流

總結

以上是生活随笔為你收集整理的HTML--猫眼电影---浮动练习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。