HTML---百度新闻轮播图--定位练习
生活随笔
收集整理的這篇文章主要介紹了
HTML---百度新闻轮播图--定位练习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML—百度新聞輪播圖–定位練習
- 照常是記錄自己的學習 還有希望能夠與大家交流分享
- 如果那里有錯誤或者是不足的地方，希望大家能夠在評論區指出來 都會一一回復的
- 底下的代碼都是附帶詳細解釋的
- 這一次的練習 是一種模仿練習 做的地方 有一些細節是與原網頁是不一樣的
- 希望大家 能夠諒解啦
- 以后做的練習也會在博客上和大家一起分享
- 對了 大家也可以一起用博客記錄自己的成長經歷 很贊的
這是靜態的效果圖
圖的話 因為那個設置截不了 圖 只能以文字的方式 描述給大家啦
點進百度新聞–> 鼠標懸停在圖片上–> 然后按鼠標右鍵–> 點擊檢查
–> 就會顯示上面這個畫面 – >鼠標懸停在這個上面 -->按鼠標右鍵 -->會彈出一個選擇的
–>然后選擇 Open in new tab 就會跳轉到圖片的地址 然后保存就好啦 。
- 這個方法大多數時候是有用的 以后大家扣圖的時候 可以用到
先給大家看一下 HTML代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/Rotaion.css"><!-- 這里就是放置css代碼 --> </head><body><div class="banner"><!-- 給全部的地方第一個范圍 --><div class="imgs"><!-- 這個div是用來放置圖片的 需要注意的地方是 大家在使用類名的時候 一定要做到 見名知意 方便以后維護和修改 --><a href=""><img src="./img/3.jpeg" alt=""></a><a href=""><img src="./img/2.jpeg" alt=""></a><a href=""><img src="./img/1.jpeg" alt=""></a></div><div class="left"><</div><div class="right">></div><!-- 這里是模仿那個原網頁的 原網頁的好像是用圖標 做成的 我這里是符號做的 看起來簡陋很多 --><div class="modal"><!-- 這里是設置底下那個遮擋層的 --><div class="title"><h2>南京大報恩塔亮燈致敬“最美天使”</h2></div><div class="dots"><ul><li></li><li></li><li></li></ul></div></div></div> </body></html>下面是 C S S 代碼
.banner {width: 520px;height: 304px;margin: 0 auto;/* 居中 */overflow: hidden;/* 這是隱藏圖片 因為 做輪播圖 要放置許多圖片 雖然圖片的變換 需要 js 控制但是在做靜態網頁的時候 ，會把 圖片都放進來 把樣式都做好 內容會被修剪，并且其余內容不可見overflow: hidden;*/position: relative;/* 這里就是相對定位啦 方便后面的絕對定位 */ }/* 這里是限制范圍 就是要做多大的意思 */ .banner .imgs {width: 1560px;height: 304px;/* 這里就是放置圖片 你放置多少張圖片 就是需要多寬多高 等等需要一早定好 這里的寬度就是放置圖片的張數乘以 每一張圖片的寬度*/ }.banner .imgs img {width: 520px;height: 304px; }/* 這里就是給每一張圖片定寬 */.banner .imgs a {float: left;/* 讓每個圖片浮動起來 都在一張圖片后面這里沒有產生高度塌陷的原因是 前面已經定高啦 高度塌陷產生的原因 是因為 高度未設置 或者是 為 auto*/ }/* 這里就是做那個切換的圖標的 在這里就是把他們相似 的東西都提出來 做成一個樣式 以便于代碼檢查和 簡潔 */ .banner .left, .banner .right {position: absolute;/* 絕對定位 設置絕對定位 就要設置他的父元素 為相對定位 */width: 50px;height: 50px;line-height: 50px;top: 0;bottom: 0;margin: auto;font-size: 3em;text-align: center;/* 文本居中 */font-family: Arial, Helvetica, sans-serif;color: #fff;/* 字體顏色 */border-radius: 50%;/* 讓這個 塊盒 變成一個圓形的 */cursor: pointer;/* 鼠標樣式 改為小手 */ }.banner .left:hover, .banner .right:hover {background-color: #fff;color: #f40; }.banner .left {left: 20px; }.banner .right {right: 20px; }/* 距離左右20px *//* 這是底下那一層半透明的遮擋層 */ .banner .modal {width: 100%;/* 寬度為100% */height: 40px;background: rgb(0, 0, 0, .3);/* rgb(,,,.3 ) 前三個空就是正常的顏色 第四個空是表示 透明程度*/position: absolute;left: 0;bottom: 0;/* 這就是定位到最低下 */line-height: 40px;padding: 0 20px;/* 左右padding 拉開 */box-sizing: border-box;/* border-box 告訴瀏覽器：你想要設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px，那么這100px會包含它的border和padding，內容區的實際寬度是width減去(border + padding)的值。大多數情況下，這使得我們更容易地設定一個元素的寬高。 */ }.banner .modal .title {float: left;color: #fff;font-weight: bold;/* 文字加粗 */ }.banner .modal .dots {float: right; }.banner .modal .dots li {width: 8px;height: 8px;display: inline-block;/* 行塊盒 inline-block該元素生成一個塊元素框，該框將隨周圍的內容一起流動，就好像它是單個內聯框一樣（與被替換的元素非常相似）。*/margin: 0 2px;background: #ccc;border-radius: 50%;cursor: pointer; }.banner .modal .dots li:hover {background-color: #336699; }- 重置樣式的話 我單獨上傳了一個博客 大家可以去看一看 因為每次都這樣子 太長啦
- 影響閱讀感受
- 這次就到了這里 加油！！！
- 希望對大家有所幫助
總結
以上是生活随笔為你收集整理的HTML---百度新闻轮播图--定位练习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 哔哩哔哩注册--表单练习
- 下一篇： 重置样式表--HTML