HTML中的主要样式

时间：2019-02-27 19:51:05

标签： html css markdown styling

我正在使用markdown到html javascript转换器（markdeep）。转换在浏览器中进行。因此，原始的markdown文档被发送到浏览器，并且markdeep添加了它的样式。问题是，我想在页面全宽度上添加一个顶部菜单，但是根据firefox Web开发人员工具，markdeep主体样式由于主体样式而限制了该宽度。我想使markdeep的样式保持完整，但在菜单中要改掉它。

我已经在markdown文档的顶部添加了一个样式标签，除了上面提到的宽度之外，它都工作良好。这是我的代码-

<head>
<style>
#tpmenu {
  width: 100%;
}
#tpmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}

#tpmenu ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}

/* This hides the dropdowns */


#tpmenu li ul { display: none; }

#tpmenu ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

#tpmenu ul li a:hover { background: #2c3e50; }

/* Display the dropdown */


#tpmenu li:hover > ul {
  display: block;
  position: absolute;
}

#tpmenu li:hover li { float: none; }

#tpmenu li:hover a { background: #1bc2a2; }

#tpmenu li:hover li a:hover { background: #2c3e50; }

#tpmenu .main-navigation li ul li { border-top: 0; }

/* Displays second level dropdowns to the right of the first level dropdown */


#tpmenu ul ul ul {
  left: 100%;
  top: 0;
}

/* Simple clearfix */



#tpmenu ul:before,
#tpmenu ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

#tpmenu ul:after { clear: both; }
</style>
</head>




<div id="tpmenu">

<ul class="main-navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Front End Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a href="#">Ajax</a></li>
          <li><a href="#">jQuery</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">WordPress Development</a>
    <ul>
      <li><a href="#">Themes</a></li>
      <li><a href="#">Plugins</a></li>
      <li><a href="#">Custom Post Types</a>
        <ul>
          <li><a href="#">Portfolios</a></li>
          <li><a href="#">Testimonials</a></li>
        </ul>
      </li>
      <li><a href="#">Options</a></li>
    </ul>
  </li>
  <li><a href="#">About Us</a></li>
</ul>
</div>


<h1>Multi-Level Drop Down Menu with Pure CSS</h1>



# LitePub 


A lightweight static blog generator written in Go.

> Why another one? I wrote a blog post that briefly describes
[why I created it](http://www.mirovarga.com/a-lightweight-static-blog-generator-in-go.html).

## Overview

LitePub is a static blog generator that tries to be as easy to use as possible.

It requires no software dependencies, needs no configuration files, uses no
databases. All it needs is one binary, posts written in
[Markdown](https://en.wikipedia.org/wiki/Markdown) and a set of templates to
render the posts to static HTML files.

Posts don't have to include any special metadata (aka front matter) like title
or date in them - the title, date and optional tags are parsed from
the natural flow of the posts.

## Quick Start

To create a sample blog follow these steps:

1. Download a [release](https://github.com/mirovarga/litepub/releases) and
unpack it to a directory.

2. `cd` to the directory.

3. Create a sample blog:

  	```
  	$ ./litepub create
  	```

4. Build the blog:

	```
	$ ./litepub build
  Generating: index.html
  Generating: tags/reference.html
  Generating: tags/tutorial.html
  Generating: tags/advanced.html
  Generating: tags/docs.html
  Generating: tags/basics.html
  Generating: overview.html
  Generating: quick-start.html
  Generating: installation.html
  Generating: creating-a-blog.html
  Generating: creating-posts.html
  Generating: generating-html-files-for-a-blog-aka-building-a-blog.html
  Generating: serving-a-blog.html
  Generating: templates.html
  Generating: getting-help.html
	```



<script>window.markdeepOptions = {tocStyle: 'none'};</script>

<!-- Markdeep: --><style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style><script src="https://casual-effects.com/markdeep/latest/markdeep.min.js" charset="utf-8"></script><script src="markdeep.min.js" charset="utf-8"></script><script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>

2 个答案:

答案 0 :(得分：1)

尝试添加具有.content样式的body包装器，并为max-width重置body样式。

<head>
<style>

body {
  max-width: 100%;
}

.content {
  max-width: 680px;
  margin: auto;
  padding: 20px;
  text-align: justify;
}

#tpmenu {
  width: 100%;
}
#tpmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}

#tpmenu ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}

/* This hides the dropdowns */


#tpmenu li ul { display: none; }

#tpmenu ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

#tpmenu ul li a:hover { background: #2c3e50; }

/* Display the dropdown */


#tpmenu li:hover > ul {
  display: block;
  position: absolute;
}

#tpmenu li:hover li { float: none; }

#tpmenu li:hover a { background: #1bc2a2; }

#tpmenu li:hover li a:hover { background: #2c3e50; }

#tpmenu .main-navigation li ul li { border-top: 0; }

/* Displays second level dropdowns to the right of the first level dropdown */


#tpmenu ul ul ul {
  left: 100%;
  top: 0;
}

/* Simple clearfix */



#tpmenu ul:before,
#tpmenu ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

#tpmenu ul:after { clear: both; }
</style>
</head>




<div id="tpmenu">

<ul class="main-navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Front End Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a href="#">Ajax</a></li>
          <li><a href="#">jQuery</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">WordPress Development</a>
    <ul>
      <li><a href="#">Themes</a></li>
      <li><a href="#">Plugins</a></li>
      <li><a href="#">Custom Post Types</a>
        <ul>
          <li><a href="#">Portfolios</a></li>
          <li><a href="#">Testimonials</a></li>
        </ul>
      </li>
      <li><a href="#">Options</a></li>
    </ul>
  </li>
  <li><a href="#">About Us</a></li>
</ul>
</div>

<div class="content">
<h1>Multi-Level Drop Down Menu with Pure CSS</h1>



# LitePub 


A lightweight static blog generator written in Go.

> Why another one? I wrote a blog post that briefly describes
[why I created it](http://www.mirovarga.com/a-lightweight-static-blog-generator-in-go.html).

## Overview

LitePub is a static blog generator that tries to be as easy to use as possible.

It requires no software dependencies, needs no configuration files, uses no
databases. All it needs is one binary, posts written in
[Markdown](https://en.wikipedia.org/wiki/Markdown) and a set of templates to
render the posts to static HTML files.

Posts don't have to include any special metadata (aka front matter) like title
or date in them - the title, date and optional tags are parsed from
the natural flow of the posts.

## Quick Start

To create a sample blog follow these steps:

1. Download a [release](https://github.com/mirovarga/litepub/releases) and
unpack it to a directory.

2. `cd` to the directory.

3. Create a sample blog:

  	```
  	$ ./litepub create
  	```

4. Build the blog:

	```
	$ ./litepub build
  Generating: index.html
  Generating: tags/reference.html
  Generating: tags/tutorial.html
  Generating: tags/advanced.html
  Generating: tags/docs.html
  Generating: tags/basics.html
  Generating: overview.html
  Generating: quick-start.html
  Generating: installation.html
  Generating: creating-a-blog.html
  Generating: creating-posts.html
  Generating: generating-html-files-for-a-blog-aka-building-a-blog.html
  Generating: serving-a-blog.html
  Generating: templates.html
  Generating: getting-help.html
	```

</div>
<script>window.markdeepOptions = {tocStyle: 'none'};</script>

<!-- Markdeep: --><style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style><script src="https://casual-effects.com/markdeep/latest/markdeep.min.js" charset="utf-8"></script><script src="markdeep.min.js" charset="utf-8"></script><script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>

另一个选择是您可以使用position: absolute: left: 0; top: 0;方法，为此您需要设置body {margin-top: -54px}。

答案 1 :(得分：1)

最简单的解决方案可能是使用fixed或absolute定位来将tpmenu从普通文档流中拉出，以使其不受应用于max-width的约束。 body。

尽管您将需要在较小的视口上对菜单进行一些操作。

#tpmenu {
  position: fixed;
  top: -20px; /* Same as padding applied to <body>. */
  left: 0;
  width: 100%;
}
#tpmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}

#tpmenu ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}

/* This hides the dropdowns */


#tpmenu li ul { display: none; }

#tpmenu ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

#tpmenu ul li a:hover { background: #2c3e50; }

/* Display the dropdown */


#tpmenu li:hover > ul {
  display: block;
  position: absolute;
}

#tpmenu li:hover li { float: none; }

#tpmenu li:hover a { background: #1bc2a2; }

#tpmenu li:hover li a:hover { background: #2c3e50; }

#tpmenu .main-navigation li ul li { border-top: 0; }

/* Displays second level dropdowns to the right of the first level dropdown */


#tpmenu ul ul ul {
  left: 100%;
  top: 0;
}

/* Simple clearfix */



#tpmenu ul:before,
#tpmenu ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

#tpmenu ul:after { clear: both; }
<div id="tpmenu">

<ul class="main-navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Front End Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a href="#">Ajax</a></li>
          <li><a href="#">jQuery</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">WordPress Development</a>
    <ul>
      <li><a href="#">Themes</a></li>
      <li><a href="#">Plugins</a></li>
      <li><a href="#">Custom Post Types</a>
        <ul>
          <li><a href="#">Portfolios</a></li>
          <li><a href="#">Testimonials</a></li>
        </ul>
      </li>
      <li><a href="#">Options</a></li>
    </ul>
  </li>
  <li><a href="#">About Us</a></li>
</ul>
</div>


<h1>Multi-Level Drop Down Menu with Pure CSS</h1>



# LitePub 


A lightweight static blog generator written in Go.

> Why another one? I wrote a blog post that briefly describes
[why I created it](http://www.mirovarga.com/a-lightweight-static-blog-generator-in-go.html).

## Overview

LitePub is a static blog generator that tries to be as easy to use as possible.

It requires no software dependencies, needs no configuration files, uses no
databases. All it needs is one binary, posts written in
[Markdown](https://en.wikipedia.org/wiki/Markdown) and a set of templates to
render the posts to static HTML files.

Posts don't have to include any special metadata (aka front matter) like title
or date in them - the title, date and optional tags are parsed from
the natural flow of the posts.

## Quick Start

To create a sample blog follow these steps:

1. Download a [release](https://github.com/mirovarga/litepub/releases) and
unpack it to a directory.

2. `cd` to the directory.

3. Create a sample blog:

  	```
  	$ ./litepub create
  	```

4. Build the blog:

	```
	$ ./litepub build
  Generating: index.html
  Generating: tags/reference.html
  Generating: tags/tutorial.html
  Generating: tags/advanced.html
  Generating: tags/docs.html
  Generating: tags/basics.html
  Generating: overview.html
  Generating: quick-start.html
  Generating: installation.html
  Generating: creating-a-blog.html
  Generating: creating-posts.html
  Generating: generating-html-files-for-a-blog-aka-building-a-blog.html
  Generating: serving-a-blog.html
  Generating: templates.html
  Generating: getting-help.html
	```



<script>window.markdeepOptions = {tocStyle: 'none'};</script>

<!-- Markdeep: --><style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style><script src="https://casual-effects.com/markdeep/latest/markdeep.min.js" charset="utf-8"></script><script src="markdeep.min.js" charset="utf-8"></script><script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>

相关问题
最新问题