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;

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL8 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css