html/css-两栏(多栏)布局制作

两栏布局制作:

步骤:

  1. 左栏不设置宽度,网页自适应决定,右栏定位到右边;
  2. 将左栏的右边框限制在右栏之外,采用外边距实现;
  • html代码:

<html lang="em">
<head>
    <meta charset="UTF-8">
    <title>两栏制作title>
    <link rel="stylesheet" type="text/css" href="test.css">
head>
<body>
     <div class="right">div>
     <div class="left">div>
body>
html>

  • css代码:
*{
     padding:0px;
     margin:0px;
 }
.right{
    position:absolute; /*右栏定位过去*/
    top:0px;
    right:0px;
    background-color:#fcc;
    width:100px;
    height:100px;
    /*opacity:0.5; /*半透明*/
}
.left{
    background-color:yellow;
    height: 100px;
    /*不设置宽,默认占整行*/
    margin-right:110px;
    /*设置右边框,使其刚好让出右边框的位置,多了十像素是为了演示*/
}
  • 图片样式:
    html/css-两栏(多栏)布局制作_第1张图片

多栏制作:除了一个栏目,别的栏目都需要定位操作;这个不定位栏目相邻别的栏目的外边框都需要设定新的外边框像素;

  • html代码:

<html lang="em">
<head>
    <meta charset="UTF-8">
    <title>多栏制作title>
    <link rel="stylesheet" type="text/css" href="test.css">
head>
<body>
     <div class="right">div>
     <div class="left">div>
     <div class="mid">div>
body>
html>
  • css代码:
*{
     padding:0px;
     margin:0px;
 }
.right{
    position:absolute; /*右栏定位过去*/
    top:0px;
    right:0px;
    background-color:#fcc;
    width:100px;
    height:100px;
    /*opacity:0.5; /*半透明*/
}
.mid{
    position:absolute;/*定位到右栏左边正好相邻的地方*/
    top:0px;
    right:100px;
    background:cornflowerblue;
    width:100px;
    height:100px;
}
.left{
    background-color:yellow;
    height: 100px;
    /*不设置宽,默认占整行*/
    margin-right:200px;
    /*设置右边框,使其刚好让出中栏和右栏的位置*/
}

  • 样式演示:
    html/css-两栏(多栏)布局制作_第2张图片

你可能感兴趣的:(前端)