- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我被一个问题困扰了 2 天多了,我需要寻求帮助。在桌面浏览器上,图标应该左对齐,而在移动浏览器中,图标应该居中对齐。
这是目前为止的网站。
我创建了一个网站,其中的布局由堆叠的部分组成,其中每个部分的高度和宽度值使用 VH 百分比定义以获得特定布局。
这是如何在 CSS 中定义部分的示例。
.content3 {
height: 100vh;
width: 100%;
display: table;
background: #FFFFFF url('../img/chair.png') no-repeat center center;
background-size: 60%;
}
这是我定义页脚 CSS 的方式。
.footer {
height: 40vh;
width: 100%;
background: #312D3B;
}
这是 .footer 的 HTML
<section class="footer">
<div class="Social">
<img class="icons" src="img/dribbble.svg">
<img class="icons2" src="img/twitter.svg">
<img class="icons3" src="img/instagram.svg">
</div>
这是 .Social 类的 CSS
.Social {
height: 100%;
float: left;
position: relative;
}
这是 .icons 类的 CSS
.icons {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
padding-left: 3.5em;
}
这是 .icons2 类的 CSS
.icons2 {
bottom: 0;
left: 4.5em;
margin: auto;
position: absolute;
right: 0;
top: 0;
padding-left: 3.5em;
}
这是 icons3 类的 css
.icons3 {
bottom: 0;
left: 9em;
margin: auto;
position: absolute;
right: 0;
top: 0;
padding-left: 3.5em;
}
请帮忙。这是我在这个网站上的第一个问题。
最佳答案
你可以使用 flexbox 来帮助你解决这个问题,只需将 style.css 代码替换为这个即可
CSS:
/* --------------------------------
Primary style
-------------------------------- */
*, *::after, *::before {
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1;
margin: 0;
width: 100%;
height: 100%;
background: #1C1D21;
}
/* --------------------------------
Final project
-------------------------------- */
main {
position: relative;
z-index: 1;
height: 100vh;
overflow: hidden;
box-shadow: 0 0 50px #000;
transition: transform .5s;
}
.nav-open main {
transform: scale(.8);
}
.intro {
height: 90vh;
width: 100%;
display: table;
background: #FCC732 url('../img/WatchByMaz2.png') no-repeat center center;
background-size: 90%;
}
.content {
height: 100vh;
width: 100%;
display: table;
background: #FFFFFF url('../img/OculusConsumerByMaz.png') no-repeat center center;
background-size: 90%;
}
.content2 {
height: 100vh;
width: 100%;
display: table;
background: #FCC732 url('../img/speedingAppByMaz.png') no-repeat center center;
background-size: 90%;
}
.content3 {
height: 100vh;
width: 100%;
display: table;
background: #FFFFFF url('../img/chair.png') no-repeat center center;
background-size: 60%;
}
.footer {
height: 40vh;
width: 100%;
background: #312D3B;
}
.main-header {
position: relavtive;
background: #fff;
width: 100%;
top: 0;
}
section .center {
display: table-cell;
vertical-align: bottom;
text-align: center;
padding-bottom: 4em;
}
.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: 'lulo_cleanone' , Arial, sans-serif;
color: #312D3B;
font-size: 16px;
padding: 10px 20px 10px 20px;
border: solid #312D3B 2px;
text-decoration: none;
}
.btn:hover {
text-decoration: none;
}
.logo {
position: fixed;
z-index: 1;
top: 43px;
left: 44px;
white-space: nowrap;
}
h1 {
font-family: 'lulo_cleanone_bold' , Arial, sans-serif;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 90px;
color: #312D3B;
}
.nav-trigger {
position: fixed;
z-index: 4;
top: 40px;
right: 46px;
height: 44px;
width: 44px;
overflow: hidden;
color: transparent;
white-space: nowrap;
text-indent: 100%;
}
.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after {
position: absolute;
height: 4px;
width: 40px;
background: #000000;
}
.nav-trigger span {
width: 29px;
}
.nav-trigger span {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: background .3s;
}
.nav-trigger span::before,
.nav-trigger span::after {
content: '';
top: 0;
left: 0;
transition: background .3s, transform .3s;
}
.nav-trigger span::before {
transform: translateY(-12px);
}
.nav-trigger span::after {
transform: translateY(12px);
}
.nav-trigger:hover span,
.nav-trigger:hover span::before,
.nav-trigger:hover span::after {
background: #000000;
}
.nav-open .nav-trigger span {
background: transparent;
}
.nav-open .nav-trigger span::before,
.nav-open .nav-trigger span::after {
background: #FFFFFF;
}
.nav-open .nav-trigger span::before {
transform: rotate(-45deg);
}
.nav-open .nav-trigger span::after {
transform: rotate(45deg);
}
.overlay {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1C1D21;
opacity: 0;
visibility: hidden;
transition: opacity .5s, visibility .5s;
}
.nav-open .overlay {
opacity: .6;
visibility: visible;
}
.nav-container {
position: fixed;
z-index: 3;
top: 0;
right: 0;
height: 100%;
width: 90%;
max-width: 460px;
padding: 2em 3.5em;
background: #312D3B;
overflow: hidden;
transform: translateZ(0);
transform: translateX(100%);
transition: transform .5s cubic-bezier(.07,.23,.34,1);
}
.nav-open .nav-container {
transform: translateX(0);
}
.nav-container h2 {
font-size: 12px;
font-family: 'lulo_cleanone' , Arial, sans-serif;
text-transform: uppercase;
color: #AAAAAA;
margin: 2.3em 0;
}
.nav {
list-style: none;
padding: 0;
}
.nav a {
display: block;
padding: .4em 0;
font-size: 30px;
font-weight: bold;
font-family: 'lulo_cleanone' , Arial, sans-serif;
text-decoration: none;
color: #FFFFFF;
transform: translateZ(0);
}
.nav-open .nav a {
animation: slide-in .4s .2s backwards;
}
.nav-open .nav li:nth-of-type(2) a {
animation-delay: .3s;
}
.nav-open .nav li:nth-of-type(3) a {
animation-delay: .4s;
}
.nav-open .nav li:nth-of-type(4) a {
animation-delay: .5s;
}
.nav-open .nav li:nth-of-type(5) a {
animation-delay: .6s;
}
@keyframes slide-in {
0% {
opacity: 0;
transform: translateX(80px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.Social {
height: 100%;
display: flex;
justify-content: space-between;
width: 60%;
margin: 0 auto;
}
.icons {
}
.icons2 {
padding-left: 5.5em;
}
.icons3 {
padding-left: 6em;
}
.portfolio_nav {
height: 20vh;
width: 100%;
background: #312D3B;
}
.left_tab {
width: 49%;
height:100%;
background: #312D3B;
float: left;
position: relative;
}
.right_tab {
width: 49%;
height:100%;
background: #FFC600;
float: right;
position: relative;
}
.arrow {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.middle2 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
@font-face {
font-family: 'lulo_cleanone_bold';
src: url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.eot');
src: url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.woff2') format('woff2'),
url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.woff') format('woff'),
url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.ttf') format('truetype'),
url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.svg#lulo_cleanone_bold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'lulo_cleanone';
src: url('../yellow_design_studio_-_lulo_clean_one-webfont.eot');
src: url('../yellow_design_studio_-_lulo_clean_one-webfont.eot?#iefix') format('embedded-opentype'),
url('../yellow_design_studio_-_lulo_clean_one-webfont.woff2') format('woff2'),
url('../yellow_design_studio_-_lulo_clean_one-webfont.woff') format('woff'),
url('../yellow_design_studio_-_lulo_clean_one-webfont.ttf') format('truetype'),
url('../yellow_design_studio_-_lulo_clean_one-webfont.svg#lulo_cleanone') format('svg');
font-weight: normal;
font-style: normal;
}
/* --------------------------------
Desktop Media Queries
-------------------------------- */
@media screen and (min-width: 700px) {
.intro {
height: 100vh;
width: 100%;
display: table;
background: #FCC732 url('../img/WatchByMaz2.png') no-repeat center center;
background-size: 60%;
}
.content {
height: 100vh;
width: 100%;
display: table;
background: #F6F3F3 url('../img/OculusConsumerByMaz.png') no-repeat center center;
background-size: 60%;
}
.content2 {
height: 100vh;
width: 100%;
display: table;
background: #FCC732 url('../img/speedingAppByMaz.png') no-repeat center center;
background-size: 60%;
}
.content3 {
height: 100vh;
width: 100%;
display: table;
background: #FFFFFF url('../img/chair.png') center no-repeat;
background-size: 30%;
}
.Social {
display: flex;
justify-content: space-around;
height: 100%;
width: 30%;
margin: 0 auto;
}
.icons {
}
.icons2 {
padding-left: 3.5em;
}
.icons3 {
padding-left: 3.5em;
}
关于html - 无法在页脚中居中社交媒体图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36372817/
我从来没有遇到过这种问题 - 我也不知道为什么.. 有些图标丢失并以“?/!”闪烁显示 发生了什么事? 它是一个提交按钮。我在另一个按钮中有相同的图标 - 那里没问题。 SIGN! 有什
我只需要在单击按钮时显示 ionic 图标。 我试着在那个图标上放一个类并做到了: .icn { visibility: visible; } 但是没有用,有没有人知道另一种方法? 最佳答案 Sho
我用qt在托盘里做了一个应用。在我的电脑上,这是一个很好的项目,我在托盘栏中看到了图标,但是当我将其发布给其他人时,他们看不到该图标,它只是一个可以使用但不显示图标的隐形方 block 。但在我的电脑
我想使用delphi将图标/ bmp绘制到TListView的子项中。但是我不知道该怎么做到。它适用于列表中的第一项,但子项存在问题。 最佳答案 您可以使用CustomDrawSubItem事件。 下
我想将标题栏中的图标设置为应用程序的图标 [[myWindow standardWindowButton:NSWindowDocumentIconButton] setImage:[NSApp app
可以设置一个图标,以便在当前应用程序的每个窗口上使用它。这样我就设置了一次(不是手动在每个窗口上设置)..? 最佳答案 关于这个主题的一个很好的引用在这里 MSDN 。表明您有一个应用程序图标(桌面图
我为自己制作了一个小书签,它的功能很好,但当添加到 Opera 或 Firefox 的工具栏时,它只是呈现浏览器的默认书签图标(分别是地球仪和星星)。我的网站有一个网站图标,窗口、选项卡甚至 [网站]
制表符中的responsiveCollapse 折叠展开功能的默认图标似乎未居中。是否有更改此图标的选项。也许是右下胡萝卜? 最佳答案 responsiveCollapse 格式化程序只是一个像所有其
上面是下拉列表,当单击列表时,其值将与图像一起显示在上面的字段(顺便说一句,这是一个按钮)中。我已经实现了显示文本,但似乎无法显示图像。这是我的标记如下... 广东 @foreach
我想将我们数据库中的电线杆和电缆导出到 Google 地球的 KML 文件中。 对于每个节点,我们都有一个极阵列,电缆始终连接到阵列中的下一个极。 制作简单路径的导出似乎很容易。但是这些路径只是显示一
我想将我们数据库中的电线杆和电缆导出到 Google 地球的 KML 文件中。 对于每个节点,我们都有一个极阵列,电缆始终连接到阵列中的下一个极。 制作简单路径的导出似乎很容易。但是这些路径只是显示一
在 JTable 中显示数据。一列用作字段复选框。问题是在显示ChceckBox 中而不是出现图标true/false。我该如何解决这个问题? 添加数据: private DefaultTableMo
[编辑] 我想使用 DataTable 在 Datagridview 中使用图像。 RadioButton 只是这篇文章的一种简单问题格式。 让我为此澄清一下。 如何使用绑定(bind)样式在 dat
我正在使用 C# 开发 win 表单应用程序。我遇到了一个需要向用户提供 ComboBox 的场景。现在,为了使外观更具吸引力,我想在该组合框的每个项目之前显示一个小图像或图标。 我查看了一些提供此功
我正在 CrossRider 中构建一个扩展。我需要在数据库中保存我有它们的 url 的图像/图标。它们是微小的图像,不会成为数据库中的问题。我可能有类似的东西可以访问 background.js:
我需要使用我的 JavaFX 应用程序中的一些元素,这些元素使用 带有自定义符号/图标的按钮 横幅或背景图像。 此应用程序应该在具有不同屏幕分辨率的多个设备上运行,并且我还(最终)需要缩放图像/图标(
我怎样才能在 android studio 中做这样的事情: 我想要一个导航栏,您可以在其中看到名称、图标以及打开抽屉导航的机会 :D (图片是用Figma制作的) 最佳答案 将重力设置为在 Draw
当我在 ViewPager 中滑动 fragment 时,如何动态更改 Action Bar 的操作按钮图标。取决于 fragment 按钮必须改变状态(图标)。 最佳答案 您可以在 onPrepar
我有两个 while 循环,一个是循环遍历聊天日志以检索日期、用户名、消息,另一个 while 循环 是从单独的表中检索图标这有两列 chars 和 image (image-name.*) 我可以显
我正在尝试重新启动 mysql(一个完全不同的问题),MySql 肯定已安装(版本 14.14),并且根据我收集的信息,我应该在系统偏好设置面板的底部看到它的图标,但它是不在那里。安装过程中是否出现了
我是一名优秀的程序员,十分优秀!