Solid

js 实现放大镜效果

和自甴很熟 提交于 2020-08-06 23:31:22
效果图 1 <! DOCTYPE html > 2 < html > 3 < head > 4 < meta charset ="UTF-8" > 5 < meta name ="viewport" content ="width=device-width, initial-scale=1.0" > 6 < title > 仿京东放大镜效果 </ title > 7 < style > 8 .wrap { 9 width : 400px ; 10 height : 400px ; 11 margin : 150px auto ; 12 border : 1px solid #999999 ; 13 /* background: url('images/pic.jpg') no-repeat center center; 14 background-size: 100%; */ 15 position : relative ; 16 /* overflow: hidden; */ 17 } 18 .move { 19 display : none ; 20 width : 150px ; 21 height : 150px ; 22 background : yellow ; 23 opacity : .3 ; 24 position : absolute ; 25 left : 0

Bootstrap的基本使用(css、js文件的引入)的示例

五迷三道 提交于 2020-08-06 20:00:08
Bootstrap的基本使用(css、js文件的引入) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="keywords" content="javascript,vueJS,Jquery,AngularJS,HTML5,CSS3"> <meta name="author" content=""> <title>Bootstrap3示例</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- 这里是具体的网页内容 --> <!-- bootstrap的核心js文件 --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss

老婆竟然只知道几个css伪类,不行得惩罚她了

空扰寡人 提交于 2020-08-06 10:14:16
最近在教我老婆学习前端,她说想要学习前端,自己在家赚点外快,自己赚点家用。我也拗不过她,而且其实我也挺佩服的。所以就教她了。最近我想考一考她对css中伪类的了解,所以就问了她了解css多少个伪类,伪类是什么? 她说css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。 我点了点头,答得不错继续。 然后她慢慢的说了几个常用的伪类元素,答得还不错,但是她掌握的伪类还是太少了。所以我让她将接下来我说的css伪类给我写99遍,加上例子。 ::first-line | 选择文本的第一行 ::first-line 伪元素在某块级元素的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。 ::first-line 伪元素只能在块容器中,所以, ::first-line 伪元素只能在一个 display 值为 block , inline-block , table-cell 或者 table-caption 中有用。在其他的类型中, ::first-line 是不起作用的。 用法如下: p:first-line { color : lightcoral ; } ::first-letter | 选择这一行的第一字 CSS 伪元素 :

WEB前端第十三课——浏览器内核、位置

别等时光非礼了梦想. 提交于 2020-08-06 09:20:02
1.浏览器内核及前缀   在CSS中新的属性标准尚未明确的情况下,各浏览器厂商对新属性的支持情况也不相同,这个阶段会对属性加厂商前缀进行区分。   根据不同的浏览器内核,CSS前缀有所不同,最基本的浏览器内核有四种,其他内核都是基于此四种进行再研发的。   ① Gecko内核,前缀为“-moz-”,火狐浏览器   ② Webkit内核,前缀是“-webkit-”,也叫谷歌内核,Chrome浏览器最先开发使用,Safari浏览器也使用该内核           目前,国内很多浏览器也使用了webkit内核,如360极速、世界之窗、猎豹等   ③ Trident内核,前缀为“-ms-”,也称 IE内核   ④ Presto内核,前缀是“-o-”,目前只有Opera使用   代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS浏览器内核</title> <style> div { width: 500px; height: 500px; background-color:orange; border: 36px solid rgba(255,255,255,0.5); margin: 60px auto; padding: 50px; font-size: 200px; font

移动端1px细线解决方案总结

天大地大妈咪最大 提交于 2020-08-06 02:53:20
一、移动端1px变粗的原因   为什么移动端css里面写了1px, 实际看起来比1px粗,其实原因很好理解:这个px的含义是不一样的。移动端html的header总会有一句 <meta name= " viewport " content= " width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no " >   这句话定义了本页面的 viewport 的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放。viewport通俗的讲是浏览器上可用来显示页面的区域,这个区域是可能比屏幕大的。根据这篇文章 http://www.cnblogs.com/2050/p/3877280.html 的分析, 手机存在一个能完美适配的理想viewport,分辨率相差很大的手机的理想viewport的宽度可能是一样的,这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的,上面的meta实际上是设置了ideal viewport的宽度。   以实际举例:iphone3和iphone4的屏幕宽度分别是320px,640px,但是它们的ideal viewport的宽度都是320px,设置了设备宽度后,320px宽的元素都能100%的填充满屏幕宽。不同手机的ideal

Html/css 列表项 区分列表首尾

て烟熏妆下的殇ゞ 提交于 2020-08-05 18:45:07
列表项,有时需要判断列表首尾,来筛选设置样式 如上图,三个项有间隔,怎么保证设置了列表项之间的距离后,整体还水平居中显示呢? .item:not(:first-child) {   margin-left: 20px; } 1 <! DOCTYPE html > 2 < html > 3 < head > 4 < meta charset ="UTF-8" > 5 < title > Document </ title > 6 < style type ="text/css" > 7 .container { 8 width : 600px ; 9 height : 300px ; 10 background : rgba(4,0,255,0.50) ; 11 } 12 .list-parentOuter { 13 float : left ; 14 margin-left : 50% ; 15 } 16 .list-parentInner { 17 position : relative ; 18 right : 50% ; 19 display : flex ; 20 flex-direction : row ; 21 justify-items : center ; 22 margin-top : 50px ; 23 } 24 .item { 25 height :

数据存储(1):从数据存储看人类文明-数据存储器发展历程

佐手、 提交于 2020-08-05 18:17:12
传统文本存储 泥版/钟鼎/甲骨/莎草纸/羊皮纸等文字存储 传统的考古学家和历史学家认为,楔形文字起源于美索不达米亚特殊的渔猎生活方式。这是较为通行的看法,西方的各种百科全书大都持这一观点。约在公元前3400年左右,楔形文字雏形产生,多为图像。到公元前 500 年左右, 这种文字甚至成了西亚大部分地区通用的商业交往媒介。楔形文字一直被使用到公元元年前后,使用情景如同现今的拉丁文。 有了文字后,人类有又了记录过往数据的能力。但是,都是靠手工存储。 这些历史,这里不做过多种赘述 造纸与活字印刷术 造纸术与应刷术是中国四大发明之一。 公元105年(西汉),蔡伦改进了造纸术,随后就是对造纸术的改进过程,唐朝利用竹子为原料制成的竹纸,标志着造纸技术取得了重大的突破。随后就是西方一些列的改进了。 公元1041年-1048年(北宋),毕昇发明的泥活字。标志着活字印刷术的诞生。随后也是漫长的改进,传入欧洲400以后, 1440年到1445年之间,德国人约翰内斯·古腾堡的铅活字,凸版印刷技术——维克多·雨果称印刷术为世界上最大的发明。 在中世纪初期,书是财富的象征。如果谁家有一个图书室。那实在是太富有了,因为在当时书是人们用手工辛辛苦苦抄写出来的。僧侣和抄写员经常被雇来做这项工作,当然费用相当可观。印刷机的出现改变了这一切,并在文艺复兴时期加快了知识和文化的传播。 穿孔卡带纸存储 最早期的存储媒介—

CSS文本控制

霸气de小男生 提交于 2020-08-05 09:14:18
CSS文本控制 文本基础设置 字体设置    font-family 可定义多个字体,系统会以从左至右的顺序进行查找,如左侧字体不存在,就往右侧找。    为什么要这么做呢?如果你只用了一种字体,而恰好人家电脑上没装,那么对不起了,他的显示肯定是有问题的。 < style > div { /* 多设置几种字体属性 font-family 文字家族,就是字体的意思 */ font-family : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ; } </ style > 字体设置 自定义字体    可以进行自定义字体,使用方式也非常简单。当自定义字体不存在时将通过 src 进行下载。注意导入字体后一定要使用 format 来说明字体的格式。 字体 格式 .otf opentype .woff woff .ttf truetype .eot Embedded-opentype    不建议使用中文字体,因为文件太大且大部分是商业字体。 < style > /* 导入该字体,可以多指定几个地址 */ @font-face { font-family : "ALLEGRO" ; src : url("./ALLEGRO.TTF") format("truetype"), url("./ALLEGRO.TTF") format(

个人练习:使用HTML+CSS制作二级菜单

 ̄綄美尐妖づ 提交于 2020-08-05 05:18:23
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手。 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的<iframe>中打开网站链接。(可能这里会有人好奇"为什么不点开哔哩哔哩你不是都放在上面了嘛!",实际上我这边点开哔哩哔哩它会跳转两次,先在<iframe>中打开一次,然后又会在当前页面转到哔哩哔哩,你得后退一次才能看到在<iframe>中打开的哔哩哔哩_(:з」∠)_) 那么不废话了直接切入正题。 我的设想是创建两个<div>,宽度都是占100%,顶上的<div>放菜单栏,下面的<div>专门放<iframe>(这里先给两个区域设置背景颜色好分辨): 1 <!-- 顶部div区域,存放横向导航栏 --> 2 < div class ="topMenu" > 3 4 </ div > 5 6 <!-- 主要内容的div区域,存放网站页面的框架 --> 7 < div class ="mainContent" > 8 9 </ div > HTML部分 底端的<div>区域我希望高度是除去顶端元素后剩余的所有部分,这里就用到了CSS3中的一个函数calc()。: 1 /* 清除文档内外边距,让<div>区域能够紧贴浏览器边缘 */ 2 body { 3 padding : 0px ;

超好看的博客园皮肤 Sakura~

隐身守侯 提交于 2020-08-05 04:15:37
(。・∀・)ノ゙嗨,我的博客又更新了!(其实可能已经被我改回去了) 点这儿点这儿,传送门吖~ 注:网页有时候要刷新一遍才能显示出来哦,不知道为啥🌚 是不是很好看? 但是很多东西还在研究中,(才被我改回去的)所以代码不三不四的,先放上来吧,也欢迎提修改意见哟~ 上代码 : css样式 .cnblogs-markdown .hljs { display : block ; color : #333 ; overflow-x : auto ; background : #F2F4F5 !important ; border : none !important ; font-family : Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important ; padding : 1em !important ; font-size : 14px !important } .hljs-comment, .hljs-meta { color : #969896 } .hljs-emphasis, .hljs-quote, .hljs-string, .hljs-strong, .hljs-template-variable, .hljs-variable { color : #df5000 } .hljs-keyword