HTML--猫眼电影---浮动练习
生活随笔
收集整理的這篇文章主要介紹了
HTML--猫眼电影---浮动练习
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
HTML–貓眼電影—浮動(dòng)練習(xí)
- 這次是一次回顧的練習(xí)。
- 代碼照常都是含有詳細(xì)解釋。
效果圖
首先是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><!-- 這里是一個(gè)大框架 ，作為包裹所有外層包含塊 --><div class="main"><!-- 里面分為上中兩個(gè) 大范圍 --><!-- 首先是導(dǎo)航 --><nav class="nav"><a href="#">正在熱映</a><a href="#" class="select">即將上映</a><a href="#">經(jīng)典影片</a></nav><!-- 這邊是 下面的選項(xiàng) --><!-- 再細(xì)分為 兩個(gè)部分 當(dāng)然還有其他的分法 怎么適合怎么寫 --><div class="container "><!-- 這邊是那個(gè)菜單選項(xiàng) 里面再分為左右兩個(gè)部分 --><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">區(qū)域：</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><!-- 這邊是底下的那個(gè) 電影的選項(xiàng)的部分 --><div class="movies clearfix">/* 細(xì)致的再將這個(gè)div 分為三部分 一是圖片 二是電影名字 三是 評(píng)分底下的都是一樣的 我這里只寫啦 一個(gè)樣板 剩下的復(fù)制即可*/<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 代碼
/* 給全局設(shè)置文字的顏色 其他的再做局部調(diào)整 */ body{color: #333; } /* 解決高度塌陷 */ .clearfix::after{content: "";display: block;clear: both; } /* 設(shè)置整體行高 */ .main{line-height: 1.5; } /* 劃分導(dǎo)航區(qū)域 */ .main .nav{height: 60px;background-color:rgb(71,70,74) ;font-size: 14px;color: #999;line-height: 60px;text-align: center; } /* 設(shè)置 導(dǎo)航中 a 的左右間距 */ .main .nav a{margin: 0 38px; } /* 鼠標(biāo)懸停效果 */ .main .nav a:hover{color: #fff; }/* 選中效果 切換是靠 js和其他代碼控制 */ .main .nav a.select{color: rgb(239,68,70); } /* 第二部分 定寬 */ .main .container{width: 1120px;margin: 0 auto; } /* 第二部分的 第一個(gè)部分 */ .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;/* 設(shè)置文本內(nèi)的換行無效。 */overflow: hidden;/* 內(nèi)容會(huì)被修剪，并且其余內(nèi)容不可見 overflow: hidden; 補(bǔ)充：1、默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外 overflow: visible;2、內(nèi)容會(huì)被修剪，并且其余內(nèi)容不可見 overflow: hidden;3、內(nèi)容會(huì)被修剪，瀏覽器會(huì)顯示滾動(dòng)條以便查看其余內(nèi)容 overflow: scroll;4、由瀏覽器定奪，如果內(nèi)容被修剪，就會(huì)顯示滾動(dòng)條 overflow: auto;5、規(guī)定從父元素繼承overflow屬性的值 overflow: inherit; */text-overflow: ellipsis;/* text-overflow CSS 屬性確定如何向用戶發(fā)出未顯示的溢出內(nèi)容信號(hào)。它可以被剪切，顯示一個(gè)省略號(hào)（'...'，U + 2026 HORIZONTAL ELLIPSIS）或顯示一個(gè)自定義字符串 */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; }公共樣式
/* 多頁面的公共樣式底部的換頁的。因?yàn)楹芏囗撁娴撞啃枰莻€(gè)換行的 所以直接設(shè)置為一個(gè) 公共的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; }- 重置 的 樣式是在我單獨(dú)的一篇博客里，這里就沒有放出來啦。
- 希望大家可以互相交流
總結(jié)
以上是生活随笔為你收集整理的HTML--猫眼电影---浮动练习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql安装 ---简单实用
- 下一篇： 史上最详细Docker安装最新版Mini