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;

相关推荐
Json_1817901448029 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端