一、代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background: #f5f5f5;}.product_phone{font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;width: 1226px;margin: 20px auto;}.title{display: flex;justify-content: space-between;width: 1226px;height: 58px;line-height: 58px;.title a{font-size: 16px;color: #424242;text-decoration: none;}.title h2{margin: auto 0;}.phones{height: 614px;}.left{float: left;}.left img{height: 614px;width: 234px;}.right{float: right;width: 992px;height: 614px;}ul{list-style: none;margin: 0 0 -14px -14px;}ul li{height: 260px;width: 227px;margin-left: 14px;margin-bottom: 14px;float: right;background: #fff;padding: 20px 0;text-align: center;}ul li:hover,.left:hover{/* 鼠标滑过动画效果 */transform:translate3d(0,-2px,0);z-index: 2;box-shadow:0 15px 30px rgba(0,0,0,0.1) }ul li img{width: 160px;height: 160px;}ul li h3 a{text-decoration: none;font-size: 14px;font-weight: 400;color: #333;}ul li p{margin: 0 10px 10px;height: 18px;font-size: 12px;color: #b0b0b0;/* 多余文字隐藏以省略号显示 */overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}ul li span{color: #ff6700;}</style>
</head>
<body><div class="product_phone"><div class="title"><div><h2>手机</h2></div><div><a class="rt" href="">查看更多<b>&gt;</b></a></div></div><div class="phones"><div class="left"><a><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fef86f3a976842446ec7c3f315cf253f.jpg?thumb=1&w=234&h=614&f=webp&q=90"></a></div><div class="right"><ul><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=200&h=200&f=webp&q=90"></a><h3><a href="">Xiaomi MIX Fold 2</a></h3><p>超轻薄折叠机身设计，小米自研微水滴形态转轴</p><span>8999元起</span></li><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=200&h=200&f=webp&q=90"></a><h3><a href="">Xiaomi MIX Fold 2</a></h3><p>超轻薄折叠机身设计，小米自研微水滴形态转轴</p><span>8999元起</span></li><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=200&h=200&f=webp&q=90"></a><h3><a href="">Xiaomi MIX Fold 2</a></h3><p>超轻薄折叠机身设计，小米自研微水滴形态转轴</p><span>8999元起</span></li><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=200&h=200&f=webp&q=90"></a><h3><a href="">Xiaomi MIX Fold 2</a></h3><p>超轻薄折叠机身设计，小米自研微水滴形态转轴</p><span>8999元起</span></li><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=200&h=200&f=webp&q=90"></a><h3><a href="">Xiaomi MIX Fold 2</a></h3><p>超轻薄折叠机身设计，小米自研微水滴形态转轴</p><span>8999元起</span></li><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=200&h=200&f=webp&q=90"></a><h3><a href="">Xiaomi MIX Fold 2</a></h3><p>超轻薄折叠机身设计，小米自研微水滴形态转轴</p><span>8999元起</span></li><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=200&h=200&f=webp&q=90"></a><h3><a href="">Xiaomi MIX Fold 2</a></h3><p>超轻薄折叠机身设计，小米自研微水滴形态转轴</p><span>8999元起</span></li><li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=200&h=200&f=webp&q=90"></a><h3><a href="">Xiaomi MIX Fold 2</a></h3><p>超轻薄折叠机身设计，小米自研微水滴形态转轴</p><span>8999元起</span></li></ul></div></div>
</div>
</body>
</html>

二、效果

《css+html小案例3》小米商城手机部分：利用浮动+弹性盒子布局相关推荐

CSS 弹性盒子布局使用方法介绍
标题 CSS 弹性盒子布局 CSS 属性应用在父容器元素上的CSS属性 1.display: flex | inline-flex; 2. flex-direction 3. flex-wrap 4 ...
CSS 弹性盒子布局详解
CSS 弹性盒子弹性盒子是CSS3的一种新布局模式.是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 弹性盒子布局是一种在前端HTML开发中比较常用的布局方式,还有 ...
CSS布局之“弹性盒子布局”
弹性盒子,通常被称为 flexbox,是一种一维的布局模型.它给弹性元素提供了强大的空间分布和对齐能力,极大的方便了网页的布局和美化. 目录前言一.弹性盒子概述二.弹性盒子组成三.弹性容器(F ...
CSS弹性盒子布局——flex布局的基本概念
<CSS弹性盒子布局--flex布局的基本概念> Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和 ...
【CSS 弹性盒子布局 (Flexible Box Layout)】
CSS 弹性盒子布局 Flexible Box Layout CSS 弹性盒子布局 (Flexible Box Layout) 1. 弹性盒子布局的基本概念和术语 2. flex 属性: 设置伸缩 ...
HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
css动画小案例弹力球
什么是 CSS3 中的动画? 动画是使元素从一种样式逐渐变化为另一种样式的效果.可以改变任意多的样式任意多的次数.用百分比来规定变化发生的时间,或用关键词 "from" 和 &qu ...
微信小程序CSS Flexbox(弹性盒子)布局模块
容器中使用flexbox flexbox的模型当元素表现为 flex 框时,它们沿着两个轴来布局: 名词说明主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行 ...
CSS弹性盒子布局flex
flex布局: flex布局是继标准流布局.浮动布局.定位布局后的第四种布局方式.这种方式可以非常优雅的实现子元素居中或均匀分布,甚至可以随着窗口缩放自动适应.flex布局在浏览器中存在一定的兼容性( ...

《css+html小案例3》小米商城手机部分：利用浮动+弹性盒子布局

一、代码

二、效果

《css+html小案例3》小米商城手机部分：利用浮动+弹性盒子布局相关推荐

最新文章

热门文章