本节简介:使用系统提供类名打破系统默认宽度制作全屏海报
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
第一个div定义元素高度,第二个div让元素来到50%,第三个div定义元素居中对齐,left:元素宽度一半,~码工助手-通栏模块-模块高度1920,高度570,把图片代码复制黏贴过去,生成代码。
第一个div定义元素高度,第二个div让元素来到50%,第三个div定义元素居中对齐,left:元素宽度一半,~码工助手-通栏模块-模块高度1920,高度570,把图片代码复制黏贴过去,生成代码。会发现生成的代码与我们自己写的代码非常相似。~网页代码中left值已经设置过了我们没有必要再设置,padding的设置我们也需要清除,在border写下代码padding:0;
第一个div定义元素高度,第二个div让元素来到50%,第三个div定义元素居中对齐,left:元素宽度一半,
码工助手-通栏模块-模块高度1920,高度570,把图片代码复制黏贴过去,生成代码。会发现生成的代码与我们自己写的代码非常相似。
网页代码中left值已经设置过了我们没有必要再设置,padding的设置我们也需要清除,在border写下代码padding:0;
因为网页代码中有个默认的边框border,所以如果不去掉边框就会有一个边框出现,我们在代码中class前面加入代码border:none;
把代码放进装修页面里面会发现淘宝是会自动屏蔽掉我们的定位代码的,我们查看原网页代码css,会发现footer-more-trigger的代码
现在还有一个问题就是图像没有在屏幕中心-图像一直是左对齐,而不是盒子正中心,考虑到不同客户的屏幕分辨率不同,所以我们要把图片移动到屏幕正中心-所以left改为50%-ctrl s保存-刷新,图像就一直在屏幕正中心但是也不对,要让图像始终在盒子中间要再源代码下再写一个div;
6. 样式<style>*{padding:0;margin:0}指通用选择器 .out{width:950px;height:570px;border:3px solid #000; margin:0 auto;} </style>指淘宝默认宽度,图像高度,加了个黑色边框。margin后面的代码表示居中对齐
分析:无论屏幕多宽,屏幕中心是一样的,把left值对齐到中心位置,再返回向左移动图像一半,比方说图像是1920,那就向左移动960
码工助手-通栏海报-点击图像-选择尺寸950-自定义模块-编辑-插入刚才复制的图像地址-会看到图像没有办法全部显示出来,因为尺寸是950
选择950,自定义模块-编辑-插入图像地址-自定义内容不显示