第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

【學(xué)習(xí)打卡】第6天banner區(qū)css前端 模塊2 商品展示2

標(biāo)簽:
Html5 CSS3 前端工具

一 课程名称


课程名称:前端油画商城案例


课程章节:模块商品展示2


二 课程内容

本章主要内容是完成购物车的css代码

把购物车放到矩形的图形里 然后居中

最终效果如下:

https://img1.sycdn.imooc.com/62f50a950001d46604140103.jpg


  1. 按层级关系找到需要设置的购物车背景

    https://img1.sycdn.imooc.com/62f50bc30001819606630542.jpg

    是 img-btn ,宽度设置300px

   2.然后设置购物车大小和购物车矩形背景的大小  

    https://img4.sycdn.imooc.com/62f50c9500018aca05850243.jpg

    

    购物车和背景外形基本出来了 现在购物车本身太大还需要调整

https://img1.sycdn.imooc.com/62f50cf700016fc511540335.jpg


处理购物车图形  大小和居中加上上边距  (白色购物车图片是需要在红色矩形里居中,所以购物车居中代码写在红色背景的css里

https://img2.sycdn.imooc.com/62f50e300001c54710700560.jpg


把购物车变成超链接

https://img2.sycdn.imooc.com/62f50e6a0001bddb08230404.jpg

超链接包裹购物车和红色矩形


3.购物车和背景向右对齐  ,价格向左对齐 

https://img4.sycdn.imooc.com/62f50f4f0001013307720505.jpg

https://img3.sycdn.imooc.com/62f50f7b000187d107110217.jpg

https://img3.sycdn.imooc.com/62f50fb400017cb613290528.jpg


修改一下边框长度 500不够 变成550比较好

https://img1.sycdn.imooc.com/62f50ff80001bbb607960478.jpg

效果

https://img1.sycdn.imooc.com/62f5102f0001379a13060455.jpg


三 划重点

    本章的重点就是把层级关系,位置关系都找出来 (非常重要)O(∩_∩)O



本章学完!


點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
數(shù)據(jù)庫(kù)工程師
手記
粉絲
5
獲贊與收藏
0

關(guān)注作者,訂閱最新文章

閱讀免費(fèi)教程

  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消