首先，在练习实现一个网页的过程中，第一步是要分析这个网页的布局模式
在基本的结构框架下分配好布局再来进行对应区域内内容的实现
首先将整个网页分成4大块儿，分别是如上图
1.图片logo区
2.目录链接区
下面则是左右两栏布局
整体意义上还是两个大的盒子模块
一、图片logo区
插入图片，设置宽度，center居中。
二、目录链接区
建造一个DIV盒子，宽度设置与上方LOGO图片同宽。
用ul li a写入链接内容
再对a元素中的每个块进行调整大小、内边距、外边距、居中。
三、两栏布局
两栏左右布局在页面布局中是非常常见的一种用法，比较常用的布局两栏方法有
1.浮动布局。一般为左（右）宽度固定，右(左)边选择自适应的宽度。
2.绝对定位布局
通过position-absolute和margin-left两个元素进行两栏布局
3.浮动+BFC规则
<style>
* {
margin: 0;
padding: 0;
}
.left {
width: 500px;
height: 1000px;
background: blanchedalmond;
float: left;
}
.right {
height: 300px;
height: 1000px;
overflow: hidden;
background: lightcoral;
}
</style>
</head>
<body>
<div class="prastic">
<div class="left">满屋花实验</div>
<div class="right">dannile fawerday</div>
</div>
</body>
</html>
3.1左侧
3号盒子里再内置两个盒子
一个用户注册一个鲜花分类
用户注册盒子写入基本的用户密码type input ，边框只保留下划线
下面三个分别两个button 按钮+一个a 元素标签，a 元素需display换成块盒再一齐左浮动。或者三个a元素，设置样式大小排列对其即可。
鲜花分类盒子中一样ul li序列，左对齐，设置小标题左浮动与插入序列与图片样式相同，下面序列千篇一律。
3.2右侧
4号大盒子里再分成4个小盒，分别是本站快讯、鲜花推荐、新品上市、鲜花导购。
本站快讯盒子中插入三张对应图片，设置大小、左间距，只要保证三张图片加起来的宽度不超过外层盒子宽度大小被挤下去即可。
鲜花推荐盒子也是先全部插入8张图片装入8个div中，块盒左浮动，设置大小边距对齐，插入下方文字。
新品上市盒子插入四张对应图片，同本站快讯盒子一样。
鲜花导购盒子中划分两个小盒子，分别插入两排li，设置标签样式，盒子中间空白部分通过设置盒子的宽度排挤开更加便捷。
最后再设置细枝末节如盒子的边框radius、每个盒子的隔阂间距，完善图片的对齐方式使其于效果图像。
本次的练习再次熟练加深了css布局基本排本和浮动的熟练运用，就是主要扣细节，难度上就是考验耐心了，不错不错。
2919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
