使用浏览器窗口缩放网页

技术标签： html CSS

我希望网页的内容与浏览器窗口正确缩放。当我更改窗口大小时，标题将移动到左侧，但下一个和上一个窗口留在网页中间，而不是留在文本周围。

这是代码：

<div class="slideshow-container">

 <div class="mySlides">
 <div id="title">
`<p>______</p>`
 </div>

<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>

CSS.

#title {
position: static;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #D9BFFF;
font-family: Times;
font-size: 25px;
text-decoration: none;
}   

.prev, .next {
cursor: pointer;
position: absolute;
top: 250px;
width: auto;
padding: 16px;
margin-left: 450px;
margin-top: -22px;
color: #D9BFFF;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
} 

.next {
margin-left: 850px;
border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover, .active {
color: pink;
}

看答案

使用这些CSS命令，您可以通过任何宽度更改CSS：

//tablet

@media only screen and (max-width:767px){

.prev, .next {
top: 250px;
width: auto;
padding: 16px;
margin-left: 200px;

} 

}

//phone

@media only screen and (max-width:480px){

.prev, .next {
top: 250px;
width: auto;
padding: 16px;
margin-left: 100px;

} 

}

我不知道，你想要哪个位置，但是你可以改变左边或填充或其他什么

智能推荐

浏览器窗口之间传递数据

摘要：　　在项目开发中我们经常会遇到弹窗，有的是通过div模拟弹窗效果，有的是通过iframe，也有通过window自带的open函数打开一个新的窗口。今天给大家分享的是最后一种通过window.open()函数打开页面进行数据交互。首先看下效果图：原理：　　父窗口给子窗口传递数据是通过url的参数传递过去，子窗口给父窗口传递数据是通过父窗口的全局函数传递。代码： index.html &...

不同浏览器的窗口大小

《js高级程序设计》里提供了这一段代码来检测浏览器窗口大小于是试了一下，总结了一下innerWidth,innerHeight,outerWidth,outerHeight在不同浏览器中所代表的范围这个是用于IE6的混杂模式移动端的IE可以通过这段来获取屏幕上可见区域的大小（可见视口）而这段在其他移动浏览器中指的是渲染后页面的实际大小（布局视口）如果有错误望指正(/ω＼)谢谢...

让浏览器处理弹出窗口

1. Copy and run below whole command totally in Linux under your personal account on your laptop Command: [[ -d ~/scripts ]] || mkdir -p ~/scripts && cat << 'EOT' > ~/scripts/ssh-...

获取浏览器页面缩放或展示比例

翻页面的时候，不经意看到了 csdn还是什么页面给提示‘您当前页面处于缩放，页面可能会错乱’；就好奇怎么获取到页面是否缩放和缩放比例的，所以就查询了一下：得到了下面的结果做个记录；原文地址：https://www.cnblogs.com/dyhao/p/11458882.html var ratio=0; ...

微信开发者工具从注册到运行

前段时间一直想学学微信中的小程序是如何制作的，昨天终于有时间就尝试了一下。话不多说，以免跑偏。。。。 1.微信小程序开发需要先在微信公众平台（https://mp.weixin.qq.com）上注册一个自己的公众号。 2.在公众平台上注册成功后，在公众号左侧有一个小程序栏目。点击小程序管理，在左侧就会出现两个选项，在第一次使用小程序当然是没有小程序账号的，点击右侧注册小...

猜你喜欢

参考链接： Win10+VS2015环境下安装编译PCL1.8.1和VTK8.0.0（踩坑大全）https://blog.csdn.net/weixin_39871164/article/details/102879962 1.vs2017编译安装VTK （PCL点云显示是基于VTK做的） - PCL191匹配的VTK版本是VTK8.1（PCL191\3rdParty\VTK\include\vt...

第四周作业

一、union注入基于union的信息获取： union联合查询:可以通过联合查询来查询指定的数据用法举例： select username,password from user where id =1 union select 字段1,字段2 from 表名先登入PHPmyadmin 进入pikachu的数据库中得到此结果上述为一般查询 union查询：除了通过遍历查询数据库内容外，...

String常用的几个方法

String常用的几个方法介绍首先在讲之前我想说几句题外话，关于string的常用方法我查了很久csdn，我发现要不就是一大坨，还有一些乱七八糟的拓展，看的你一脸懵逼，要不就是简洁的很，该写的你不写出来，所以搞得你很难受。但是在你看了我这篇文章以后我觉得你可能会缓解很多，那就开始吧。 String的方法是有很多的，这里我只列举一些我常用的，喷子不要喷。直接上代码先。方法一：charAt: 很...

计算机组成原理第五章测试(下) 答案

本次得分为：15.00/15.00, 本次测试的提交时间为：2020-04-24, 如果你认为本次测试成绩不理想，你可以选择再做一次。【第5章测试（下）】 1单选(1分) 下图可以表示哪种控制方式的CPU工作效率？选A 得分/总分 A. DMA方式 1.00/1.00 B.无正确答案 C.程序中断方式 D.程序查询方式 2单选(1分) 在程序中断方式下，中断响应发生在__B_ 得分/总分 A....

LeetCode刷题笔记-回文数

一、题目描述判断一个整数是否是回文数。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。示例 1: 输入: 121 输出: true 示例 2: 输入: -121 输出: false 解释: 从左向右读, 为 -121 。从右向左读, 为 121- 。因此它不是一个回文数。示例 3: 输入: 10 输出: false 解释: 从右向左读, 为 01 。因此它不是一个回文数。进...