- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
每当浏览器调整大小时,我网站横幅上的 Logo 图像都拒绝保持不变。它将直接位于横幅中间它应该位于的位置,但是一旦我开始缩小浏览器的宽度,它就会开始上升。为什么是这样?有人可以帮我解决这个问题吗?
下面是我使用的 html 和 css 代码。
HTML:
<HTML>
<HEAD>
<TITLE>BLB</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="STYLE1.CSS">
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-width: 1000px)"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".TYPEHERE").fadeToggle();
});
});
</script>
</HEAD>
<BODY>
<div id="page-wrap">
<h1>
<div id="logo"><img src="images/blb2.png"></div>
<div class="cart"><img src="images/cart3.png"></div>
<a href="http://www.facebook.com" target="_blank"><div id="fb"><img src="images/fb.png"></div>
<a href="http://www.instagram.com" target="_blank"><div id="insta"><img src="images/insta.png"></div>
<a href="http://www.twitter.com" target="_blank"><div id="twitter"><img src="images/twitter.png"></div>
<a href="http://www.youtube.com" target="_blank"><div id="tube"><img src="images/tubee.png"></div>
<ul id="nav">
<li class="active"><a href="home.html">Home</a></li>
<li><a href="about.html">Store</a></li>
<li><a href="blog.html">Articles</a></li>
<li><a href="store.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</h1>
<div id="footer">
<tfooter>©2014 Blacklipbastard.com All Rights Reserved.</tfooter>
</div>
</div>
</BODY>
</HTML>
CSS:
html { overflow-y: scroll;}
body { font: 62% helvetica, sans-serif; width: 100%; background: url(images/bg1.jpg); background-size: 200%; }
h1 {background-color: #000; background-size: 100%; position: absolute; height: 18%; width: 100%; left: 0%; top: -1.8%; border-style: solid; border-color: gray; border-radius: 20px 20px 0 0; padding-top: 0%; background-repeat: no repeat; border-width: 2px;}
#logo { position: absolute; top: -140%; left: 22%; width: 50%;}
img {max-width: 100%;}
.cart {position: relative; top: 50%; left: 94%;}
.cart img {width:5%; height:30%;}
#nav {background:url(images/nav2.jpg) ; position: absolute; border-style: solid; left:0%; top:73%; width: 96%; height:19%; border-right: 2px solid #000000;}
#nav li {position: relative; list-style-type: none; float: left; width: 10%; top: 20%; border-right: 2px groove #000; padding: 0 10px;}
#nav a{text-decoration: none; color: white; font-size: 20px; position: relative;}
#nav a:hover{background: url(images/nav.jpg); color: silver;}
#fb {position: absolute; top: 40%; width: 3.5%; top: 89.5%; left: 80%; height: 15%; z-index: 1}
#insta { position: absolute; left: 85%; width: 2.8%; top: 89.5%; height: 13%; z-index: 1}
#twitter { position: absolute; width: 3.5%; top: 89.5%; left: 95%; height: 15%; z-index: 1}
#tube { position: absolute; top: 89.5%; width: 3.5%; left: 90%; height: 15%; z-index: 1}
#fb img{ Width:95%; Height:110%;}
#insta img{ Width:95%; Height:110%;}
#twitter img{ Width:95%; Height:110%;}
#tube img{ Width:95%; Height:110%;}
#footer { position: absolute; font: verdana #fff; left: 2.8%; bottom: 3%; border-top-style: double; border-color: #E8E8E8 ; padding: 0 48%; }
tfooter {position: absolute; left: 3%}
#page-wrap{
width: 80%;
height: 150%;
margin: 8.5%;
background: #fff;
padding: 20px;
position: relative;
top: -7%;
border-radius: 20px;
background: rgb(255, 255, 255) transparent;
background: rgba(255, 255, 255, 0.90);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";}
最佳答案
因为您的图片有 100% 的宽度。当您调整浏览器大小时,它会自动放大。尝试将 max-width 添加到 Logo 。 :)
关于html - css定位: item keeps moving whenever the browser is resized,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25050997/
这里我试图在 FlatList 中显示一个名为“posts”的数组。 render() { console.log(this.props.posts); return (
这是我的代码: {{day(list)}} {{list.weather[0].description}}
我是 Mahout 的新手,并且仍在使用它。 我的问题是,将 Item-Item 和 User-Item 结合起来是否合适? 我的用例是,一个社交网络应用会尝试根据用户历史数据(优先级较高)为当前用户
下午好, 我按数据库搜索以测试特定类测试,当我放置一个新项目时,如果列表包含该项目。 @Test public void insertAndDeleteTask() throws Interrupte
我有一个关于 ionic 框架的问题,我希望有人能帮助我...我有一个带有“ion-item-right”的 ionic 列表。这一切都可以,按钮在右边。现在我需要其他三个居中的图标,这样我就有了:文
我经常遇到类似下面的代码: if ( items != null) { foreach(T item in items) { //... } } 基本上,if 条件确
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
这个问题已经有答案了: Type mismatch: cannot convert from Item to Item (1 个回答) 已关闭 7 年前。 我很困惑。我无法将外部类的实例变量 Node
我目前正在使用 MUI Grid(但我对替代解决方案持开放态度)并且我想要并排放置两个组件:最右边的组件占 400px宽度和左侧组件占据其余部分。 || || || 当页面宽度缩小时: | | ||
我最近问过a question about LocalStorage 。使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
public class Document extends Model { ... @ManyToMany public Set accessors; ... } 我想选择访问者包含某个用户的所有文档
我正在使用 selenium webdriver 为单页 Web 应用程序开发一个 Java 框架,使用以下模式:PageObject、SlowLoadableComponent(责任链)、PageF
最近在学习C,在网上发现了一个问题。问题是: What is the problem with this function in terms of memory allocation? What is
我有这个代码 ( -1 ? true : false} /> {genre.item.name}
在ASP.Net中使用DataGrid时真的没有快捷方法吗 (e.Item.ItemType==ListItemType.Item || e.Item.ItemType==ListItemType.A
我正在使用工作流程根据数据和一组要求将大量 pdf 从一个位置复制到其他大坝位置。我正在使用以下代码 Assets damAsset = manager.createAsset(path, is, m
我是 PowerShell 的新手。 我正在尝试自动将 dll 组件从源服务器上的文件夹部署到目标服务器上的多个文件夹。这看起来应该很简单:将组件从源服务器上的源(部署)文件夹复制到目标服务器上的文件
我的代码: for column_name, column_data in summary_words.iteritems(): if column_name != "summary" and
我的代码: for column_name, column_data in summary_words.iteritems(): if column_name != "summary" and
我是一名优秀的程序员,十分优秀!