HTML--猫眼电影---浮动练习
生活随笔
收集整理的這篇文章主要介紹了
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--猫眼电影---浮动练习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql安装 ---简单实用
- 下一篇： 史上最详细Docker安装最新版Mini