css
趋之
这个作者很懒,什么都没留下…
展开
-
CSS中表格介绍,表格相关的样式以及长表格的使用
表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具,表格就是用来表示一些格式化的数据的,比如:课程表、银行对账单,在网页中也可以来创建出不同的表格原创 2023-12-28 18:49:04 · 1173 阅读 · 0 评论 -
CSS中背景设置——渐变色和放射渐变
渐变:通过渐变可以设置一些复杂的背景颜色,可以从实现一个颜色向其他颜色过渡的效果渐变是图片,通过 background-image设置。原创 2023-12-28 18:46:19 · 975 阅读 · 0 评论 -
CSS中设置背景的7个属性及简写background注意点
css中背景的设置至关重要,也是一个难点,因为属性众多,对应的属性值也比较多,这里详细的列举了背景相关的7个属性及对应的属性值,并附上演示代码,后期要用的话,可以随时查看,那我们坐稳开车了······原创 2023-12-27 09:16:18 · 2109 阅读 · 0 评论 -
CSS中元素设置定位,水平居中布局分析
因为left和right的值默认是auto,所以如果不设置left和right,则等式不满足时,就会自动调整这两个值。-在left,right设置为0的时候,如果width设置auto,,无论margin如何设置,都是调整width。-当开启决定定位后,水平方向的布局等式就会加上left,right两个值,此时规则和之前一样,只是多添加了两个值。1:如果9个值中没有auto,则自动调整right值以使等式满足。2:如果有auto,则自动调整auto的值以使等式满足。-可设置auto的值。原创 2023-12-27 09:15:58 · 394 阅读 · 0 评论 -
CSS中更加高级的布局手段——定位之固定定位及粘滞定位
(4)没有达到top值之前正常显示,达到top值之后类似于固定定位,不会跟随滚动条滚动而滚动。fixed:开启元素的固定定位(也是绝对定位的一种)- 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素。-当元素的position属性设置为sticky时,则开启了元素的粘滞定位。(1)以浏览器为参照物(体现固定定位特点);当元素的position属性设置fixed时,则开启了元素的固定定位。(3)粘滞定位可以在元素到达某个位置时,将其固定。(3)固定定位不占有原来的位置,即脱离标准流。原创 2023-12-26 19:19:48 · 439 阅读 · 0 评论 -
CSS中更加高级的布局手段——定位之绝对定位
5.绝对定位会改变元素的性质,开启BFC属性,内联元素变成行内块元素,块元素的宽度和高度默认都被内容撑开。如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位,html (根元素,初始包含块)fixed:开启元素的固定定位(也是绝对定位的一种)(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝')- 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素。-定位情况下:离他最近的开启了定位的祖先元素。3.绝对定位是相对于离他最近的包含块定位的。原创 2023-12-26 19:19:30 · 526 阅读 · 0 评论 -
CSS中更加高级的布局手段——定位之相对定位
当开启了元素的定位(position属性值是一个非static的值)时,可以通过left right top bottom四个属性来设置元素的偏移量,越大越向反方向移动。通常偏移量只需要使用两个就可以对一个元素进行定位,一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位。当元素的position属性设置为relative时,则开启了元素的相对定位 ==》自恋型。- 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素。原创 2023-12-25 15:37:04 · 459 阅读 · 0 评论 -
CSS中浮动float带来的高度塌陷问题及4种解决方案
当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题。原创 2023-12-25 15:36:46 · 1500 阅读 · 0 评论 -
CSS中页面的布局案例-利用浮动
(接期末课程设计题目,支持定制)利用浮动完成页面布局。原创 2023-12-22 10:00:03 · 484 阅读 · 0 评论 -
CSS中水平布局手段浮动float属性及其需掌握的特点
块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流使用float来使元素浮动,使一个元素向其父元素的左侧或右侧移动,从而脱离文档流可选值:none,默认值,元素默认在文档流中排列left,,向页面的左侧浮动right,向页面的右侧浮动。原创 2023-12-22 09:59:42 · 506 阅读 · 0 评论 -
CSS中设置盒子大小-box-sizing,设置盒子阴影- box-shadow ,设置盒子圆角-border-radius,属性及其属性值
border-box 宽度和高度用来设置整个盒子可见框的大小,包括边框,padding,内容区。box-sizing 属性用来设置盒子尺寸的计算方式, 也就是 width/height 指的是谁。border-radius 用来设置圆角 以XXpx为半径画圆。默认情况下:盒子可见宽的大小由内容区,内边距,边框共同决定。第一个值:水平偏移量 正->左 负->右。第二个值:垂直偏移量 正->下 负->上。还可以单独设置一角的圆角。设置元素的阴影效果,不会影响到页面布局。原创 2023-12-21 20:44:59 · 578 阅读 · 0 评论 -
CSS中2种去除浏览器默认样式方法—reset.css
浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的元素都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。原创 2023-12-21 19:23:56 · 727 阅读 · 0 评论 -
CSS中内联元素的盒子模型特点?行内元素,块元素,行内块元素之间的相互转换
4: 可以设置水平方向的外边距,水平方向的相邻外边距不会重叠,而是求和,但不支持垂直外边距。inline-block 行内块块元素(即可以设置宽高,又不会独占一行)2: 可以设置padding,但垂直方向padding不会影响页面的布局,不会挤别人。hidden 元素不在页面中显示(隐藏一个元素),位置依然保留。3: 可以设置边框,但是垂直的边框不会影响到页面的布局,不会挤别人。none 元素不在页面中显示(隐藏一个元素)inline 将元素设置为行内元素。block 将元素设置为块元素。原创 2023-12-21 19:23:26 · 433 阅读 · 0 评论 -
CSS中常用的10个文本样式属性
一个页面中,文本样式,是必不可少的,当然css也给我们准备了很多很多很多的文本样式,以下列举了10个常用的文本样式属性及常用的属性值,掌握了,也基本满足使用了。超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline。父元素如果不设置高,由图片撑开,此时图片的底部就会有三像素的空白。- 通过调整文本之间的空格的大小,来达到一个两端对齐的目的,也可以让图片水平居中。2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰。原创 2023-12-08 08:35:38 · 809 阅读 · 0 评论 -
css新闻链接案例
background-image: url(./图片素材/dotBg.gif);利用html和css构建出新闻链接案例,使用渐变色做出背景色变化。利用背景图片,调整位置完成。原创 2023-11-30 15:52:39 · 534 阅读 · 0 评论 -
CSS中超链接的4种伪类
总结:link和visited是a标签独有的状态,hover和active是所有的元素都可以设置的。2、 :visited 用来表示访问过的链接,由于隐私的原因,所以visited只能改颜色。1、 :link 用来表示未访问过的链接(正常链接)正确排序:L-V-H-A love hate原则。3、:hover 用来表示鼠标移入的状态。4、:active 鼠标点击后的状态。原创 2023-11-30 15:36:13 · 1140 阅读 · 0 评论 -
CSS中样式冲突及选择器权重问题
通过不同的选择器选中同一个元素,进行一样的样式设定,发生样式冲突时,应用哪一个样式由选择器的权重(优先级)决定。4,选择器的累加,不会超过上一级数量级,例如:类选择器再高也不会超过id选择器 量变达不到质变。1,比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则优先显示。通配符、子选择器、相邻选择器等。如*、>、+ 0000。3,如果优先级计算后相同,此时则优先使用靠下的样式。2,(并集选择器)分组选择器是单独计算的。总结:一般来说:选择器越具体,优先级越高。继承的样式 没有优先级。原创 2023-11-30 15:34:43 · 534 阅读 · 0 评论 -
CSS中常用的伪元素选择器
伪元素,表示页面中一些特殊的并不真实存在的元素(元素的位置)1,::first-letter 表示第一个字母。2,::first-line 表示第一行。3,::selection 选中的内容。4,::before 元素的开始位置。5,::after 元素的结束位置。before和after必须要结合content使用。原创 2023-11-21 16:05:01 · 681 阅读 · 0 评论 -
CSS中常用的伪类选择器
1、 :first-child 第一个子元素2、 :last-child 最后一个子元素3、 :nth-child() 选中第n个子元素特殊值:n 所有的、2n或even 选中偶数、2n+1或odd 选中奇数—以上这些伪类都是根据所有的子元素进行排序1、:first-of-type2、:last-of-type3、:nth-of-type()功能跟上面相似,原创 2023-11-21 16:03:20 · 520 阅读 · 0 评论 -
css中5种属性选择器
属性名=属性值]{} 选择含有指定属性和属性值的元素。[属性名^=属性值]{} 选择属性值以指定值开头的元素。[属性名$=属性值]{} 选择属性值以指定值结尾的元素。[属性名*=属性值]{} 选择属性值含有某值的元素。[属性名]{} 选择含有指定属性的元素。原创 2023-11-20 15:51:46 · 373 阅读 · 0 评论 -
CSS中4种关系选择器
父元素:直接包含子元素的元素子元素:直接被父元素包含的元素祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素兄弟元素:拥有相同父元素的元素叫做兄弟元素根据以上的关系,可以使用如下选择器。原创 2023-11-20 15:48:54 · 548 阅读 · 0 评论 -
CSS中2种复合选择器
注意:若交集选择器中有元素选择器,必须使用元素选择器开头。语法:选择器1,选择器2,选择器3····语法:选择器1选择器2选择器n{}作用:同时选择多个选择器对应的元素。作用:选中同时符合多个条件的元素。例子:#b1,p,.red。原创 2023-11-20 15:47:00 · 299 阅读 · 0 评论 -
label实现轮播点击图效果
当用户点击标签中的文本时,浏览器就会自动将焦点转到和该标签相关联的控件上;< label> 标签的 for 属性应当与相关元素的 id 属性相同。标签的作用是为鼠标用户改进了可用性,1、先了解label与input的联系。原创 2023-11-02 14:15:40 · 308 阅读 · 1 评论 -
利用transition过渡实现hover效果出现一个背景样式
创建结构li里面用超链接a包裹主体内容,兄弟标签div创建需要移出的背景样式。先引入一个基础样式base.css,再引入一个首页样式index.css。使用transition实现过渡效果,设置时间等属性。base.css就是最基本的清除默认样式代码。index.css是首页需要的样式。一、首先构建一个html结构。原创 2023-11-02 13:54:25 · 316 阅读 · 0 评论 -
CSS中4种常用选择器
作用:根据元素的class属性值为元素分组,它和id类似,不同的是可以重复使用。作用:根据元素的id属性值选中一个元素。作用:根据标签名来选中指定的元素。例子:p{},h1{},h3{}语法:.class属性值{}作用:选中页面中的所有元素。语法:#id属性值{}原创 2023-11-02 13:42:37 · 74 阅读 · 0 评论 -
CSS的语法
CSS的注释,作用和HTML注释类似,只不过它必须编写在。在一个声明块中可以写多个声明,多个声明之间使用;——声明块紧跟在选择器的后边,使用一对{}括起来,——声明块中实际上就是一组一组的名值对结构,——通过选择器可以选中页面中指定的元素,——通过声明块来指定要为元素设置的样式。声明的样式名和样式值之间使用:来连接,例如:p 就是选中页面中所有的p元素。最后一个可以省略,但一般都写上、一组一组的名值对我们称为声明,原创 2023-10-31 08:51:34 · 26 阅读 · 0 评论 -
CSS简介及三种书写位置
结构 html骨架支撑表现 css外在显示的样子行为 js注入思想灵魂。原创 2023-10-31 08:49:42 · 290 阅读 · 0 评论 -
html+css购物商城完整项目
html+css购物商城完整项目,在Inscode内运行项目,如下效果。原创 2023-10-26 15:49:35 · 1921 阅读 · 0 评论 -
CSS隐藏某个模块的滚动条效果,实现横向滑动无滚动条
CSS隐藏某个模块的滚动条效果,实现横向滑动无滚动条原创 2023-10-23 15:20:21 · 360 阅读 · 0 评论 -
CSS绝对定位(absolute)、相对定位(relative)方法(详解)
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。原创 2023-10-21 09:42:12 · 17208 阅读 · 2 评论 -
css动画实现摩天轮效果
css动画实现摩天轮转动效果原创 2023-10-22 18:39:33 · 393 阅读 · 1 评论