HTML
关注
分享
扫一扫
文章平均质量分 69
牛先森家的牛奶
语言只是一门工具
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
工作中遇到的html和css的一些问题解决（2）
工作中遇到的html和css的一些问题解决禁止拖动鼠标选中文字（文字背景变成蓝色）禁止拖动鼠标选中文字（文字背景变成蓝色）在页面中写 onselectstart="return false"如下：<div onselectstart="return false">这里面的文字是不能被鼠标选中的</div>如果整个页面都不能选中，可以加到 <body> 标签中：<body onselectstart="return false">...原创 2021-05-13 17:58:45 · 337 阅读 · 0 评论
-
工作中遇到的html和css的一些问题解决（1）
iconfont字体图标不能旋转问题：字体图为内联元素，添加css3的一些2D和3D效果不起作用，解决：转为行内块或块级元素即可原创 2020-07-23 18:49:11 · 896 阅读 · 0 评论 -
原生js用Export2Excel导出excel单级表头和多级表头数据方式实现
原生js用Export2Excel导出excel单级表头和多级表头数据方式实现原创 2024-08-18 16:07:53 · 822 阅读 · 0 评论 -
html的table表格的td设置1px，浏览器效果不一致问题解决
html的table表格的td设置1px，浏览器效果不一致问题解决原创 2022-08-23 10:43:12 · 530 阅读 · 0 评论 -
怎么判断移动端横屏还是竖屏？
怎么判断移动端横屏还是竖屏？怎么判断移动端横屏还是竖屏？CSS判断横屏竖屏：JS判断横屏竖屏：怎么判断移动端横屏还是竖屏？CSS判断横屏竖屏：@media screen and (orientation: portrait) { /*竖屏 css*/ } @media screen and (orientation: landscape) { /*横屏 css*/ }JS判断横屏竖屏： // 移动端的浏览器一般都支持window.orientation这个参数，通过这个参数原创 2022-03-13 18:26:59 · 1517 阅读 · 0 评论 -
vue之PC端适配
vue之PC端适配lib-flexible // 根据屏幕宽度，自动设置 html 的 font-sizepostcss-px2rem // 自动将 px 单位转换成 remlib-flexible ： 会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale 等属性的值。postcss-px2rem ：会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签原创 2021-03-15 00:15:43 · 3357 阅读 · 10 评论 -
css自定义属性和使用
1、自定义属性的命名规则 --variables-name:variables-value(变量名是大小写敏感的) --属性名:属性值 例如定义一个主题颜色： --theme-color:red;// 例如:root{ --primary-color:#989898; --light:#fff; --dark:#000;}2、作用域//:root作用于全局:root{ --theme-color:red;}//#app作用于id为ap原创 2020-09-25 09:44:38 · 607 阅读 · 0 评论 -
css中的before使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pa原创 2020-07-29 16:54:43 · 8605 阅读 · 0 评论 -
页面截图技巧
页面截图快捷键第一种直接在控制台操作：打开控制台输入Ctrl + shift + P输入full，点击 选项，回车即可下载图片就是整个页面 （注意：移动端页面较为准确，PC端可能出问题，建议用下面方法）另一种是直接在浏览器中截图...原创 2020-07-23 18:51:46 · 265 阅读 · 0 评论 -
HTML和CSS导航栏汇总
导航栏HTML和CSS导航栏1、图标上下翻转类型HTML和CSS导航栏1、图标上下翻转类型HTML代码： <ul class="nav-ul float_left"> <li><a href="#" class="active-li">首页</a></li> <li><a href="#">推广<i class="iconfont icon-xiabiao"></i>原创 2020-07-23 18:46:34 · 545 阅读 · 0 评论 -
VScode快捷键使用—写页面必备
VScode快捷键VSCode列选择快捷键：Alt+Shift+左键原创 2020-07-23 18:45:52 · 580 阅读 · 0 评论 -
移动端几种布局总结
移动端布局方法移动端布局方法1、使用 媒体查询+rem单位2、使用vw单位 + rem单位布局3、使用rem.js + rem单位布局4、使用sass + vw单位布局下面具体说下2、3、4布局2：VW和rem布局总结如下计算：3、使用rem.js + rem单位布局4、使用sass + vw单位布局移动端布局方法1、使用 媒体查询+rem单位（1）使用媒体查询更改HTML的font-size值（2）页面中所有布局使用rem单位布局缺点：不能精细的适配到每一个设备，代码量较大原理：媒原创 2020-06-06 14:53:46 · 1598 阅读 · 2 评论 -
css文本两端对齐
文本两端对齐text-align: justify;/* 规定如何对齐文本的最后一行 */text-align-last: justify; .text { width: 100px; margin: 10px 20px; border: 1px solid #000; text-align: justify; /* 规定如何对齐文本的最后一行 */ text-align-last: justify; }原创 2020-06-13 20:02:08 · 207 阅读 · 0 评论 -
移动端纯概念
移动端概念移动端概念meta标签的设置重点设置分辨率，PPi,DPI,DPR,物理像素，逻辑像素区别常见单位再补充解释：移动端单位换算推荐：移动端概念注：以下需要知道，可能与开发并不直接相关，但能帮助你了解移动端；meta标签的设置H5页面窗口自动调整到设备宽度，并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,us原创 2020-06-07 17:30:01 · 223 阅读 · 0 评论 -
弹性盒模型和案例布局
弹性盒模型怪异盒模型：box-sizing：属性值：content-box；（标准盒模型）border-box；（怪异盒模型）怪异盒模型特点：padding和border不会对盒子大小产生影响所添加padding和border在宽高内部。弹性盒：布局方法；作用：弹性盒控制子元素(不包括孙子辈元素)的布局方法。特点：a: 弹性盒默认情况下，子元素沿着“主轴”排列，默认情况下X轴为主轴b: 弹性盒的子元素称作“灵活元素”，所有的子元素都能设置宽高c: 如果一个子元素在弹性盒原创 2020-06-06 13:36:38 · 726 阅读 · 0 评论 -
HTML常用技巧
HTML常用代码之：你不一定知道的技巧将彻底屏蔽鼠标右键 ncontextmenu="window.event.returnValue=false" 可用于Table<table borderncontextmenu=return(false)><td>no</table>取消选取、防止复制<body nselectstart="retur...原创 2020-06-02 13:10:56 · 191 阅读 · 0 评论 -
CSS3渐变、过渡、2D、3D和动画
渐变线性渐变就是“一个方向” 向 “另一个方向”渐变（或从一个颜色到另一个颜色平稳得过渡（颜色逐渐得变化））语法：background：liner-gradient（directon ，color-stop1，color-stop2，…）说明：directon：方向，默认值是to bottom 即从上向下的渐变；color-stop：颜色的分布位置，默认均匀分布，例如有三个颜色，各个颜色为33.33%解释方向：to right 是到右，就是从左到右，同理 to left （从右到左）原创 2020-05-26 18:00:24 · 728 阅读 · 0 评论 -
写页面几个常见版心构思
导航栏版块先看几组企业站导航栏样式图：发现大部分导航栏无外乎包括有logo、介绍栏、搜索框、登录信息等等下面我就写一款简单，先了解下这部分在页面中如何书写代码 （注意仅是简单展示方法，暂时不作其他交互效果，以便初学者参考，大佬可忽略。。。）简单实现原理：这里我用的是 ul>li>a 的方式（有更好的话可以交流，也更方便学习）用无序列表ul写外围结构给ul嵌套li和a样式给li添加浮动给li添加大小调整文本大小html结构 <!-- nav的版心 --&g原创 2020-05-19 08:36:27 · 2040 阅读 · 0 评论 -
响应式页面布局、移动端布局
首先实现页面响应式布局需要认真了解以下两点：弹性盒模型媒体查询1、弹性盒模型介绍：弹性盒布局模型是css3规范中提出的一种新的布局方式。目前：提供一种更加高效的方式来对容器中的条目进行布局、对其和分配空间。优势：这种布局模型已被主流浏览器所支持，可以在web应用开发中使用。注意需设置盒子为弹性的：display：flex;flex相关的属性：设置主轴的方向：flex-direction：row（水平方向）flex-direction：column（垂直方向）设置主轴的对齐原创 2020-05-17 14:29:42 · 390 阅读 · 0 评论 -
梳理浮动和BFC
浮动：float：定义网页中其他文本如何环绕该元素显示CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止浮动的添加float的属性值：left （元素左浮动）right （元素右浮动）none （默认值，不浮动）inherit （将会从父元素获取float值）浮动的特点：浮动的元素脱离文档流的，不占据空间如果让多个元素横向排列，这些元素都要添加浮动如果添加浮动的子元素总宽超过父元素的宽度，那么最后一个原创 2020-05-12 20:43:07 · 367 阅读 · 0 评论 -
html和rem的适配
html和rem的适配：1、rem基础单位有px，pt，em，%em：相对大小（相对于父元素的font-size的值），比如div里面有一个p元素，当div设置font-size为12px，p元素的width：10em，此时p的width相对大小为120px；rem（root em）：是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小，比如...原创 2020-05-10 18:33:28 · 2121 阅读 · 0 评论