前端练习-大讲堂(1)

2015-02-01

本来参加的实习因为各种原因现在还没有设计图发下来= = 所以先打点其他的作业练手练手。大概用了两天的下午重构，以及一个多小时弄兼容性=。= 虽然最后IE7还是没解决好。先写下这些东西了。

设计图

其实可以在网上找到原型的~给成长加点料-腾讯大讲堂
只不过现在排版什么都更新了。
重构后地址：DJT.QQ.COM

HTML&CSS&JS

这次尝试用了HTML5的标签，发现还有很多地方不熟悉。
基本的标签有 header footer article section nav 嗯这几个用的比较多。
摘抄一些网上的经验：

HTML对IE6/7/8的兼容

在JS中创造HTML5的标签：

(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]);
                };
 })();

顺便说一句，这是JS匿名函数的封装方法；

创建一个自调用匿名函数，设计参数window，并传入window对象。
而这个过程的目的则是，
使得自身的代码不会被其他代码污染，同时也可以不污染其他代码。

测试中发现这样写会自动调用，不用写window.onload = function (){}。百度了一下这种写法叫自执行的匿名函数。

什么是自执行的匿名函数?
它是指形如这样的函数: (function {// code})();

疑问
为什么(function {// code})();可以被执行, 而function {// code}();却会报错?
分析
(1). 首先, 要清楚两者的区别:
(function {// code})是表达式, function {// code}是函数声明.
(2). 其次, js”预编译”的特点:
js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.
(3). 当js执行到function() {//code}();时, 由于function() {//code}在”预编译”阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;
当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一  个函数, 故而遇到();时, 便会被执行.

出处：JS自执行的匿名函数

有点扯远了。。接下来，是在CSS中声明这些新的标签为块级元素，默认是内联的：

1	header,section,nav,footer,article,aside{display: block;}

这样可以解决IE9以前浏览器不能识别HTML5标签的问题。

h1~h6标签

在一个网页中可以适当使用h1 h2 h3 h4标签，有利于网页的重点部分突出，同时也利于搜索引擎排名，但切记滥用多用H1 H2 H3 H4标签，适当使用即可，一切从用户体验出发来使用。如果需要控制这些标题标签的大小、背景、宽度、高度、CSS加粗与否都可以通过DIV CSS来实现对其样式重新定义。

使用CSS样式初始化H1 H2 H3 H4标签代码：
H1,h2,h3,h4{font-size:12px; font-weight:normal}
我们初始化了字体大小设置为12px，去除了H1 H2 H3 H4文字加粗样式。根据范例可扩展运用。

出处：HTML之h1 h2 h3 h4标签知识经验篇

二级菜单

虽然之前学过视频的教程，可是自己真正打起来全忘光了=。= 错漏百出改了好久之后还是回去看了看教程的代码，修改后变成下面：

<nav>
	<ul id="speech" class="clear-fix">
		<li><a href="#">首页</a></li>
		<li>
			<a href="#">讲座</a>
			<img src="images/arrow1.png" alt="" id="arrow">
			<ul class="subul">
				<li><a href="#">我想买冬夏脉动啊冻干粉</a></li>
				<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>
</nav>


.head-nav nav
{
	margin-top: 30px;
	font-size: 16px;
}
#arrow
{
	visibility: hidden;
	margin-top: 16px;
	margin-right: 5px;
}
.head-nav nav ul li
{
	margin-right: 30px;
	border-radius: 5px;
	text-align: center;
	position: relative;
	transition: all 0.3s ease-in-out;
}
.head-nav nav ul li a
{
	float: left;
	padding: 10px;
}
.subul
{
	visibility: hidden;
	position: absolute;
	left: -10px;
	top: 41px;
	border-radius: 5px;
	margin-left: 10px;
	opacity: 0;
	transition: all 0.3s ease-in-out;
}
#speech .subul li
{
	display: block;
	margin: 0;
	float: none;
	border-radius: 0;
	background-color: #0169B0;
	text-align: left;
}
#speech .subul a 
{
	padding: 10px;
	width: 100px;
	display: block;
	float: none;
}
#speech>li:nth-child(2)
{
	border-radius: 5px 5px 0 0;
}
#speech .subul li:first-child 
{
	border-radius: 0 5px 0 0;
}
#speech .subul li:last-child 
{
	border-radius: 0 0 5px 5px;
}
nav ul li:hover .subul,nav ul li:hover #arrow
{
	visibility: visible;
	opacity: 1;
}

卧槽有点不忍直视=。=
简化掉一些hover和CSS3的选择器。
一些选择器：#speech>li:nth-child(2) #speech .subul li:first-child当然还有奇数和偶数的：#speech>li:nth-child(odd)这是奇数，偶数是even，还有属性选择器：[class*=section1]{}记住中括号，还有，是先写。是指包含，^是指开头包含，$是指结尾包含，结尾包含必须加转义字符。[id $=\-1]
其实一级菜单的三角形小图标是可以用border属性画出来的（但是我太懒了），就用了图片。
基本的HTML结构不会怎么变化，重要的是CSS。我决定要背下来了~
一级菜单ul：清除浮动；
一级菜单li：包裹<a/>标签，定义margin-right,text-align,position:relative,动画也加上。
一级菜单 a：float: left; padding；
二级菜单ul：重点呢… 确定好定位的距离。卧槽我这里可以不用margin-left和left的=。= 那就是确定这几个：visibility position top

visibility: hidden;
position: absolute;
left: -10px;
top: 41px;
border-radius: 5px;
margin-left: 10px;
opacity: 0;
transition: all 0.3s ease-in-out;

二级菜单li：这里写的是display: block; /*不对啊li本来就是块级元素了*/float: none;
二级菜单 a：设置padding width display:block; float:none;

先写这么多睡觉(￣o￣) . z Z