发表于： 2019-10-10 22:27:16
1 1056
今天完成事件
终于把任务8-9的细节方面改完了 总结了下任务7的。
通过任务7了解到的知识点
任务7第一个页面很好做，都是复习之前的标签和属性的应用以及flex，定位和盒子的布局应用。
知道了CSS框架Bootstrap这么个东西，用法是
直接把上面的复制 放在项目代码前面就是平常写引用 选择器的代码那然后通过CLASS类进行引用就可以了，现在还不是太会用这个框架。
如果要有个播放器代码是
<audio controls src="数码宝贝.mp3">
controls 代表这播放器 后面的就是你要播放的音乐文件，注意音乐文件必须和项目文件放在一起。
效果：
问题就是这东西是自带的给你写好的如果你想改成一张图片播放音乐那你得自己改源代码太麻烦。
解决问题：
<audio autoplay loop src="数码宝贝.mp3">
autoplay 作用是你一打开网页就自动播放音乐。
loop是重复播放。
解决图片伸缩问题：
在写格子的时候 我用的是PX值 在视窗伸缩的时候 它是固定的不进行自适应。
知道的VW视窗宽度，1vw=视窗宽度1%很好的解决了我的视窗收缩的时候，盒子跟着视窗自动改变。
问题：display: flex;与display: none;是不能同时一起用的。
经过师兄的提醒，我在图片上面设置隐藏属性display: none;，避开了flex布局解决该问题。
效果如下
在这里dispaly;none师兄说用这个很容易出现BUG所以查下了师兄说的opacity:0是属性设置元素的不透明级别 ，让标签里面的内容透明。
line-height属性：定义行高的
用它解决文字垂直居中的问题。
百度解释：行间距的尺寸分配一般是line-height与font-size的计算值只差氛围两半，分别加到一个文本行内容的顶部和底部，可以包含这些内容（文本+文本顶部+文本底部）的最小框就是行框（line-box）。表示有点不太理解。
但如果你想用这个解决文字垂直居中的话，那么你的父类最好设有高的值，用line-height上父类高一样的值就可以实现垂直居中效果如下。
代码如下：
display: block;
font-size: 20px;
color: #ffffff;
text-align: center;
height: 80%;
width: 100%;
line-height:50px;
border: 1px solid #fbb435;
background-color: #fbb435;
最后一个页面文字的空格百度解决如下；
即不换行空格，全称No-Break Space，是最常见且使用最多的空格。HTML字符值引用为：  ，宽度受字体影响明显而强烈。
 
即“半角空格”，全称En Space，en是字体排印学的计量单位，为em宽度的一半，即等同于字体度的一半。宽度正好是1/2个中文宽度，而且基本上不受字体影响。
 
即“全角空格”，全称Em Space，em是字体排印学的计量单位。宽度正好是1个中文宽度，而且基本上不受字体影响。
 
即“窄空格”，全称Thin Space。宽度仅为em的六分之一。
‌
即“零宽不连字”，全称Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，并以这两个字符原本的字形来绘制。其Unicode码位为：U+200C，HTML字符值引用为：‌。
‍
即“零宽连字”，全称Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。其Unicode码位为：U+200D，HTML字符值引用为：‍。
总的来说，html中的几种空格实体拥有不同的宽度，其中，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。由于不同情况下，浏览器的em不同，所以其他几种空格（       ‌‍）在不同浏览器中宽度各异。
Z-index
属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
它的作用就是可以解决元素的覆盖问题，决定那个元素在上方，哪一个在下方；
z-index的值可以是负数，也可以为0，也可以无群大，数值大的在上方；
z-index父元素设置的值权重比较大，当两个父元素相比的时候，父元素起决定作用，其中的子元素设置多大都没有用；就是让块状元素在收缩的时候谁在下面或谁在上面。
如图
在任务7做完，感觉自己在细节方面不太注意总是感觉页面和PS差不多就行了，导致改动改了差不多一天，因为每次改动都会出现小毛病。要强加页面布局和细节方面
返回列表
评论