静态轮播及HTML5新增

最新推荐文章于 2021-05-16 21:43:33 发布

程序媛Render

最新推荐文章于 2021-05-16 21:43:33 发布

阅读量366

点赞数 4

本文链接：https://blog.csdn.net/qq_46492364/article/details/114758045

版权

文章目录前言一、静态轮播图布局二、HTML51.新增语义化标签2.多媒体音频标签3.多媒体视频标签4.新增input表单5.新增表单属性总结前言css大部分学完了，今天学习一下静态轮播，后面学一下HTML5。坚持住。一、静态轮播图布局代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C.

摘要由CSDN通过智能技术生成

前言

css大部分学完了，今天学习一下静态轮播，后面学一下HTML5。坚持住。

一、静态轮播图布局

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        * {
   
            margin: 0;
            padding: 0;
        }
        ul,ol {
   
            list-style: none;
        }
        .lunbo {
   
            position: relative;
            width: 880px;
            height: 550px;
            border: 1px solid #333;
            margin: 20px auto;
        }
        .lunbo .pic li {
   
            position: absolute;
            left: 0;
            top: 0;
            width: 80px;
            height: 550px;
            display: none;
        }
        .lunbo .pic .current {
   
            display: block;
        }
        /* 按钮 */
        .lunbo .btn a {
   
            position: absolute;
            top: 50%;
            width: 40px;
            height: 40px;
            margin-top: -20px;
            background-color: rgba(255, 255, 255, 0.3);
            font: 20px/40px "宋体";
            text-align: center;
            color: white;
            text-decoration: none;
            font-weight: bold;
        }
        .lunbo .btn .leftbtn {
   
            left: 10px;
        }
        .lunbo .btn .rightbtn {
   
            right: 10px;
        }
        .lunbo .btn a:hover {
   
            background-color: rgba(255, 255, 255, 0.5);
        }
        /* 下标 */
        .lunbo .sub {
   
            position: absolute;
            left: 100px;
            bottom: 50px;
            width: 240px;
        }
        .lunbo .sub li {
   
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 20px;
            background-color: rgba(255, 255, 255, 0.4);
            font: 12px/20px "微软雅黑";
            text-align: center;
            color: steelblue;
            cursor: pointer;

最低0.47元/天解锁文章

程序媛Render

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
静态轮播及HTML5新增

文章目录前言一、静态轮播图布局二、HTML51.新增语义化标签2.多媒体音频标签3.多媒体视频标签4.新增input表单5.新增表单属性总结前言css大部分学完了，今天学习一下静态轮播，后面学一下HTML5。坚持住。一、静态轮播图布局代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C.
复制链接

扫一扫

专栏目录