- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
您好,我是这个网站的新手,也是一般编程的新手。我目前正在尝试整理这个网站(只是练习),但我似乎被卡住了,我无法将搜索栏向上移动到 Logo 旁边。我知道我的菜单项也不正确,我会在解决此搜索栏问题后重试。我目前必须打开一个 index.html 和一个 style.css
这是下面的 html.index 页面。
<!doctype html>
<html>
<head>
<title>FindFriends</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<img src="./img/find_friends_logo.png"/>
</div>
</div class="search_box" />
<form action="search.php" method="GET" id="search">
<input type="text" name="q" size="60" placeholder="Search."/>
</form>
</div>
<div id="menu">
<a href="#" />Home</a>
<a href="#" />About</a>
<a href="#" />Sign Up</a>
</div>
</div>
</div>
<div style="width: 800px; margin: 0px auto 0px auto;">
<table>
<tr>
<td width="60%" valign="top">
<h2>Join Find Friends Today</h2>
</td>
<td width="%" valign="top">
<h2>Sign Up Below</h2>
<form action="#" method="POST">
<input type="text" name="fname" size="25" placeholder="First Name" /><br /><br />
<input type="text" name="lname" size="25" placeholder="Last Name" /><br /><br />
<input type="text" name="username" size="25" placeholder="Username" /><br /><br />
<input type="text" name="email" size="25" placeholder="Email" /><br /><br />
<input type="text" name="email2" size="25" placeholder="Confirm Email" /><br /><br />
<input type="text" name="password" size="25" placeholder="Password" /><br /><br />
<input type="text" name="password2" size="25" placeholder="Confirm Password" /><br /><br />
<input type="submit" name="submit" value="Sign Up!" >
</form>
</td>
</tr>
</div>
</table>
</body>
</html>
下面是 style.css 页面。
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #eff5f9;
}
.headerMenu {
background-image: url(../img/menu_bg.png);
height: 50px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
#wrapper {
background-image: url(../img/menu_bg.png);
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
background-image: url(../img/menu_bg.png);
width: 125px;
}
.logo img {
background-image: url(../img/menu_bg.png);
width: 150px;
height: 38px;
padding-top: 5px;
}
.search-box {
background-image: url(../img/menu_bg.png);
position: absolute;
top: 13px;
margin-left: 135px;
}
#search input[type="text"] {
background: url(../img/search_dark.png) no-repeat 10px 6px #267bb6;
outline: none;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
width: 350px;
padding: 9px 15px 9px 35px;
margin: 0;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: url(../img/search_light.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 350px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 1280px) {
#menu {
background-image: url(../img/menu_bg.png);
position: absolute;
top: 0px;
right: 0px;
height: 37px;
padding-top: 19px;
margin-right: 2%;
}
}
@media screen and (min-width: 1280px) {
#menu {
background-image: url(../img/menu_bg.png);
position: absolute;
top: 0px;
right: 0px;
height: 37px;
padding-top: 18px;
margin-right: 3%;
}
}
@media screen and (max-width: 1920px) {
#menu {
background-image: url(../img/menu_bg.png);
position: absolute;
top: 0px;
right: 0px;
height: 37px;
padding-top: 15px;
margin-right: 4%;
}
}
#menu a {
color: #FFFFFF;
text-decoration: name;
font-size: 14px;
background-image: url(../img/menu_bg.png);
background-repeat: no-repeat;
padding-top: 19px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
background-image: url(../img/menu_bg_hover_mouse_over.png);
}
h2 {
font-family: Arial, Helvetica, Sans-serif;
font-size: 18px;
padding: 8px;
color: #0084c6;
}
input[type="text"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
font-size: 15px;
padding: 5px;
width: 300px;
margin-bottom: 3px;
margin-top: 3px;
outline: none;
}
input[type="text"]:hover {
border: 1px solid #006fc4;
}
input[type="submit"] {
background-color: #006FC4;
border: 1px solid #00508D;
font-size: 15px;
color: #FFFFFF;
padding: 5px;
margin-bottom: 3px;
margin-top: 3px;
border-radius: 7px;
}
提前感谢您的帮助。
最佳答案
检查你在 html 和 css 中的类名,然后你应该在你的 Logo div 和搜索框 div 中使用 css float:left;
属性
关于css - 如何在 Logo 旁边的标题菜单中插入搜索栏。请告诉我我做错了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27395536/
我想在 下面添加按钮标签,但不知道使用什么 CSS 来实现。下图显示了一个可能的场景,“Main_Page”标题和按钮构成了一个单独的 div 的每个部分。我尝试使用 margin-top属性,但想
我的图像不会位于 slider 旁边.. 而只是堆叠在 slider 下方。好像没有空间放置图像,因为 slider 占用了太多空间,但是当我查看代码时,情况似乎并非如此,除非我错过了什么:) Thi
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 6 年前。 Improve
我想在文本的左侧放置一个图像,并根据窗口的分辨率保持原样。 这是没有图像的样子:http://prntscr.com/fmky4f 这是我希望它放置后的样子。 https://prnt.sc/fmkk
我创建了一个button,当我点击button然后popup模型显示时,它会隐藏在页面主体旁边,按钮也会隐藏我滚动。我希望当弹出窗口出现时我无法滚动我的页面主体。我使用 Bootstrap 创建了模型
我是一名学生网络开发人员,需要一些帮助。我需要复制这个 wikipedia page尽我所能 我想把 Story 和下面的 div 放在官方 wiki 页面上的位置。 另一个问题是游戏玩法“div”,
需要这项工作的 header 的屏幕截图: 如您所见,菜单位于 Logo 下方。我想要它旁边的菜单,在 Logo 的右侧。我不知道这是否可行,但如果可行,我需要一些帮助,谢谢。 这是所有内容的代码,为
基本上,我们必须有这样的布局,其中图像必须溢出容器,文本填充图像创建的空间(向左偏移)。 我们目前有这样的结构: Some paragraph
我有一个“弹出式”表格,它是一个固定元素。该表有时太高以适应某些屏幕,因此我将 overflow 设置为 auto。然而,滚动条似乎与弹出表格分离,因为父 div 是屏幕的宽度而表格较小。有没有办法让
我有一个带有边框的 div: 表示上面内容的div使用的样式是这样的: const style = { textAlign: "center", mar
如何在各种屏幕尺寸下完美地放置图像? .background-login { background: url(../img/login.png) no-repeat; background-s
我正在尝试在居中的圆形头像旁边的右上角放置一个编辑图标。但是,如果我在行小部件中使用中心小部件,它就不起作用: Row( children: [
首先,感谢您阅读我的问题! 因此,我遇到了一些有关将单元格名称传递到下一个 View 的问题。现在它会传递它,但只会显示最近加载的单元格。 现在的编程方式如下: var passName = "" v
这是网站:www.red-tuxedo.com 我希望“红色燕尾服”文本位于 Logo 旁边,而不是下方,并且我想摆脱贯穿 Logo 的硬性规定。我的 CSS/HTML 技能达不到要求。当我更改文本时
我有一个顶部水平菜单栏,宽度为 100%,居中对齐,位置固定,因此它不会随页面滚动。 但我还想在菜单左侧的菜单内联一个名称(例如名为 test)。 但即使我使用内联 block ,它也会根据左侧的 d
我有一个 4 个链接。我希望他们都在同一行。其中两个在中间,另外两个在右边。我把它们包了两个又两个,但我无法让它工作。 我的 CSS 是这样的: #links_center { } #links_ri
我在 material-ui 中使用 Grid 组件。我无法让网格元素相互堆叠。现在他们正在彼此堆叠。我不确定是什么让它们堆叠在一起。我已经这样做了,所以只有在小屏幕上网格元素才会堆叠在一起,否则每个
我试图在固定宽度的内联 block div 旁边放置一个按钮。但它就在 div 的下面。我试过减少容器的宽度,但这是行不通的。我想在不将类添加按钮放在单独的容器中的情况下完成此操作。该按钮应位于 .i
我在“聊天气泡”旁边有一个用户的图像,但该图像显示在气泡之后。 我如何将图像放在聊天气泡之前并固定在 div 上? 我的代码在这里:http://www.codepen.io/anon/pen/fFx
编辑 #1:这是问题的图片: 编辑 #2:这是我使用品牌类后的图片 编辑#3: 我正在尝试将图像 float 到导航栏旁边。它一直有效,直到我的导航栏宽度达到 100%。然后导航栏位于图像下方。 这是
我是一名优秀的程序员,十分优秀!