Html 基于w3.css模板构建的响应式布局覆盖内容，垂直滚动，内容不希望居中
我花了几天时间在这上面，用另一个模板重建了页面，尝试了在线建议，这让我进一步打破了布局。我更多的是一个设计师，更少的是一个程序员，我找不到我可以尝试的其他东西。请帮忙！ 我面临的问题：最糟糕的：两个div相互重叠。然后中间的旋转木马是居中的，现在它不再是，它不关心边缘：自动。然后垂直卷轴出现了。所有这些问题都与我试图解决重叠div的响应性布局有关。 好心情/屏幕大小的布局如下所示：好的大屏幕布局 最差的屏幕大小返回以下信息：全部布局错误 我的页面的精简代码：Html 基于w3.css模板构建的响应式布局覆盖内容，垂直滚动，内容不希望居中,html,css,responsive,w3.css,Html,Css,Responsive,W3.css,我花了几天时间在这上面，用另一个模板重建了页面，尝试了在线建议，这让我进一步打破了布局。我更多的是一个设计师，更少的是一个程序员，我找不到我可以尝试的其他东西。请帮忙！ 我面临的问题：最糟糕的：两个div相互重叠。然后中间的旋转木马是居中的，现在它不再是，它不关心边缘：自动。然后垂直卷轴出现了。所有这些问题都与我试图解决重叠div的响应性布局有关。 好心情/屏幕大小的布局如下所示：好的大屏幕布局 最差的屏幕大小返回以下信息：全部布局错误 我的页面的精简代码： <html> <
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/magnificpopup.css">
<link href="stylesheet.css" rel=stylesheet type="text/css">
<style>
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}
</style>
<body>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-white w3-collapse w3-top w3-large w3-padding-large" style="z-index:3;width:350px;font-weight:bold;" id="mySidebar"><br>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Close Menu</a>
<div class="w3-container">
<h3 class="w3-padding-64"><br></h3>
</div>
<div class="w3-bar-block">
<nav id="menu" class="leftDivPosition">
<header>
<a href="index.php">
<div class="logotype"><img src="images/logo.gif" alt="logo"></div>
</a>
</header>
<ul>
<li><div class="menuText">Photoshop</div></li>
<li><div class="menuText">Graphic design</div></li>
<li><div class="menuText">Product design</div><li>
<div class="menuText">3D</div></li>
<li><div class="menuText">About me</div></li>
<li><div class="menuText">Contacts</div></li>
</ul>
</nav>
</div>
</div>
</nav>
<!-- Top menu on small screens -->
<header class="w3-container w3-top w3-hide-large w3-white w3-xlarge w3-padding">
<a href="javascript:void(0)" class="w3-button w3-grey w3-margin-right" onclick="w3_open()">☰</a>
</header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main w3-row" style="margin-left:340px;margin-right:15px">
<!-- Main -->
<div class="w3-col m9 19">
<div class="w3-container" id="designers" style="margin-top:75px">
<div style="margin:auto;">
<ul style="list-style-type:none;" id="carousel">
<li><a class="magnificpopup" href="images/cookbook_cover_th.jpg">
<img src="images/cookbook_cover_thsz.jpg" name="CarouselImg1"/></a></li>
<li></li>
</ul>
</div> </div>
</div>
<!--right sidebar -->
<div class="w3-col m3 13">
<div class="w3-row" id="designers" style="margin-top:100px; overflow:visible;">
<div>
<div class="w3-col m7 w3-margin-bottom w3-padding">
<div class="w3-container w3-padding-large">
<ul>
<li><a href="http://facebook.com/"><i></i></a></li>
<li><a href="http://linkedin.com/"><i></i></a></li>
</ul>
</div>
</div>
<!--vertical copyright for big screens -->
<div class="w3-container w3-col m5 w3-padding-large w3-hide-small">
<p style="-webkit-transform:rotate(90deg) !important;-moz-transform:rotate(90deg) !important;-o-transform: rotate(90deg !important);-ms-transform:rotate(90deg !important);transform: rotate(90deg !important);white-space:nowrap !important;display:block !important;width:20px;">© 2014 – 2017 Vidaldigital.com. All Rights Reserved.</p>
</div>
<!--horisontal copyright for small screens -->
<div class="w3-container w3-col m4 w3-padding-large w3-hide-medium w3-hide-large"> <p>© 2014 – 2017 Vidaldigital.com</p>
</div>
</div>
</div>
</div>
<!-- End page content -->
</div>
</body>
</html>
.w3半img{页边距底部：-6px；页边距顶部：16px；不透明度：0.8；光标：指针}
.w3半img:hover{opacity:1}
- Photoshop
- 平面设计
- 产品设计
-
3D
- 关于我
- 接触
©2014–2017 Vidaldigital.com。版权所有
©2014–2017 Vidaldigital.com
<script type="text/javascript">
$(document).ready(function() {
$("#carousel").waterwheelCarousel({
startingItem: 1, // item to place in the center of the carousel. Set to 0 for auto
separation: 255, // distance between items in carousel
separationMultiplier: 0.6, // multipled by separation distance to increase/decrease distance for each additional item
horizonOffset: 0, // offset each item from the "horizon" by this amount (causes arching)
horizonOffsetMultiplier: 1, // multipled by horizon offset to increase/decrease offset for each additional item
sizeMultiplier: 0.6, // determines how drastically the size of each item changes
opacityMultiplier: 0.7, // determines how drastically the opacity of each item changes
horizon: 0, // how "far in" the horizontal/vertical horizon should be set from the container wall. 0 for auto
flankingItems: 2, // the number of items visible on either side of the center
// animation
speed: 3000, // speed in milliseconds it will take to rotate from one to the next
animationEasing: 'swing', // the easing effect to use when animating
quickerForFurther: true, // set to true to make animations faster when clicking an item that is far away from the center
edgeFadeEnabled: true, // when true, items fade off into nothingness when reaching the edge. false to have them move behind the center image
// misc
linkHandling: 2, // Determines behavior of links that are placed around the images. 1 to disable all (if you want to use the callback functions to do something special with the links; or used for facebook), 2 to disable all but center (to link images out).You can wrap all of the images in links if you'd like. Most people will probably want to add links around each image, but only activate the links when the center item is clicked. This is the default use case. However, you can turn all of the links off if you prefer using the callback functions to handle the links.
autoPlay: 300, // indicate the speed in milliseconds to wait before autorotating. 0 to turn off. Positive value for a left to right movement, negative for a right to left.
orientation: 'vertical', // indicate if the carousel should be 'horizontal' or 'vertical'
activeClassName: 'carousel-center', // the name of the class given to the current item in the center
keyboardNav: true, // set to true to move the carousel with the arrow keys
keyboardNavOverride: false, // set to true to override the normal functionality of the arrow keys (prevents scrolling)
imageNav: true, // clicking a non-center image will rotate that image to the center.False to disable that functionality, which is commonly paired with navigational buttons instead.
// preloader
preloadImages: true, // disable/enable the image preloader.The carousel will attempt to preload all images before initializing. This is known to have some issues in certain browsers. The main reason for the preloader is too be able to determine the dimensions for each image before running calculations. If you run into issues, disable this and use the forced proportions below (or set your image dimensions using CSS).
forcedImageWidth: 0, // Set a global width that should be applied to all images in the carousel. specify width of all images; otherwise the carousel tries to calculate it
forcedImageHeight: 0, // Set a global height that should be applied to all images in the carousel. specify height of all images; otherwise the carousel tries to calculate it
// callback functions
movingToCenter: $.noop, // fired when an item is about to move to the center position
movedToCenter: $.noop, // fired when an item has finished moving to the center
clickedCenter: $.noop, // fired when the center item has been clicked
movingFromCenter: $.noop, // fired when an item is about to leave the center position
movedFromCenter: $.noop
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value
});
});
</script>
$（文档）.ready（函数（）{
$（“旋转木马”）。水车转盘({
startingItem:1，//要放置在旋转木马中心的项目。设置为0表示自动
间隔：255，//旋转木马中项目之间的距离
分隔乘数：0.6，//乘以分隔距离可增加/减少每个附加项的距离
horizonOffset:0，//将每个项目从“horizon”中偏移此金额（导致拱起）
HorizonOffset乘数：1，//乘以horizon offset可增加/减少每个附加项的偏移量
sizeMultiplier:0.6，//确定每个项目的大小变化幅度
opacityMultiplier:0.7，//确定每个项目的不透明度变化的幅度
地平线：0，//水平/垂直地平线距容器壁的距离应设置为“多远”。0表示自动
侧翼项目：2，//中心两侧可见的项目数
//动画
速度：3000，//从一个旋转到下一个所需的速度（毫秒）
animationEasing:'swing'，//设置动画时要使用的缓和效果
quickerForFurther:true，//设置为true可在单击远离中心的项目时加快动画速度
edgeFadeEnabled:true，//如果为true，则项目到达边缘时会消失为虚无。如果为false，则项目会移动到中心图像后面
//杂项
linkHandling:2，//确定放置在图像周围的链接的行为。1禁用所有链接（如果要使用回调函数对链接执行特殊操作；或用于facebook），2禁用除中心外的所有链接（将图像链接出来）。如果愿意，可以将所有图像包装在链接中。大多数人可能希望在每个图像周围添加链接，但仅在单击中心项目时激活链接。这是默认使用情况。但是，如果希望使用回调函数处理链接，可以关闭所有链接。
自动播放：300，//表示自动旋转前等待的速度（毫秒）。0表示关闭。正值表示从左向右移动，负值表示从右向左移动。
方向：'垂直'，//指示旋转木马是“水平”还是“垂直”
activeClassName:'carousel center'，//中心中当前项的类名称
keyboardNav:true，//设置为true可使用箭头键移动旋转木马
keyboardNavOverride:false，//设置为true以覆盖箭头键的正常功能（防止滚动）
imageNav:true，//单击非中心图像会将该图像旋转到中心。False可禁用该功能，该功能通常与导航按钮配对。
//预紧器
PrelodImages:true，//禁用/启用
<div class="w3-col m9 19">
<div class="w3-container" id="designers" style="margin-top:75px">
<div style="margin:auto;">
<ul style="list-style-type:none;" id="carousel">
<li>
<a class="magnificpopup" href="images/cookbook_cover_th.jpg">
<img src="images/cookbook_cover_thsz.jpg" name="CarouselImg1"/>
</a>
</li>
<li></li>
</ul>
</div>
</div>
</div>