css
css的知识总结
大鸡腿123
从今天开始,记录自己在学习前端和web安全的一些资料和问题
展开
-
html+css中最后一个li没有竖线
先放效果:我们经常会遇到这种情况,总是不知道怎么弄。先来说说竖线:其实竖线有很多种写法,你可以用li标签的border-right,可以把竖线也当做一个li,还可以用li的after伪元素。而如果想要第一个或最后一个li没有竖线效果,之前经常用的就是给其他的li单独设置class规定样式,现在有一个更好的办法。css中的:not()选择器。 &:not(:last-child)::after { content: "";原创 2020-09-08 19:27:18 · 1531 阅读 · 1 评论 -
文字超出内容部分用...隐藏
单行网上说的方法也大多都是这种的,用css的text-overflow属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &原创 2020-08-13 18:12:24 · 959 阅读 · 0 评论 -
css预处理器Sass
css预处理器SassSass的安装变量作用域!globalSass嵌套标签属性@import@mixin@extendSass计算Sass伪类Sass编译SassSass的安装可以使用npm安装,但就是有些慢,可以用淘宝镜像。npm安装命令:npm install -g sass安装成功:输入sass --version1.26.10 compiled with dart2js 2.8.4具体npm安装教程什么的可以去网上找找。Sass 扩展了 CSS3,增加了规则、变量、混入、选择原创 2020-08-09 18:22:25 · 264 阅读 · 0 评论 -
图片无法撑满整个屏幕或div
原图:只引入图片:body{ background: url(2.jpg);}加上如下代码:body{ background: url(2.jpg); /* 引入2.jpg,不重复平铺,水平垂直居中 */ background-size: cover; /* 放大背景图片,使其覆盖整个背景区域,但可能有些部分无法显示 */ background-a原创 2020-07-12 16:19:55 · 1445 阅读 · 0 评论 -
前端学习第一阶段css部分+css3(过渡,动画)+定位+浮动+响应式
前端学习路线第一阶段:HTML、css、javascriptHTML部分链接:原创 2020-07-12 21:55:51 · 465 阅读 · 0 评论 -
CSS Flex布局属性讲解
flexbox弹性盒子是当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式,即响应式设计。Flex弹性容器属性displayflex-directionjustify-contentalign-itemsflex-wrapalign-content弹性子元素属性order居中align-selfflex弹性容器属性display在弹性盒子中,弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值原创 2020-08-04 17:32:49 · 293 阅读 · 0 评论 -
CSS中px/rem/em/vw/vh 的区别
1原创 2020-08-04 14:58:38 · 680 阅读 · 0 评论 -
轮播图写法详细汇总(原生JS+BootStrap+jQuery)+渐变轮播
轮播图原生JS写法BootStrapjQuery原生JS写法轮播图主要包括三个功能:自动循环播放点击左右箭头换页点击小圆相应的图显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2020-07-25 20:31:58 · 463 阅读 · 0 评论 -
css导航栏(二级菜单)
效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航栏</title> <style> *{ mar原创 2020-07-14 16:29:41 · 5895 阅读 · 1 评论 -
css响应式设计
1.设置viewport(窗口)<meta name="viewport" content="width=device-width, initial-scale=1.0">width:可以控制窗口大小,device-width是设备的宽度。intitial-scale:当页面第一次加载时候的缩放比例。maximum-scale:允许的最大缩放比例。minumum-scale:允许的最小缩放比例。user-scalable:是否允许用户缩放。2.媒体查询@media根据屏幕的原创 2020-07-14 14:46:12 · 155 阅读 · 0 评论 -
position和float详解
在我写的一个博文中详细讲解了:https://blog.csdn.net/yiersan__/article/details/107289271原创 2020-07-13 21:57:03 · 115 阅读 · 0 评论 -
css中relative和margin的区别
在写网页时,有时候一个效果的实现由很多种方法,比如我们想要一个盒子向下向左移动50px。这里主要说一下relative和margin来实现的区别。我们的目的是黄色div移动。relative为div3加上以下代码:position: relative;left: 50px;top: 50px;可以看到,我们达到了目的,此时div3向右下偏移50px,所占据的空间是宽度为div3到右边屏幕长度,高度为div3的高度50px。margin加上以下代码:margin-top: 5原创 2020-07-13 21:06:07 · 442 阅读 · 0 评论