html - 我需要在不编辑 index.html 或 normalize.css 的情况下执行 css 任务-6ren

html - 我需要在不编辑 index.html 或 normalize.css 的情况下执行 css 任务

转载作者：太空宇宙更新时间：2023-11-04 08:05:52

@import url('https://fonts.googleapis.com/css?family=Roboto');
html,
body {
  background-color: lightgray
}

.header {
  position: fixed;
  top: 0px;
  width: 780px;
  background-color: rgb(84, 153, 199);
  padding: 40px 0;
}

.container {
  background-color: white;
  width: 780px;
  margin: 0 auto;
  padding-top: 120px;
}

.photo {
  height: 160px;
}

h1,
.help {
  font-family: 'Roboto', sans-serif;
}

h1 {
  color: white;
  margin: 0 1em;
}

.right {
  float: right;
  margin-right: 18px;
  margin-left: 30px;
}

.figure {
  border-bottom: solid #BBBBBB;
  border-width: 1px;
  margin-left: 214px;
  width: 340px;
}

.left {
  float: left;
  margin-right: 20px;
  margin-left: 20px;
  height: 160px;
  border-style: solid;
  border-color: #BBBBBB;
  border-width: 1px;
  padding: 1px;
}

p {
  padding-left: 10px;
  padding-right: 10px;
}

div.help {
  max-width: 40px;
  max-height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 20px;
  position: absolute;
  border-radius: 20px;
  background-color: blue;
  margin-left: 800px;
  margin-top: -1000px;
  color: white;
  font-size: 40px;
}

.photo-grid {
  width: 228px;
}

<body>
  <div class="container">
    <div class="header">
      <h1>Layout i HTML</h1>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis commodo purus, et imperdiet sapien varius vel. Aliquam quis massa at neque fringilla pharetra eu at ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum
      et malesuada fames ac ante ipsum primis in faucibus. Nam a orci mattis, efficitur arcu ac, porta dolor. Aenean massa metus, dictum ut nibh ut, porttitor gravida tellus. Maecenas ex velit, pharetra quis pulvinar quis, rhoncus et augue. Donec sit
      amet ex elit. Sed at nibh in lorem porttitor eleifend id ac justo. Aliquam eget libero facilisis, faucibus libero nec, ornare elit. Nunc accumsan libero vitae justo hendrerit, sed facilisis velit efficitur. Nullam aliquet dolor nibh, vel fringilla
      tortor facilisis ut. Curabitur ultrices dapibus purus. Nullam porttitor odio a malesuada accumsan. Duis eget diam metus. Suspendisse potenti.</p>

    <div class="right photo">
      <img src="img/photo-one.png">
      <img src="img/photo-two.png">
    </div>

    <p>Vestibulum cursus tellus id pulvinar pellentesque. Suspendisse euismod augue sit amet lorem tempus, vitae ornare quam auctor. Sed placerat eleifend nunc, at semper metus hendrerit ut. Suspendisse nulla libero, suscipit quis euismod quis, sagittis
      non lectus. Integer convallis quam suscipit, lacinia felis at, molestie quam. Duis sagittis facilisis erat eget semper. Maecenas a odio enim. Morbi at odio egestas, pharetra est eu, tristique mi. Sed sed facilisis sapien, nec molestie nisl. Curabitur
      faucibus risus viverra metus ultricies, vitae bibendum sem cursus. Maecenas quis nulla sollicitudin, luctus ex efficitur, fringilla sem.</p>

    <p>Nunc rhoncus dolor vel nisi posuere imperdiet. Phasellus auctor turpis in vestibulum sodales. Vestibulum vitae nibh turpis. Sed vel vestibulum ex. Pellentesque ex lacus, venenatis a condimentum nec, venenatis id risus. Nullam mattis blandit tellus
      quis dignissim. In ultrices lacinia interdum. Maecenas quam metus, egestas eu augue aliquam, mollis elementum lorem. Sed vel nulla consequat, porta eros non, porttitor enim. Praesent id turpis in ipsum pulvinar ornare. In tincidunt sit amet nulla
      sed euismod. Sed scelerisque arcu justo, ac fringilla magna mollis vel. Phasellus ultricies sed ligula ac fringilla. Vestibulum venenatis velit non dui feugiat faucibus. Duis ut ante malesuada, egestas eros non, hendrerit sem. Fusce vehicula ante
      at maximus consectetur.</p>

    <div class="figure">
      <div>
        <img src="img/photo-three.png">
        <p>Figur 1: Duis placerat quam at lacus facilisis, a semper dolor aliquet.</p>
      </div>
    </div>

    <p>Aenean ut nisl convallis, volutpat ex vulputate, varius eros. Curabitur urna quam, euismod et egestas vel, dictum vel erat. Quisque dictum quis ex id auctor. Mauris efficitur libero neque, id pulvinar odio facilisis sit amet. Fusce eleifend sem eget
      ipsum luctus pharetra. Sed efficitur non enim in blandit. Sed lacus quam, molestie nec volutpat quis, tincidunt et eros. Suspendisse id magna dictum, semper metus ac, ultricies nisi. Sed quis euismod nibh, non pulvinar turpis. Curabitur vulputate
      massa luctus varius auctor. Aenean rutrum vitae arcu quis placerat. Donec sagittis porta purus, sed posuere lorem imperdiet quis.</p>

    <div class="left photo"><img src="img/photo-four.png"></div>

    <div class="right photo-grid">
      <img src="img/photo-five.png">
      <img src="img/photo-six.png">
      <img src="img/photo-seven.png">
      <img src="img/photo-eight.png">
    </div>

    <p>Suspendisse vel consequat risus. Phasellus et posuere orci. Suspendisse iaculis pellentesque neque quis luctus. Vestibulum eget sagittis lorem. Vivamus finibus risus venenatis, gravida diam blandit, tristique eros. Interdum et malesuada fames ac ante
      ipsum primis in faucibus. Quisque non congue eros. Quisque venenatis blandit enim, quis elementum dolor iaculis at. Mauris ut magna magna. Nulla facilisi.</p>

    <p>Fusce lacinia mauris nec nunc malesuada sollicitudin. Maecenas non enim purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare auctor nunc, et commodo elit condimentum ac. Mauris feugiat feugiat tortor ut egestas. Sed pellentesque
      dictum nulla sit amet euismod. Fusce lacinia pulvinar fringilla. Duis eget ante blandit, tristique sapien nec, convallis dolor. Morbi elementum ornare neque non faucibus. Quisque aliquet nisl vitae risus euismod, vitae pretium justo porta. Suspendisse
      vel tellus dictum, egestas nisl accumsan, scelerisque tellus. Nunc et faucibus mauris. Duis varius magna erat, a ullamcorper magna ullamcorper et.</p>

    <div class="help">
      <p>?</p>
    </div>
  </div>
</body>

所以我将它们作为 main.css 和 index.html，它应该看起来像链接的图片，但它看起来像 gyazo，我需要的东西确实是，围绕右边的 2 张图片添加边框，更正橙色图形并修复问号帮助按钮。

Image of how its supposed to look

Image of how it currently looks

最佳答案

您可以将 CSS 类添加到 main.css 并获得所需的输出。

.help p{
    margin:0px;
}

@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body {
  background-color: lightgray
}

.header{
position: fixed;
top: 0px;
width: 780px;
background-color: rgb(84, 153, 199);
padding: 40px 0;
}

.container {
  background-color: white;
  width: 780px;
  margin: 0 auto;
  padding-top: 120px;
}

.photo{
  height: 160px;
}

h1, .help {
  font-family: 'Roboto', sans-serif;
}
h1 {
  color: white;
  margin: 0 1em;
}

.right {
  float: right;
  margin-right: 18px;
  margin-left: 30px;
}

.figure {
  border-bottom: solid #BBBBBB;
  border-width: 1px;
  margin-left: 214px;
  width: 340px;
}

.left {
  float: left;
  margin-right: 20px;
  margin-left: 20px;
  height: 160px;
  border-style: solid;
  border-color: #BBBBBB;
  border-width: 1px;
  padding: 1px;
}

p {
  padding-left: 10px;
  padding-right: 10px;
}

div.help {
  max-width: 40px;
  max-height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 20px;
  position: absolute;
  border-radius: 20px;
  background-color: blue;
  margin-left: 800px;
  margin-top: -1000px;
  color: white;
  font-size: 40px;
}

.photo-grid {
width: 228px;
}

.help p{
margin:0px;
}

<!doctype html>
<html lang="sv">
<head>
  <meta charset="utf-8">
  <title>Lorem Ipsum</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
  <div class="header">
    <h1>Layout i HTML</h1>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis commodo purus, et imperdiet sapien varius vel. Aliquam quis massa at neque fringilla pharetra eu at ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam a orci mattis, efficitur arcu ac, porta dolor. Aenean massa metus, dictum ut nibh ut, porttitor gravida tellus. Maecenas ex velit, pharetra quis pulvinar quis, rhoncus et augue. Donec sit amet ex elit. Sed at nibh in lorem porttitor eleifend id ac justo. Aliquam eget libero facilisis, faucibus libero nec, ornare elit. Nunc accumsan libero vitae justo hendrerit, sed facilisis velit efficitur. Nullam aliquet dolor nibh, vel fringilla tortor facilisis ut. Curabitur ultrices dapibus purus. Nullam porttitor odio a malesuada accumsan. Duis eget diam metus. Suspendisse potenti.</p>

  <div class="right photo">
    <img src="img/photo-one.png">
    <img src="img/photo-two.png">
  </div>

  <p>Vestibulum cursus tellus id pulvinar pellentesque. Suspendisse euismod augue sit amet lorem tempus, vitae ornare quam auctor. Sed placerat eleifend nunc, at semper metus hendrerit ut. Suspendisse nulla libero, suscipit quis euismod quis, sagittis non lectus. Integer convallis quam suscipit, lacinia felis at, molestie quam. Duis sagittis facilisis erat eget semper. Maecenas a odio enim. Morbi at odio egestas, pharetra est eu, tristique mi. Sed sed facilisis sapien, nec molestie nisl. Curabitur faucibus risus viverra metus ultricies, vitae bibendum sem cursus. Maecenas quis nulla sollicitudin, luctus ex efficitur, fringilla sem.</p>

  <p>Nunc rhoncus dolor vel nisi posuere imperdiet. Phasellus auctor turpis in vestibulum sodales. Vestibulum vitae nibh turpis. Sed vel vestibulum ex. Pellentesque ex lacus, venenatis a condimentum nec, venenatis id risus. Nullam mattis blandit tellus quis dignissim. In ultrices lacinia interdum. Maecenas quam metus, egestas eu augue aliquam, mollis elementum lorem. Sed vel nulla consequat, porta eros non, porttitor enim. Praesent id turpis in ipsum pulvinar ornare. In tincidunt sit amet nulla sed euismod. Sed scelerisque arcu justo, ac fringilla magna mollis vel. Phasellus ultricies sed ligula ac fringilla. Vestibulum venenatis velit non dui feugiat faucibus. Duis ut ante malesuada, egestas eros non, hendrerit sem. Fusce vehicula ante at maximus consectetur.</p>

  <div class="figure">
    <div>
      <img src="img/photo-three.png">
      <p>Figur 1: Duis placerat quam at lacus facilisis, a semper dolor aliquet.</p>
    </div>
  </div>

  <p>Aenean ut nisl convallis, volutpat ex vulputate, varius eros. Curabitur urna quam, euismod et egestas vel, dictum vel erat. Quisque dictum quis ex id auctor. Mauris efficitur libero neque, id pulvinar odio facilisis sit amet. Fusce eleifend sem eget ipsum luctus pharetra. Sed efficitur non enim in blandit. Sed lacus quam, molestie nec volutpat quis, tincidunt et eros. Suspendisse id magna dictum, semper metus ac, ultricies nisi. Sed quis euismod nibh, non pulvinar turpis. Curabitur vulputate massa luctus varius auctor. Aenean rutrum vitae arcu quis placerat. Donec sagittis porta purus, sed posuere lorem imperdiet quis.</p>

  <div class="left photo"><img src="img/photo-four.png"></div>

  <div class="right photo-grid">
    <img src="img/photo-five.png">
    <img src="img/photo-six.png">
    <img src="img/photo-seven.png">
    <img src="img/photo-eight.png">
  </div>

  <p>Suspendisse vel consequat risus. Phasellus et posuere orci. Suspendisse iaculis pellentesque neque quis luctus. Vestibulum eget sagittis lorem. Vivamus finibus risus venenatis, gravida diam blandit, tristique eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque non congue eros. Quisque venenatis blandit enim, quis elementum dolor iaculis at. Mauris ut magna magna. Nulla facilisi.</p>

  <p>Fusce lacinia mauris nec nunc malesuada sollicitudin. Maecenas non enim purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare auctor nunc, et commodo elit condimentum ac. Mauris feugiat feugiat tortor ut egestas. Sed pellentesque dictum nulla sit amet euismod. Fusce lacinia pulvinar fringilla. Duis eget ante blandit, tristique sapien nec, convallis dolor. Morbi elementum ornare neque non faucibus. Quisque aliquet nisl vitae risus euismod, vitae pretium justo porta. Suspendisse vel tellus dictum, egestas nisl accumsan, scelerisque tellus. Nunc et faucibus mauris. Duis varius magna erat, a ullamcorper magna ullamcorper et.</p>

  <div class="help">
    <p>?</p>
  </div>
</div>
</body>
</html>

关于html - 我需要在不编辑 index.html 或 normalize.css 的情况下执行 css 任务，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46634565/

文章推荐： c - size_t modulo long unsigned int 的意外结果

文章推荐： Python打印问题

文章推荐： java - SWT 表单或对话框

文章推荐：控制流程理解

c# - 任务.WaitSubset/任务.WaitN？
Task.WaitAll 方法等待所有任务，Task.WaitAny 方法等待一个任务。如何等待任意N个任务？用例:下载搜索结果页面，每个结果都需要一个单独的任务来下载和处理。如果我使用 WaitA
f# - 任务.任务.运行 : port from C# to F#
我正在查看一些像这样的遗留 C# 代码: await Task.Run(() => { _logger.LogException(LogLevel.Error, mes
php - Linux cron 任务 - 如何添加和运行 cron 任务？
如何在 Linux 中运行 cron 任务？关注此Q&A ，我有这个 cron 任务要运行 - 只是将一些信息写入 txt 文件， // /var/www/cron.php $myfile = fo
ansible playbook 按此顺序执行 : task, 角色、任务、角色、任务
原谅我的新手问题，但我想按顺序执行三个任务并在剧本中使用两个角色: 任务角色任务角色任务这是我到目前为止(任务，角色，任务): --- - name: Task Role Task ho
依赖于其他任务输出的 Gradle 任务？
我有一个依赖于 installDist 的自定义任务 - 不仅用于执行，还依赖于 installDist 输出: project.task('run', type: JavaExec, depends
Wix:如何强行杀死进程/任务？
从使用 Wix 创建的 MSI 运行卸载时，我需要在尝试删除任何文件之前强行终止在后台运行的进程。主要应用程序由一个托盘图标组成，它反射(reflect)了 bg 进程监控本地 Windows 服务的
自动启动我的服务器和应用程序的 Ant 任务
我想编写 Ant 任务来自动执行启动服务器的任务，然后使用我的应用程序的 URL 打开 Internet Explorer。显然我必须执行 startServer先任务，然后 startApplic
asynchronous - 任务.继续困惑
使用 ASP.NET 4.5，我正在尝试使用新的 async/await 玩具。我有一个 IDataReader 实现类，它包装了一个特定于供应商的阅读器(如 SqlDatareader)。我有一个简
按任务组过滤可用的 Gradle 任务
使用命令 gradle tasks可以得到一份所有可用任务的报告。有什么方法可以向此命令添加参数并按任务组过滤任务。我想发出类似 gradle tasks group:Demo 的命令筛选所有任务并
远程删除目录的 Ant 任务
除了sshexec，还有什么办法吗？任务要做到这一点？我知道您可以使用 scp 复制文件任务。但是，我需要执行其他操作，例如检查是否存在某些文件夹，然后将其删除。我想使用类似 condition 的东
从字符串中挑选单词的 Ant 任务
假设我有字符串 - "D:\ApEx_Schema\Functions\new.sql@@\main\ONEVIEW_Integration\3" 我需要将以下内容提取到 diff 变量中 - 文档名
用于确定文件是否为只读的 Ant 任务
我需要编写一个 ant 任务来确定某个文件是否是只读的，如果是，则失败。我想避免使用自定义选择器来为我们的构建系统的性质做这件事。任何人都有任何想法如何去做？我正在使用 ant 1.8 + ant-c
task - 线程池和上下文切换(任务)？
这是一个相当普遍的计算机科学问题，并不特定于任何操作系统或框架。因此，我对与在线程池上切换任务相关的开销感到有些困惑。在许多情况下，给每个作业分配自己的特定线程是没有意义的(我们不想创建太多硬件线程
用于检查主机在关机后是否真的离线的 Ansible 任务
我正在使用以下 Ansible playbook 一次性关闭远程 Ubuntu 主机列表: - hosts: my_hosts become: yes remote_user: my_user
Ant 任务？
如何更改 Ant 中的当前工作目录？ Ant documentation没有任务，在我看来，最好的做法是不要更改当前工作目录。但让我们假设我们仍然想这样做——你会如何做到这一点？谢谢! 最佳答案
每三天执行一次 Cron 任务
是否可以运行 cronjob每三天一次？或者也许每月 10 次。最佳答案每三天运行一次 - 或更短时间在月底运行一次。 (如果上个月有 31 天，它将连续运行 2 天。) 0 0 */3 * *
使用存储库中的工件作为构建工具的 Gradle 任务
如何在 Gradle 任务中执行托管在存储库中的工具？在我的具体情况下，我正在使用 Gradle 构建一个 Android 应用程序。我添加了一项任务，将一些 protobuf 数据从文本编码为二进
gradle - 任务，子项目和配置之间的关联
我的项目有下一个结构: Root |- A |- C (depends on A) \- B (depends on A) 对于所有子项目，我们使用自己的插件生成资源:https://githu
hadoop - Hadoop如何分配MapReduce作业的数据/任务？
我设置了一个具有4个节点的Hadoop群集，其中一个充当HDFS的NameNode以及Yarn主节点。该节点也是最强大的。现在，我分发了2个文本文件，一个在node01(名称节点)上，一个在node
具有更多受让人的 TFS 任务
在 TFS 2010 中为多个用户存储任务的最佳方式是什么？我只能为一项任务分配一个。 (例如:当我计划向所有开发人员演示时) (这是一个 Scrum Msf 敏捷项目，其中任务是用户故事的一部分)

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 我需要在不编辑 index.html 或 normalize.css 的情况下执行 css 任务