![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
ZhongJian_csdn
热爱Java和Python的前端工程师。
展开
-
网页中页面的最佳宽度CSS实现
在屏幕分辨率越来越多的情况下,我们的精力有限,如果不能根据不同的分辨率实现不同的样式表。那么,采用弹性布局,实现网页宽度自适应是一个不错的选择。 在做弹性布局时,最重要的也就是body标签或者最外层的div区域的设置。margin: 10px auto;这样可以保证网页在任何分辨率下都会居中。min-width: 780px;max-width: 1260px;...原创 2018-12-19 20:40:00 · 1948 阅读 · 1 评论 -
ant design 中css样式覆盖
在ant design中想要覆盖原生组件的样式,因为CSS modules 的使用会使得class的名字被重新编译而没有效果;对此我们可以使用全局css来达到目的。写法如下: .override-ant-btn { :global(.ant-btn) { border-radius: 16px; }}参考链接: https://www.yuque.com/ant...原创 2018-12-18 23:07:13 · 9019 阅读 · 0 评论 -
block,inline和inline-block概念和区别
整体概念:block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。 大体来说HTML元素各有其自身的布局级别(block元素还是inli...原创 2018-12-23 22:05:21 · 125 阅读 · 0 评论 -
CSS空格和换行的处理
上次说了字符超长之后的处理方式(这里),现在我们在处理一下标签文本中的空格和换行。HTML 语言的空格处理,基本上就是直接过滤。这样的处理过于粗糙,完全忽视了原始文本内部的空格可能是有意义的。CSS 提供了一个white-space属性,可以提供更精确一点的空格处理方式。该属性共有六个值,除了一个通用的inherit(继承父元素),下面依次介绍剩下的五个值。1. white-space...原创 2018-12-22 23:26:54 · 6502 阅读 · 0 评论 -
CSS控制超出文字显示省略号
显示标签固定长度的文字,超出部分显示省略号,hover上去显示全部文字:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ellipsis</title> <style&am原创 2018-12-21 22:40:47 · 621 阅读 · 0 评论 -
前端页面用原生JavaScript实现放大镜效果
在逛购物网站时,经常会有我们移动到图片上时,图片旁边出现局部放大的图像。那么怎么实现这种放大镜的效果呢?这里给出两种方式,一种时原生js实现的,一种使用react来实现。原生JavaScript实现代码:point.png: <!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2018-12-26 23:56:42 · 934 阅读 · 0 评论 -
Flex 布局
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 这里收藏阮一峰老师的F...转载 2018-12-20 22:17:02 · 140 阅读 · 0 评论 -
网页设计常用的12中颜色
美国前100大网站的Logo,主要使用12种颜色。其中,采用蓝色的网站最多,红色排在第二种,黄色排在第三种。把这12种颜色的RGB代码列出来,供将来自己做网页时参考。1. 浅绿 #8cc5402. 深绿 #009f5d3. 暗蓝 #019fa04. 蓝色 #019fde5. 深蓝 #007cdc6. 深紫 #887ddd7. 浅紫 #cd...转载 2018-12-19 21:30:58 · 7245 阅读 · 0 评论 -
CSS中背景图片定位方法
作者: 阮一峰在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%;上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。...转载 2018-12-19 22:55:53 · 1537 阅读 · 0 评论 -
CSS使用技巧
作者: 阮一峰1. 文字的水平居中将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center;2. 容器的水平居中先为该容器设置一个明确宽度,然后将margin的水平值设为auto即可。 div#container { width:760px; margin:0 auto; }3. 文字的垂直...转载 2018-12-19 22:58:54 · 469 阅读 · 0 评论 -
CSS安全字体的写法
font-family 属性应该使用若干种字体名称作为回退系统,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一个字体,则会尝试下一个。p{font-family:'Times New Roman', Times, serif}Serif 字体font-family 示例文本 Georgia, serif This is a heading...原创 2018-12-19 20:50:24 · 748 阅读 · 0 评论 -
页面滚动条样式自定义方法
在前端页面展示过程中,难免会有滚动条出现的情况。而原生的滚动条很多时候又与页面的风格不太符合,所以我们需要自定义我们需要的滚动条样式。那么怎样去改变呢?这里只需要在全局的CSS中添加如下样式代码便可:::-webkit-scrollbar { width: 8px; height: 8px;}/* 正常情况下滑块的样式 */::-webkit-scrollbar-...原创 2019-01-09 19:50:08 · 1233 阅读 · 1 评论