HTML常见问题及解决⽅法?集合版持续更新本⽂章——可收藏
1去除链接下划线
text-decoration: none;
2设置图⽚(边框)圆⾓
border-radius:35px;
border-radius:50%;
3去除列表样式
ul,li{
list-style: none;
}
4设置元素框的类型
display: inline;
display属性规定元素应该⽣成的框的类型。
默认值:inline
值描述
none此元素不会被显⽰。
block此元素将显⽰为块级元素,此元素前后会带有换⾏符
inline默认。此元素会被显⽰为内联元素,元素前后没有换⾏符。
inline-block⾏内块元素。(CSS2.1 新增的值)
list-item此元素会根据上下⽂作为块级元素或内联元素显⽰。
5设置元素边框样式(border):
/*可以设置的属性分别(按顺序):border-width, border-style,和border-color*/
p{
border:5px solid red;
}
border-style属性的常⽤属性:none 定义⽆边框。 solid 定义实线。 dashed 定义虚线。在⼤多数浏览器中呈现为实线。
6使某元素(或div)垂直居中:
margin: 0px auto;html ul标签
7.⾏内元素与块级元素
块级元素:
在HTML中,块级元素的⾼度为其内容的⾼度,宽度会扩展到与⽗容器同宽。默认情况下,块级元素会独占⼀⾏,并且元素前后⾏留空。⾏内元素:
在HTML中,⾏内元素的⾼度为其内容的⾼度,宽度会收缩包裹其内容,并尽可能的包紧。默认情况
下,⾏内元素只占据它对应标签的边框所包含的空间,⽽不会另起⼀⾏。
总结⼀下:块级元素与⾏内元素的区别:
块级元素⾏内元素
默认情况下,另起⼀⾏左右撑满垂直排列默认情况下,和其他元素⽔平排列在⼀⾏
⾼度,⾏⾼以及外边距和内边距都可设置padding/margin只有左右有效,上下⽆效
默认情况下宽度是它本⾝容器宽度的100%宽⾼就是它内容区域的宽⾼,不可改变可以容纳⾏内元素和其他块级元素只能容纳⽂本或者其他⾏内元素
常见的块级元素与⾏内元素:
块级元素⾏内元素
< h1>~< h6 >,不同级别标题< a>,HTML锚元素
< div>,HTML⽂档分区元素< span>,组合⾏内元素
< p>,⽂本的⼀个段落< img>,HTML图⽚标签
< pre>,预格式化⽂本< input>,HTML⽂本标签
< form>,HTML表单元素< textarea>,HTML⽂本域
< table>,HTML表格元素< button>,HTML按钮
< ul>/< ol>/< dl>,HTML列表< label>,表单元素标注标签< li>,HTML列表项元素< select>,下拉选项列表< header>/< section>/< footer>< em>,强调⽂本标签
< nav>/< article>/< aside>< i>,斜体⽂本标签
⾏内元素转换为块级元素
1.转换为普通块级元素:display:block; 常⽤
2 转换为内联块级,不单独占⼀⾏: display:inline-block; 常⽤
3 转化为内联块级,不单独占⼀⾏,但float使得⾏内元素脱离了⽂档流,记得使⽤clear清除浮动
float: left/right;
4 使⽤定位 使⽤absolute或者fixed定位也可将⾏内元素隐式转化为块级元素,但也会使之脱离原先的⽂档流。
float和定位,都可以隐式的将⾏内元素转化为块级元素。
块级元素转换为⾏内元素
1 转化为⾏内元素 display:inline;
2 转化为内联块级,不单独占⼀⾏ display:inline-block;
jQuery中实⽤⽅法:
选择器的使⽤扩展⽅法:
例如有⼀列表
<nav id="nav">
<li><span></span><p>就东会员</p></li>
<li><span></span><p>购物车</p></li>
<li><span></span><p>我的关注</p></li>
<li><span></span><p>我的⾜迹</p></li>
<li><span></span><p>我的消息</p></li>
<li><span></span><p>咨询JIMI</p></li>
</nav
如何在jQuery中获取某⼀个li的选择:
以本例⼦说明:
1.⾸先定义⼀个变量 index⽤于保存下标。
var index =$("#nav li span").index("#nav li span");
2.进⾏整理使⽤
$("#nav li:eq("+ index +") span~p").hide();
$("#nav li:eq(1) span~p").hide();
注:具体可以使⽤在(当⿏标点击某个li时,或当⿏标悬停在某个li上时)

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。