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">&lt;</div><div class="right">&gt;</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---百度新闻轮播图--定位练习相关推荐

点击左侧导航轮播图定位轮播图导航
点击左侧导航轮播图定位 <template><div class="service_contain"><Spin size="large& ...
Axure知识点：如何制作轮播图效果（以泉州师范学院官网为例）
摘要:微信搜索[三桥君] 使用软件:Axure RP 9软件说明:实现方式不唯一,这里给出三桥君制作的一种方式. 一.问题本篇文章三桥君主要解决关于轮播图交互效果的设置,以泉师新闻轮播图为例. 该 ...
安卓仿手机网易新闻app项目开发系列之（二）轮播图显示和RecyclerView适配器编写
一.项目简介和思路接着上周项目继续,上周主要实现了tablayout的标题栏界面和屏幕切换效果.这次咱们来实现给屏幕页面填充些网页图片数据.看看大致效果图: 可以看出界面有两部分构成,上面是轮播图, ...
[小程序项目] 使用微信开发者工具新闻小项目轮播图新闻列表页点击跳转新闻详情页登录获取用户基本信息
文章目录效果 Gitee 目录结构 app.json 首页 pages/news/news.wxml pages/news/news.wxss pages/news/news.js 配置网络请求 u ...
html新闻轮播插件,jQuery新闻类轮播图插件sliderBox
sliderBox.js是一款jQuery新闻类轮播图插件.该jQuery新闻类轮播图插件可以创建兼容ie8.带缩略图导航.以及多种过渡效果的轮播图. 使用方法在页面中引入jQuery.slider ...
仿百度壁纸客户端（二）——主页自定义ViewPager广告定时轮播图
仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图百度壁纸系列仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...
JAVA程序员笔记（第二阶段：前端）第4篇——定位、太极图、经典轮播图一、简单transfrom变换效果
定位: 绝对定位Absolution: 元素会脱离文档流,定位是相对于离它最近的且不是static定位的父元素而言,若该元素没有设置宽度,则宽度由元素里面的内容决定,且宽度不会影响父元素,定位为abs ...
原神官网新闻资讯轮播图——html，css
原神官网新闻资讯轮播图--html,css 通过使用swiper插件实现原神新闻资讯轮播图先来看看效果用到了swiper的js插件,比较方便,参考了原神官网,发现官网也是使用了swiper 下面上 ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...

HTML---百度新闻轮播图--定位练习

HTML—百度新闻轮播图–定位练习

HTML---百度新闻轮播图--定位练习相关推荐

最新文章

热门文章