HTML+CSS浮动布局练习：小米商城手机模块

小米商城手机模块

题目：利用所学浮动知识点，实现如下效果。

思路：整体看成一个大盒子，大盒子分成左右两大块，左边盒子放置一张图片，右边又分成8个小模块，利用margin设计两个模块间的距离。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手机模块</title><style>.box {height: 615px;width: 1227px;margin: 0 auto;}.left {height: 615px;width: 235px;background-color: gray;float: left;}.right {height: 615px;width: 992px;background-color: rgba(0,0,0, 0.05);float: left;}.right>div {height: 300px;width: 235px;background-color: #fff;float: left;margin-left: 13px;margin-bottom: 15px;}</style>
</head>
<body><div class="box"><div class="left"><img src="04-1.png" alt=""></div><div class="right"><div><img src="04-2.png" alt=""></div><div><img src="04-3.png" alt=""></div><div><img src="04-4.png" alt=""></div><div><img src="04-5.png" alt=""></div><div><img src="04-6.png" alt=""></div><div><img src="04-7.png" alt=""></div><div><img src="04-8.png" alt=""></div><div><img src="04-9.png" alt=""></div></div></div>
</body>
</html>

运行结果：

实验结论分析：该实验主要是为了熟悉浮动布局之一，因此，主要设计思路也放在布局上，对于模块的设计，直接通过截图完成，实际上小米商城手机模块是上面放置商品图片，下面通过其他的代码实现。

HTML+CSS浮动布局练习：小米商城手机模块相关推荐

css搜索框变圆脸角,CSS浮动布局
CSS浮动布局浮动布局浮动是CSS布局中经常使用的一种手段,其实说白了就是使元素进行漂浮脱离正常的文档流排列机制,实现一堆原本的block状态的标签可以并排显示,当然这也可以使用display:i ...
CSS 浮动布局放弃float，拥抱flex（详解）
CSS 浮动布局放弃float,拥抱flex(详解) 文章目录 CSS 浮动布局放弃float,拥抱flex(详解) 说明 Flex布局容器和项目容器属性 flex-direction属性 fle ...
DIV+CSS浮动布局
DIV+CSS布局 - 浮动布局首先呢,div可以理解为一个简单的容器.盒子.就是可以往里面填充内容的东西咱们先看一下原本的,没有使用过浮动的html页面样子: 1.浮动全部靠拢 float:le ...
CSS - 浮动布局（float）
目录标准布局标准流浮动与浮动流,及元素脱标概念浮动元素浮动的特点浮动带来的问题:标准流父级容器高度塌陷清除浮动浮动布局 + margin负值标准布局 CSS将所有的元素都当成盒子,C ...
css浮动布局自适应,CSS | 自适应两栏布局方法
html代码: 固定宽度自适应区域 1.浮动+margin 第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度. .le ...
css浮动布局自适应,CSS 几种常用自适应布局
通过阅读和实践,我对几种常用的布局样式有了一定的了解,也稍微总结了一下原理,若有不对请大家纠错.谢谢我理解的[两列布局]左边固定和右边自适应,或者右边固定左边自适应的原理是: 1.设置固定区域的宽度 ...
CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
CSS Float 浮动布局
文章目录前言一.Float 布局二.属性值三.代码实现 clear 清除浮动 clear 属性值三.Float 设计初衷与不足不足总结前言在页面开发的过程中,CSS 页面布局技术允许 ...
HTML5期末大作业：X米网站设计——小米商城手机(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品学生dreamweaver网页设计作业成品
HTML5期末大作业:X米网站设计--小米商城手机(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品学生dreamweaver网页设计作业成品常见网页设计作业题材有个人 ...

HTML+CSS浮动布局练习：小米商城手机模块

小米商城手机模块

HTML+CSS浮动布局练习：小米商城手机模块相关推荐

最新文章

热门文章