申请会员ID:xlj

申请ID 简介

• 申请ID : xlj
• 申请邮箱 : xlj@xlj0.com
• 原创技术文章
• 涉及语言 html5,css3 (标签语言,脚本语言)
  

两栏布局

前言! 实现两栏布局的方法很简单这里我就详细的写出来，另外列出来所需的工具以便刚入手 html5,css3前端设计开发的人

• Visual Studio Code(开发工具)当然已经安装其他工具的不需要再安装这个了
  

教程开始

项目开始，首先需要初始化一下，把所有标签的自带外边距都去掉，这里选择*{}泛选择器，(权重低后期开发维护性强)

当前文件目录

-项目根目录
--css(文件夹)
---css/header.min.css
--index.html

在header.min.css中写入

*{
    /* 初始化HTML5文档 */
    /* 去除边距 */
    margin:0;
    padding:0;
}
/* 重写 Body Html */
html,body{
    /* 设置宽高 */
    width:100%;
    height:100%;
}

先实现把div.right往上移

header>.right{
    width:56px;
    height:56px;
    position:absolute;
    background-color:#ffcc00;
}

然后再把div.right移到右边

header>.right{
    width:56px;
    height:56px;
    position:absolute;
    right:0;
    background-color:#ffcc00;
}

现在两栏布局还没好，因为我们没有把div.right的位置空出来，我们把div.right变成半透明

header>.right{
    width:56px;
    height:56px;
    position:absolute;
    right:0;
    opacity:0.5;
    background-color:#ffcc00;
}

现在把div.right的位置空出来我们让div.left的margin-right为div.right的宽度

header>.left{
    height:56px;
    margin-right:56px;
    background-color:#000000;
}

然后把opacity删除



这样两栏布局就已经写好了，个人/企业开发中常用的两栏布局

结束语
首先感谢评审人员:Hmily
如果还有机会的话，会提供更多的其他语言的教程，以及企业实战项目的开发

擅长语言

• JAVA
• HTML
• CSS
• JAVASCRIPT
• SHELL
  

Hmily

抱歉，未能达到申请要求，申请不通过，可以关注论坛官方微信（吾爱破解论坛），等待开放注册通知。

1225661221

哇，这么高要求的吗，赶上开放时间的小白好幸运啊