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

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

开发者学堂课程【移动 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栏内容联动功能实现
289 0
【Vue3从零开始-实战】S16:详情页样式优化及tab栏内容联动功能实现
|
5天前
|
前端开发 程序员 API
前端|基于 Layui 实现动态搜索选择框
网页端实现动态搜索选择框,要求下拉选项列表能根据用户输入内容动态刷新,最终提交的值必须是由选项列表中点选的。
26 3
|
4月前
|
前端开发
css 巧用 ::after 和 ::before 实现竖排分类导航
css 巧用 ::after 和 ::before 实现竖排分类导航
42 1
|
6月前
|
小程序
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
|
小程序 前端开发 JavaScript
【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式
【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式
450 0
|
小程序
小程序中如何实现搜索框样式
小程序中如何实现搜索框样式
466 0
小程序中如何实现搜索框样式
|
前端开发 小程序 容器
详解CSS中的网格布局,小程序中实现预约列表功能
详解CSS中的网格布局,小程序中实现预约列表功能
详解CSS中的网格布局,小程序中实现预约列表功能
|
前端开发 JavaScript 信息无障碍
导航条-组件结构分析|学习笔记
快速学习 导航条-组件结构分析
163 0
导航条-组件结构分析|学习笔记
|
前端开发
前端工作小结71-修改首页布局样式
前端工作小结71-修改首页布局样式
90 0
前端工作小结71-修改首页布局样式
|
小程序 前端开发 JavaScript
微信小程序--》条件与列表渲染以及WXSS模板样式
⚓经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助。
346 0
微信小程序--》条件与列表渲染以及WXSS模板样式