发表于： 2019-10-29 21:53:49
1 980
今日完成:
1.任务9图标更改多次,始终不行.
在仔细看师兄的效果链接之后,发现,我努力的方向错了,
要求的效果:改变的只有图片外围盒子的大小,
图片本身的从始到终就是不变的
以这个样式为目的改写代码
思路:插入图片,是图片默认的大小,
然后图片外面嵌套一个盒子,盒子设置弹性布局,并且使盒子中的图片,
始终在垂直水平居中的位置,
跟着栅格布局改变的始终是包裹图片的盒子
遇到问题:
每个图片切出的大小不一样,所以,再不设置100%填充的情况下,shink:0属性,
使的图片本身宽度之和大于设定的总宽度,产生换行,
但是宽度设定100%.填充,可以自适应栅格布局的宽度,但是不可避免的拉伸;
又回到起始原点:图片自适应缩小的同时,又保持默认比例不变
解决:为宽和高设置最大宽度
原理:暂时需要捋一捋,似懂非懂,好像是这样配合shink:0属性,图片就会保持默认原本比例,缩小,
且图片保持居中,跟着栅格改变的是包裹图片的父元素
.main-4-img {
background: url("image.png") no-repeat;
max-height: 100%;
max-width: 100%;
overflow: hidden;
flex-shrink:0;
background-size: cover;
}
HTML的a标签href属性指定相对路径与绝对路径的用法讲解
也可以是url,或者scr的路径,通用
HTML相对路径
指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。
例如：
文件1.htm的绝对路径是：d:/www/html/1.htm
文件2.htm的绝对路径是：d:/www/html/2.htm
相对路径: 1.htm相对于2.htm的路径就是：1.htm
相对链接的使用方法：
1.如果链接到同一目录下，则只需输入要链接文档的名称
2.如果链接到下一级目录，则需要先输入目录名，然后加 “ / ”，再输入文件名
3.如果连接到上一级目录，则需要先输入“.．/”，然后再输入目录名、文件名
总结:
现在有4个html文件:
aaa.html, bbb.html ,ccc.html index.html
aaa.html的路径为：D:/www/adminwang/html/aaa.html
bbb.html的路径为：D:/www/adminwang/ bbb.html
ccc.html的路径为：D:/www/ ccc.html
index.html的路径为D:/www/ index.html
1.链接同一目录下的文件
例如ccc.html文件链接index.html的代码如下：
<a href="index.html">链接index网页</a>
2.链接上一目录的文件
例如bbb.html链接ccc.html的代码如下：
<a href="../ccc.html">链接ccc网页</a>
3.链接上二目录的文件
例如aaa.html链接ccc.html的代码如下：
<a href=”../../ccc.html”>链接ccc网页</a>
4.链接下级目录的文件
例如ccc.html链接bbb.html的代码如下：
<a href="adminwang/bbb.html">链接bbb网页</a>
5.链接下二层目录的文件
例如ccc.html链接aaa.html的代码如下：
<a href="adminwang/html/aaa.html">链接aaa网页</a>
HTML绝对路径
为文件提供的完全路径，包括适用的协议或盘符。也就是主页上的文件或目录在硬盘上真正的完整的路径。
例如：
http://www.adminwang.com/index.htm
d:/ www /html/images/bg.jpg
开始task14,重构task9代码
根据原来查到的资料,自己总结:
1.就是多个页面有一部分通用代码,就可以把这部分代码单独拿出来设个文件,需要时随时调用
2.一个页面有多个重复代码,可以单独拿出来设置文件,需要时调用
优点:
1.代码库写的越复杂,越多,业务代码就相应的越简练
2.代码模块化,当出现bug或者有需求需要修改某个属性时,就有针对性对某个独立模块进行修改,而不用考虑全局样式
3.当多人协作时,分工明确分别做一部分模块
遇到问题;
1.方向性的错误,企业图标页面,自己没有一个清晰明确的认知,导致极大的一部分时间,在做无效用工,
即累努力还对实质事情上没有任何帮助,之后再一次,观看几个师兄的成果链接,才算是清晰明确的知道,
想要的到底是什么效果,然后围绕怎么达到这个效果,去做,很快就解决问题
收获:
1.心态思想上的改变,切身体会了程序渣和程序员的区别,既然以后想要从事这个行业,就应该转变思想,主动去想,想要
达到什么样的效果,自己脑子里首先要有个完成后的效果,确定实际需求和自己设想的完成后的效果是一致的,然后再去围绕怎么达到,
想要的效果去写代码.模棱两可,只有无止尽的修改
明日计划:完成task1
返回列表
评论