申请会员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中写入
```css
*{
/* 初始化HTML5文档 */
/* 去除边距 */
margin:0;
padding:0;
}
/* 重写 Body Html */
html,body{
/* 设置宽高 */
width:100%;
height:100%;
}
```
https://img-chucun-1259696352.cos.ap-chengdu.myqcloud.com/img/QQ%E6%88%AA%E5%9B%BE20191119113300.png
先实现把div.right往上移
```css
header>.right{
width:56px;
height:56px;
position:absolute;
background-color:#ffcc00;
}
```
https://img-chucun-1259696352.cos.ap-chengdu.myqcloud.com/img/2.png
然后再把div.right移到右边
```css
header>.right{
width:56px;
height:56px;
position:absolute;
right:0;
background-color:#ffcc00;
}
```
https://img-chucun-1259696352.cos.ap-chengdu.myqcloud.com/img/2.png
现在两栏布局还没好，因为我们没有把div.right的位置空出来，我们把div.right变成半透明
```css
header>.right{
width:56px;
height:56px;
position:absolute;
right:0;
opacity:0.5;
background-color:#ffcc00;
}
```
https://img-chucun-1259696352.cos.ap-chengdu.myqcloud.com/img/4.png
现在把div.right的位置空出来我们让div.left的margin-right为div.right的宽度
```css
header>.left{
height:56px;
margin-right:56px;
background-color:#000000;
}
```
https://img-chucun-1259696352.cos.ap-chengdu.myqcloud.com/img/5.png
然后把opacity删除
https://img-chucun-1259696352.cos.ap-chengdu.myqcloud.com/img/6.png
这样两栏布局就已经写好了，个人/企业开发中常用的两栏布局
结束语
首先感谢评审人员:Hmily
如果还有机会的话，会提供更多的其他语言的教程，以及企业实战项目的开发
擅长语言
[*]JAVA
[*]HTML
[*]CSS
[*]JAVASCRIPT
[*]SHELL
抱歉，未能达到申请要求，申请不通过，可以关注论坛官方微信（吾爱破解论坛），等待开放注册通知。
哇，这么高要求的吗，赶上开放时间的小白好幸运啊
页:
[1]