HTML5前端
svg调用图片实例
2022-06-05
<div class="icon-like">
<img src="./src/svg/fm0898.svg" alt="调频海南的图下">
</div>
<style lang="scss">
.icon-like {
width:25px;
height:25px;
img {
width:25px;
height:25px;
}
}
</style>
什么是svg
2022-06-05
SVG是什么?
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
与其他图像格式相比,使用 SVG 的优势在于:
html5中怎么用canvas绘图
2022-06-05
1)创建画布
在HTML代码的body中,使用<canvas>标签创建画布元素。创建时,要为该元素定义id属性,因为Javascript需要根据该id来获取画布元素。
画布的默认宽度为300px,高度为150px,可以通过<canvas>元素的width属性自定义其宽度,height属性自定义其高度。代码如下:
<canvas id="canvas" widt
css里display的几个元素
2021-10-23
display: block;
这个值大家不陌生,我们最熟悉的
缺省就是这个值,最基本的块级元素,属于 css入门初学者都知道的概念,只要是容器类型的元素基本都是这个值。除之外,<div>之外,还有 <h1>到 <h6>, <p>, <form>, <header>, <footer>, <section>, <artic
怎么控制搜索框的长度
2021-08-07
怎么控制搜索框的长度,这在我们制作搜索栏或者是一些表单的时候经常遇到这个问题!
许多新手用户在dreamweaver中控制长度怎么也不管用,那是因为DW太老了,我们需要直接对input或者是文本域加上style来控制,代码看下面:
<input type="text" style="width:60px;">
css中的ul和li用法
2021-08-05
#menu ul {list-style:none;margin:0px;}
list-style:none,这一句是取消列表前点,因为我们不需要这些点。
margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。
#menu ul li {float:left;}
这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。
CSS中的ul与li样
CSS单位相关知识
2021-08-05
一、了解 CSS 单位
测量长度的单位可以是绝对的,例如像素,点等,也可以是相对的,例如百分比(%)和 em 单位。
指定 CSS 单位对于非零值是必须的,因为没有默认单位。丢失或忽略单位将被视为错误。但是,如果该值为 0,则可以省略该单位(毕竟,零像素与零英寸是一样的)。
注意
写DIV CSS时容易犯下的常见错误
2021-08-05
1、检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2、检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,
html5播放mp3 代码
2020-11-18
<audio controls="controls">
<source src="http://fm0898.com/song.ogg" type="audio/ogg">
<source src="http://fm0898.com/song.mp3" type="audio/mpeg">
fm0898站长提醒您,您的浏览器过老,不支持此文件播放!
</audio>
网址判断代码
2020-02-26
if(window.location.href.indexOf("fm0898.com") < 0){
window.location.href = 'https://www.0898.com/';
}
让视频自适应方法
2020-02-16
如何让视频在网站上自适应,这里分享下自己用的这段html5代码,希望对新手朋友有用!
<调频 id="ecmsvideoid" style="width: 100%; height: 100%; object-fit: fill;" autoplay="autoplay" controls="controls" width="300" height="150">
请把上面的汉字调频替换成video
html5 网页html lang 用法
2019-12-20
1. 简体中文页面:html lang=zh-cmn-Hans
2. 繁体中文页面:html lang=zh-cmn-Hant
3. 英语页面:html lang=en
注意:单一的 zh 和 zh-CN 均属于废弃用法。
html5自适应下如何让图片不显示
2019-06-26
@media (max-width:750px)
{.hello img { display:none;}}
我们先把CSS写好,再添加样式到前端想要隐藏的地方
<div class="hello">
<img src="images/1.gif" border="0" />
</div>
让传统网站直接压缩适应手机方法
2019-05-04
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format
隐藏页面中XY滚动条方法
2019-05-03
<div style="overFlow-x: hidden; OVERFLOW: scroll; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 140px" align=center></div>
在style样式中加入overFlow-x: hidden;就能把水平滚动条给去掉了。
如果想把垂直滚动条给去掉就用overFlow-y: hidden;如果想要只是在内容超出的情况下才出现滚动条,那就把hid
浏览器选择CSS及关闭兼容模式
2019-05-03
<!doctype html>
<!--[if IE 7]> <html class="ie7" > <![endif]-->
<!--[if IE 8]> <html class="ie8" > <![endif]-->
<!--[if IE 9]> <html class="ie9" > <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-US"> <!-
阿光家民宿网站为例 直接给CSS添加雅黑字体方法
2019-05-03
这几天在给阿光家民宿制作新的html5网站模板的时候,发现WP主题中自带的字体不好看,且不同的页面或者区域字体还不一致,于是动手统一使用同一字体了!
直接打开主题目录下的style.css文件,如果是其他CMS,请打开全站所有模板通用的一个CSS文件,直接在最顶部添下CSS字体定义代码!
*html{font-family:"Microsoft YaH
请站长吃包辣条更有动力写作哦!
分类目录
标签
一 | 二 | 三 | 四 | 五 | 六 | 日 |
---|---|---|---|---|---|---|
« 9月 | ||||||
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 |