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