随笔分类 - 技术专题_学习笔记
摘要：今天接着上一篇文章《Web前端入门级练习_迅雷官宣网设计》正式开始迅雷首页第一版的设计。如果完成，则最终的效果图如下 第一步：先完成logo部分的设计 logo设计，我们会使用CSS的定位来实现，但是在实现定位的时候，先得把网页结构编写好 添加样式，样式文件xunlei.css 解释一下上面的代码思
阅读全文
摘要：也有一段时间没有写一些技术专题文章，今天给大家来几篇Web前端入门级练习的文章。主讲《迅雷官宣网》的设计，相信大家平时也用过迅雷这个下载工具，所以分享的这篇技术大家在一定程序会感兴趣。 先来一个效果图，整体仪式感还是要有的 但是要大家要注意，迅雷官宣网是设计是现在非常流行一种分屏滑动特效技术。上面只
阅读全文
摘要：此文章是接着上次写的《酷炫视频播放器制作_界面篇》将其完善，我们主要给大家介绍一下如何利用JS脚本来控制视频的播放。为了让大家能够保持对要完成的功能有直接的了解，我们还是将效果图附到文章里面 完成本篇文章的代码编写，你能GET到200+代码量，且能够掌握很多有关video标签的属性，函数，事件的应用
阅读全文
摘要：今天开始分享一篇酷炫播放器制作，包括界面+JS。整个案例非常类似腾讯视频，优酷视频，爱奇艺视频。我们先看一下效果图，然后这篇文章主要界面篇 是不是效果比较酷炫，那么我接着来给大家说一下这个界面设计思路 1. 植入BootStrap框架 2. 页面主体区域分为三大块：播放标题，播放内容，播放控制条 因
阅读全文
摘要：继续我们技术专题课，我们今天给大家带来的是一个比较酷炫的“纯CSS代码实现内容过滤效果”，没有加入任何JS的效果。全部都是应用CSS3的新增选择器来实现的。先看效果截图 实现思路 上面的四个按钮是利用 radio + label 组合方式实现 下面的图片全部都通过左浮动方式排列 外层有一个最大的di
阅读全文
摘要：小白在学习前端技术时候，一定会在刚开始的时候学习CSS2和CSS3的相关知识。这篇内容给大家介绍一个CSS鼠标悬停的效果。大家可以先看下面的效果图，然后我们在说一下实现的效果要求吧 上图效果非常简单和清晰，就是鼠标放上去能够将图片进行缩率图的放小效果。实现要求 CSS的伪类hover的应用，通过伪类
阅读全文
摘要：图片画廊也是一种比较经典的案例。本节文章主要简单给大家介绍了CSS2实现图片画廊，采取的实现思路 ul放置图片 li标签里面嵌套a标签 a标签里面嵌套两个图片的标签 通过简单的伪类来实现图片预览效果 具体效果图如下，这样子大家看了效果图，就会知道我们到底为了实现什么样子的效果 具体的代码如下
阅读全文
摘要：先给出效果图，见下图。下图主要的完成当鼠标放到分页数字的上会呈现一个变大的效果 实现思路： （1）. 使用浮动属性，以便让li元素水平排列。 （2）.将a元素设置为块级元素，然后设置它们的尺寸。 （3）.使用链接伪类控制当鼠标放在链接之上使a元素尺寸变大；使用绝对定位，使a元素能够覆盖周边的元素。
阅读全文
摘要：再来写一个菜单侧边栏的制作，先看截图 源代码如下
阅读全文
摘要：简单给大家介绍一下CSS普通菜单制作，先看图 功能很简单 UL制作菜单 鼠标进入LI的CSS伪类，实现菜单弹出效果 源码如下
阅读全文
浙公网安备 33010602011771号