0

我是 HTML/CSS 编码的新手，我正在尝试制作一个网站。我想隔离顶部，左侧菜单，右侧是每 x 秒更新一次的信息自动收报机。

我做到了：

<aside>
    text1
</aside>

在 CSS 中：

aside {
float: right ;
width: 25%;
height: 75% ;
border: 1px solid green;}

现在我不确定如何制作它，它的整个左侧“就像屏幕的 1/4”，我的问题是，我需要在类似的 css 代码中输入什么数字（％）。现在看起来真的很乱：D

我的网站：https ://www.guwamiwa.de/~nb.marxer/test/

4

4 回答 4

0

我建议将你的身体分成四个部分（使用<div></div>元素）。顶部将用于您的标题（或仅用于该标题），其余三个将具有width: 25%, width: 50%, width: 25%. 确保您没有向 div 添加任何边框，而是在 div 中添加您需要的任何元素。例子：

<div class="right-panel" style="width: 25%">
  <aside>
    text1
  </aside>
</div>
显然，向 div 添加尽可能多的 CSS。我不建议添加任何边框的原因是它们会改变 div 的宽度。您当然可以为 div 内的元素添加边框。

这是一个例子：

    
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Your Site</title>
  <style>
        html {
      background: #ebfefe;
      height: 100%;
    }
    
    body {
      height: 100%;
      {
        .header {
          padding: 25px;
          width: 100%;
        }
        .right-panel {
          float: left;
          width: 25%;
          background-color: blue;
          height: 100%;
        }
        .left-panel {
          float: left;
          width: 25%;
          background-color: blue;
          height: 100%;
        }
        .root {
          float: left;
          display: block;
          width: 50%;
          background-color: antiquewhite;
          height: 100%;
        }
  </style>

</head>

<body>
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="left-panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="root">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="right-panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</body>

</html>

于 2019-01-08T19:57:13.633 回答
0

所以，我检查了你想要什么，所以这是从基础开始的，运行下面的代码你就会明白了。这是页面最基本的结构，它有你想要的

如果您想知道菜单是如何制作的，请查看我的其他答案https://stackoverflow.com/a/54101305/10751060

文件

<!DOCTYPE html>
<html>
<!-- This is the head section it's where title of the page and links are given-->

<head>
  <link rel="stylesheet" href="page.css">
  <title>
    Page
  </title>
</head>

<!-- This is the body section it's where you write things that you want to show on the screen -->

<body>
    <div class="header"></div>
    <div class="col-1"></div>
    <div class="col-2"></div>
    <div class="col-3"></div>
    <div class="footer"></div>
</body>


</html>

CSS文件

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* The above part is css reset you can get it 
from the internet it resets the css so your code 
is compatible with all the browsers */

.header{
    float: left;
    width: 100%;
    height: 120px;
    background-color: red
}

.col-1,.col-3{
    width: 15%;
    float: left;
    height: 500px;
    background-color: yellow;
}

.col-2{
    float: left;
    width: 70%;
    background-color: blue;
    height: 500px;
}

.footer{
    float: left;
    width: 100%;
    height: 100px;
    background-color: #000;
}
于 2019-01-09T00:07:21.640 回答
0

float下面的代码是如何在 CSS 中使用菜单的基本表示。可以看到<li>在 HTML 中只是尝试添加另一个<li>，它会在右侧的菜单中自动调整，复制这个 HTML 和 CSS 并尝试理解忍受它。

<ul>存在列表的标签<li>is ，其中float: rightas 。在这种情况下，菜单是右对齐的，所有新的将在左侧对齐，因为.<li>'sfloat: left;<li>'s<ul>float: left;

我推荐https://www.w3schools.com/html/default.asp以获取有关 HTML 和 CSS 的详细知识。祝你好运！

输出截图

文件

<!DOCTYPE html>

<html>

<!-- This is the head section it's where the title of the page and links are given-->

<head>
  <link rel="stylesheet" href="menu.css">
  <title>
    Menu Example
  </title>
</head>

<!-- This is the body section it's where you write things that you want to show on the screen -->

<body>
</body>
<div class="header">
  <h1 src="logo.png" height="60" class="logo">Logo</h1>
  <div class="menu">
    <ul class="ul">
      <li class="line"><a id="active" class="link" href="home.html">HOME</a></li>
      <li class="line"><a class="link" href="#">PAGES</a></li>
      <li class="line"><a class="link" href="#">SERVICES</a></li>
      <li class="line"><a class="link" href="#">CASE STUDIES</a></li>
      <li class="line"><a class="link" href="#">CAREERS</a></li>
      <li class="line"><a class="link" href="#">CONTACT</a></li>
    </ul>
  </div>
</div>

</html>

CSS文件

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* The above part is css reset you can get it 
from the internet it resets the css so your code 
is compatible with all the browsers */

.header{
    width: 100%;
    height: 120px;
}
.logo{
    float: left;
    margin-top: 20px;
    width: 24%;
    font-size: 50px;
}

.menu{
    float: right;
    width: 75%;
}
.ul{
    float: right;
    list-style-type: none;
    margin-top: 60px;
    margin-right: 60px;
}
.line{
    float: left;
    color: #000000;
    font-size: 12px;
    font-family: openSans;
    font-weight: bold;
}
.link{
    color: black;
    text-decoration: none;
    height: 100%;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
    border-right: 2px solid #d2d2d2;
}
.link:hover{
    color: #d7002e;
    border-color: #d7002e;
}
#active{
    color: #d7002e;
    border-color: #d7002e;
}
于 2019-01-08T23:40:52.780 回答
0

您可以尝试使用 CSSfloat和width属性来调整列。下面是示例：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column-left {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.column-right {
  float: left;
  width: 75%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Two Equal Columns</h2>

<div class="row">
  <div class="column-left" style="background-color:#aaa;width:25%;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column-right" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

你可以试一试： https ://jsfiddle.net/SiddharthMishra/3k2vqLpw/

于 2019-01-08T20:00:32.020 回答