src

What ../path and ~/path Indicates in MVC?

六月ゝ 毕业季﹏ 提交于 2020-06-12 06:29:08
问题 I have one custom helper class called Image which is having two arguments: src alt Now I am going to call that in one of View, @Html.Image("../Images/Indian.gif","Image is not supported or exist") <img src="~/Images/Indian.gif" alt="Image is not supported or exist" /> Now, this both will give me same result but I am confused that why the path was not the same for both and what "../path" and "~/path" indicate? This two-line it generates when I do inspect element in a web browser: <img alt=

(译)响应式图片— srcset 和 sizes 属性

大憨熊 提交于 2020-04-07 21:38:33
在响应式网页设计的革命中,图片看起来是被浪潮落下的一个事物。直到最近,根据不同的屏幕尺寸和像素密度来提供不同的图片还是没有完全实现。 <picture> 元素展示了很多改变这个局面的希望,但无论picture元素是否可以完全使用,现在有两个对于响应式图片很关键的两个属性 —— srcset 和 sizes 。 srcset 属性 srcset 属性允许我们可以提供一系列也许可以被浏览器使用的图片资源。我们提供一个以逗号为分割的图片list,user agent会根据设备特性来决定哪一张图片来显示在网页上。 当listing图片时,我们提供每张图片两个信息 —— 图片文件的_路径_ 图片文件的_宽度_或者_像素密度_ 为了定义_像素密度_,我们添加一个 x 来表示图片的密度数值。举个栗子 —- <img src="one.png" srcset="two.png 2x, three.png 3x, four.png 4x"\> 在图片 src 中定义的默认为图片的 1x 。 在2012年 srcset 属性第一次提出时,我们只能提供不同的像素密度的图片,就像上面例子中显示的。然而,在2014年新添加了 width 属性,它可以使我们根据不同的宽度来提供不同的图片。 为了指定图片的宽度,我们添加一个 w 来表示图片的像素宽度。举个栗子 —- <img src="one.png"

一键换肤原理

最后都变了- 提交于 2020-04-07 06:22:50
效果:通过按键弹出备选皮肤,点击选择样式后,更换成功。 思路:先是布局上我们需要定位,所以为了避免背景把换肤按钮给盖住,需要把按钮的标签放到大背景div的下面,并列结构。假如倒置了可以加层级让其显示。 代码如下: <!DOCTYPE html> <html> <head> <title>换肤</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="list.css" rel="stylesheet" type="text/css"/> <link href="reset.css" rel="stylesheet" type="text/css"/> <style type="text/css"> html,body{ width: 100%;height:100%; } p{ width: 100%; height: 50px; background: #000; color:#fff; font-size: 30px; line-height: 50px; text-align: center; position:absolute; top:0; left: 0; cursor: pointer; } body