电商排版布局设计说明_设计基本的网页布局

电商排版布局设计说明

We have come a long way now. We have learnt many CSS concepts that can easily be put to use to design our website/webpages. In this tutorial, we will learn how to setup a basic webpage with a header, footer, sidebar and body section.

我们已经走了很长一段路。 我们已经学习了许多CSS概念，可以轻松地将其用于设计我们的网站。 在本教程中，我们将学习如何设置带有页眉，页脚，侧边栏和正文部分的基本网页。

This webpage also follows the same structure. We have a header, a footer, a sidebar with all the tutorials listed and the body part where the tutorial is.

该网页也采用相同的结构。 我们有一个页眉，页脚，侧边栏，其中列出了所有教程以及该教程所在的正文部分。

Header and Footer are basic, and we have only provided a background-color and some padding to it. You can add more styling to make them look different.

页眉和页脚是基本的，我们只提供了background-color和一些padding 。 您可以添加更多样式以使它们看起来有所不同。

#header, #footer {
    background-color:#EEEEEE;
    padding:15px;
}

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidebar li {
    padding: 6px;
    margin-bottom: 10px;
    background-color: #10A2FF;
    color: #ffffff;
}

#sidebar li:hover {
    background-color: #009AFB;
}

#content {
    width:75%;
    /*margin from left equal to width of sidebar*/
    margin-left:25%;
    padding:10px;
}

#main-body {
    overflow:auto;
}

The #main-body style only has one CSS property of overflow:auto; to contain the floating sidebar inside it.

#main-body样式仅具有一个CSS属性： overflow:auto; 在其中包含浮动边栏。

We have added the CSS property float:left to our sidebar and to bring the content and sidebar side by side, we added a left margin equivalent to the sidebar's width to the content section.

我们在侧边栏添加了CSS属性float:left ，为了使内容和侧边栏并排显示，我们在内容部分添加了与侧边栏宽度相等的左边距。

Live Example →

现场示例→

Finally! we know how to setup a basic webpage layout. To practice, move the sidebar from left side to right side. You will have to change the float property of the #sidebar style and the margin property of the #content style.

最后！ 我们知道如何设置基本的网页布局。 要练习，请将侧栏从左侧移动到右侧。 您将不得不更改#sidebar样式的float属性和#content样式的margin属性。

翻译自: https://www.studytonight.com/cascading-style-sheet/basic-webpage-structure

电商排版布局设计说明