一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
接到的需求
今天老大给了我一个需求，让我完成一个静态页面的布局，我心里一想，这不是在侮辱我么，立马biu biu biu开干。写了大概一半，老大说这个页面必须得兼容IE8而且不可以使用静态资源，当时我的内心是崩溃的。直接裂开。
要做的页面大概是这个样子
那要怎么来实现呢于是乎我去了一个网站Can i use
布局的话有多种方法，比如flex、grid、float，我依次查看了他们的兼容性，如下：
| 布局方式 | 兼容性 |
|---|---|
| float | IE6-11均可 |
| flex | IE6-9不支持；10和11部分支持 |
| grid | IE6-9不支持；10和11部分支持 |
看完兼容性，于是，我就开始搞了---哈哈
html代码
<div class="container clearfix">
<!-- 左 -->
<div class="left">
<div class="icon" >
<img src="./img/logo.png" alt="" style="width: 216px;">
</div>
<div class="text">
<div class="title" ><span class="desc">名称：</span><span class="content">XXXX客户端</span> </div>
<div class="title"><span class="desc">版本：</span><span class="content">X.X.X</span></div>
<div class="title" ><span class="desc">系统：</span><span class="content">Win7/Win10/Win11</span></div>
</div>
<div></div>
<a class="aicon" style="background-color: #67A0EF" href="#"><img src="./img/dowload.png" style="width: 24px;vertical-align: middle;margin-right: 6px;border: none;" alt=""></i>点击下载</a>
</div>
<!-- 右 -->
<div class="right">
<h1 class="heard">安装、注册说明</h1>
<div class="content ">
<div class="group">
<span class="g-left">1</span>
<span class="g-right">下载软件并解压，...........................</span>
</div>
<div class="group" >
<span class="g-left">2</span>
<span class="g-right" >一直点击下一步，最后点击完成.......................</span>
</div>
<div class="group">
<span class="g-left">3</span>
<span class="g-right">注册页面如图................<img src="./img/dray.png " style="width: 28px;margin-left: 11px;vertical-align: middle;" alt=""></span>
</div>
<!-- 注意的地方 -->
<div class="img" style="position: relative;">
<span class="left" style="width: 125px;display: inline-block;background-color: #EFF6FF ;height: 250px;"></span>
<div class="bimg" style="width: 100%;"><img src="./img/register.png" style="width: 431px;height: 248px;display: block;" alt=""></div>
<!-- 线 -->
<div class="line"></div>
</div>
<div class="group">
<span class="g-left">4</span>
<span class="g-right">已注册，每次开机电脑右下角图标<img src="./img/dray.png " style="width: 28px;margin-left: 11px;vertical-align: middle;" alt=""></span>
</div>
<div class="group last">
<span class="g-left">5</span>
<span class="g-right">可双击、右击托盘图标打开软件和进行一些操作</span>
</div>
</div>
</div>
</div>
原谅我部分写了行内式的样式，我也不想，但是我太懒了！！！
Css代码
*{margin:0;padding:0}
.clearfix{
clear:both;
}
/* 清除a标签默认样式 */
a {
text-decoration: none; /* 去除默认的下划线 */
outline: none;/* 去除旧版浏览器的点击后的外虚线框 */
color: #fff;/* 去除默认的颜色和点击后变化的颜色 */
font-size: 20px;
}
.container{
width: 1668px;
height: 924px;
border-top: 13px solid #F5F5F9 ;
border-right: 18px solid #F5F5F9 ;
border-bottom: 18px solid #F5F5F9 ;
border-left: 14px solid #F5F5F9 ;
}
/* 左部分 */
.container .left {
float: left;
width: 372px;
height: 924px;
background-color: #F6F6F6;
/* border-right: 1px solid #CCCCCC ; */
}
/* 左顶部logo */
.left .icon{
margin-top: 66px;
display: block;
text-align: center;
}
/* 版本等信息 */
.left .text .title{
margin-left: 20px;
margin-top: 17px;
overflow-wrap: break-word;
}
/* 版本等信息字体样式 */
.left .text .title .desc{
color: #777777;
font-size: 16px;
/* font-family: PingFangSC-Regular; */
}
.text .title .content{
color: #333333;
font-size: 16px;
/* font-family: PingFangSC-Regular; */
}
/* 下载按钮 */
.left .aicon{
display: block;
margin: 58px auto 0 auto;
text-align: center;
background-color: #67A0EF;
width: 330px;
height: 52px;
line-height: 52px;
border-radius: 8px;
}
/* 右部分 */
.container .right{
/* width: 1316px; */
float: left;
padding: 0 50px 281px 30px;
}
.container .right .content{
width: 1216px;
float: left;
}
.right .heard{
font-size: 24px;
color: #333333;
display: block;
text-align: center;
height: 81px;
line-height: 81px;
}
.content .group{
float: left;
width: 1216px;
height: 56px;
line-height: 56px;
border-top: 1px solid #DDECFF;
border-right: 1px solid #DDECFF;
}
.content .group .g-right{
font-size: 18px;
color: #333333;
}
.content .last{
border-bottom: 1px solid #DDECFF;
}
.content .group .g-left{
display: inline-block;
width: 125px;
height: 56px;
text-align: center;
background-color: #EFF6FF ;
}
.content .group .g-right{
margin-left: 14px;
}
.right .img .line{
position: absolute;
right: -1px;
top: 172px;
width: 1px;
height: 249px;
background-color: #DDECFF;
}
敲了好一阵子，然后出来了结果----针不戳！
but出现问题了
- 不能使用伪元素：after，IE8并不兼容（上图有坑部分靠右边的那个线，我之前使用伪元素写的后来不行就尝试用定位了；定位是可以支持的）具体兼容性可看这里"position"
- 圆角属性不支持，按钮下载那一块不支持，目前没有想到很好的解决办法
