html - 悬停按钮时谷歌主页底部元素不固定-6ren

html - 悬停按钮时谷歌主页底部元素不固定

转载作者：行者123 更新时间：2023-11-28 05:47:52

25

4

我的问题我只是想获得有关当我将鼠标悬停在按钮上时如何修复页脚和“不同语言的 Google”的帮助。我正在尝试自己构建它(没有引用 chrome 开发工具中的 google 主页代码)，所以我不知道他们做了什么来修复这两个元素的位置。

这是我的代码:

<!DOCtype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../css_stylesheets/stylesheet3.css"/>
    <title>Google</title>
</head>
<body>
    <div>
    <header class="start">
        <ul>
            <li><a href="#">Gmail</a></li>
            <li><a href="#">Images</a></li>
            <li class="button"><a href="#">Sign in</a></li>
        </ul>
    </header>

    <h1>
        <img src="../Images/googlelogo.png" alt="Google logo"/> 
        <span>India</span>
    </h1>   

    <form>
        <input type="text"/><br>
        <input type="submit" value="Google Search" id="text" name="search"/>
        <input type="submit" value="I'm Feeling Lucky" name="search2"/>
    </form>
    <p>
        Google.co.in offered in: <a href="#">Hindi</a><a href="#">Bangla</a><a href="#">Malayalam</a><a href="#">Marathi</a>
    </p>
    <footer>
            <nav class="left">
            <ul>
                <li><a href="#">Advertising</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#">About</a></li>
            </ul>
            </nav>
            <nav class="right">
            <ul>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">UseGoogle.com</a></li>
            </ul>
            </nav>
    </footer>
    </div>
</body>
</html>

我的 CSS 样式表:

*
{
    padding:0px;
    margin: 0px;
}

body
{
    font-family:Arial,sans-serif;
}
div:first-child
{
     font-size:25px;
     margin:auto;
     text-align:center;
     padding-top:0px;
}
div header ul
{
    margin-right:0px;
    text-align:right;
    font-size: 17px;

}
body div header.start
{
    padding-top:0px;
}
h1 
{
    display:inline-block;
    font-size:20px;
}

h1 span
{
    position:relative;
    right: 63px;
    bottom: 5px;
    color:rgb(51,187,232);
    font-size:small;
    font-family: "Arial", sans-serif;
}
li.button a
{
    display:inline-block;
    outline:none;
    background-color:rgb(10,125,247);
    padding:9px;
    border:solid 1px;
    border-radius: 4px;
    font-weight: bold;
    color:#F5F5F5;

}
li.button a:hover
{
    text-decoration:none;
    outline:grey 3px;
    box-shadow: inset 0 0 0px 1px #27496d;
}
li.button a:active
{
    background-color:rgb(11,95,191);
    border:inset 1px #C7C7C7;
}
a
{
    text-decoration: none;
    word-spacing:5px;
    font-size: 15px;
    color:grey;

}
a:hover
{
    text-decoration:underline;
}
a::after
{
    content: " ";
    text-decoration: none;
}
input[type="text"]
{
    margin:auto;
    max-width:500px;
    width:40%;
    padding:10px;
}
input[type="text"]:visited
{
    outline:blue;
}
input[type="submit"]
{
    color:#727578;
    border:solid 0px;
    background-color:#E3E6E8;
    font-weight:bold;
    padding:10px;
    margin: 30px 5px;
    margin-bottom:0px;
}
input[type="submit"]:hover
{
    border:ridge 2px;
    color:black;
    background-color:#f0f0f0;
}
input[type="submit"]:active
{
    outline:blue;
}
p
{
    margin:0px;
    padding:0px;
    font-size:14px;
    position:relative;
    top:15px;
}

p a::after 
{
    content: " ";
    text-decoration: none;
}
p a:link
{
    color: blue;
}
ul li
{
    list-style-type: none;
    display:inline;
    word-spacing: 10px;
}

nav.left ul li 
{
    padding-top:2px;
    position:relative;
    right:590px;
    top:50px;
}
nav.right ul li
{
    position:relative;
    left:500px;
    top:0px;
}
footer nav.right ul
{
    display:block;
    background-color:#e3e3e3;
    padding-top:20px;
    margin-bottom:0px;
}

让我告诉你，我是 CSS3 元素的新手。但我对大多数 CSS 都非常熟悉。我再说一遍，我不需要对此进行完整的调试(除非需要)。请帮助我解决这个问题(本主题开头的粗体文本)。

最佳答案

您的问题是 input[type="submit"]:hover 将 border-width 从 0px 更改为 2px，所以按钮的总高度和宽度增加并移动到 4px 的内容下方。

你的解决办法是改变

input[type="submit"] {
  ...
  border: solid 0px;
  ...
}

到

input[type="submit"] {
  ...
  border: transparent solid 2px;
  ...
}

关于html - 悬停按钮时谷歌主页底部元素不固定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37508124/

25

4

0

文章推荐： c++ - 一种保存代码版本(Xcode)的优雅方法？

文章推荐： javascript - Jquery，打印json值出现的次数

文章推荐： html - 多页粘性页脚

文章推荐： css - 为什么下拉菜单不显示在内容之上？

iOS:主页/电源按下事件
如果应用程序是通过企业签名分发的，那么是否有任何框架允许我在后台接收Home 或Power 按下事件？最佳答案 iOS 中的所有事件都是 UIEvent，它是 GSEvent 的包装器。通过一些技巧
html - “主页”类别页面在更新后无法正常工作
版本为 1.4.1.4 的 Prestashop 网站使用 category.php 文件作为类别页面。不幸的是，1.6.0.6 的更新删除了该文件，因为它已被视为已弃用。 ( URL structu
Github:在存储库首页上显示 wiki 主页
我最近在 Github 存储库中为我的公司创建了一个全局 wiki。这是一个空的存储库，我创建它只是为了使用它的 wiki。我的问题:在这个 wiki 存储库的首页上，显示了自述文件。这个自述文件是
javascript - 基于点击菜单的 HTML5 主页
我有一个非常简单的体育网站，主页上有不同运动的链接，如足球、篮球、无挡板篮球等。我想要的是当用户点击 Football 时，要存储的值，以便下次访问者访问该页面时它将打开足球页面。到目前为止，我已经
java - 如何部分禁用Android工具栏中的“主页”按钮单击？
我已经实现了onOptionsItemSelected来控制主页按钮: override fun onOptionsItemSelected(item: MenuItem): Boolean {
Plone:删除匿名用户首页中的“主页”选项卡
我不知道如何为匿名用户隐藏主页选项卡，Plone 版本是 4.3.7。最好隐藏导航栏，我发现可以通过 ZMI Portal_actions/portal_tabs/index_html 来做到这一点，
java - 更改 IE 主页
我正在尝试通过修改注册表来更改 IE 主页。我已经使用 bat 文件成功完成了此操作； REG ADD "HKCU\SOFTWARE\MICROSOFT\INTERNET EXPLORER\MAIN"
Spring MVC 主页 Controller
我已经使用 Spring Roo 生成了一些页面，我需要在应用程序的主页上显示数据库中的一些项目。那么我如何将带有数据的模型传递到主页，Roo 添加了以下行，我已注释掉我使用 Roo 创建
java - Spring MVC 主页
我有 HomeController 类: @Controller public class HomeController { @RequestMapping("/") public S
iphone - 用户单击“主页”按钮时如何显示退出确认对话框？
用户按下“主页”按钮时，我需要显示退出确认对话框。如果是，则需要退出该应用程序。按下“主页”按钮时是否可以显示？最佳答案这可能会导致您的应用被拒绝从Apple HIG: 总是准备停止当人们按
magento - Magento-如何替换面包屑中的“主页”？
我只是想知道是否有人在Magento中格式化面包屑有任何经验？我想用图片替换当前显示文本“HOME”的链接。我以为用图片替换某些文本是一种简单的情况，但是似乎“HOME”文本/链接是动态创建的，因
javascript - 如何更换 Cordova 主页？
我制作了登录功能，因此当用户登录时，它将导航到其他页面，但问题是登录成功后，用户只需按物理后退按钮即可再次返回登录页面。现在我想要的是登录后用户无法再次返回登录页面，因此当按下物理后退按钮时，它将关闭
android - 主页 Activity - android
我有 2 个 Activity ，1 个用于注册，1 个用于我的应用程序主页。现在为了在它们之间做出选择，我必须创建另一个 Activity 来检查一些细节并决定去哪个 Activity 。问题是，在
android - 按后退按钮转到 android 主页
public void onBackPressed() { Intent intent = new Intent(Intent.ACTION_MAIN); intent.addCa
android - 如何禁用返回、主页、多任务物理按钮？
实际上我正在开发一个应用程序，这个应用程序应该在安装的设备上打开，这样我就可以阻止/禁用返回、主页、多任务的物理按钮。我已经阅读了一些关于如何做到这一点的文章，但仍然不知道如何在我的应用程序中实现它
tomcat - 无法获取 Tomcat 主页
我在浏览器中输入以下 URL http://localhost:8081 并以连接错误告终。使用 catalina 脚本启动 tomcat 后，我得到一个空白页面。有人知道为什么会这样吗？最佳答
java - 找不到 spring 主页
我正在尝试在 Eclipse 中设置一个 spring mvc 项目。我创建了一个动态 Web 项目并创建了源和配置文件。当我在由 eclipse 启动的 tomcat 上运行该项目时，我总是遇到 4
Tomcat:如何禁用 Tomcat 主页
我在Tomcat中部署了我的应用程序，应用程序路径是: http://localhost:8080/myapp 但我想限制我的用户看不到 Tomcat 主页，即如果他们输入: http://local
ios - NativeScript 找不到模块组件/主页
在创建一个 vue nativescript 应用程序并通过以下方式运行之后: tns preview 我得到: *** Terminating app due to uncaught excepti
html - Gmail 主页 CSS
与其说我是网页设计师，我更像是一个程序员，我正在尝试做一个简单的(我认为)设计，比如 gmail 的主页 https://mail.google.com/intl/fr/mail/help/about

首页

博学

6Ren·AI

商城

html - 悬停按钮时谷歌主页底部元素不固定