Google [站内搜索]
分类: HTML/CSS预览模式: 普通 | 列表

DIV使用opacity设置透明后子元素不能取消透明解决方法

编辑:dnawo  日期:2022-07-19

DIV使用opacity设置透明后，子元素也跟着一起透明，结果导致DIV里边的文字看不清，尝试给子元素设置opacity: 1，发现不能取消透明：

复制内容到剪贴板程序代码 程序代码
<style>
    div{background-color: #000; opacity: 0.5;}
    span{opacity: 1;}

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2225

基于CSS3属性Animation和transform实现类似翻书效果[转]

编辑:dnawo  日期:2022-07-18



复制内容到剪贴板程序代码 程序代码
<!doctype html>
<head>
    <meta charset="utf-8">

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1383

CSS3动画学习笔记

编辑:dnawo  日期:2022-07-17



CSS3动画需@keyframes规则和animation属性一起配合使用才能生效，@keyframes规则定义了一组样式，它设置了多个关键点时元素的样式(也称关键帧)，animation属性定义了动画使用的规则、时长、速度等信息。

1、@keyframes规则

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1295

DIV铺满全屏的三种方法

编辑:dnawo  日期:2022-04-07

1.继承法：
复制内容到剪贴板程序代码 程序代码
<style>
    * {margin:0; padding:0;}
    html,body{height:100%;}
    .box {height:100%;}

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6042

jQuery-1.8.0触发checkbox表单click事件的一个坑及解决方法

编辑:dnawo  日期:2021-04-06

在页面引用了jQuery-1.8.0，给checkbox表单添加click事件：

复制内容到剪贴板程序代码 程序代码
<input type="checkbox"/>
<script type="text/javascript">
    $(":checkbox").click(function(){

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1681

HTML打开WEB版百度地图标点和导航示例

编辑:dnawo  日期:2021-03-29

开发者按照URI API接口规范构造一条标准的URI，便可在PC&移动浏览器端直接调起百度地图产品（如百度web地图、百度地图客户端）进行地图显示或检索、线路查询、导航等功能，满足开发者实现特定业务场景下直接调用地图产品实现应用请求。

URI API提供以下功能：

>.标注：根据名称或经纬度，调起百度地图产品展示一个标注点，如，分享位置，标注店铺；

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3027

DIV+CSS 网页布局之：两列布局[转]

编辑:dnawo  日期:2021-03-19

1、宽度自适应两列布局

两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。

当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:left 或 clear:right，但必须清楚的知道到底是哪一侧需要清除浮动的影响。也可以给浮动的父容器设置宽度，或者为 100%，同时设置 overflow:hidden，溢出隐藏也可以达到清除浮动的效果。

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1490

HTML5基本页模板

编辑:dnawo  日期:2020-02-27

1、jQuery基本页

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<html>
<head>

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1611

HTML5<video>报错Uncaught (in promise) DOMException解决方法[转]

编辑:dnawo  日期:2019-07-30

在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。（Google的某些做法还真是令开发者不爽）。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。

复制内容到剪贴板程序代码 程序代码
<video src="YOUR_VIDEO_URL" autoplay></video>

如果你用 javascript 代码显式调用play方法：

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 152687

HTML5<audio>报错audio.play is not a function解决方法

编辑:dnawo  日期:2019-07-30

HTML5页面：

复制内容到剪贴板程序代码 程序代码
<audio id="audio1" controls="controls"></audio>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">

查看更多...

分类:HTML/CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 12247