HTML-CSS
文章平均质量分 79
小威威__
这个作者很懒,什么都没留下…
展开
-
HTML/CSS:编写合法HTML页面简明指南
1.简介HTML的发展历程: HTML1.0~2.0 —> HTML3 —> HTML4 —> HTML4.01 —> XHTML1.0 —> HTML5。 对于相关的背景,我就不再详细地阐述了,想要了解的朋友可以自行在网上搜索。注意:HTML标准将变成一个“活的标准”,这意味着它会根据需要继续发展和变化,不过不再有固定的版本号,所以,不再有版本号。故从此以后,我们所称的HTML就是指HTML5原创 2016-09-11 09:29:34 · 1092 阅读 · 0 评论 -
Javascript: 迷宫与打地鼠
github地址:小威威的github1.迷宫项目要求: 需求规格(50分) UI(10分):UI与上图完全一致;或者,自由发挥,设计出更加漂亮、合理的UI。 正常赢(10分):移动鼠标,从S开始,到E结束,中间不碰墙,赢得游戏,显示“You Win” 碰墙输(10分):从S开始后,到E结束之前,碰墙,墙变红,输,显示“You Lose” 重置结果(10分):离开迷宫,墙原创 2016-10-17 14:47:42 · 1832 阅读 · 0 评论 -
Javascript: 实现拼图游戏
注:本人网页项目github:linwh8需求规格: 1.UI(10分): UI与效果图完全一致;或者,自由发挥,设计出更加漂亮、合理的UI(可以使用其他图片); 2.正常移动(20分): 点击空白旁边的图块,图块移动空白处。点击其他图块,不会移动; 3.图块图片正常(20分):无论如何移动 ,每个图块上的图片都保持不变; 4.拼图结束(10分): 当拼回原图时,提示用户游戏获原创 2016-10-24 00:11:01 · 17034 阅读 · 5 评论 -
HTML/CSS: 媒体查询
1.INTRODUCTION之前写过一篇关于媒体查询的博文:HTML/CSS: 通过媒体查询增加网页在设备上的兼容性。如今对媒体查询有了更深一步的了解,故这篇博文是对之前文章的补充。在媒体查询出现之前,为适应移动设备浏览网页,网站开发者通常会开发方便移动设备访问的版本,但这通常需要大量的开发,必须建立一个子域,使用不同于父站点的样式表和HTML模板,图片也不得不重新调整大小以更好的适应小的屏幕。另外原创 2016-10-10 21:31:57 · 2628 阅读 · 0 评论 -
HTML/CSS: Make a Ring Menu 环形菜单
制作一个Ring Menu需要有以下基础: 1. 熟练掌握元素的布局与定位; 2. 熟练掌握对元素边框的处理; 3. 熟练掌握伪类:hover的应用; 4. 熟练掌握子选择器的应用; 5. 熟练掌握背景处理; 6. 熟练掌握2D变换; 7. 熟练掌握过渡设置。现在要制作一个 Ring Menu, 效果图如下: 初始状态下: 但鼠标移动到@上时,效果如下:构思: 1.怎么用css实原创 2016-09-24 17:07:32 · 4345 阅读 · 0 评论 -
JavaScript: 制作简单计算器
效果图如下:下面来讲讲我的思路: 简单的说就是利用HTML与CSS制作出一个计算器的外观,然后通过js来实现用户与计算器之间的交互,进而实现简单的计算。对于HTML: According to semantic HTML, I use <bottom>to represent every button, using <input> to display the result.对于CSS: I原创 2016-10-05 21:27:58 · 1447 阅读 · 0 评论 -
HTML/CSS: background-clip 与 background-origin的区别
在CSS2中,背景图片定义的位置是相对于其包含元素的填充(padding)的外部界限的,所有的溢出都会扩展到边框之下。CSS3引入了两个新的属性,可以对其进行更精细的控制。第一个属性是:background-clip 第二个属性是:background-origin其对应语法如下:E { background-clip: keyword;}F { background-orig原创 2016-09-23 11:32:17 · 4976 阅读 · 0 评论 -
HTML/CSS: 用CSS与HTML实现表格的显示
在制作网页页面时,经常需要对页面进行分栏。据我现有的知识,目前有三种方法可以实现: (1)float大法; (2)position-absolute大法; (3)表格大法。今天重点讲述的是表格大法。对于前面两种,就简单说明一下: (1)float大法便是将边栏设置为浮动,然后设置主内容的margin-left 或者是 margin-right 等于边栏的总宽度(外边距+内边距+内容宽度)。如原创 2016-09-19 19:27:12 · 5186 阅读 · 0 评论 -
HTML/CSS: Rule conflicts algorithm(层叠)
作为页面作者,我们可以对我们的HTML使用多个样式表,用户也可能提供自己的样式,另外浏览器也有默认样式。而且,不仅如此,还可以有多个选择器应用到同一个元素。那么,如何确定一个元素究竟应用哪些样式呢?实际上,这就是在问层叠的作用,只是问法不同。给定一组样式表中的一组样式,浏览器就是以层叠方式来确定具体使用哪一种样式。而本篇博文将会详细讲述浏览器采取的规则,即是Rule conflicts algori原创 2016-09-17 00:39:01 · 601 阅读 · 0 评论 -
HTML/CSS: 浅谈<a>标签及伪类选择器
1.基础知识“超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。” —HTML链接 而对于超文本,简单的说便是通过一个特定的标识符,定位到文本所在的地方,然后将其链接到本页面中。详细请参考:什么是超文本相对路径:就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。简单的说便是以当前文件为参考点而继续补充的路径。例原创 2016-09-10 00:16:59 · 6032 阅读 · 0 评论 -
HTML/CSS: 通过媒体查询增加网页在设备上的兼容性
我们知道,HTML决定了网页的内容结构,css样式表决定了网页的外观,也就是样式。对于一个简单的网站,其外观可能是多张样式表叠加而成的。那为什么不合为一张总的css样式表呢?原因是网页制作者一般会将其中一个样式表作为网页的基本样式,然后通过链接新的样式表来达到页面改进的效果。这样做非常的方便,即不会影响原来基础样式的代码,又能在其基础上进一步的改进,这是十分方便的。使用多个样式表还有另一个原因,便是原创 2016-09-16 15:24:53 · 1840 阅读 · 0 评论 -
HTML/CSS: 浅谈字体系列与web字体
1.字体系列在css中,我们常通过font-family设定文本字体,且通过font-size, color, font-weight,text-decoration等设置字体的属性。font-family: 指包含一组有共同特征的字体。共有五个字体系列:sans-serif, serif, monospace, cursive, fantasy. serif: 指的是有衬线的字体,一般用于新闻报原创 2016-09-15 17:15:50 · 1005 阅读 · 0 评论 -
HTML/CSS:Web常用图片类型
1.基础知识(1)浏览器是如何处理图像的?在HTML中,我们通过<image>标签将图片链接到html文件中。当浏览器读取html的<image>标签时,在显现图片之前,会先获取这个图像(从服务器获取、从本地获取),然后再显现。(2)<image>标签<image>标签的语法很简单,详见:HTML_图像<image>主要有两个属性:src与alt。还有width,height。src与我以前的博文H原创 2016-09-10 16:24:38 · 3446 阅读 · 0 评论 -
HTML/Javascript: 点击按钮页面刷新问题
注:我只是为了说明点击按钮页面刷新的问题,并不是指这一功能有缺陷。下面我会举出我遇到的例子。上图是我制作的一个很简易的HTML表单。当我按下全选按钮时,发现有一瞬间全部项目打上勾,但是立马所有勾就消失了。当时感觉很奇怪,在怀疑是不是js的代码出现错误了,可是经过自己核对没有发现什么错误。于是我就打开了Chrome的调试器,输入以下内容: 运行后第一个选项能正常被打勾。然后我点击了全选按钮,调试器里原创 2016-10-18 14:26:31 · 11552 阅读 · 0 评论