css

CSS中使用文本阴影与元素阴影
日志文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
1
前端笔记--css样式笔记
日志一.浮动 定位布局 1.浮动布局 left 元素向左浮动 right 元素向右浮动 例如:设置2个按钮,要使得按钮在同一行位置摆放,可以使用浮动,令按钮浮动到右边.注意,先设置float的按钮,例如: ...
快速掌握—HTML快速实现自定义Input开关
日志HTML <input id="customSwitch" type="checkbox" /> <label for="custo ...
1
边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式
日志边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
如何使用CSS3中的结构伪类选择器和伪元素选择器
日志结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...
1
响应式布局浅析
日志所谓响应式布局,就是页面会根据当前运行的设备的大小自行进行调整,实现方案主要有以下三种: 1)隐藏 例如在 PC 端的一些友情链接或者不重要的内容在移动端可以选择隐藏起来. 2)换行 在 PC 端显示 ...
1
CSS布局方式--inline-block 布局
日志布局其实就是想办法怎样将一些元素横向的排列起来,纵向由于块级元素的存在会自动占据一行. inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行,而且使用 inline-bl ...
1
深入学习CSS中如何使用定位
日志CSS中定位介绍 position属性在英文单词中表示位置的意思,在CSS中主要作用设置元素的定位. CSS中一共有3种定位如下: 属性值 描述 fixed 设置固定定位. relative 设置相对 ...
INHERITED AND NON-INHERITED IN CSS
日志When I look up css properties in MDN's specifications section, there are some properties in it and i ...
HTMl页面中返回顶部的几种实现
日志  最近在开发网站需要制作返回顶部按钮,但是我主要为后端开发,对前端不太熟练,经过网上资料查询,制作出了返回顶部的按钮,下面是两种简单的方式,记录一下.喜欢本网站的朋友可以收藏下,会不定期更新学习资料 ...
1
css中如何使用border属性与display属性
日志border属性介绍 border属性设置元素边框. 边框3个要素如:粗细.线型.颜色. 边框线型属性值说明表如: 属性指 描述 none 定义无边框. hidden 与 "none&quo ...
1
如何实现一个既简单又漂亮的列表
日志相信大家对列表展示早已不陌生了,工作中也经常会有这样的需求.那我们如何实现一个既简单又美观的列表展示呢? 首先让我们来看一下效果: 上面是普通的展示列表,而下面则是我们处理过的展示列表,是不是感觉美观 ...
1
关于换行以及换行属性
日志对于CSS的white-space属性,我想大部分人应该和我差不多,最常用的就是nowrap属性,最多用来做超长省略号显示的时候会用到[hiahiahia~] 起因是这样的:产品doggie策划了一个 ...
手摸手教你编写你人生中第一个HTML页面
日志本文是<HTML5与CSS3基础语法自学教程>的第二篇,首发于[前端课湛]微信公众号. 导读:本小节主要讲解 HTML 的基础语法内容,将通过编写第一个 HTML 页面来学习 HTML 的 ...
1
前端小白要搞懂什么是HTML,看这一篇就够了
日志本文是<HTML5与CSS3基础语法自学教程>的第一篇,首发于[前端课湛]微信公众号. 导读:本小节主要讲解 HTML 的基本信息,其中包含 HTML 概念.HTML 发展历程和 HTML ...
1
CSS Table样式
日志一.table td的宽度详解 Table只有Table的宽度是可以设置的,并且各个浏览器理解一致 原则上应该将table的宽度设置成一个固定的值,而不应该设置成一个根据屏幕变化的值 Table的宽度 ...
CSS 知识笔记
日志一.CSS文件 1.引用css文件,放在Head里面,可以减少repaint和reflow. 浏览器渲染页面大概是这样的,当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有C ...
CSS之垂直水平居中方法
日志//居中方法1 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 346px; height ...
CSS之实现垂直时间线展示相关内容效果
日志如下,最近在工作中遇到实现时间线效果的需求,用纯css即可实现,下面给出详细实现代码. html: <div class="time_line_list_wrap hide" ...
CSS margin和padding理解
日志W3C组织建议把所有网页上的对像都放 在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. 盒模型主要定义四个区域:内容 (content).边框 ...