html - 阻止位置-6ren

html - 阻止位置

转载作者：行者123 更新时间：2023-11-28 10:46:23

25

4

我最近刚接触 CSS 和 HTML，在标题下分配我的 block 时遇到问题:

enter image description here

我尝试了几种解决方案，但都没有成功。如果你能给我一个提示，我将不胜感激。谢谢

<!  DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title goes here</title>
  <meta name="description" content="Description of your site goes here">
  <meta name="keywords" content="keyword1, keyword2, keyword3">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="page">
    <div class="header" >
    <h1>  
        <img src="images/img1.jpg" width="250" height="190" float="right" />  
        <p> SOME TEXT HERE </p>
    </h1>
    </div>
    <div class="topmenu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">About&nbsp;Us</a></li>
            <li><a href="#">What's&nbsp;New</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Links</a></li>
        </ul>
    </div>
</body>
</html>

还有我的 CSS 代码:

body {
    font-family: sans-serif,Arial;
    font-size: 12px;
    color: #000000;
    margin: 0px;
    background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
    padding: 0px;
    margin: 0px;
    color: black;
}
a {
    color: #072FCF;
    text-decoration: underline;
}
a:hover {
    color: #072FCF;
    text-decoration: none;
}
.main-out {
    background-image: url(../images/trans.png);
    background-position: center top;
    width: 100%;
    float: left;
}
.main {
    width: 1000px;
    margin: 0px auto;
}
.page {
    width: 1000px;
    float: left;
    padding: 42px 0px 0px 0px;
    position: center;
}   
.header {
    position:absolute; 
    top:42px; 
    margin-left:-500px; 
    left:50%;
    width: 1000px;
    height: 200px;
    background-color: white;
    border-style: solid solid none solid;
    border-width: thick;    
}
.header h1{
    display: inline;
    text-align: left;
    font-family: cursive;
    font-size: 45px;
    color: black;

}
.header img {
    display: block;
    float: left;
}
.header p {
    line-height: 190px; /* Here is the trick... line-height = image height */
}
.topmenu {
    position:absolute;
    background-color: black;
    width: 1000px;
    height: 37px;
    border: 1px solid #000000;
}
.topmenu ul {
    width: 100%;
    height: 37px;
    list-style-type: none;
}
.topmenu ul li {
    height: 37px;
    float: left;
    padding-right: 24px;
    padding-left: 24px;
}
.topmenu ul li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 37px;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    height: 37px;
    float: left;
    padding-right: 21px;
    padding-left: 21px;
}
.topmenu ul li a:hover {
    background-image: url(../images/menu-hov.jpg);
    background-repeat: repeat-x;
    background-position: left top;
}

谢谢

最佳答案

我对您的 html/css 做了一些更改:

body {
    font-family: sans-serif, Arial;
    font-size: 12px;
    color: #000000;
    margin: 0px;
    background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
    padding: 0px;
    margin: 0px;
    color: black;
}
a {
    color: #072FCF;
    text-decoration: underline;
}
a:hover {
    color: #072FCF;
    text-decoration: none;
}
.main-out {
    background-image: url(../images/trans.png);
    background-position: center top;
    width: 100%;
    float: left;
}
.main {
    width: 1000px;
    margin: 0px auto;
}
.page {
    width: 1000px;
    margin: 0 auto;
}
.header {
    position: relative;
    width: 1000px;
    height: 200px;
    background-color: white;
    border-style: solid solid none solid;
    border-width: thick;
}
.header h1 {
    display: inline;
    text-align: left;
    font-family: cursive;
    font-size: 45px;
    color: black;
}
.header img {
    display: block;
    float: left;
}
.header p {
    line-height: 190px;
    /* Here is the trick... line-height = image height */
}
.topmenu {
    position:relative;
    background-color: black;
    width: 1000px;
    height: 37px;
    border: 1px solid #000000;
    padding-right: 8px;
}
.topmenu ul {
    width: 100%;
    height: 37px;
    list-style-type: none;
}
.topmenu ul li {
    height: 37px;
    float: left;
    padding-right: 24px;
    padding-left: 24px;
}
.topmenu ul li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 37px;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    height: 37px;
    float: left;
    padding-right: 21px;
    padding-left: 21px;
}
.topmenu ul li a:hover {
    background-image: url(../images/menu-hov.jpg);
    background-repeat: repeat-x;
    background-position: left top;
}

<body>
    <div class="page">
                <div class="topmenu">
            <ul>
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="#">About&nbsp;Us</a>
                </li>
                <li><a href="#">What's&nbsp;New</a>
                </li>
                <li><a href="#">Services</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
                <li><a href="#">Resources</a>
                </li>
                <li><a href="#">Links</a>
                </li>
            </ul>
        </div>
        <div class="header">
             <h1>  
        <img src="images/img1.jpg" width="250" height="190" float="right" />  
        <p> SOME TEXT HERE </p>
    </h1>

        </div>
</body>

关于html - 阻止位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26911427/

25

4

0

文章推荐： javascript - Cucumber javascript - 如何自动生成步骤定义文件？

文章推荐： arrays - Swift 4 将 json 数组过滤成子数组

文章推荐： javascript - JSON 将级别转换为数组 (Javascript)

文章推荐： ios - 在 Swift 中使用 for 循环完成

jsp - 如何从JSP输出HTML <%! ... %> 阻止？
我刚开始学习JSP技术，遇到了瓶颈。如何从 JSP 声明 block ？这不起作用: ... 服务器说没有“out”。 U: 我确实知道如何使用返回字符串的方法重写代码，但是有没有办法在？
lucene - Elasticsearch 阻止
在一个字段中，我想设置一个具有自定义过滤器的自定义分析器-着眼于词干-因此，“闪存卡”和“闪存卡”的词根相同，因此返回的结果相同当我运行以下查询时，我的命中率很高，但是“闪存卡”和“闪存卡”各自返回
c# - 阻止 WM_QUIT
快速提问。我有一个通过 PInvoke 使用 native DLL 的应用程序，这个 DLL 可能会调用 PostQuitMessage()。如何避免？ (因为我的应用程序不应该关闭) 我试过 A
javascript - 阻止 $(this) 元素上的事件
一些给定的 HTML 文章，例如: Content 与一些基本的 Jquery 结合使用，例如: $(".some_
Javascript 阻止 css？
我正在构建一个灯箱相册。当第一个图像加载时，CSS 转换起作用。当加载后的每个图像都没有。任何想法为什么？加载第一张之后的照片，但没有过渡。 Image.prototype.load = functi
android - 阻止/禁用最近使用的应用程序按钮
这个问题在这里已经有了答案: Disable recent tasks button on Android 5.0 (2 个答案) 关闭 2 年前。我知道这个问题之前在这里被问过 Android
iphone - 阻止 UIAlertViewDelegate
我是 Objective-C 的新手，我只是想弄清楚我是否可以使用 block 或选择器作为 UIAlertView 的 UIAlertViewDelegate 参数 - 哪个更合适？我已经尝试了以
c - 为什么不接受()阻止？
我是 Linux (UNIX) 套接字下套接字编程的新手。我在 Internet 上找到了以下代码，用于为每个连接生成一个线程的 tcp 服务器。但是它不起作用。accept() 函数立即返回，不等待
阻止 recv() 返回少于请求字节的情况
recv()库函数手册页提到: It returns the number of bytes received. It normally returns any data available, up
typescript - 阻止 WebStorm 建议索引导入
我有一个用于其他项目的共享 ts 库。在这个库中有被同一个库的其他资源使用的资源。该库的结构分为 components/*、interfaces/*、services/* 等目录。在每个目录的根目录中
Flutter 阻止 ListView 以新行显示
我想在同一行中一个接一个地显示我的 ListView ，但 ListView 显示每个新行中的每个项目。我怎样才能防止换行显示。以便它显示为段落 ListView.builder( shr
reactjs - 阻止 `useSelector` 重新渲染组件？
我有一个包含数千行的表格。 import React from "react" import { useSelector } from "react-redux"; import { useEffec
haskell - 阻止 GHC 警告我一个特定的缺失模式
假设我通常希望收到关于代码中不完整模式的警告，但有时我知道某个函数的模式不完整，我知道这很好。是still true GHC 的警告粒度是每个模块的，并且没有办法更改有关特定功能或定义的警告？最佳
javascript - 我如何知道浏览器通知是否被 Windows 阻止
我的网络应用程序发送浏览器通知，我知道如何检查通知的浏览器权限，以及如果未授予权限，如何请求权限。但是，即使用户授予我的站点发送通知的权限，她可能仍然无法收到通知，因为它们 might be dis
xcode - 阻止 Xcode 将文本转换为超链接？
我有 Xcode 3.2.1，并且喜欢使用它，但是当我编辑文本中带有超链接的文件时(例如，带有引用的注释:# see http://example.com)Xcode 将文本变成可点击的超链接。尝试编
excel - 阻止 Excel 将日期转换为数字
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许在 Stack Overflow 上提出有关通用计算硬件和软件的问题。您可以编辑问题，使其成为
php - 阻止 Controller 执行
我有一个在 MY_Controller 中运行的 acl。如果权限被拒绝，那么此刻，我只是执行 redirect('denied') - 这是一个非常基本的 Controller ，它加载一个非常基本
firefox - 阻止 Firefox 缓存本地主机？
我一直很好奇尝试从 Chrome 切换到 Firefox Quantum，但是对于 Web 开发遇到了一个我无法轻松解决的主要障碍——它正在缓存我的本地主机文件，因此当我尝试在本地主机加载各种 emb
xcode - 阻止 Xcode 记住我以前打开的项目
这真的让我很兴奋!在任何时候，我都会参与多个项目。当我退出Xcode时，下次打开Xcode时，我前一天的所有项目都会自动一一打开。经常我最终编辑错误的文件，AHHHHHHHHHHH!我可以阻止这种行
wiki - MediaWiki大量用户删除/合并/阻止
我的Wiki上有500个左右的Spambot和大约5个实际注册用户。我已经使用nuke删除了他们的页面，但是他们一直在重新发布。我已经使用reCaptcha控制了spambot的注册。现在，我只需要一

首页

博学

6Ren·AI

商城

html - 阻止位置