HTML---百度新闻轮播图--定位练习
时间：06-12来源：作者：点击数：
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;
}
方便获取更多学习、工作、生活信息请关注本站微信公众号
推荐内容
相关内容
栏目更新
栏目热门
湘公网安备 43102202000103号