HTML
关注
分享
扫一扫
GLyihu
这个作者很懒，什么都没留下…
展开
-
flex布局常见属性
自己学习参考使用flex布局父项常见属性body { flex-direction: 设置主轴的方向; /* row 默认值从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上 */ justify-content: 设置主轴上的子元素排列方式; /* flex-start 默认值从头部开始 flex-end 从尾部开始排列 center 在主轴居中对齐（如果主轴是x轴 水原创 2021-10-09 09:54:22 · 539 阅读 · 0 评论 -
Bootstrap5导航条鼠标悬停下拉菜单
Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态，都是点击弹出下拉菜单，为了适应一般网站使用，我稍作了一些修改，鼠标hover时就弹出二级菜单。效果图：直接上代码，非常简单，加了个css样式：.dropdown:hover .dropdown-menu { display: block;}个人亲测有效。希望能帮助到大家。...原创 2021-09-14 10:55:26 · 1973 阅读 · 0 评论 -
点击input时，里面默认字体消失显示
具体如下：<input class="form-control" name="title" id="title" type="text" placeholder="请输入您的姓名" onfocus="if(placeholder=='请输入您的姓名'){placeholder=''}" onblur="if(placeholder==''){placeholder='请输入您的姓名'}" />相当于input里写了一个判断，亲测有效，喜欢的拿走。效果如下图：...转载 2021-09-04 12:43:36 · 1046 阅读 · 0 评论 -
纯css 背景缩放代码 亲测有效
之前发过一个边框闪烁的，其实原理相同。由于最近做项目需要这个效果，重新整了一个，希望能帮助大家使用。直接上代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid原创 2021-08-28 14:54:47 · 166 阅读 · 0 评论 -
video视频标签的基本应用（关于poster属性）
大家有没有发现调用视频文件时，默认是黑色或白色底加一个播放按钮（个别浏览器），不是想要的视频画面？特别是在做web前端开发时，自己的电脑和手机是正常完美的，可是领导或金主爸爸却看的很“差”。好了，不废话了，直接上代码：<video width="100%" height="100%" controls="controls" poster="封面图地址" style="objec...原创 2020-04-22 15:08:13 · 1438 阅读 · 0 评论 -
网站响应式页面查看工具源代码
网站响应式页面查看工具源代码var theme_list_open = false;$(document).ready(function() { function fixHeight() { var headerHeight = $("#switcher").height(); $("#iframe").attr("height", $(w原创 2017-09-18 16:55:29 · 1040 阅读 · 0 评论 -
各种常用的css样式（收集整理）
a{text-decoration:none;} //A标签去掉下划线a{cursor:pointer;} //鼠标手型样式li{list-style:none;} //列表样式:无。li标签去掉点em{font-style:normal} //去掉EM标签斜体样式，初始化代码用a标签实现跳转到本页面或者目标页面的顶部、底部或者某一位置：1、定义目标位置，赋予id。2...原创 2017-09-03 18:42:31 · 1264 阅读 · 0 评论 -
比较全的HTML和CSS标签常用命名规则
文件夹主要建立以下文件夹： 1、Images 存放一些网站常用的图片； 2、Css 存放一些CSS文件； 3、Flash 存放一些Flash文件； 4、PSD 存放一些PSD源文件； 5、Temp 存放所有临时图片和其它文件； 6、copyright 版权信息（可选） 8、readme 说明文件css统一命名注：本CSS命名规则只适合物table制作模式下 1、 ...转载 2018-09-12 12:05:27 · 340 阅读 · 0 评论 -
防扒皮、防右键、防查看资源的代码
还没用过，但看到了，先收藏。<script type='text/javascript'> var h = window.innerHeight, w = window.innerWidth; // 禁用右键 window.oncontextmenu = function () {return false;}; // 任何键盘事件都无效 防止F1...转载 2018-09-17 14:12:30 · 739 阅读 · 0 评论 -
纯css 边框闪烁效果
代码如下：#ho-shan{ width: 100%; height: 100%; position: relative; outline: none; background-color: #dd524d; border-radius: 5px; transform-origin: 0 0; opacity: .7; border:...原创 2019-04-10 13:28:21 · 6555 阅读 · 0 评论 -
三种鼠标经过图片变动效果（透明度、灰白、缩放）
使用的bootstrap 4.0框架（与标题无关）做css底层框架html部分<div class="container" style="margin:20px auto"> <div class="row"> <div class="col-12 col-md-4"> <a href="#" class="ho-img ho-alp...原创 2019-03-28 17:04:09 · 1525 阅读 · 0 评论 -
向iframe传递数值简单方法（父页面向子页面传递数值）
方法很简单，能实现父页面向子页面传递数值，实测成功。仅供参考，不知道存不存在bug。如出现问题，概不负责。父页面<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>父页面</title> </head> <bo...原创 2019-03-29 11:22:04 · 7647 阅读 · 4 评论 -
html5中的pattern属性（表单验证input）
pattern用于验证表单输入的内容，通常HTML5的type属性，比如email、tel、number、data类、url等，已经自带了简单的数据格式验证功能了，加上pattern后，前端部分的验证更加简单高效了。pattern的属性值要用正则表达式。常用的正则表达式： 信用卡 [0-9]{13,16} 银联卡 ^62[0-5]\d{13,16}$ Visa...转载 2019-04-15 16:51:40 · 9194 阅读 · 1 评论 -
CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow: hidden;text-overflow:ellipsis;white-space: nowrap;但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢转载 2017-08-31 17:45:02 · 491 阅读 · 0 评论 -
CSS实现鼠标移动到图片上图片变大
html部分 专利战升级，高通要求美禁止进口部分iPhone机型 css部分.ho-tran em{ height:8rem; overflow:hidden; }.ho-tran img{ width: 100%; height: 100%; cursor: pointer; transition: all 0.6s;原创 2017-08-30 14:10:22 · 1343 阅读 · 0 评论 -
JQUERY可变透明度返回顶部代码
1、在页面（HTML）<body></body>里加上A标签（返回顶部超链接）<a href="#0" class="cd-top">Top</a>2、添加css样式（可以写在页面里，也可以写在单独的css样式表里）.cd-top { display: inline-block; height: 40px; width:...转载 2017-09-04 16:21:21 · 678 阅读 · 0 评论 -
给标签云TAGS增加七彩背景色
给标签云TAGS增加七彩背景色.d_tags{padding: 12px 13px 10px 15px;}.d_tags a:nth-child(9n){background-color: #4A4A4A;}.d_tags a:nth-child(9n+1){background-color: #428BCA;}.d_tags a:nth-child(9n+2){background-c转载 2017-09-04 16:46:29 · 822 阅读 · 0 评论 -
li标签实现不同行颜色不一样（奇数行、偶数行）
li标签实现不同行颜色不一样（奇数行、偶数行）#list li:nth-of-type(odd){ background:#00ccff;}奇数行 #list li:nth-of-type(even){ background:#ffcc00;}偶数行 1 2 3 4 5 6转载 2017-09-04 16:52:29 · 4596 阅读 · 0 评论 -
CSS实现垂直居中的常用方法
.content {width:600px;/*一个固定的宽度*/margin: 0 auto; /*水平居中*/position: relative;top: 50%; /*偏移*/transform: translateY(-50%);}转载 2017-08-30 11:02:01 · 329 阅读 · 0 评论 -
bootstrap响应式图片自适应图片大小
bootstrap响应式图片的正确的设置是在img上面加上两个类就可以了。如果是在内容页里面的话，直接用js给每个img加上属性就可以了。$(window).load(function(){ $(".panel-body img").addClass("img-responsive center-block");})在 Bootstrap 版本 3 中，通过转载 2017-08-30 10:56:49 · 19437 阅读 · 0 评论 -
posfixed.js(修改为任意页面停靠)滚动固定jquery插件
$(document).ready(function() {$("#ho-xdiv").posfixed({distance: 0, //top值，高度pos: "top",type: "while",hide: false});js代码用于页面，也可写在js文件里。注意#ho-xdivposfixed.js代码如下：（修改过）(function($){$.extend......原创 2017-08-28 11:06:49 · 1442 阅读 · 0 评论 -
点a链接写邮件小技巧
当点击mailto的邮件链接的时候，需要填写标题和内容，如果你想规定一个邮件标题格式，那这个可以帮助你。代码：立即投稿»mailto:邮件地址subject=邮件标题body=邮件内容转载 2017-08-30 11:09:49 · 534 阅读 · 0 评论 -
CSS怎么调用系统没有的字体
使用css的@font-face引入服务器文件中的字体；使用方法：@font-face{font-family:ch;/*为引入的字体命名*/src:url(../font/FZZCHJW.TTF);/*定义要引入字体文件的路径*/}转载 2017-08-30 11:12:20 · 1455 阅读 · 0 评论 -
301重定向(.haccess文件)
自己新建一个.haccess文件这个会吧，里面加入如下的代码：RewriteEngine OnRewriteCond %{HTTP_HOST} !^www.noniu.com$ [NC]RewriteRule ^(.*)$ http://www.noniu.com/$1 [L,R=301]把域名换成你自己的。.haccess文件在线生成器：http://htaccess.uuz转载 2017-08-30 11:17:03 · 1012 阅读 · 0 评论 -
列表新闻无图片不显示
$(".ho-listpic").each(function() {if($(this).find('img').attr('src') == '') {$(this).hide('em');$(this).next().css("width", "100%");}});当.ho-listpic下图片src=“”空时，em隐藏。原创 2017-08-30 13:53:37 · 466 阅读 · 0 评论 -
简单的点击链接隐藏与显示div
查看更多 Portfolio Portfolio Portfolio Portfolio原创 2017-08-30 13:58:05 · 1588 阅读 · 0 评论 -
随机选取样式代码js
html部分<ul id="divTags"> <li><h4><a href="#">专利战升级，高通要求美禁止进口部分iPhone机型</a></h4></li> <li><h4><a href="#">专利战升级，高通要求美禁止进口部分iPhone机型&l...原创 2017-08-30 14:03:19 · 593 阅读 · 0 评论 -
CSS3 Media媒体查询器用法总结（传说中自适应、响应式就靠它了）
首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：这段代码的几个参数解释：width = device-width：宽度等于当前设备的宽度initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：允原创 2017-09-03 22:26:10 · 5504 阅读 · 0 评论