css:感觉稍微高级一点的布局

news/2024/11/27 4:35:59/

精灵图

有时候我们下载网页里的小元素图片的时候,就会一下子下载一大张,这就是精灵图,也叫雪碧图(sprites)

一个网页由很多图像作为修饰,当网页中图像过多时,服务器会频繁地解释和发送氢气图片,造成服务器请求压力过大,降低页面的加载速度;精灵图就是为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度而诞生的

精灵图的使用

精灵图就是一个背景图片大合集, 你使用的时候把该用的图片放到该放的位置就好了

使用background-position,通过对背景图片定位的x和y坐标移动

浏览器的定位是以左上角为原点,竖直向下为正方向;我们截取的位置一般是不变的,所以一般移动图像都是往上往左移动,数值一般为负,

可以在一张图片上显示不同的你需要的背景图片

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.spr {float: left;margin: 100px auto;width: 140px;height: 140px;background: url(d1c79313910a7d77474f2a4e9d19ad30.png);background-position: -260px -165px no-repeat;}.spr1 {float: left;margin: 100px auto;width: 140px;height: 140px;background: url(d1c79313910a7d77474f2a4e9d19ad30.png) -450px -690px no-repeat;}.spr2 {float: left;margin: 100px auto;width: 140px;height: 140px;background: url(d1c79313910a7d77474f2a4e9d19ad30.png) 20px -170px no-repeat;}</style>
</head><body><div class="spr"></div><div class="spr1"></div><div class="spr2"></div>
</body></html>

拼一个自己的名字捏

精灵图有一个很大的问题就是不便于后期修改,例如你想换精灵图中的一个小图标,就必须要交给美工,前端再调整代码,而且图片的大小也挺大的,图片本身的放大缩小会导致失真,所以就引入了另一种技术:

字体图标

引入字体图标

字体图标的优点:

轻量级:一个图标字体比一系列的图像小。一旦字体加载了,图标就会马上渲染出来,减少了服务器的请求

灵活性:本质是文字,可以随意更改颜色、产生阴影、透明效果、旋转等

兼容性:几乎支持所有的浏览器

但是字体图标不能完全代替精灵图,一般只适用于样式比较简单的小图标

字体图标可以去网上下载:SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon

也有国内的iconfont-阿里巴巴矢量图标库

选择我们需要的图标点右下角

然后获取一个压缩包,解压:

获得这几个文件夹之后讲fonts文件夹移动到我们当前项目的根目录下(兼容字体)

之后将字体图标引入css中:将style.css文件中的前部分代码粘贴到html文件的sytle标签内

@font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?ea0gga');src:  url('fonts/icomoon.eot?ea0gga#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?ea0gga') format('truetype'),url('fonts/icomoon.woff?ea0gga') format('woff'),url('fonts/icomoon.svg?ea0gga#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}

我们称之为字体声明

然后在我们解压产生的demo.html文件内获取这些字体图标的特殊符号,复制红框框里的框框:

如果没有放到当前项目的根目录下就显示不出来图标

我们创建一个span,把复制的小方框放在span里,再给它添加样式声明

font-family: 'icomoon';

可以看见字体图标已经生效,此时他已经拥有文字的特性,可以进行放大缩小,改变颜色

一般用<i>标签放置字体图标

更新字体图标库

挂ssh更新字体图标太麻烦了。。用到再说吧而且听说阿里没有这么麻烦。。再说吧

css三角的做法

有些界面在你hover的时候会有小三角,我们学做一下这个小三角

当对一个box的四边施加边框的时候,并且不设置宽高

 .box1 {width: 0;height: 0;border-top: 10px solid pink;border-bottom: 10px solid red;border-left: 10px solid blue;border-right: 10px solid green;}

我们会发现三角形就是这么出现的

所以我们可以让其中三个颜色为透明,这样就有三角形了:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 0;height: 0;border-top: 10px solid pink;border-bottom: 10px solid red;border-left: 10px solid blue;border-right: 10px solid green;}.box2 {width: 0;height: 0;border: 50px solid transparent;border-top-color: pink;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body></html>

做一个上面带小三角的提示框:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box3 {position: relative;top: 100px;width: 150px;height: 120px;background-color: aqua;}.box3 span {position: absolute;width: 0;height: 0;/*为了照顾兼容性*/top: -40px;left: 50%;margin-left: -20px;line-height: 0;font-size: 0;border: 20px solid transparent;border-bottom-color: aqua;}</style>
</head><body><div class="box3"><span></span></div>
</body></html>

我们还可以利用这个边框设计直角三角形

 .test {width: 0;height: 0;/*        这种写法也行,但是没有类的概念     border-top: 100px solid transparent;border-right: 50px solid crimson; */border-color: transparent red transparent transparent;border-style: solid;border-width: 100px 50px 0 0;}

我们也可以拿三角形拼一个梯形

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.test0 {position: relative;float: left;width: 100px;height: 50px;background-color: red;}.test1 {position: absolute;right: 0;width: 0;height: 0;/*        这种写法也行,但是没有类的概念     border-top: 100px solid transparent;border-right: 50px solid crimson; */border-color: transparent rgb(255, 255, 255) transparent transparent;border-style: solid;border-width: 50px 30px 0 0;}</style></head><body><div><span class="test0"><i class="test1">dsdddd </i></div></span></body></html>

更改界面样式

在目标元素上更改鼠标的样式

属性描述
default默认的白色箭头
pointer小手
move移动
text文本
not-allowed禁止

更改表单样式,我们提倡去掉表单轮廓线和文本域的右下角拖动按钮

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input,textarea {outline: none;}textarea {resize: none;}</style>
</head><body><!-- 取消表单轮廓+防止拖拽文本域 --><input type="text"><textarea name="" id="" cols="30" rows="10"></textarea>
<!--尽量写在一行--></body></html>

针对行内元素或行内块元素(图片、文本域)使用的垂直对齐小妙招:

vertical-align:baseline,默认值,元素放置在父元素的基线上
                top,把元素的顶端与行中的最高元素的顶端对齐
                middle,把此元素放置在父元素的中部
                bottom,把元素的顶端与行中最低的元素的顶端对齐

从上到下四条线分别是顶线、中线、基线、底线,很像英语字母的四线三格,深灰色的部分就是行高

给用户模块声明:

  <!-- 用户模块 --><div class="user"><img src="images/user.png" alt="" style="vertical-align: middle;">qq-August</div>

图片和文字居中:

当我们想用一张图片撑满盒子的时候有时候会遇到这种情况:

因为图片不是块元素,图片没有和盒子对齐,因为我们默认设置的盒子和图片是基线对齐,只要我们设置成底线对齐就好了

<div class="sss"><img src="../demo/哈哈哈.png" alt="" style="vertical-align: bottom;"></div>
</body>

只要不是基线对齐就好了:

或者把图片转为块级元素                                

单行文本显示省略号

1、强制一行内显示文本

 white-space: nowrap;   (normal是自动换行) 

2、超出部分隐藏

 overflow: hidden;

3、文字用省略号替代超出的部分

 text-overflow: ellipsis;

多行文本显示省略号

多行文本溢出显示为省略号的写法兼容性不好,适合webkit浏览器或移动端

overflow:hidden;

text-overflow:ellipsis;

使用弹性伸缩盒子(以下有兼容问题)

display: -webkit-box;

限制一个块元素内显示的文本行数,为2

 -webkit-line-clamp: 2;

设置或检索伸缩盒子的子元素排列方式

 -webkit-box-orient: vertical;

实现这种效果,第二行后面有省略号

建议让后端人员做这个,截取字符串再给前端传回去

一些布局小技巧:

我们之前学表单的时候,里的太近的单元格边框可以拿border-collapse:collapse;来合并单元格边框

如果是浮动的带边框的盒子,就可以用margin值,设置为负边框值,就可以实现类似合并边框的样式

此时边框堆在一起

使用margin-left:-2px;边框就在浮动的情况下左移了2px

我们对所有的盒子同时施加这个效果也是一样的

这种情况如何实现鼠标经过边框,边框会改变颜色的效果?如果直接对hover使用边框变色的话,每个盒子的右边框都被右边的盒子盖住了,颜色没办法正常显示,所以我们给浮动的盒子加上相对定位,这样既可以占用原来位置,也可以露出边框:

div:hover {position: relative;border: 2px solid blue;}

如果盒子本身也有相对定位,我们可以使用z-index提高盒子的层级

做一个网页切换的小按钮(感觉这里讲得乱乱的):

对父盒子添加text-align:center;可以让里面的块和行内块都居中

行内块还可以做页面跳转的样式:

:focus可以实现选中后实现样式,选完以后恢复原来的样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box a {display: inline-block;width: 36px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;text-align: center;line-height: 36px;text-decoration: none;color: black;}.box a:focus {background-color: transparent;border: none;}.box .last,.box .next {width: 85px;}.box .none {background-color: transparent;border: none;}.box input {height: 36px;width: 45px;border: 1px solid #ccc;outline: none;}.box button {width: 60px;height: 36px;</style></head><body><div class="box"><a href="#" class="last">&lt;&lt;上一页</a><a href="#" class="selected">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#" class="none">...</a><a href="#" class="next">&gt;&gt;下一页</a>到第<input type="text">页<button>确定</button></div>
</body></html>

css对网页进行初始化需要用css对浏览器默认的效果清除+设置


http://www.ppmy.cn/news/1550238.html

相关文章

如何定制谷歌浏览器的外观主题

在数字化时代&#xff0c;浏览器已成为我们日常生活中不可或缺的一部分。谷歌浏览器&#xff0c;以其快速、稳定和丰富的扩展程序而广受用户喜爱。但你知道吗&#xff1f;除了强大的功能外&#xff0c;谷歌浏览器还允许用户通过定制外观主题来打造更加个性化的浏览体验。本文将…

如何在 PyTorch 分布式训练中使用 TORCH_DISTRIBUTED_DEBUG=INFO 进行调试

如何在 PyTorch 分布式训练中使用 TORCH_DISTRIBUTED_DEBUGINFO 进行调试 在使用 PyTorch 进行分布式训练时&#xff0c;调试分布式训练过程中的问题可能非常棘手。尤其是在多卡、多节点的训练环境中&#xff0c;常常会遇到通信延迟、同步错误等问题。为了帮助调试这些问题&am…

【纸飞机串口调试工具】预设曲线名称

目录 纸飞机串口工具介绍软件下载和视频教程功能背景使用介绍配置内容预设场景 使用演示 纸飞机串口工具介绍 纸飞机一款性能强劲且专业的串口/网络/HID调试助手&#xff0c;具有多窗口绘图、关键字高亮、数据分窗和数据过滤等众多功能&#xff0c;可以极大的方便嵌入式开发人…

【论文解析】HAQ: Hardware-Aware Automated Quantization With Mixed Precision

作者及发刊详情 inproceedings{haq, author {Wang, Kuan and Liu, Zhijian and Lin, Yujun and Lin, Ji and Han, Song}, title {HAQ: Hardware-Aware Automated Quantization With Mixed Precision}, booktitle {IEEE Conference on Computer Vision and Pattern Recognit…

前端面试题大汇总:React 篇

基础知识 1. 什么是 React&#xff1f;它的主要特点是什么&#xff1f; React 是一个用于构建用户界面的 JavaScript 库&#xff0c;由 Facebook 开发并维护。它主要用于构建单页应用程序&#xff08;SPA&#xff09;和复杂的用户界面。React 的主要特点包括&#xff1a; 组件…

python VS c++

一、语法特点 Python&#xff1a; 语法简洁、优雅&#xff0c;代码可读性极强&#xff0c;采用缩进来表示代码块&#xff0c;摒弃了像 C 那样使用大括号的传统方式&#xff0c;使得代码看上去十分清晰简洁。例如&#xff1a; ​ if 5 > 3:print("5大于3") elif 5 …

【高阶数据结构】LRU Cache

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解什么是LRU Cache&#xff0c;并能简单的模拟实现。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安! &…

【Angular】eventDispatcher详解

eventDispatcher 是一种设计模式&#xff0c;用于在对象之间传递事件。它允许对象订阅和发布事件&#xff0c;从而实现松耦合的通信机制。以下是一个详细的解释和示例代码。 1. 基本概念 事件&#xff08;Event&#xff09;&#xff1a;一个动作或状态变化&#xff0c;可以被…