折腾了好一阵，才把基本布局写好，以前总觉得自己css3+html5学的不错了，毕竟看了书也刷了imooc
但现在才发现，有些东西，知道，明白，但是不能透彻深刻理解具体的含义
这次花了好久才写好的css，有很多感慨！
<!DOCTYPE html>
<html>
<head>
<title>menu</title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0;padding: 0;}
body{text-align: center;font-size: 15px;}
a{color: #a45;text-decoration: none;}
.Category{width: 600px;margin: 0 auto;margin-top: 40px;}
.Category ul li{display:block;width: 200px;float: left;}
.more{clear: both;padding-top: 10px;}
.more a{border: 2px solid red;padding: 0 10px;}
</style>
</head>
<body>
<div class="Category">
<div class="box">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
</div>
<div class="more">
<a href="#"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
注意
1.首先就是border了，以前并不觉的它有什么要注意的，但是！！
p
{
border:5px solid red;
} 这三个属性都要写啊，而且中间是空格！！我第一次只写了5px；一直试试试试，但是都不行，哭！
2.要优雅的coding，首先要注意格式啊，多多模仿优秀的格式
比如一开始就*{margin：0；padding：0；}
按顺序来，一步一步
第一次做的时候我的最外面的div不知道为什么没有包裹住我的内部元素，明明和书上的代码一毛一样！！
还是自己写的太乱了，想到什么写什么，要循规蹈矩的coding才不会乱啊
3.我一拿到这个第一反应就是那个3个一行的怎么做，难道要for循环？？？
原来是要把.Category的width：600px；把内部每个li{width:200px;}是不是很机智啊！！
4.又再一次感受到了float的强大，我每个li设置200px之后，再float一下，就变行排列好了啊！！！激动
这次要注意的是用到了clear：both的语句，是清除float用的！
5.发现自己padding和margin虽然理论都学了好几遍，道理也懂了
但是一上手操作，又是懵逼，what ever 多多练习吧
-------------------------------------------分割线-------------------------------------------
今天在imooc网上看了好久的大神演讲，刷新了我的世界观！！前端可以改变世界啊
以为学个js+css+html差不多了，最多再学个jquery吧
but！！
要学那么多多多多的东西，各种酷炫的的功能react，node.js 什么什么连念都念不顺了英语
为什么代码敲的6的大神英语还能这么好！！
啊，仰望星空最终为了脚踏实地走好每一步，继续昨天的练习
昨天晚上还觉得看不懂的代码，今天就做出来了
自己coding出结果的时候，都要激动的哭出来了啊，我才不会告诉你一个显示隐藏被我玩了几十遍啊！哈哈哈哈哈
我先做了个if基础版的
前面加了个样式class chage来改变高亮的颜色
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $thing=$("li:gt(5):not(:last)");
$thing.hide();
var $btm=$(".more>a");
$btm.click(function(){
if($thing.is(":visible")){
$thing.hide();
$(".more span").text("显示全部品牌");
$("li a:eq(0),li a:eq(3),li a:eq(10)").removeClass("change");
}else{
$thing.show();
$("li a:eq(0),li a:eq(3),li a:eq(10)").addClass("change");
$(".more span").text("隐藏品牌");
}
})
}
)
</script>
感觉hover蛮高级的，试试
hover()函数用于为每个匹配元素的hover事件绑定处理函数。
hover事件就是鼠标悬停事件。此外，你还可以额外传递给事件处理函数一些数据。
此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发hover事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过hover()绑定的事件，请使用unbind()函数。
该函数属于jQuery对象(实例)。
101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
