全部章节 >>>>

练习一

<横幅广告滑块>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.outter {width: 590px;height: 470px;background-color: red;margin: auto;position: relative;}img {width: 100%;height: 100%;}.w-resize {height: 35px;line-height: 30px;width: 25px;background-color: rgba(0,0,0,.15);color: white;text-align: center;border-radius: 0 25px 25px 0;font-size: 20px;font-weight: 900;position: absolute;top: 50%;left: 0;margin-top: -10px;cursor: pointer;}.e-resize {height: 35px;line-height: 30px;width: 25px;background-color: rgba(0,0,0,.15);color: white;text-align: center;border-radius: 25px 0 0 25px;font-size: 20px;font-weight: 900;position: absolute;right: 0;top: 50%;margin-top: -10px;cursor: pointer;}.ub {list-style-type: none;display: block;position: absolute;left: 50%;bottom: 10%;transform: translateX(-50%);}.ub li {background-color: rgba(0,0,0,0.1);width: 10px;height: 10px;float: left;border-radius: 5px;margin: 0px 3px;transition: all 0.3s;}.ub li:hover {background-color: rgba(0,0,0,0.6);transform: scale(1.3,1.3);cursor: pointer;}.pad {}</style>
</head>
<body>
<div class="outter"><div class="img"><img src="图片/banner_2.webp" alt=""></div><div class="w-resize">&lt</div><div class="e-resize">&gt</div><div class="dian"><ul class="ub"><li></li><li></li><li></li><li></li><li></li></ul></div>
</div>
</body>
</html>

CSS案例 • 【第7章横幅广告滑块】相关推荐

HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
第四章css总结,第四章CSS层叠样式表分析.doc
第四章CSS层叠样式表分析第章CSS层叠样式表CSS的" " color=" ">这样的标签以及与标签搭配的显示属性(如"background ...
史上最简单的spark教程第十三章-SparkSQL编程Java案例实践(终章)
Spark-SQL的Java实践案例(五) 本章核心:JDBC 连接外部数据库,sparkSQL优化,故障监测史上最简单的spark教程所有代码示例地址:https://github.com/My ...
python-web开发[12]之css案例、bootstrap探索
day12 CSS 今日概要: 案例应用(利用之前所学知识) CSS知识点模板 + CSS + 构建页面 1.CSS案例 1.1 内容回顾 HTML标签固定格式,记住标签长什么样子,例如: h/d ...
html并集选择器怎么写,css案例学习之并集选择器
代码并集选择器 h1, h2, h3, h4, h5, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.s ...
css案例_下拉三角翻转
css案例_下拉三角翻转 css案例_下拉三角翻转常见于下拉导航 .表单下拉多选等场景. 原理:三角可以看成是一个只具有右边框和底部边框的方形盒子通过 transform: rotate(45de ...
以文件服务器为中央结点,电子商务概论案例第三章资料.ppt
电子商务概论案例第三章资料.ppt 第3章电子商务相关技术本章学习目标计算机网络技术互联网基础知识 Web应用技术 EDI技术案例三 3.1计算机网络技术 3.1.1 计算机网络概述 3.1 ...
【Hello CSS】第三章-浏览器的视图与坐标
作者:陈大鱼头 github: KRISACHAN 在上一篇[Hello CSS]的第二章第二章-CSS的逻辑属性与盒子模型中提了个问题: 为什么Flex box跟Grid box的是以start.e ...
Web前端第二季(CSS):十:第5章:案例开发:505-SiKi学院首页布局分析+506-开发右侧学习中心链接样式+507-切分SiKi学院的布局+508-开发SiKi学院的导航按钮
目录一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...

CSS案例 • 【第7章横幅广告滑块】

全部章节 >>>>

练习一

CSS案例 • 【第7章横幅广告滑块】相关推荐

最新文章

热门文章

CSS案例 • 【第7章 横幅广告滑块】

全部章节 >>>>

练习一

CSS案例 • 【第7章 横幅广告滑块】相关推荐

最新文章

热门文章

CSS案例 • 【第7章横幅广告滑块】

CSS案例 • 【第7章横幅广告滑块】相关推荐