CSS
CSS内容
顾九七
满怀编程热情
展开
-
scss基础用法
一、sass基础css预编译处理语言,可实现css样式代码的重用,方便维护。比如下面的$fontColor,使用较多且需要修改时,只改此处的值即可1、基础用法 $fontColor: #333; body { color: $fontColor; }2、作用域 $mycolor: #333; body { $mycolor: #dfdfdd; co原创 2021-04-11 18:19:38 · 199 阅读 · 1 评论 -
list-style和list-style-type的区别
list-style和list-style-type的区别在清除列表项的样式时,可能会设置list-style:none,或者list-style-type:none,发现两者的效果是一样的,他们的区别是什么呢?其实,list-style-type是list-style的其中一个属性,list-style有三个属性,他们分别是(按顺序):list-style-type, list-style-position, list-style-image.可只设置其中两个或一个,且三者都有继承性。list-原创 2021-01-19 22:20:15 · 6603 阅读 · 0 评论 -
媒体查询技术、媒体查询语法
响应式布局之前我一直以为响应式布局是后台与用户实时回应,学过才知道,原来就是一个网站可兼容多种终端的。因为我们在设计网站的时候,大多会按常用设备的大小来布局,当他在大一些或者小一些的设备上打开时,网站的布局就会被打破,所以需要响应式布局来救场。但它花费的人力、物力比较大,所以很少使用,想看效果的话,可以去看下bootstrap网站,缩小视口看下效果。媒体查询技术即自动检测设备宽度,来选择相...原创 2020-04-02 21:19:53 · 148 阅读 · 0 评论 -
图标、iframes标签、语义化标签
图标(其本质为文字,样式按文字编辑来)首先介绍一个网站,阿里巴巴矢量图标库,链接为https://www.iconfont.cn/,我们来看下他的页面在这个网站中,我们可以找到常用网站及平常经常使用的图标,当我们使用时,新建一个项目,将需要的图标加到项目中,统一下载到本地,在文件夹中,会看到一个html文件,如下图里面就是使用教程图标引用有三种引入方式:unicode引用font...原创 2020-03-31 22:19:52 · 243 阅读 · 0 评论 -
弹性盒模型
弹性盒模型父元素:flex container子元素:flex items.当其有父元素且子元素的排布具有一定顺序时,我们可以将排布属性统一写在父元素中,若无父元素或者子元素排布无顺序时,可将排布属性分开写在子元素中,下面都会介绍。普通盒模型无宽时,子元素会自动将宽变为100%,从上到下依次排列。弹性盒模型无高时,子元素会自动将高变为100%,从左到右依次排列。现在先介绍一下父元素...原创 2020-03-30 23:53:58 · 539 阅读 · 0 评论 -
3D动画和盒阴影
3D动画和盒阴影3D动画下面的代码一般写在3D效果的父元素中,来开辟出三维的立体空间:transform-style:preserve-3d; /设定其为3D的空间/perspective: px;/来设定景深即z轴的长度/z轴始终与元素平面垂直,子元素中用transform来调动元素,使之成型。盒阴影—box-shadow必须有h-shadow-----水平阴影,即元素在水...原创 2020-03-28 23:06:48 · 154 阅读 · 0 评论 -
伪类选择器、动画样式、transform样式
伪类选择器 分为状态类伪类选择器、结构类选择器和属性类选择器。状态伪类选择器更改未访问的链接状态a:link{样式内容}更改已访问的链接状态a:visited{样式内容}鼠标移入时改变样式,以链接为例a:hover{样式内容}选定标签,鼠标按下不松开时,以链接为例a:active{样式内容}.改变被选中表单的样式input:checked{样式内容}...原创 2020-03-27 22:21:02 · 162 阅读 · 0 评论 -
表单元素、表格布局
表单元素表单主要用来信息收集或检索。表单form,属性action,其属性值为信息提交的地址;属性method,属性值post和get,都是提交的意思,但post比较安全。其下级元素如下:input —输入框。其属性有type\value等。当其type为text时,表示显示的是输入文本框,其value为当前文本框的性质,name为当前文本框的名字,placeholder为输入框中的...原创 2020-03-22 19:56:13 · 153 阅读 · 0 评论 -
背景样式、显示类型、透明度、圆角样式、渐变色样式、浮动样式、定位样式
行内盒模型属性1.line-height 行高 (当其设置为与其父级相同高度时,文字在内容区垂直居中)2. text-align 文本对齐 : center ; (居中) left (左对齐) right(右对齐) justify (两端对齐)3. text-indent : ; 文本缩进,单位既可用px,也可用em.1em等于1个字符大小4. text-decoration...原创 2020-03-21 12:51:27 · 138 阅读 · 0 评论 -
常用样式及盒模型
css常用样式补充内边距:padding:_ _ _ _;上 右 下 左。使用方式与margin相同。作用就是隔开内容区和边框。边框border:粗细 样式 颜色;样式主要有实线(solid)、虚线(dashed)、点线(dotted)、双实线(double)。还可以分开用,例如:border-top、border-bottom、border-left、border-right、bo...原创 2020-03-15 19:17:14 · 96 阅读 · 0 评论 -
HTML常用标签及选择器
web前端基础相关知识HTML基本标签1.注释标签小于号 感叹号 居中的小横线两条 内容 居中的小横线两条 大于号用于HTML文件代码后,大型文件由好多成员一起完成时,注释代码就是方便自己,也方便他人的有效工具。2. <!DOCTYPE>用来显示文件类型,例如:html文件为.一般DOCTYPE字样用大写。3.html 它是最大的根标签,其他所有内容都在这个标签内,有...原创 2020-03-12 10:14:29 · 339 阅读 · 0 评论