网页制作CSS实践:使用视口单位定义字号 一般来说,构建响应式面板是使用媒体查询根据不同型号的屏幕尺寸,修改元素的字号就能渲染出不同大小的面板,当然前提是使用相对单位em或者rem。比如说: @media (min-width: 800px)... 2021-03-051,194 viewsCommentsCSS 阅读全文
网页制作CSS实践:hover伪类与延时实现下拉列表 实现一个鼠标经过按钮来展示下拉菜单的交互效果: <button class='btn'>菜单</button> <ul class='panel'> <li ... 2021-03-051,683 viewsCommentsCSS 阅读全文
网页制作CSS实践:增加CSS选择器优先级、全局调整盒模型 增加CSS选择器优先级 在平常开发中,会有不少几率遇到需要增加CSS选择器优先级的场景。如何实现才会更好,比如说需要增强下面这个CSS选择器优先级: .bar { background: #DDD; ... 2021-03-051,982 viewsCommentsCSS 阅读全文
网页制作CSS实践:计算选中标签元素、多行文本溢出省略 CSS计算选中标签元素 这是一种社交平台的常见需求,比如说在掘金平台中让用户选择感兴趣的标签,通常都是用JS来处理已经选择了的标签数量。今天给出一个css版本: <p>请选择你感兴趣的标签... 2021-03-051,727 viewsCommentsCSS 阅读全文
网页制作CSS3高级技巧汇总(虚线框、三角形、优惠券卡券、滚动条、多行溢出…) 1-1. 设置input 的placeholder的字体样式 设置input占位符的样式 input::-webkit-input-placeholder { /* Chrome/Opera/Safa... 2021-03-021,684 viewsCommentsCSS 阅读全文
网页制作@media screen and标签:响应式网页结构css写法,实现页面布局自适应 响应式的web页面结构设计越来越流行,其中CSS3 Media Queries是入门基础知识。 Media Queries的其作用是使用表达式来判断设备的分辨率,并输出相应的样式。换句话说,我们可以在... 2021-02-131,465 viewsCommentsCSS 阅读全文
网页制作Html:表格Table自适应宽度,指定列固定宽度,其他列均分宽度 做表单界面时,我想到最好的方法应该是,标题栏所在的列宽度固定,内容栏所在的列宽度自适应且要均分,这样整体表格看起来才美观有序。 要做到这一点,目前只摸索出一种办法: 1,给table加table-la... 2021-01-263,090 viewsCommentsHTML 阅读全文
网页制作css3中的width:100vh以及calc(100vh + 10px) vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个。其中最大... 2021-01-172,422 viewsCommentsCSS 阅读全文
网页制作网站变灰的CSS代码(支持IE、FIREFOX和CHROME) 网站变灰的CSS代码方法1:支持IE <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.... 2021-01-171,815 viewsCommentsCSS 阅读全文
网页制作CSS中的关系选择器 关系选择器是指根据与其他元素的关系选择元素的选择器,常见的符号有空格、>、~,还 有+等,这些都是非常常用的选择器。 后代选择器:选择所有合乎规则的后代元素。空格连接。 相邻后代选择器:仅仅选择... 2021-01-171,783 viewsCommentsCSS 阅读全文
网页制作CSS链接使用伪类的顺序 顺序为:link-visited-hover-active a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问... 2021-01-171,436 viewsCommentsCSS 阅读全文
网页制作CSS基础夯实:定位(position)、浮动和布局(居中与flex…) 编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容。网页布局的好与坏,直接决定了网页最终的展示效果。PC端常见的网页布局形式有两列布局、三列布局等。在CSS中,我们通常使用浮动... 2021-01-171,280 viewsCommentsCSS 阅读全文
网页制作css 弹性盒子(flex布局)的起边和终边详解 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>... 2021-01-171,352 viewsCommentsCSS 阅读全文
网页制作css 利用animation和transform 设置鸭子表 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>... 2021-01-171,563 viewsCommentsCSS 阅读全文
网页制作css 利用animation和transform 设置复仇者魔方效果 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>... 2021-01-171,018 viewsCommentsCSS 阅读全文
网页制作css弹性盒子:flex-grow、flex-shrink完整规则详解 开始学习 flex-grow 时,相信大家都是从这样一个经典例子入门的: 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow... 2021-01-171,650 viewsCommentsCSS 阅读全文
网页制作HTML行内元素、块状元素、行内块状元素三者的区别 HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换: (1)display:inline;转换为行内... 2021-01-171,890 viewsCommentsHTML 阅读全文
网页制作css图片和文字在父元素垂直居中,且在中线对齐排列的几种方式 一,用flex的副轴来垂直居中对齐 1.副轴(由上到下)设置居中对齐(align-items: center;)即可 1 <!DOCTYPE html> 2 <html lang="... 2021-01-172,300 viewsCommentsCSS 阅读全文
网页制作css 利用flex居中对齐的参考代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>... 2021-01-171,681 viewsCommentsCSS 阅读全文
网页制作CSS transform、transition和animation基本用法 transform CSStransform属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。 注意: inline元素是不支持 transform,需要编... 2020-11-222,065 viewsCommentsCSS 阅读全文
网页制作CSS选择器层叠、优先级、冲突、继承、以及属性值计算过程 1. 选择器分类 1.1 常规选择器 通配符选择器 元素选择器、伪元素选择器 类选择器、伪类选择器 属性选择器 ID选择器 *{ /* 通配符选择器 */ margin: 0; } h1{ /* 元素... 2020-11-221,797 viewsCommentsCSS 阅读全文
网页制作CSS ::marker自定义项目符号和数字的某些样式 使用 <ul> 或 <ol> 时自定义数字或项目符号的颜色,大小或类型很简单。 感谢CSS ::marker,我们可以更改内容以及项目符号和数字的某些样式。 浏览器兼容性 当C... 2020-11-142,155 viewsCommentsCSS 阅读全文
网页制作网页布局:12列网格布局 12列网格布局最早是由960.gs提出的网格布局系统(//960.gs/): 12列网格布局在设计系统和CSS Framework中经常使用,比如业内经典的Bootstrap(//getbootstr... 2020-09-133,413 viewsComments 阅读全文
网页制作网页布局:Grid中实现水平垂直居中 Grid中实现水平垂直居中 CSS Grid布局可以说是现代Web布局中的银弹。它也是到目前为止布局系统中唯一一个二维布局系统。 在CSS Grid布局中,只需要仅仅的几行代码也可以快速的帮助我们实现... 2020-09-134,999 viewsComments 阅读全文