html - 样式化 <hr> 标签-6ren

html - 样式化
标签

转载作者：太空宇宙更新时间：2023-11-04 03:21:51

25

4

我正在我的 html 页面上创建一行，它位于我的导航面板上方。 fiddle 如下:

http://jsfiddle.net/rupsdino1997/1md3phmo/

HTML:

<meta charset="UTF-8">
<title>Feline</title>
<link href="Styles/main.css" rel="stylesheet" type="text/css">


<body>
<div id="wrapper">
<header id="top">

      <h1 style="font-size:60px">L'Auberge De Napoleon III</h1>
      <hr style="background-color: red; height: 4px; position: relative; bottom: -23px; border:none" width="100%">
      <hr style="background-color: blue; height: 4px; position: relative; bottom: -11px; left:100px; border:none" width="80%">
      <hr style="background-color: purple; height: 4px; position: relative; bottom: 1px; left:200px; border:none" width="60%">                          
      <hr style="background-color: orange; height: 4px; position: relative; bottom: 13px; left:300px; border:none" width="40%">
      <hr style="background-color: green; height: 4px; position: relative; bottom: 25px; left:400px; border:none" width="20%">

     <nav id="mainnav">
        <ul style="border-left:green, dashed;">
          <li><a href="Index.html" class="thispagehome">Home</a></li>
          <li><a href="Properties Features.html">Features</a></li>
          <li><a href="Activities.html">Activities</a></li>
          <li><a href="Contact.html">Contact US</a></li>
          <li><a href="Pricing.html">Pricing</a></li>
        </ul>
    </nav>

 </header>
    <h1 style="padding-top:30px" >Feline - Activities</h1>
    <hr class="style" width="50%">
    <table style="width:100%">
        <tr>
            <td width="39%">d</td>
            <td width="61%">d</td>
        </tr>
        <tr>
            <td>dd</td>
            <td>dd</td>
         </tr>
     </table>

<footer>Footer</footer>

CSS:

@charset "utf-8";

body {
    margin: 0px;
    color: #151515;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    background-color: #EFF5F8;
}

#slideshow {
    position:relative;
    height:530px;
    width:1000px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

#wrapper {
    width: 100%;
    min-width: 740px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border:#6627C9;
    background-color: #FFFFFF;

}

#slideshow img {
  height: 100%;
  width: 100%;
}

#top {
    overflow: hidden;
}

h1 {
    font-size: 65px;
    margin-top: 0px;
    margin-bottom: 14px;
    color: #3399DD;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    max-width: 100%;
    text-align: center;
}
h2 {
    margin-top: 0px;
}

#mainimg img {
    max-width: 100%;
    padding-top: 2px;
    padding-bottom: 2px;
}
h1, h2 {
    color: #3399CC;
    font-weight: 600;
    font-size: 36px;
}

.centered {
    margin-left: auto;
    margin-right: auto;
}

footer {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2%;
    background-color: #43a6cb;
    color: #FFFFFF;
    position: relative;
    bottom: 0px;
}
a {
    font-weight: bold;
    text-decoration: none;
}

a:link {
    color: #FF6600;
}

a:visited {
    color: #FF944C;
}

#mainnav a:hover  ,#mainnav a:active,#mainnav a:focus , #mainnav a.thispagehome{
    color: #FFFFFF;
    text-decoration: none;
    background-color: red;
}

#mainnav ul   {
    list-style-type: none;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
#mainnav a {
    width: 20%;
    background-color: #4D4D4D;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    padding-top: 6px;
    padding-bottom: 6px;
    display: block;
    float: left;
}


#wrapper #main ul.horizontal li
{
    display: inline-block;
    list-style; none;
}

#wrapper #main .horizontal img {
    height: 250px;
    width: 200px;
    margin-top: 15px;
}

*
{
    box-sizing: border-box;
}

#wrapper #main ul.horizontal li {
    display: inline-block;
    font-size: 16px;
    list-style; none;
    padding: 1em;
    text-align: justify;
    vertical-align: top;
    width: 25%;
}

img{
    display: block;
}

ul.horizontal {
    list-style; none;
    margin: 0;
    padding: 20;
    font-size: 0;
}

有谁知道为什么我的 hr 和 nav 面板之间有一个空格？做<hr>标签自动有某种填充？有人知道如何解决这个问题吗？

此外，如果有人知道我该怎么做，那么如果您分别悬停每个链接框，背景将更改为 hr 行的颜色。 (检查此链接，我希望它与此类似):

http://css-tricks.com

最佳答案

试试这个: http://jsfiddle.net/1md3phmo/5/

为 hr 编辑:

 <hr style="background-color: red; height: 4px; border:none" width="20%">
  <hr style="background-color: blue; height: 4px;  border:none" width="20%">
  <hr style="background-color: purple; height: 4px;  bottom: 1px; border:none" width="20%">                          
  <hr style="background-color: orange; height: 4px; border:none" width="20%">
  <hr style="background-color: green; height: 4px;border:none" width="20%">

CSS

hr{float:left; margin:0;}

关于html - 样式化 <hr> 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27767523/

25

4

0

文章推荐： css - 如何使导航栏位置 :absolute; with bootstrap?

文章推荐： node.js - 在 Node.js 中异步查询多个 MongoDB 集合

文章推荐： javascript - NodeJS/ExpressJS/MongoDB 简单 API 错误

javascript - 这是什么 hr = hr>=12 ？ hr-12 : hr; means?
我正在练习这个https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations时钟教程。代码中的所有内容对我来说都很清楚。接受这个 h
html - 在基本 HTML 中，正确的水平线元素是
还是

这个问题在这里已经有了答案: What tags in HTML5 are acknowledged of being self-closing? (3 个答案) 关闭 9 年前。简单的问题。一个
javascript - 如何删除紧跟在
之后的
？
我有无法更改的 HTML 标记。示例 TEXT 1 some text TEXT 2 some text 我想删除紧跟在另一个 hr 之后且它们之间没有文本的任何 hr。正
css - 替代 CSS3
简单样式的标签，如果这不起作用并且使用子标准
标签代替，则具有淡出边缘？
替代 CSS3 简单样式的标记，如果这不起作用，则在 hr 样式下面使用子语句或标准标记的子语句，如下代码所示。有淡出边缘的简单样式的 CSS3 标签见链接 http://css-tricks.c
css - 隐藏一个
如果它在另一个
之后，或者它是最后一个 child ，或者两者兼而有之
我有一个带有各种链接的工具栏，用分组元素。因为呈现哪些链接取决于用户的权限，所以我们可能会以两个连续的分隔符结束，或者在末尾有一个分隔符。这是我们不想要的。 Link 1 Absent link
python - 如何使用 BeautifulSoup 获取
...
之间的内容
-ability (in nouns 构成名词) ： ◊ capability 能力 ◊ responsibility 责任 -ibility (in nouns 构成名词) ： ◊ ca
Python datetime - 具有 2 种日期格式的列是 (H :M:S) when time >1 hr, and (M:S) when time <1 hr - how to parse
我抓取了运行完成时间的数据集，其中包括在一小时内和一小时内完成的运行者。小时内的运行者编码为 M:S，例如48 分 12 秒完赛的选手为 48 分 12 秒。超过一小时的运行者编码为 H:M:S，例如
SAP HR 关系模型
SAP HR 显然有几个模型来描述职位 (S)、工作 (C)、组织 (O) 和人员 (P) 对象之间的关系，组织管理 (OM) 模块用于维护这些对象。 P(Person)对象通常是持有者(S)。有
css - 用图像风格 HR
我正在努力实现尽可能接近下图的东西。我目前使用下面的代码获得以下内容，但似乎无法完全满足我的需要。当前样式: 我的 CSS: hr:after { background: url('../
php - 如何在php邮件表单中添加
？
我想在 php 的表单内容中添加一条水平线。那可能吗？我写了下面的代码，但“hr”在我的电子邮件中看起来像这样 PR1:产品1 PR2:product2 PR3:产品3 PR4:产品4 我该怎么办？
PHPWord 水平线 (
)
我目前正在使用 PHPWord 生成我的文档，但我想在文档中添加一条水平线。就像在 HMTL 中一样。在 Word 中，您可以通过在 Enter 中键入三个下划线来完成此操作，但我想在生成的文档中使用
html - 如何在图像旁边放置
？
在我的 fiddle 中，您会看到文本中断，我想添加在那里并在 CSS 中装饰它，但我不知道如何执行此操作，因为当我这样做时它会破坏我的内联 block ，我想这是因为是一个 block 元素。对
html - 如何在图片旁边放置
？
在我的 fiddle 中，您会看到文本中断，我想放一个在那里并在 CSS 中对其进行装饰，但我不知道该怎么做，因为当我这样做时它会破坏我的内联 block ，我认为那是因为是 block 元素。有
javascript - hr 在表格内但全宽
这段代码是我做的 {item.awards.map((obj,i) => Name :
html - HR 标签未在图像下方移动
我不确定该问题的确切标题是什么，因为我不知道是什么原因造成的，也不知道可能是什么，所以这个问题可能很难回答，但如果有人愿意花时间看看代码，我们将不胜感激。这是问题:http://imgur.com/
html -
标签以不同的高度呈现
我遇到了一些的问题我网站上的标签。 reference image 正如您在这个非常简单的 fiddle 中看到的那样 https://jsfiddle.net/bau1hp9L/ 标签并非都以相
css - HR 线到边界线
这个问题在这里已经有了答案: change the linear value of gradient hr (1 个回答) Using CSS alone, how can you have a B
css -
的样式只能使用网络安全颜色吗？
我有一个我需要它具有颜色(十六进制值)#ac8900。如果我用老式的方式设计它它工作正常。但我希望用 CSS 设置所有样式，所以我在我的样式表中尝试了这个: hr{ color: #ac8900
html - hr 下方有一个黑色像素？
我们有一条 hr 线，它下面有一个奇怪的黑色像素。截图:http://i52.tinypic.com/2vwxy78.jpg 我们的代码: HTML: CSS: hr { border-b
html - 每行底部的填充边框或 hr
有没有更简单的方法，无需任何技巧，让它在视觉上看起来像这样(底部边框从每边填充 10 像素)，而不必为此创建额外的行？ table { width: 100%; border-collapse

首页

博学

6Ren·AI

商城

html - 样式化
标签

首页

博学

6Ren·AI

商城

html - 样式化 标签

html - 样式化
标签