个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
当我在浏览器 (Google Chrome) 中以 100% 的速度运行此代码时，一切正常。但是，当我最小化它时，div 到处都是。我不确定它是否是元标记，我是否遗漏了某些内容，或者我是否在我的代码中包含了不应该存在的内容。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta http-equiv="cache-control" content="public">
<meta http-equiv="pragma" content="cache">
<meta http-equiv="content-language" content="en">
<meta name="description" content="A Website Designed For Young People To Enjoy Themselves Through Irish">
<meta name="keywords" content="Youth Zone, Crios Óige, Irish, Gaeilge, Irish Videos, Fun with Irish">
<meta name="author" content="Edward Leonard">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="archive">
<meta charset="UTF-8">
<title>Crios Óige | Abhaile</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body bgcolor="#009900";>
<div id="divide1">
</div>
<div id="divide2">
</div>
<div id="header">
<img src="file:///E:/Crios%20Óige/Crios%20Oige%20Images/Logo.png" id="logo">
<img src="file:///E:/Crios%20Óige/Crios%20Oige%20Images/Title.PNG" id="title">
<img src="http://www.youtharts.ie/sites/youtharts.ie/files/NYCI%20Logo%20Full%20JPG_2.jpg" id="youthcouncil">
</div>
<div id="toolbar">
<div id="homebutton">
<div id="homebuttonlink">
<b><a href="index.html" id="homebuttonlinkstyle">Abhaile</a></b>
</div>
</div>
<div id="videosbutton">
<div id="videosbuttonlink">
<b><a href="videos.html"; id="videosbuttonlinkstyle">Fiseán</a></b>
</div>
</div>
<div id="imagesbutton">
<div id="imagesbuttonlink">
<b><a href="images.html"; id="imagesbuttonlinkstyle">Pictiúir Greannmhar</a></b>
</div>
</div>
<div id="gamesbutton">
<div id="gamesbuttonlink">
<b><a href="games.html"; id="gamesbuttonlinkstyle">Cluichí</a></b>
</div>
</div>
<div id="sportbutton">
<div id="sportbuttonlink">
<b><a href="sport.html"; id="sportbuttonlinkstyle">Spórt</a></b>
</div>
</div>
<div id="contactusbutton">
<div id="contactusbuttonlink">
<b><a href="contactus.html"; id="contactusbuttonlinkstyle">Déan teagmháil linn</a></b>
</div>
</div>
</div>
<div id="aboutus">
<div id="aboutustitle">
<p id="aboutustitlestyle">Maidir Linne</p>
</div>
<p id="aboutuscontent">***************************************************************************************************************************************************************************************************************************************************************************************************************************</p>
</div>
</body>
</html>
这是随附的 CSS
body {
text-align: justify;
}
a {
text-decoration: none;
}
a:link {
color:#FF0000;
} /* unvisited link */
a:visited {
color:#4D0000;
} /* visited link */
a:hover {
color:#0000FF;
} /* mouse over link */
a:active {
color:#FF0000;
} /* selected link */
#header {
height: 100px;
width: 100%;
background-color: #993333;
margin-top: -10px;
}
#toolbar {
height: 151px;
width: 51.29%;
background-color: #FF0000;
position: relative;
top: -10px;
margin-right: auto;
margin-left: auto;
}
#homebutton {
height: 80px;
width: 27%;
background-color: #0000FF;
position: relative;
top: -19px;
margin: 21px;
float: left;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#videosbutton {
height: 80px;
width: 27%;
background-color: #0000FF;
position: relative;
top: -19px;
margin: 21px;
float: left;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#imagesbutton {
height: 80px;
width: 27%;
background-color: #0000FF;
position: relative;
top: -19px;
margin: 21px;
float: left;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#gamesbutton {
height: 69px;
width: 27%;
background-color: #0000FF;
position: relative;
top: -61px;
margin: 21px;
float: left;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#sportbutton {
height: 69px;
width: 27%;
background-color: #0000FF;
position: relative;
top: -61px;
margin: 21px;
float: left;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#contactusbutton {
height: 69px;
width: 27%;
background-color: #0000FF;
position: relative;
top: -61px;
margin: 21px;
float: left;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#homebuttonlink {
height: 30px;
width: 77%;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin: 10px;
padding: 10px;
top: 5px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#videosbuttonlink {
height: 30px;
width: 77%;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin: 10px;
padding: 10px;
top: 5px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#imagesbuttonlink {
height: 30px;
width: 77%;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin: 10px;
padding: 10px;
top: 5px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#gamesbuttonlink {
height: 30px;
width: 77%;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin: 10px;
padding: 10px;
top: -6px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#sportbuttonlink {
height: 30px;
width: 77%;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin: 10px;
padding: 10px;
top: -6px;
border-radius: 5px;
line-height: -10px;
overflow: hidden;
text-overflow: ellipsis;
}
#contactusbuttonlink {
height: 30px;
width: 77%;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin: 10px;
padding: 10px;
top: -6px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#contactusbuttonlinkstyle {
font-size: 17px;
font-family: Verdana, Geneva, sans-serif;
line-height: 10px
}
#sportbuttonlinkstyle {
font-size: 30px;
font-family: Verdana, Geneva, sans-serif;
}
#gamesbuttonlinkstyle {
font-size: 30px;
font-family: Verdana, Geneva, sans-serif;
}
#imagesbuttonlinkstyle {
font-size: 17px;
font-family: Verdana, Geneva, sans-serif;
line-height: 10px;
}
#videosbuttonlinkstyle {
font-size: 30px;
font-family: Verdana, Geneva, sans-serif;
}
#homebuttonlinkstyle {
font-size: 30px;
font-family: Verdana, Geneva, sans-serif;
}
#divide1 {
height: 1291px;
width: 25.125%;
background-color: #330066;
position: relative;
margin: -10px;
float: left;
top: -10px;
}
#divide2 {
height: 1291px;
width: 25.125%;
background-color: #330066;
position: relative;
margin: -10px;
float: right;
top: -10px;
}
#aboutus {
height: 200px;
width: 400px;
margin: 475px;
background-color: aqua;
top: -450px;
position: relative;
border-radius: 10px;
}
#aboutustitle {
height: 40px;
width: 200px;
background-color: red;
position: relative;
margin-left: 100px;
top: 10px;
border-radius: 20px;
}
#aboutuscontent {
word-wrap: break-word;
margin-left: 20px;
margin-right: 20px
}
#aboutustitlestyle {
font-size: 20px;
color: yellow;
font-family: Verdana, Geneva, sans-serif;
margin-left: 40px;
line-height: 35px;
}
#youthcouncil {
height: 80px;
width: 180px;
margin-left: 300px;
margin-top: 5px;
}
#logo {
height: 80px;
width: 180px;
margin-left: 20px;
margin-top: 5px;
}
#title{
height: 80px;
width: 180px;
margin-left: 250px;
margin-top: 5px;
}
最佳答案
您缺少的一个元标记是视口(viewport):
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
另一个问题是您的设计没有响应。每次设计中断时，您都应该使用媒体查询来添加断点。这基本上意味着你应该开始最小化你的屏幕(你可以使用很棒的 Chrome 的模拟功能来适应不同的分辨率和移动设备)并且每次设计开始中断时你应该添加一个断点(在这个特定的宽度)。在断点内，您将拥有不同的 css 规则，这些规则将使设计适用于该特定断点。
这个主题有很多教程，例如:
Logical Breakpoints For Your Responsive Design
Setting Breakpoints in Responsive Design
编辑:
我会在您的设计中改变的另一件事 - 它在很大程度上取决于元素的相对定位。我会使用 display: inline-block 或 float: left/right 来将元素放置在彼此旁边。在您确实使用“显示:内联 block ”的地方，您使用错误(在内部 div 元素内)。您应该在外部 div 上使用它(例如“gamesbutton”元素而不是“gamesbuttonlink”)
关于html - 当我将浏览器切换到全屏或从全屏切换时设计发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22025905/
25
4
0
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
.NET 框架:4.5.1 我在 Blend for visual studio 2015 中遇到一个奇怪的错误，我找不到它的来源。 如果我在 VS 中打开我的 WPF 解决方案，它会加载并运行良好。
我经常遇到这样的问题，与 Hierarchical RESTful URL design 非常相似 假设该服务仅提供用户上传文档。 POST, GET /accounts PUT, DELETE /a
在 Rails 应用程序中，我使用 devise 来管理我的用户，而我用来销毁 session 的链接不再有效。它正在工作，现在我添加了事件管理员，但没有。 我的链接是 :delete, :clas
我已经坚持了超过 24 小时，试图按照此处发布的其他解决方案进行操作，但我无法使其正常工作。我是 Rails 新手，需要帮助! 我想让我的/users/edit 页面正常工作，以便我可以简单地更改用户
Devise 在以下情况下不会使用户超时: 用户登录，关闭选项卡，然后在超时 + X 分钟内重新访问该 URL。用户仍处于登录状态。 如果选项卡已打开并且稍后刷新/单击，则超时可以正常工作。这意味着
我想使用这样的 slider 我希望该 slider 根据提供给它的值进行相应调整。到目前为止，我只能应用具有渐变效果的背景，但无法获得这种效果。请通过提供样式代码来帮助我。
您应该为每种方法创建一个请求/响应对象，还是应该为每个服务创建一个？ 如果我在所有方法中使用它，我的服务请求对象中将只有 5 个不同的东西，因为我对几乎所有方法使用相同的输入。 响应对象将只有一个字典
我正在尝试在 REST 中对实体的附件进行建模。假设一个缺陷实体可以附加多个附件。每个附件都有描述和一些其他属性(上次修改时间、文件大小...)。附件本身是任何格式的文件(jpeg、doc ...)
我有以下表格: Blogs { BlogName } BlogPosts { BlogName, PostTitle } 博客文章同时建模一个实体和一个关系，根据 6nf(根据第三个宣言)这是无效的。
如果 A 类与 B、C 和 D 类中的每一个都有唯一的交互，那么交互的代码应该在 A 中还是在 B、C 和 D 中？ 我正在编写一个小游戏，其中许多对象可以与其他对象进行独特的交互。例如，EMP点击
关于如何记住我与 Omniauth 一起工作似乎有些困惑。 根据这个wiki ，您需要在 OmniauthCallbacksController 中包含以下内容: remember_me(user)
设计问题: 使用 非线程安全 组件(集合，API，...)在/带有 多线程成分 ... 例子 : 组件 1 :多线程套接字服务器谁向消息处理程序发送消息... 组件 2 :非线程安全 消息处理程序 谁
我们目前正在设计一个 RESTful 应用程序。我们决定使用 XML 作为我们的基本表示。 我有以下关于在 XML 中设计/建模应用程序数据的问题。 在 XML 中进行数据建模的方法有哪些？从头开始然
我正在设计一个新的 XSD 来从业务合作伙伴那里获取积分信息。对于每笔交易，合作伙伴必须提供至少一种积分类型的积分值。我有以下几点:
设计支持多个版本的 API 的最佳方法是什么。我如何确保即使我的数据架构发生更改(微小更改)，我的 api 的使用者也不会受到影响？任何引用架构、指南都非常有用。 最佳答案 Mark Nottingh
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
我想用 php 创建一个网站，其工作方式与 https://www.bitcoins.lc/ 相同。确实，就每个页面上具有相同布局但内容会随着您更改链接/页面而改变而言，我如何在 php 中使用lay
我有一个关于编写 Swing UI 的问题。如果我想制作一个带有某些选项的软件，例如在第一个框架上，我有三个按钮(新建、选项、退出)。 现在，如果用户单击新按钮，我想将框架中的整个内容更改为其他内容。
我正在尝试找出并学习将应用程序拥有的一堆Docker容器移至Kubernetes的模式和最佳实践。诸如Pod设计，服务，部署之类的东西。例如，我可以创建一个其中包含单个Web和应用程序容器的Pod，但
我是一名优秀的程序员,十分优秀！