发表于： 2019-10-18 23:20:49
1 1106
今日完成的事情:
开始尝试做任务10.及任务八九的样式修改
关于八九中一些模块的总结:
设置悬浮隐藏出现
一.比如利用这个设置鼠标悬停的下划线
设置一个盒子，容器中两个子元素，子元素a是内容，内容加内边距撑开父元素盒子大小，子元素b（块级）在a的下面设置悬浮隐藏，它的默认元素是父元素宽度，
也就是子元素a撑开的宽度，为子元素b设置隐藏，为它们的父元素，设置hover悬浮显示，
ps：
1.是设置在包含隐藏子元素b的父元素上的，而不是子元素a上，如果设置在子元素a上，因为它没有包含子元素b，所以鼠标悬停，显示属性将无效，子元素b将永远隐藏
2.这样有个好处，元素b的宽度，是元素a和padding撑起来的，显示效果，a永远在b的中间位置，不收a元素外边距影响(只受文字宽度影响,居中,不受其他因素影响)
.nav-item:hover .nav-li{
visibility: visible;
}
.nav-li{
visibility: hidden;
border-bottom: 1px solid white;
}
<ul class="navbar-nav justify-content-end" style="width:100%">
<!--链接组(导航组)-->
<li class="nav-item">
<a class="nav-link nav-a" href="#">首页 </a>
<div class="nav-li"></div>
<!--链接-->
</li>
二.还有种简单设定
如：
直接
.aaa:hover .bbb{
xxxx
xxxx
xxxx
}
鼠标不悬停,bbb是隐藏的
效果就是，当鼠标悬停在.aaa的标签上，就会直接出现.bbb的效果，不用隐藏出现，
但是注意：
1.这种一般用于，如悬停后改变原有样式，如字体由原来的样式，鼠标浮动到上面，变色
2.这种不能直接添加样式，如鼠标悬停多了1px的下划线，当鼠标悬停后，出现的下划线，使，页面
整体增加1px，后面内容就会向下移动1px，鼠标移开，后面的内容，就会还原，操作前后，后面的内容
就会因为这1px的有无，出现抖动现象
所以，类似这样的添加属性，需要设置绝对定位，使添加内容，脱出文档流,在父元素中设置相对定位捕捉
3.隐藏的是浮动属性后直接设置的东西.bbb{,
在其中包裹的内容为脱离出来,增加内容,类似2,所以需要注意
三.颜色变换,
还是拿下划线举例
这种是二.2的延伸
因为直接设置会增加文档流内容,所以可以先设置一个下划线,,颜色设置成背景颜色,使之不可见
然后,设置悬浮改变颜色
四.但是有一个特殊例外,行内元素,例如:<span>,块级元素,例如<p>,同样按照这个样式设置,块级元素的边框在同一文档流内,就会为文档流添加边框宽度
但是,行内元素的边框,就会出现,类似绝对定位的效果,脱离了原来的文档流,不会增加原本文档流的高度
span:hover.footer-p-box-2{
border:10px solid red;
}
左边p标签,文档流内,撑开 右边span便签,脱离文档流没有影响
原因:可能是行内元素的一种默认属性吧,待查询
图片填充
css标准代码:
.main-4-img {
background: url("#.png") no-repeat;(图片不重复)
height: 100%;
width: 100%;
overflow: hidden;
background-size: cover;
}
盒子里插入图片
多个图片:
0.如果图片小于盒子,就在盒子左上排列,如果某个图片高度大于盒子,就会把盒子高度撑开,同行每个盒子高度都被撑到这个大小(不设高的情况下,宽度同理),
如果图片宽度大于固定宽,就会超出边框,根据后来居上的层级原则,被旁边或者下方的容器盒子覆盖(如果有盒子的话)
并且,如果旁边的盒子不设置背景色就会被超出的内容显示在自己内容的下方,只有盒子宽度自适应,才能顶住旁边的盒子,如果宽度之和大于整个宽度,
浮动和正常的就会换行(有固定宽度,包括固定百分比)弹性布局就会等比例缩小
1.宽固定,高不固定,如果单独设置height:100%,所有盒子默认最高的那个图片高度,为高度,盒子等高,但不影响其中的图片,就是原本大小,和盒子大小没关系,且冲不破盒子高度,如果原本宽度超出固定宽,同0
宽度不固定,高度固定,盒子宽度,就是插入图片的宽度,盒子不等宽,是图片宽度,冲不破宽度,如果原本高超出固定高,同0
2.有固定宽高,
图片原本宽高都小于盒子宽高,为图片设置单独width:100%,图片宽度就会填充整个盒子,高度按宽度的扩大等比例自适应扩大,如果超出固定高,同0
------------------------------,单独设置height:100%,同理
当图片大小超出盒子固定宽高时,单独,设定:width:100%,宽度就会缩小,至盒子的固定宽,高度自适应缩小,
单独设定height:100%,同理
当同时设定,宽高100%,小的图片就扩大,大的就缩小,填满整个盒子,这时没有图片宽高的自适应,就是单纯的x轴,y轴方向的拉伸与压缩,呈现效果,看的是为盒子设定的固定宽高
且,为了使图片在长度不够的情况下,循环显示,如上设置,或者background-size:100%;
注释:
background-size: length|percentage|cover|contain;
length
设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
percentage
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
src和href的区别
href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系。
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
flex与col的子元素
行内元素:与其他行内元素并排,不能设置宽高，默认的宽度就是文字的宽度。
块级元素：霸占一行，不能与其他任何元素并列,能设置宽高，如果不设置宽度，那么宽度将默认变为父级的100%。
但是在声明flex的盒子中,它的子元素不管是行内元素还是块级元素,没有设置宽度,宽度都是由其中的内容撑开,
而col容器中,它的子元素不管是行内元素还是块级元素,没有设置宽度,宽度都默认为整个父元素(col)的宽度
并且,只能影响到子元素,不能影响到子元素的子元素(孙子元素),即想要消除这种影响,只要在目标子元素外,再套一层盒子就可以了
task10
现整体的看任务所用的资料
主要是学习制作表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form>
.
input 元素
.
</form>
输入元素
多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。
文本域（Text Fields）
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
浏览器显示如下：
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
总结语法:
<form>
xxx:<input type="#" name="xxx">
... ...
</form>
在form闭合标签内
xxx输入框前的文本
input type的,type="#",#代表输入文本框的样式(如:单选按钮（Radio Buttons）,复选框（Checkboxes）,提交按钮(Submit Button)等)
例如;密码字段(password)
<form>
Password: <input type="password" name="pwd">
</form>
注意:密码字段字符不会明文显示，而是以星号或圆点替代。
name的作用待确认
还有脱离基本样式的
如复选框（Checkboxes）
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
value的作用待确认
value的作用待确认
....
收获;同上
遇到的问题;基本语法,有些词汇的含义,没理解,还是了解清楚,以免之后因为基础没搞懂,到处掉坑
明日计划:做任务10
返回列表
评论