前端的快乐生活
关注
分享
扫一扫
其实一直很喜欢这一块的，但仅仅也就是一种业余兴趣，以后工作不是很想做这一块
beyond_LH
接纳自己，并快乐地生活
展开
-
前端学习第三弹：利用div+css制作个人简历
尝试用纯html制作简历，但是显得过于死板，参数设置不灵活，由于刚刚接触这一块，从网上找了很多资源，先输出后输入，通过一个具体的例子查缺补漏，这样学起来更有劲头也更具效率。 具体代码如下，已经尽力做了注释： 个人简历 /*声明其内容为标准的css*/ *{ margin: 0;原创 2017-10-07 16:02:17 · 12000 阅读 · 2 评论 -
js中的点击按钮事件
年前的时候自学过一段时间的html+css，讲真，这一块是我的兴趣点，但有时候真的觉得很无力，怀疑自己的审美，强迫症晚期的人伤不起啊，各种调整，各种不美好……现在来到了js，三兄弟即将合体，希望我能沉迷其中吧~~首先写了一个js脚本，效果是用引号中的内容去替代id为“we”中的html内容：function myFirst(){ document.getElementById("...原创 2018-03-29 21:59:56 · 30454 阅读 · 2 评论 -
前端学习第九弹：简易的聊天界面
这次做的简易聊天界面虽然看似简单，但着实花了不少精力，各种调整、查资料，新手之路还很长啊，继续走下去吧~~~ body{ background:#eee; color:#222; font-size:20px; font-family:"fangsong"; } img{ display:block; hei原创 2017-11-05 16:27:34 · 4401 阅读 · 0 评论 -
前端学习第八弹：制作一个精美书签
我不知道这个标题是不是有点名不副实，可以把它称之为书签吧，或者精美封面。。本次主要练手的是边框效果，主要体现在上边框的分离与拼接，上代码吧： body{font-family:"FangSong";background:#ddd;} p{ margin:20px auto 40px auto; width:50%;原创 2017-11-04 18:00:06 · 4204 阅读 · 0 评论 -
前端之路随笔小记：position属性详解
上篇博客用到的是position属性的fixed值，即固定定位，然后……上代码吧： body{background:#ccc8dc} h1.r-left{position:relative;left:-30px;} h1.r-right{position:relative;left:30px;} h2.abs{posit原创 2017-11-03 23:00:23 · 1657 阅读 · 0 评论 -
前端学习第七弹：固定位置的导航
导航条固定在窗口顶端，拖动滚动条其位置不会变化。做到最后对于css中的“position”属性很是不解，尤其是设置margin和padding后，各种眩晕，待会展示一下，具体的探索见下一篇对于该属性的随笔小记。 body{ height:2000px; font-family:serif; background-color:#fff8dc;原创 2017-11-02 17:44:41 · 2776 阅读 · 0 评论 -
前端学习第六弹：制作一个简易导航
发了一天烧，一会就要洗洗睡了，希望小病快快走开~~~制作一个简易的导航，遇到了一个问题，可能是脑子发懵的缘故，把#di ul{display：inline}中的“display”写成“dispily”，一个字母的疏忽，查了好久。。变化就是改变前方框占据整个屏幕，修改后变成了自适应，什么情况，不是说display的默认值就是inline嘛。。 body { f原创 2017-10-31 21:37:45 · 3335 阅读 · 2 评论 -
前端之路随笔小记——height:100%
有个问题纠结了很久，关于html,body{height：100%}，当时看到时就蒙了，看了很多相关文章介绍，博客论坛百度百科一把抓，但讲真，很多评价很高的文章所提的观点在我的实验中并不成立（也许是我的问题），原创 2017-10-15 22:27:26 · 1655 阅读 · 0 评论 -
前端之路随笔小记——display属性
在昨晚的博客中有个问题，就是关于CSS中的display属性，网上有各种说法，咱们还是用实践证明一切吧。 这是内联元素 这是块级元素，前后有换行符 为内联元素，为块级元素，效果如下：块级元素前后都有换行符，给加上“display：inline”后便把其定义成内联元素，效果如下：内联元素会和其相邻的内联元素在同一行，可以原创 2017-11-01 12:58:55 · 1418 阅读 · 0 评论 -
前端之路随笔小记——float浮动 VS clear清除浮动
讲真，平时很少使用浮动，总感觉他是个恐怖分子，随时捣乱我的布局~~有些知识还没有系统起来，一点点走吧，总会在某个时间点上恍然大悟~~ body{background:#cdc673;} .div_father{background:#fff8dc;border:1px solid #333;width:400px} .div_left,.div_right{bor原创 2017-11-08 21:14:22 · 2443 阅读 · 0 评论 -
前端学习第五弹：制作一个简单的网页
有一段时间没有接触前端了，从现在重新开始吧，一点点地前进。今晚有点感冒，脑子不大灵光，一个很简单的页面出现了各种错误，都是很低级的，比如在CSS中定义body的样式，竟然写成{XXXX}，然后琢磨了很久都没看出来，不可饶恕啊。。上代码吧： body { margin:0 auto; width:100%; fo原创 2017-10-30 22:16:35 · 4055 阅读 · 0 评论 -
前端之路随笔小记——属性：lang VS charset
之前做的网页是用360极速浏览器展示的，没啥毛病，可用别的浏览器打开便乱码了，当时以为是兼容性问题，今天在做别的程序时发现忘了指定编码，在标签内加入便搞定了。这一属性规定了HTML的字符编码，属于H5的新属性，之前原创 2017-10-06 15:42:51 · 2040 阅读 · 0 评论 -
前端学习第二弹：target属性
今天被标签的target属性着实打击了一把，怪我想太多，没有从局部钻出来~~~ 之前用的基本上就是那四个常见属性_blank，_self，_parent以及_top，关于这四大金刚大家应该都比较熟悉，_blank表示在新窗口打开被链接的文档；_self表示在相同的框架中打开被链接文档，这也是默认值；_parent表示在父框架打开被链接文档；_top表示在整个窗口中打开被链接文档。平原创 2017-10-05 13:58:39 · 7827 阅读 · 0 评论 -
前端之路随笔小记——id VS class
昨天制作的菜谱中用到了id和class两种属性，通过查阅资料基本掌握了二者的使用原理及异同，现做简单归纳：（1）首先我们在布局时经常会用到div元素，它能使我们对某一特定区域做特殊处理，个人理解相当于java中的封装机制，而与之相关联的属性有id，class等，二者都可以丰富div区域的内容，使得程序更加简洁而又条理性。（2）id，顾名思义，身份证，具有唯一性。它为一个元素原创 2017-10-04 14:31:52 · 1648 阅读 · 0 评论 -
前端学习第一弹：制作简易菜谱
时隔几年重拾html（当时就学的很浅显），连基本属性都不记得了，希望能一直坚持下去，从一个个小例子中不断丰富知识库，加油吧~~程序写的比较乱，还请各位大牛指导一二……直接上代码吧： 你好，吃货 .aa{font-family:"楷体";font-size:50px;text-align:center;color:yellow}原创 2017-10-03 21:27:02 · 6514 阅读 · 1 评论 -
前端学习第四弹：CSS样式中的背景设置
打算从今天起实施专题突破，从局部到整体，逐渐搭建起知识框架，这次先来个CSS样式中的背景设置，包括背景颜色/背景图片等，直接上代码： body {background-color:"pink"; background-image:url(resume/beijing.jpg); background-repeat:no-repe原创 2017-10-09 16:37:24 · 1881 阅读 · 0 评论 -
前端之路随笔小记——id和class的扩展
在前篇内容中提到了id以及class，只是看到了很简单的声明类型，在制作个人简历时遇到了遇到了奇怪的声明（当时着实没有看懂），如下图所示： 查阅了一些资料，没怎么讲明白，后来看到一位同仁在回答别人问题中提到了这个问题，结合可视化界面我大概搞懂了这个套路；首先resume为id名称，比如上方的声明意思就是找到id名称为resume的区块，将它所包含的下的class名称为none1原创 2017-10-08 11:13:02 · 1578 阅读 · 0 评论 -
js验证邮箱
本文代码来自W3school，部分有删改<html> <head> <meta charset="utf-8" /> <script> function checkEmail(field,alerttxt) { with (field) {...原创 2018-03-31 22:54:50 · 5100 阅读 · 0 评论