CSS
关注
分享
扫一扫
ZhongJian_csdn
热爱Java和Python的前端工程师。
展开
-
网页中页面的最佳宽度CSS实现
在屏幕分辨率越来越多的情况下，我们的精力有限，如果不能根据不同的分辨率实现不同的样式表。那么，采用弹性布局，实现网页宽度自适应是一个不错的选择。 在做弹性布局时，最重要的也就是body标签或者最外层的div区域的设置。margin: 10px auto;这样可以保证网页在任何分辨率下都会居中。min-width: 780px;max-width: 1260px;...原创 2018-12-19 20:40:00 · 2025 阅读 · 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 · 9192 阅读 · 0 评论 -
block，inline和inline-block概念和区别
整体概念：block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。 大体来说HTML元素各有其自身的布局级别（block元素还是inli...原创 2018-12-23 22:05:21 · 151 阅读 · 0 评论 -
CSS空格和换行的处理
上次说了字符超长之后的处理方式（这里），现在我们在处理一下标签文本中的空格和换行。HTML 语言的空格处理，基本上就是直接过滤。这样的处理过于粗糙，完全忽视了原始文本内部的空格可能是有意义的。CSS 提供了一个white-space属性，可以提供更精确一点的空格处理方式。该属性共有六个值，除了一个通用的inherit（继承父元素），下面依次介绍剩下的五个值。1. white-space...原创 2018-12-22 23:26:54 · 6609 阅读 · 0 评论 -
CSS控制超出文字显示省略号
显示标签固定长度的文字，超出部分显示省略号，hover上去显示全部文字：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ellipsis</title> <style&am原创 2018-12-21 22:40:47 · 679 阅读 · 0 评论 -
前端页面用原生JavaScript实现放大镜效果
在逛购物网站时，经常会有我们移动到图片上时，图片旁边出现局部放大的图像。那么怎么实现这种放大镜的效果呢？这里给出两种方式，一种时原生js实现的，一种使用react来实现。原生JavaScript实现代码：point.png: <!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2018-12-26 23:56:42 · 991 阅读 · 0 评论 -
Flex 布局
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 这里收藏阮一峰老师的F...转载 2018-12-20 22:17:02 · 157 阅读 · 0 评论 -
网页设计常用的12中颜色
美国前100大网站的Logo，主要使用12种颜色。其中，采用蓝色的网站最多，红色排在第二种，黄色排在第三种。把这12种颜色的RGB代码列出来，供将来自己做网页时参考。1. 浅绿 #8cc5402. 深绿 #009f5d3. 暗蓝 #019fa04. 蓝色 #019fde5. 深蓝 #007cdc6. 深紫 #887ddd7. 浅紫 #cd...转载 2018-12-19 21:30:58 · 7681 阅读 · 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 · 1609 阅读 · 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 · 509 阅读 · 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 · 781 阅读 · 0 评论 -
页面滚动条样式自定义方法
在前端页面展示过程中，难免会有滚动条出现的情况。而原生的滚动条很多时候又与页面的风格不太符合，所以我们需要自定义我们需要的滚动条样式。那么怎样去改变呢？这里只需要在全局的CSS中添加如下样式代码便可：::-webkit-scrollbar { width: 8px; height: 8px;}/* 正常情况下滑块的样式 */::-webkit-scrollbar-...原创 2019-01-09 19:50:08 · 1279 阅读 · 1 评论