css基础之用户界面样式、导航栏和三角

用户界面样式

一、鼠标样式cursor

default默认

pointer小手

move移动

text文本

not-allowed禁止

二、轮廓线outline

去掉轮廓线

1.outline: 0;

2.outline: none;

三、防止拖拽文本域resize

resize: none;

四、vertical-align

实现图片与表单(行内块元素)或者文字对齐,只能是行内块元素或者行内元素

vertical-align: top;

vertical-align: middle;

vertical-align: baseline;(默认对齐)

vertical-align: bottom;

五、解决图片底部默认空白缝隙问题

给图片添加vertical-align: top|middle|bottom;

把图pain转换为块级元素

六、溢出的文字用省略号代替

单行文本:

1.先强制一行显示文本:white-space: nowrap;

2.超出的部分隐藏overflow: hidden;

3.文字用省略号代替超出部分:text-overflow: ellipsis;

多行文本:

1.overflow: hidden;text-overflow: ellipsis;

2.弹性伸缩盒子模型显示:display: -webkit-box;

限制在一个块元素显示的文本的行数:-webkit-lie-clamp: 2;

设置或检索伸缩盒对象的子元素的排列方式:-webkit-box-orient: vertical;

七、常见布局技巧

1.margin负值运用

让每个盒子向左移动-1px,压住相邻边框

鼠标经过某个盒子时,提升当前盒子的层级即可,如果没有定位则添加相对定位,如果有定位则添加z-index

2.文字围绕浮动元素运用:

给图片添加浮动,浮动不会压住文字,即可实现

3.行内块元素运用:

给父盒子加text-align: center;所有元素都会实现水平对齐

导航栏

实际开发中,我们不会用链接a,而是用li包含链接(li+a)的做法

1.li+a语义更清晰

2.直接用a搜索引擎有堆砌关键字嫌疑,从而影响网站排名

3.让导航栏在一行中显示,给li加浮动,因为li是块级元素,需要在一行中显示

4.导航栏可以不加宽度,将来继续添加其他文字

5.因为导航栏里的文字不一样多,所以最好给链接a加padding值撑开盒子,而不是指定宽度

三角

div {

width:0;

height:0;

line-height:0;

font-size:0;

border:50px solid transparent;

border-left-color:pink

}

三角巧妙运用

得到右侧的不对称的三角形i

/把上边框宽度调大 /

border-top:100px solid transparent;

border-right:50px solid skyblue;

/左边和下边的边框宽度设置为0 /

border-bottom:0 solid blue;

border-left:0 solid green;

或者

width:0;

height:0;

border-color:transparent red transparent transparent;

border-style:solid;

border-width:22px 8px 00;

相关推荐
careybobo33 分钟前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之2 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端2 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡2 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木3 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!4 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷4 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
自动花钱机5 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
拉不动的猪5 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
拉不动的猪5 小时前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试