首页-组合样式 |学习笔记

简介: 快速学习 首页-组合样式

开发者学堂课程【移动 Web 前端开发:首页-组合样式】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8411


首页-组合样式

 

内容介绍

一、商品盒子

二、产品区块

三、组合样式

 

一、商品盒子

. jd proBox{

margin-top: 10px;  上边距的距离

box- shadow: 0 0 1px #d8d8d8;  阴

min-height: 200px;  

background: #fff;背景颜色白色

}

.jd_ proBox pro tit {

height: 34px;

line - height: 34px;

border- bottom: 1px solid #ddd;

}

/*no border*/

.jd_ proBox pro tit.nb{ 没有边框

border- bottom: none ;

}

.jd_ proBox .pro_ tit h3{

position: relative ;

text-indent : 20px;

font-weight :normal; 字体不加粗 normal原始的默认的

}

.jd_ proBox .pro_ tit h3: before{

content :"" ;

position: absolute ;  此时的absolute肯定不会影响“京东超市

left : 10px ;

top : 11px ;

width: 3px;

height: 12px;

background:#d8505c;

}

.jd_ proBox .pro_ con[ ]

 

二、产品区块

<section class="jd_proBox">

<div class="pro_ tit"><h3>京东自营</div>

<div class="pro_ con clearfix" >

<a href="#" class=w_p50 f_left b_right”><img src=images/cp1.jpg" alt=””/></a>

<a href="#" class=w_p50 f_right b_bottom”><img src=images/cp2.jpg" alt=””/></a>

<a href="#" class=w_p50 f_right”><img src=images/cp3.jpg" alt=””/></a>

</div>

</section>

<section class="jd_proBox">

<div class="pro_ tit"><h3>京东超市</div>

<div class="pro_ con clearfix">

<a href="#" class=w_p50 f_right b_left”><img src=images/cp4.jpg" alt=””/></a>

<a href="#" class=w_p50 f_left b_bottom”><img src=images/cp5.jpg" alt=””/></a>

<a href="#" class=w_p50 f_left”><img src=images/cp6.jpg" alt=””/></a>

</section>

<section class="jd_ _proBox”>

<div class="pro_ tit"><h3>京东热门</div>

<div class="pro_ con clearfix">

<a href="#" class=w_p50 f_left b_right”><img src=images/cp1.jpg" alt=””/></a>

<a href="#" class=w_p50 f_right b_bottom”><img src=images/cp2.jpg" alt=””/></a>

<a href="#" class=w_p50 f_right”><img src=images/cp3.jpg" alt=””/></a>

</section>

</div>

三、组合样式

观察图片,总共有三个a包括一张图片

让左边的格子向左浮动,右边的格子向右浮动

那么结构是怎样的结构是一个 a 宽度50%,包括一张图片,并且有右边框,盒子宽度也是50%,此时是下边框总结一下宽度50%,左边右边框和下边框

image.png

.w_ p50 {

width: 50%;

}

.w_ p50 img{

display: block;

width:100%;

}

.b_ left {

border-left: 1px solid #ddd ;

}

.b_ right {

border-right: 1px solid #ddd ;

}

.b_ bottom {

border- bottom: 1px solid #ddd ;

}

相关文章
|
JavaScript
【Vue3从零开始-实战】S16:详情页样式优化及tab栏内容联动功能实现
【Vue3从零开始-实战】S16:详情页样式优化及tab栏内容联动功能实现
292 0
【Vue3从零开始-实战】S16:详情页样式优化及tab栏内容联动功能实现
|
26天前
|
前端开发 程序员 API
前端|基于 Layui 实现动态搜索选择框
网页端实现动态搜索选择框,要求下拉选项列表能根据用户输入内容动态刷新,最终提交的值必须是由选项列表中点选的。
42 3
|
4月前
|
JavaScript
vue + d3.js(v6) 绘制【树状图/思维导图】可折叠/展开,可点击跳转,可带标签
vue + d3.js(v6) 绘制【树状图/思维导图】可折叠/展开,可点击跳转,可带标签
637 1
|
6月前
|
小程序 前端开发 Android开发
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
448 1
|
6月前
|
小程序
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
|
6月前
|
数据可视化 大数据
【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面
【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面
【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面
|
JavaScript
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
661 0
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
|
小程序
小程序中如何实现搜索框样式
小程序中如何实现搜索框样式
475 0
小程序中如何实现搜索框样式
|
前端开发
前端——多行三列模式页面布局
前端——多行三列模式页面布局
113 0
前端——多行三列模式页面布局
|
前端开发 JavaScript 信息无障碍
导航条-组件结构分析|学习笔记
快速学习 导航条-组件结构分析
166 0
导航条-组件结构分析|学习笔记
下一篇
无影云桌面