1.在input两侧添加额外元素 直接上图
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text"class="form-control" value="" placeholder="啦啦啦"/>
<span class="input-group-addon">¥</span>
</div>
必须为input添加form-control类 注:
向 .form-control 添加前缀或后缀元素的步骤如下:
- 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中。
- 接着,在相同的 <div> 内,在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
- 把该 <span> 放置在 <input> 元素的前面或者后面。
- 通过向 .input-group 添加相对表单大小的 class(比如 .input-group-lg、input-group-sm、input-group-xs )来改变输入框组的大小。输入框中的内容会自动调整大小。
2.display: none和visibility:hidden的区别
display: none;不为被隐藏的对象保留其物理空间;
visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明;
visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,会保留元素的空间,在浏览时保留位置;而display:none视为不存在,且不加载!
)1、visibility:hidden--为隐藏的对象保留其物理空间HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。
)2、display: none--不为被隐藏的对象保留其物理空间HTML元素(对象)的宽度、高度等各种属性值都将“丢失”
3.超链接css属性排列缘由
超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不再具有hover和active了,解决方法是改变CSS属性的排列顺序
a:link {}
a:visited {}
a:hover {}
a:active {}
4.添加样式的方式有
内联式:即直接加在标签上的样式 如:<div style="width:100px;"></div>
导入样式:@import url("css/style.css")
嵌入式:即用<style>.classname {width: 100px;}</style>标签括起来写在页面中的样式
外部引用式:即将样式单独放到一个文件夹中,然后用link标签引入页面的形式,如:<link rel="stylesheet" type="text/css" href="Css.css" />
导入样式:@import url("css/style.css")
嵌入式:即用<style>.classname {width: 100px;}</style>标签括起来写在页面中的样式
外部引用式:即将样式单独放到一个文件夹中,然后用link标签引入页面的形式,如:<link rel="stylesheet" type="text/css" href="Css.css" />