0
广外隧道口Web后台（1）
最近在学Node的知识，学没一个星期又有一个项目要做了。哇新的Cmd Markdown更新了苹果的字体看起来好舒服。关键字： 全屏背景 字体图标 data-* 颜色插件 kindeditor项目页面：Submit Activity 全屏背景设计图用了个全屏背景：正常屏幕（1366768)1080P宽屏 (19801080)是的我买了个显示器！好爽！
标签：: CSS
0
重构练习-1
前面太自大了。。怎么能叫前端呢。还只是重构一只呀。 Rating星星的CSS基本实现html:1234567<div class="rating right"> <i class="fa fa-star hover"></i> <i class="fa fa-star hover"></i> <i class="fa fa-star hover"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></div> less:123456789101112131415161718192021.rating{ unicode-bidi: bidi-override; direction: rtl; text-align: center; i{ color: #E4E4E4; cursor: pointer; position: relative; }}.rating > i:hover,.rating > i:hover ~ i{ color: transparent;}.rating > i:hover:before,.rating > i:hover ~ i:before{ content: '\f005'; color: #FFDF56;}
0
移动端重构小节(2)
话说这个寒假还是学了不少东西的哈哈。不过做项目的时候还是感觉自己能力很不足很不足很不足（重要的事情说三遍）要多学习多学习多学习。其实做项目提升还是很大的。 看到什么就写什么。 媒体查询做移动端和PC端会用到的东西。这也是高大上的（对我来说）响应式布局。CSS3 @media 查询仔细再看一遍才发现有些地方误解了。语法：123@media mediatype and|not|only (media feature) { CSS-Code;} 之前用的是@media all and (max-width:640px)以为前面的all是所有的尺寸=。=其实前面的是媒体类型，后面的是媒体功能。媒体类型主要使用：all print screen speech。看来一般用all了。媒体功能就很多了，这里不写。一般是定义大小和分辨率。兼容性：IE9以下需要引入JS文件：Respond.js。放到底部，并且要http协议才能用。当然会有一点延迟啦。写在媒体查询之外的样式会应用在全网页。后面做一个项目的时候用响应式设计，刚开始做的是移动端，设计师切好图我就直接写了。然后发现一个坑爹的事情，导致我拿到PC端的设计图时内心几乎是崩溃的。以后最好提前和设计师沟通，不然就是在给自己挖好多好多的坑（啊）。反正以后我重构不会让设计师帮我切图了。做这个的时候多分组吧。把内容区块包好。在不同的大小下一般是用浮动来控制内容的位置。
0
移动端重构小结(1)
前言：我是大懒虫Orz。一个月没有更新了=。=检讨一下。主要是在做一个移动端的app网页还有完成QT的作业还有过年还有益米的事情。真的要好好总结一下才能提升自己！ 初始化meta标签<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />移动端的页面一定会用到的meta标签。相关概念： meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持 主要参数有下面几个： maximum-scale：用户可以缩放的最大值 minimum-scale：用户可以缩放的最小值 initial-scale：viewport的默认缩放大小 width：固定viewport的宽度 height：固定viewport的高度 user-scalable：是否允许用户缩放 前三个参数都是缩放相关的，它们的值是viewport的缩放大小，他们仅仅改变缩放大小，并不是改变viewport的实际大小。 之后就是width和height，修改这俩东西就和我们在PC上访问网页时候用鼠标拖动浏览器来改变大小一样。或者说是浏览器（页面区域）在屏幕上的默认大小。可以是具体的数值，也可以用“device-width”和“device-height”把它设置成浏览器屏幕的大小。比如要把页面宽度固定到浏览器的屏幕上，防止出现横向滚动条就可以使用 最后一个是指定是否允许用户自己缩放，也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1，如果要禁止可以把它的值设置为0。就像下面这样 参考：移动端的meta viewport 更详细的文章：移动前端开发之viewport的深入理解
0
前端练习-大讲堂(2)
中午了=。= 等爸爸回来吃饭~先写点东西。 全局定义清除浮动：在HTML里加上.clear-fix1234567891011.clear-fix:after{ content: ""; display: table; clear: both;}.clear-fix { *zoom: 1;} 为了IE6/7/8兼容性，解决:after不支持的问题，加上zoom:1; 兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：触发IE浏览器的haslayout解决ie下的浮动，margin重叠等一些问题。 出处：CSS中zoom:1的作用 ，小标签大作用
0
前端练习-大讲堂(1)
本来参加的实习因为各种原因现在还没有设计图发下来= = 所以先打点其他的作业练手练手。大概用了两天的下午重构，以及一个多小时弄兼容性=。= 虽然最后IE7还是没解决好。先写下这些东西了。 设计图其实可以在网上找到原型的~给成长加点料-腾讯大讲堂只不过现在排版什么都更新了。重构后地址：DJT.QQ.COM HTML&CSS&JS这次尝试用了HTML5的标签，发现还有很多地方不熟悉。基本的标签有 header footer article section nav 嗯 这几个用的比较多。摘抄一些网上的经验： HTML对IE6/7/8的兼容 在JS中创造HTML5的标签：123456(function(){ var element=['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption']; for (var i = 0; i < element.length; i++) { document.createElement(element[i]); }; })();
0
CSS基础补充(1)
在给别人讲解一些重构的内容的时候，发现自己还有好多基础没有补上=。= 平时都是打完页面就没有想太多东西，或者解决了问题没有总结。 于是乎看了一些文章，在这里记录一下。 盒子模型 内边距外边距不会遮挡后面的元素 在 CSS 中，width 和 height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 外边距可以是负值，而且在很多情况下都要使用负值的外边距。 在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。 margin百分比：相对于父元素 避免浏览器变小浮动乱跑：在所有盒子外面包裹一个container,确定宽度并使他居中 注意padding和width不要一起用。当设置width为100%的时候，会得到浏览器窗口的大小，但是padding却是另外计算的，所以会出现水平滚动条，多出来的padding撑出屏幕。
0
前端练习-Agentur(2)
区块blockHTML1234567<div class="block"> <img src="images/schaefer.jpg" alt="" class="blimg"> <div class="blcon"> <p>„Große Ideen haben eine unbändige Kraft. Bei Konzeption und Interface Design helfen wir, aus Ideen nachhaltige digitale Produkte zu entwickeln. Dabei stehen stets der User und die Zielsetzung im Mittelpunkt.“</p> <p class="author">- Christoph Schäfer, Interface Design & Web Development</p> </div></div> CSS123456789101112131415161718192021222324252627282930313233343536.block{ width: 100%; background-color: #F0694B; height: 300px;}.blimg { margin-left: 16px; height: 300px; float: left;}.blcon{ color: #FFF; float: left;/* width: 950px;*//* 加了宽度才能浮动到上面 */ padding: 45px 50px 50px 30px; font-size: 32px; line-height: 40px;/* 发现在这里设置margin到了比较窄的屏幕 文字会被挤下去 */ width: 855px;/* 来个固定的宽度就能解决问题啦 只是用Padding宽度会满屏 *//* 解决个毛线问题=。= */}.block .author/* 是用这种方法来写好 还是加个div在里面？标签不用加class*/{ color: #F6C3C9; font-size: 15px; margin-top: 18px;} 要说的都在注释里面了= =。一边打代码一遍写注释好欢乐的样子。
0
前端练习-Agentur(1)
HTML&CSSCSS初始化123456* {margin: 0; padding: 0; }a {color: #FFF; text-decoration: none; }::selection {background: #F0694B; color: #FFF;}::-moz-selection {background: #F0694B; color: #FFF;}/*.content::selection {color: #FFF;}.content::-moz-selection {color: #FFF;}*/ 啊这个自带的代码高亮好丑啊~刚开始没有在意用了*，现在改过来。body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}嗯，改成这样。然后是超链接的样式，去掉下划线，改变颜色。接下来是新学到的东西：元素状态伪类::selection: {attibute} 然后刚好用的是FF,刚开始怎么也没有效果，加上-moz-.