html/css
文章平均质量分 72
guanguan0_0
学着学着就会了
展开
-
Emmet-HTML速写
框架横行的时代,vue和react写多了,你是不是都忘了html基础结构是怎样的了?一个"!"键就可以解决,输入英文感叹号,然后回车或者tab,即可看到下面的基础html结构Emmet常用语法! —— 生成Html结构 # —— 元素id . —— 元素class > —— 子节点 + —— 兄弟节点 ^ —— 父节点 *n—— 重复n次指令 $ —— 计数编号 () —— 分组 [] —— 属性 {} —— 文本内容 隐式标签:在不输入标签名的时候默认是d.原创 2021-09-24 17:24:49 · 319 阅读 · 0 评论 -
你值得拥有的CSS编码规范
相信大多数开发者都很了解js的编码规范,但是对css的编码要求都不高,如果你的css代码经常处于很难阅读的状态,那么你就很需要一套完善的class命名和css编码规范了。语法规则每条声明都应该独占一行 每条声明语句的:后应该插入一个空格 声明块的右花括号应当单独成行 所有声明语句都应当以分号结尾 为了代码的易读性,在每个声明块的左花括号前添加一个空格 对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格 对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5代替...原创 2021-09-15 17:29:21 · 138 阅读 · 0 评论 -
平板横竖屏适配问题
因为平板更容易变换方向,相较于手机设备,更需要进行适配处理除了在head中加入这句必备代码之外,<meta name="viewport" content="width=device-width, initial-scale=1" />我们还可以做点别的:1、如果是嵌入到客户端中,可以通过调用接口的方式来禁止用户横屏操作,这种方式简单粗暴,也很有效,很多客户端的活动页都是这样做的;2、如果没法控制用户操作,就只能通过媒体查询的方式来对横竖屏样式进行适配@media s原创 2020-12-18 16:24:45 · 1327 阅读 · 2 评论 -
css解决移动端弹框下背景滑动问题
如何处理移动端弹框下页面滑动的问题我们不需要依靠js来处理,只需要设置简单的css就可以啦重点:最外层设置absolute定位代码来了:<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <style&原创 2020-12-10 15:33:43 · 948 阅读 · 0 评论 -
hover控制同级元素css样式
css中我们经常遇到hover态的样式处理,通常我们用的更多的是控制自身或者控制子元素,但是遇到同层级元素怎么处理呢?直接上一个很经典的例子,也是在项目中遇到的:例子是一个图片预览控件,需求:当鼠标移动到可视区域内时显示左右切换按钮和下方的操作区,但是当用户左右切换图片时,我们发现如果按钮操作区一直处于显示状态会遮盖部分图片信息,严重影响用户体验。所以,当鼠标移动到左右切换按钮时,我们需要将按钮操作区隐藏1、如果a是b的父元素,使用 #a:hover #b{ }2、如果a和b是同级元素,原创 2020-12-09 17:31:25 · 4632 阅读 · 1 评论 -
五种方案实现CSS三栏布局
方案一、浮动布局float<html> <head> <style> .container::after { content: ''; display: block; clear: both; } .container>div { he...原创 2020-04-07 16:06:24 · 595 阅读 · 4 评论 -
四种方案实现CSS两栏布局
实现两栏布局:左侧定宽,右侧自适应html:<html> <head> </head> <body> <div class="container"> <div class="left">LEFT</div> <div class="right">...原创 2020-04-07 11:29:26 · 423 阅读 · 0 评论 -
CSS换行和CSS不换行
一、换行1、使用<br/>标签强行换行2、在大段落使用<p></p>标签实现大换行3、连续数字或字母换行:{ word-wrap: break-word ; word-break: break-all;}二、不换行1、div显示一行,超出部分省略号{ overflow: hidden; text-overflow...原创 2019-11-14 19:11:45 · 1259 阅读 · 0 评论 -
vue移动端配置自适应,全局自动转换px单位
1、下载lib-flexiblenpm i lib-flexible --save2、在main.js中引入lib-flexibleimport 'lib-flexible/flexible'3、安装postcss-px2remnpm i postcss-px2rem --save4、安装px2rem-loadernpm i px2rem-loader --sa...原创 2019-07-04 20:10:54 · 3423 阅读 · 0 评论 -
Flex布局知识点概述
Flex布局:FlexibleBox的缩写,意为“弹性布局”,为盒模型提供巨大的灵活性使用说明:1.任何容器都可以使用flex布局.box { display: flex;}2.行内元素可以使用flex布局.box{ display: inline-flex;}3.webkit内核的浏览器,要加上-webkit前缀.box{ display: -webkit-flex;...原创 2018-07-04 15:57:58 · 313 阅读 · 0 评论 -
最简易的iconfont的使用方法
先贴上阿里巴巴矢量图标的地址:http://www.iconfont.cn/具体使用步骤:1、登录网站2、寻找适合的图标加入购物车:加入购物车的图标会被虚线选中 3、点击页面右上角的购物车图标,可以看到刚刚加入购物车的图标信息,然后点击“添加至项目”,从项目列表中选择项目或是新建项目4、有两种使用方法,一种是在线使用,一种是下载后使用,建议在项目开始时在线使用...原创 2018-07-04 16:01:20 · 2280 阅读 · 0 评论 -
HTML标准文档格式
1、基本文档流标签:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>网页标题</title> <meta name="keywords" conte原创 2018-09-14 17:05:37 · 7340 阅读 · 0 评论 -
前端必识书写规范
命名规则:1、项目命名:全部采用小写,以下划线分割my_project_name2、目录命名:参照项目命名规则,有复数结构时,要采用复数命名法scripts,styles,images,data_models3、JS命名:参照项目命名规则list_table.js4、css,scss命名规则:参照项目命名规则list_table.css5...原创 2018-10-15 18:12:03 · 418 阅读 · 0 评论 -
CSS实现垂直居中的十五种方法
情景一:单行文字垂直居中1、line-height 原理是在于将单行文字的行高设定后,文字会位于行高的垂直中间位置<div class="text-con">单行文字垂直居中</div><style>.text-con {width: 200px;height:60px;line-...原创 2018-10-17 16:12:26 · 8545 阅读 · 0 评论 -
移动端设置适配font-size
移动端设置适配font-size根据屏幕的大小设置不同的根节点font-size,开发时即使用rem来使其达到自适应@media screen and (min-width:287px) and (max-width:320px) { html { font-size: 10px !important }}@media screen and (min-width:321px)...原创 2018-12-07 09:35:19 · 1045 阅读 · 0 评论 -
聊聊CSS中那些可以继承的属性
CSS样式中有些是可以被子节点继承的,有些却不能,下面就让我们来聊聊都有些啥,欢迎补充,谢谢。可继承的css属性1、字体属性:font:组合字体font-family:字体系列font-size:字体大小font-weight:字体粗细font-style:字体风格font-variant:小写转大写font-size-adjust:设置aspect值,保持首选...原创 2019-02-25 14:29:36 · 342 阅读 · 0 评论 -
CSS实现单行/多行文本溢出部分省略(...)显示
1、单行文本就很简单了,大家应该都知道:代码如下:<div class="text-over"> 氛围是他个人会有人推荐用他人看天空娱乐户人家软件园如瑞今天一天射日访问与太热亢个如</div><style> .text-over { width: 258px; overflow: hidden; ...原创 2019-06-13 17:24:52 · 703 阅读 · 0 评论 -
css如何自定义修改滚动条样式
*::-webkit-scrollbar {/*滚动条整体样式*/ width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px;}*::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 7px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2)...原创 2018-06-08 18:58:54 · 160 阅读 · 0 评论