![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
Yuyao_Xu
这个作者很懒,什么都没留下…
展开
-
日系博客HTML网站设计,源码搭建,无插件无框架,含音乐播放器,时钟日历,轮播图,相册
引言为课程作业,设计参考了无印良品日本官网应老师要求不使用JQ,全部效果源码一行行敲出来,浏览器用的是360极速浏览器,未对其他浏览器内核进行适配,最终实现的效果如下,可进入展示页面查看展示页面:http://xyy9.gitee.io/roll/页面介绍...原创 2020-02-03 20:37:37 · 3514 阅读 · 0 评论 -
HTML音乐播放器插件编写
效果见右上角:展示页面:http://xyy9.gitee.io/roll/鼠标移入可展开歌单和歌曲封面信息默认选中第一首,点击碟片进行播放,底下图片切换至对应图片,播放时,碟片进行旋转,唱针不动,点击歌曲名字进行重播。源码如下:html<!--==========黑胶碟片旋转=========--> <div id="songstatus"> &...原创 2020-02-03 20:32:51 · 2406 阅读 · 3 评论 -
HTML时钟日历插件编写
最终实现的效果如下,可进入展示页面查看展示页面:http://xyy9.gitee.io/roll/位于映像标题右侧显示,实时获取当前时间,各指针随时间转动HTML<!--时间表--><div id="Clock"> <img id="clock_" src="img/clock.png" > <img id="clock_hour" sr...原创 2020-02-03 20:30:54 · 1077 阅读 · 0 评论 -
HTML轮播图编写
最终实现的效果如下,可进入展示页面查看展示页面:http://xyy9.gitee.io/roll/照片轮播图,点击进入相册HTML<!--实现图片轮播效果--><div id="Upper"> <div class="carousel"> <div class="imgBox"> <ul> <li ...原创 2020-02-03 20:26:14 · 573 阅读 · 0 评论 -
HTML相册效果实现
最终实现的效果如下,可进入展示页面查看展示页面:http://xyy9.gitee.io/roll/album.htmlHTML都是一样的 div 自行复制即可<!--相册--><div id="albums"><a href="day_1.html"> <div class="smallpicshow"> <div cla...原创 2020-02-03 20:25:35 · 4070 阅读 · 0 评论 -
CSS3动画,过渡效果animation、@keyframes、transform、transition
CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。浏览器支持Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。...原创 2019-09-01 01:35:14 · 1307 阅读 · 0 评论 -
HTML 音乐播放器界面
经过了两周的实训,最后两天时间开始这个项目的设计和制作,技术不够成熟,还未能连上数据库,大部分的时间花在了组内成员各页面的整合之上,效果不胜理想。在此先简单做一个总结,记录一些东西。音乐播放功能功能描述:点击歌曲名字,出现单曲播放界面,底端播放器进行播放,歌曲名与歌手名显现对应名字,切换页面的同时,歌曲不间断播放,播放按钮点击实现暂停,重播按钮点击实现重播。歌名设置onclick事件s...原创 2019-09-01 01:14:31 · 13402 阅读 · 6 评论 -
HTML+JavaScript计算器实例
实训第三天计算器实例没有用div框架用了table来做框要求为输入的数字不能为空,必须是3到6位<html> <head> <title> calculator </title> <meta charset="utf-8"> <script> //检查输入格式 function...原创 2019-08-22 22:09:16 · 286 阅读 · 0 评论 -
HTML用户登录界面(表单验证)JavaScript简单运用
实训第三天<html> <head> <title> 用户登录界面 </title> <meta charset="utf-8"> <script> function checkUser(){ var username = document.getElementById("usernam...原创 2019-08-22 21:50:40 · 24679 阅读 · 2 评论 -
CSS基础知识
块元素居中:方法一:先设置width: 100px, 再设置margin: auto;方法二:父元素:水平居中 text-align:center; 垂直居中 vertical-align:middle; display: table-cell;子元素:display:inline-block; vertical-align:middle; <!-- css创建 --...原创 2019-08-21 22:16:31 · 241 阅读 · 1 评论 -
HTML和CSS设计简单注册页面
实训第二天,主要学习CSS运用div进行框架搭建,主要做了两个实例一为彩色拼图,主要是根据div的嵌套,以及float浮动来控制位置控制位置的还有绝对位置法和相对位置法彩色拼图以下为彩色拼图的代码<html> <head> <meta charset="utf-8"> <title>divwork</title>...原创 2019-08-21 21:20:03 · 1384 阅读 · 5 评论 -
HTML简单后台界面基础+跳转简单商城界面
总共分五个文件images图片就不放上来了,明白原理即可后台主页框架<html> <head> <title>Home</title> <meta charset="utf-8"> </head> <frameset rows="20%,*"> <frameset cols=...原创 2019-08-20 23:49:59 · 2252 阅读 · 0 评论 -
HTML基本语法
软通极客营01伍传琴 13851613814 913295104@qq.com输出格式中文编译常用 GBK(中文以及常用英文) UTF-8(世界所有文字)一、基本语法<html> <head> <meta charset="utf-8"> <title>The First</title> <!-- titl...原创 2019-08-20 23:29:52 · 524 阅读 · 0 评论