折腾了好一阵,才把基本布局写好,以前总觉得自己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
对象(实例)。