发表于： 2019-10-20 23:08:53
1 1093
今日完成:
昨天的问题
表单中的单选按钮可以设置以下几个属性：value、name、checked
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中
Bootstrap 表单
垂直或基本表单
向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
根据表单制作范例:
遇到问题:input内的文字无法更改样式
解决:直接设置一个包裹form的盒子,在盒子中直接设置文本样式
ps:
1.不能在input中直接设置类,不识别,
2.不能直接在input文本内增加标签,会使input结构句法崩坏
3.再碰到类似问题,可以尝试在目标元素内部或者外部套个盒子,有些是自己认知错误,有些标签语法结构严谨,不能直接添加属性
原因:input仅仅选项按钮,没有包裹文本所以不识别
为input增加响适应
选项框和下拉菜单分成两部分,两端对其
再在选项框中分别设置,响适应
遇到问题;
mm在文本下方,
解决:添加d-flex
遇到问题:
添加之后,mm消失了
原因:input type="text"有默认字节长度,把mm挤掉了
解决:把sm改为md在变形前,就成一行显示
遇到问题:
两边边框突出去
原因:把row直接设置在了宽度100%,的标签中,两边没有内容,row自带外边距填充进内容
解决:单独设置row
底部
遇到问题:
左边文本设置上中下对齐,随着宽度减小,就会拉伸右边高度
设置,原本高度,文本就会居中
解决:
1.在图片外在设置一层盒子,拉伸的就是盒子高度,里面图片在设置居中
2.改变换行的宽度,在文本换行,增加高度之前换行
遇到问题:
在大窗口设置右对齐
用媒体查询,设置小于772px时左对齐
类名不识别
原因:bootstrap框架里面,有预设,所以识别justify-content-end;为右对齐,
但是这在css文件类名中添加属性就不正确,justify-content: end;错误
要写规范名称:justify-content: flex-end;正确
否则,语法错误,浏览器就不识别
遇到问题:怎么更改select下拉菜单的默认样式
解决:
方法一:
原理:将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片就行了。
清除原本样式
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*清除ie下面的默认样式*/
select::-ms-expand{display:none;}
代码
select {
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border: solid 1px #000;
/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("#.png") no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
方法二:
运用pointer-events: none属性
原理:pointer-events: none属性属性,大致可以理解为,可见不可触,就像"幽灵",或者是元素"虚化"
它是看的见摸不着的
设置一个绝对定位的元素,覆盖在原本的样式上,鼠标点在绝对定位的块级元素,无法触发,
当为绝对定位元素设置pointer-events: none属性,就使绝对定位"虚化"
鼠标点击,相当于透过"虚化"的绝对元素,点击被覆盖的样式,触发效果
总结:pointer-events: none属性,使元素具有点击穿透效果
扩展:
应用场景;
1.能为任何标签添加类似不可点击(类似禁用)的效果
2.如上,透过设置pointer-events: none,的元素,触发被它覆盖的元素
收获:同上
遇到的问题:导航栏的掌握的不熟练
明日计划:任务11
返回列表
评论