Solid | 易学教程

js 实现放大镜效果

阅读更多关于 js 实现放大镜效果

效果图 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文件的引入）的示例

阅读更多关于 Bootstrap的基本使用（css、js文件的引入）的示例

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>   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss

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

阅读更多关于老婆竟然只知道几个css伪类，不行得惩罚她了

最近在教我老婆学习前端，她说想要学习前端，自己在家赚点外快，自己赚点家用。我也拗不过她，而且其实我也挺佩服的。所以就教她了。最近我想考一考她对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前端第十三课——浏览器内核、位置

阅读更多关于 WEB前端第十三课——浏览器内核、位置

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细线解决方案总结

阅读更多关于移动端1px细线解决方案总结

一、移动端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 列表项区分列表首尾

阅读更多关于 Html/css 列表项区分列表首尾

列表项，有时需要判断列表首尾，来筛选设置样式如上图，三个项有间隔，怎么保证设置了列表项之间的距离后，整体还水平居中显示呢？ .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)：从数据存储看人类文明-数据存储器发展历程

阅读更多关于数据存储(1)：从数据存储看人类文明-数据存储器发展历程

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

CSS文本控制

阅读更多关于 CSS文本控制

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制作二级菜单

阅读更多关于个人练习：使用HTML+CSS制作二级菜单

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

超好看的博客园皮肤 Sakura~

阅读更多关于超好看的博客园皮肤 Sakura~

(｡･∀･)ﾉﾞ嗨，我的博客又更新了！（其实可能已经被我改回去了）点这儿点这儿，传送门吖~ 注：网页有时候要刷新一遍才能显示出来哦，不知道为啥🌚 是不是很好看？但是很多东西还在研究中，（才被我改回去的）所以代码不三不四的，先放上来吧，也欢迎提修改意见哟~ 上代码： 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

订阅 Solid