Question

我是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/

Answer 1

我建议将您的身体分为四个部分（使用from itertools import tee sentences = ['data mining is the process of discovering patterns in large data sets involving methods at the intersection of machine learning statistics and database systems', 'data mining is an interdisciplinary subfield of computer science and statistics with an overall goal to extract information from a data set and transform the information into a comprehensible structure for further use', 'data mining is the analysis step of the knowledge discovery in databases process or kdd'] concepts = ['data mining', 'database systems', 'databases process', 'interdisciplinary subfield', 'information', 'knowledge discovery', 'methods', 'machine learning', 'patterns', 'process'] concepts = set(concepts) def nwise(iterable, n=2): "s -> (s0,s1), (s1,s2), (s2, s3), ... for n=2" iterables = tee(iterable, n) # advance each iterable to the appropriate starting point for i, thing in enumerate(iterables[1:],1): for _ in range(i): next(thing, None) return zip(*iterables) def f(sentence, concepts=concepts, nwise=nwise): '''iterate over memes in sentence and see if they are in concepts''' indices = set() #print(sentence) words = sentence.strip().split() for n in [1,2,3,4,5,6,7,8,9,10]: for meme in nwise(words,n): meme = ' '.join(meme) if meme in concepts: start = sentence.find(meme) end = len(meme)+start while (start,end) in indices: #print(f'{meme} already found at character:{start} - looking for another one...') start = sentence.find(meme, end) end = len(meme)+start indices.add((start, end)) return [sentence[start:end] for (start,end) in sorted(indices)] ########### results = [] for sentence in sentences: results.append(f(sentence)) #print(f'{sentence}\n\t{results[-1]})') In [20]: results Out[20]: [['data mining', 'process', 'patterns', 'methods', 'machine learning', 'database systems'], ['data mining', 'interdisciplinary subfield', 'information', 'information'], ['data mining', 'knowledge discovery', 'databases process', 'process']]元素）。顶部将是您的标题（或仅用于标题），其余三个将分别为<div></div>，width: 25%，width: 50%。确保您没有在div上添加任何边框，而是在div内添加了所需的任何元素。示例：

width: 25%

显然，您可以在div中添加所需的CSS。我不建议添加任何边框的原因是它们会更改div的宽度。您当然可以在div中的元素上添加边框。

这里是一个例子：

<div class="right-panel" style="width: 25%">
  <aside>
    text1
  </aside>
</div>

Answer 2

您可以尝试使用CSS float和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/

Answer 3

以下代码是CSS中如何使用JRootPane进行菜单制作的基本表示。您可以在HTML中看到float，只需尝试添加另一个<li>，它将在右侧菜单中自动调整，复制此HTML和CSS并尝试理解它。

其中包含<li>的列表的标签<li>是<li>，而<ul>是<ul>。在这种情况下，菜单是右对齐的，由于<li>，所有新的<li>都将在float: right的左侧对齐。

我建议使用https://www.w3schools.com/html/default.asp了解HTML和CSS的详细知识。祝你好运！

ScreenShot of the output

HTML文件

float: right

CSS文件

<li>'s

Answer 4

因此，我检查了您想要的内容，这是基础知识，请运行下面的代码，您将了解。这是页面的最基本结构，它具有您想要的

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

HTML文件

<!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;
}

如何制作使用整个左侧（1/4）的div元素？

4 个答案: