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;

相关推荐
一城烟雨_5 分钟前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想35 分钟前
调整vscode的插件安装位置
前端·cursor
低代码布道师2 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧2 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信2 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子3 小时前
CSS单位完全指南
前端·css
SunTecTec3 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
软件技术NINI3 小时前
html css js网页制作成品——HTML+CSS甜品店网页设计(4页)附源码
javascript·css·html
拉不动的猪4 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程5 小时前
ES练习册
java·前端·elasticsearch