标签：: HTML

2015
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

前端

下拉菜单(2)

你知道我这几天都在干嘛吗^_^今天下午买的手柄到了！！！好开熏。

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-.

0

前端

下拉菜单

最近几天在看慕课网上的前端视频。主要是下拉菜单的制作。先把代码贴上去，以后慢慢总结(考试周伤不起啊~~(那你还去看前端…)) 贴几个经典的吧： 1. 最普通的下拉菜单1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>nav</title> <style> * {margin: 0; padding: 0; } div {width: 960px; height: 40px; margin: 0 auto; background-color: #eee;} ul {list-style: none; } ul li {position: relative; float: left; line-height: 40px; text-align: center; } a {display: block; text-decoration: none; color: #000; padding: 0 10px; height: 40px; } a:hover {color: #fff; background-color: #000;} ul li ul li {float: none; background-color: #eee; margin-top: 2px;} ul li ul {position: absolute; left: 0; top: 40px; display: none;} ul li ul li a{ width:80px;} ul li ul li a:hover {background-color: #06F;} ul li:hover ul{display: block;} </style></head><body> <div> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">课堂大厅</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> </ul> </li> <li><a href="#">学习中心</a></li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div></body></html>