【无标题】

最新推荐文章于 2021-12-23 10:48:21 发布
最新推荐文章于 2021-12-23 10:48:21 发布
阅读量65 收藏
点赞数
文章标签： css elementui html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62480331/article/details/121809709
版权 
<!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>
        .box{
            position: relative;
            width: 310px;
            height: 190px;
            margin: auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .top{
            position: absolute;
            top: 0;
            left: 0;
        }
        .bottom{
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <img class="top" src="images/top_tu.gif" alt="">
        <img src="images/adv.jpg" alt="">
        <img class="bottom" src="images/br.gif" alt="">
    </div>
</body>
</html>

 

<!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>
        .box{
            width: 1002px;
            margin: 0 auto;
        }
        .ad-l{
            position: fixed;
            left: 0;
            top: 85px;
        }
        .ad-r{
            position: fixed;
            right: 0;
            top: 85px;
        }
    </style>
</head>
<body>
    <img class="ad-l" src="images/ad-l.png" alt="">
    <img class="ad-r" src="images/ad-r.png" alt="">
    <div class="box">
        <img src="images/box.png" alt="">
    </div>
</body>
</html>

 

<!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>
        * {
            padding: 0;
            margin: 0;
 
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .taobao {
            position: relative;
            width: 520px;
            height: 280px;
            margin: auto;
        }
        .arrow-l, .arrow-r {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            line-height: 30px;
            background-color: rgba(0, 0, 0, 0.2);
            color: #fff;
        }
        .arrow-l {
            border-radius: 0 15px 15px 0;
            color: #fff;
        }
        .arrow-r {
            right: 0;
            border-radius: 15px 0 0 15px;
            text-align: right;
        }
        .circle {
            position: absolute;
            width: 70px;
            height: 13px;
            left: 50%;
            margin-left: -35px;
            bottom: 15px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 6px;
        }
        .circle li {
            float: left;
            height: 8px;
            width: 8px;
            background-color: #fff;
            margin: 3px;
            border-radius: 50%;
        }
        .circle .current {
            background-color: #ff5000;
        }
    </style>
</head>
<body>
    <div class="taobao">
        <a href="#" class="arrow-l">&lt;</a>
        <a href="#" class="arrow-r">&gt;</a>
        <img src="images/taobao.jpg" alt="">
        <ul class="circle">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

热水§
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
h5简单淘宝轮播图
03-21
h5使用，实现了简单的淘宝轮播，已经封装完成。
HTML5仿淘宝图片轮转轮播代码
02-29
HTML5仿淘宝图片轮转轮播代码 HTML5 图片轮播 webppt tracker 引导页
淘宝轮播图--web前端20200309学习笔记
qq_44850917的博客
03-09 448
1.外边距合并问题：解决方法 浮动元素，绝对定位（固定）元素都不会触发外边距合并问题 2.综合案例-淘宝轮播图 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&gt...
webapi6之淘宝轮播图案例
qq_45169358的博客
06-01 362
webapi6 缓动动画原理： // 缓动动画函数封装obj目标对象 target 目标位置 // 思路： // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。 // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长 // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 function animate(obj, target) { // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.tim
Qt无标题窗口
05-21
在本文中，我们将深入探讨如何使用Qt框架创建一个无标题窗口，这在界面设计和自定义标题栏美化中非常有用。我们将关注`framelesswidget.cpp`、`main.cpp`、`framelesswidget.h`等核心文件，理解它们在实现无标题窗口...
VC去掉'无标题'字样的方法.zip
11-21
在使用Visual C++进行编程时，我们经常会在创建新的窗口或者对话框时默认看到标题栏显示为“无标题”。这可能会对用户界面的美观性和专业性造成一定的影响。本资料包提供了一种方法来帮助开发者去掉这个“无标题”...
visual c++取掉对话框窗口的 -无标题 字样的方法
08-04
在Visual C++编程环境中，创建窗口应用程序时，默认情况下，窗口标题栏可能会显示“-无标题”字样，这通常是由于没有正确设置窗口类或没有自定义窗口标题所导致的。要解决这个问题，我们需要深入理解Windows API中的...
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
delphi 无标题调整大小
11-26
在Delphi编程环境中，"无标题调整大小"通常是指创建没有标准标题栏的窗口，并允许用户通过拖动边界来调整其大小。这种设计通常用于自定义界面或创建无边框的对话框。以下是对这个主题的详细解释： 一、创建无标题...
html5仿京东淘宝轮播图片切换代码.rar
07-10
html5 CSS3 仿京东淘宝轮播图片切换特效代码，jquery修正了图片地址，上次其实只是没有把jquery打包在里面，不过有些新手摸不着头绪了，反复说代码有误，这次不会了，请看效果图。图片 两侧显示箭头，下边显示两加点按钮，两种方式都可以手动轮播图片。
实用的html5图片轮播效果
03-11
实用的html5图片轮播效果
淘宝店首页图片轮播代码
09-01
这是一个关于如何编写淘宝网店铺首页轮播好报的文章，有实例代码，便于学习
html图片轮播代码
05-07
html图片轮播代码
AutoPlayViewPager:仿京东、淘宝，自动轮播图。Auto Play ViewPager
05-12
AutoPlayViewPager 仿京东、淘宝，横向自动轮播图。Auto Play ViewPager。 效果 Gradle //使用 autoplay viewpager compile ('com.xyzlf.autoplay.viewpager:viewpager:0.0.5') { exclude group: 'com.android.support', module: 'appcompat-v7' } 使用方式 1、在xml中使用，如下： <!-- 使用默认颜色，大小，间距 --> <com.xyzlf.autoplay.viewpager.CustomerBanner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="150d
淘宝轮播图片制作技巧
qq_64970126的博客
12-23 1198
1、对于淘宝轮播图的制作过程中“子绝父相”含义的不正确理解导致设定的border无法插入盒中，想要在图片中插入bottom必须先设置图片为relative其次设置bottom为absolute，进行定位top=50%;margin-top:盒子的一半的高度，即可让盒子居中显示。 2、对于淘宝轮播图中遮罩层的制作我们采取元素隐藏的方法借助display：none（隐藏键值对)去在最大的遮罩层中将属性隐藏起来，再利用hover伪链接去设置display：block;(将隐藏的元素显示出来)，这样遮罩层的主体框
定位综合案例-淘宝轮播图
weixin_43433196的博客
11-28 280
效果图： 布局分析： 1、大盒子 定义类名：tb-promo 淘宝广告 2、盒子内放入图片 3、左右两个按钮用链接 左键头prev 右箭头 next 4、底测小圆点ul无序列表制作 定义类名 promo-nav 问题1： 1、子绝父相 设置好大盒子和左右箭头的定位状态后 子盒子没有往上走 左右盒子样式代码： .prev{ position: absolute; top: 0； left：0; } .next{ positi...
Android 全屏无标题栏的三种实现方法
09-02
在Android应用开发中，有时我们需要实现全屏无标题栏的效果，以提供更加沉浸式的用户体验。以下将详细介绍三种在Android中实现全屏无标题栏的方法。 ### 方法一：通过Java代码 在Activity的`onCreate()`方法中，在...
无标题fadsfadsfdsafdasfdasfdasfdasf
最新发布
08-08
ffffadsfdasfdsafdasfdasfdasfdsf
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@android:style/Theme.NoTitleBar"“属性。这样可以通过Android自带的主题去掉标题栏。 2. 使用自定义的主题，可以在样式表中添加以下代码： <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> <!-- ...其他样式... --> </style> 这种方式可以通过设置主题去除ActionBar和标题栏，同时保留其他布局元素。 3. 去掉代码中的setTitle()方法，这是一种最简单的方法，通过不设置Activity的标题来实现无标题。 以上就是三种常见的实现Android无标题的方式，开发者可以根据实际需求进行选择。值得注意的是，去除标题栏可能会影响用户的导航体验，因此在设计上需要考虑周全。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值