信息排列效果_学习笔记

首页免费课信息排列效果笔记

信息排列效果

最热最新

墨羽霓裳

overflow:hidden重要的两个作用：把多余的部分裁减掉／清除浮动 1.图片的大小超过了a标签的范围：（通过a标签来限定img的大小，overflow隐藏部分） <a>标签为内联元素，所以给其设定宽高是达不到效果的，必须将其设置为块级元素。同时给其设定宽高后，其内部的大图片也会溢出，可以用overflow属性隐藏溢出部分。 2.li设置浮动后，不会把父级标签ul撑起来，需要清除浮动--overflow:hidden;（给ul加overflow:hidden;）

查看全部

2 采集收起来源：静态网页布局之信息卡片模式布局
2018-03-22
凤仪

1、列表模式和卡片模式的区别： ① 两个按钮的class值的区别 ② 每个li里图片路径的区别 ③ 以及图片的父节点a标签里的class值的区别 2、实现列表模式和卡片模式切换的原理：通过右上角图片按钮的点击事件改变上面三个区别的值，就能实现类似于两个页面的切换效果了 3、JS步骤: 当单击图片按钮时， ① 改变按钮的class的值 ② 改变每一个图片的路径以及它的对应的父节点的class的值 4、一些重要的写法： ① oBtn.className=""; ② aImg[i].src="./images/small.jpg"; ③ aImg[i].parentNode.className="a-img small";//这里边有两个class：a-img和small

查看全部

2 采集收起来源：JS实现动态效果
2018-03-22
Thinker_Ac

li设置左浮动之后，没有把ul撑起来，这时就需要清除浮动（给ul加overflow:hidden;）

查看全部

2 采集收起来源：静态网页布局之信息卡片模式布局
2018-03-22
colorful_star

多行多列，实现方式：html（div、ul、li ）+css(float，overflow，background)。不用table，原因是：不利于后期维护，不利于seo。

查看全部

1 采集收起来源：效果简介
2018-03-22
一淇

1、HTML写想写的东西； 2、CSS画想画的样式； 3、JS做想做的事情。 4、PHP要想要的数据。

查看全部

1 采集收起来源：编程练习
2015-01-02
一淇 09:24

1、分析操作效果，解刨操作过程； 2、对比操作前后变化，并总结操作步骤，得出解决方案； 3、根据设计流程，设计编辑代码以实现最终效果。

查看全部

1 采集收起来源：JS实现动态效果
2015-03-10
chouxiaozi23

太卡了，不流畅，看起来很郁闷

查看全部

1 采集收起来源：效果简介
2018-03-22
程序爱好者11

这是用jq实现的

查看全部

1 采集收起来源：编程练习
2015-06-28
慕慕0565854

信息排列效果需要用到的东东（多行多列，实现方式）： html（div标签、ul、li 无序列表）+css属性(float，overflow，background)。原因使用tablee的弊端： 1. 不利于后期维护，容易产生表格套表格情况，后期调试很麻烦；（如增删改） 2. 不利于SEO（搜索引擎优化）

查看全部

1 采集收起来源：效果简介
2015-06-17
张剑培

学到了不用跳转却换浏览模式，

查看全部

1 采集收起来源：编程练习
2018-03-22
雨天没有悲伤

// 添加页面加载完成时的事件,然后执行以下代码。
        window.onload=function(){
}
// 获取多个图片对象
  var imgs = document.getElementsByTagName("img");
//事件可以这样直接调用onclick触发
  listBtn.onclick = function(){
//可用for循环输出图片
for(var i=0;i<imgs.length;i++)
   {
    imgs[i].src = "http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg";
    imgs[i].parentNode.className = "a-img";
   }

查看全部

1 采集收起来源：编程练习
2018-05-26
Moirai

@--信息排列效果--2-2 信息卡片模式布局注意要点--overflow:hidden重要的两个作用：把多余的部分裁减掉／清除浮动 1.图片的大小超过了a标签的范围： <a>标签为内联元素，所以给其设定宽高是达不到效果的，必须将其设置为块级元素。同时给其设定宽高后，其内部的大图片也会溢出，可以用overflow属性隐藏溢出部分。 2.li设置浮动后，不会把父级标签ul撑起来，需要清除浮动--overflow:hidden;（给ul加overflow:hidden;）

查看全部

1 采集收起来源：静态网页布局之信息卡片模式布局
2018-03-22
wshyzx

.small{width:50px;height:50px;display:block;float:left;margin:5px;}

查看全部

1 采集收起来源：静态网页布局之信息列表模式布局
2017-03-02
风暴阿呆3552079

666

查看全部

1 采集收起来源：编程练习
2016-11-09
陈唐天翊

jquery实现 $(document).ready(function() { $('#btn1').click(function() { $(this).removeClass("btn-list-off"); $(this).addClass("btn-list-on"); $('#btn2').removeClass('btn-car-on'); $('#btn2').addClass('btn-car-off'); $("img").attr("src","images/small.jpg"); $('.a-img').addClass('small'); }); $('#btn2').click(function() { $(this).removeClass("btn-car-off"); $(this).addClass(" btn-car-on"); $('#btn1').removeClass('btn-list-on'); $('#btn1').addClass('btn-list-off'); $("img").attr("src","images/big.jpg"); $('.a-img').removeClass('small'); }); })

查看全部

1 采集收起来源：JS实现动态效果
2018-03-22