neilro-CSDN博客

原创 23.复杂滑动门的效果

效果图：注：把鼠标移动到按钮上会变成蓝色。素材：难点： ①.文字的长短决定了图片的长短。 ②.该按钮由两张图片组成，但一个标签不能包含两个图片，如何解决？（答：在a标签里嵌套一个span标签，a标签调用一张图片，span标签调用另外一张图片）代码：复杂滑动门 /*CSS初始化*/ body,ul,li{

2018-02-03 18:04:31 243

原创 22.仿传智播客导航栏案例（精灵图案例）

效果：素材：代码： Document body,ul,li{ margin: 0; padding: 0; } li{ list-style: none; } .nav{ background: #000; height: 48px; margin-top: 100px; } .nav-con

2018-02-03 11:47:07 1112

原创 21.tab切换（CSS可见性）

效果：代码： tab切换 .box,.div1,.div2,.div3{ width:300px; height:300px; } .box{ overflow: hidden; } .div1{ background:red; } .div2{ background:black

2018-02-03 11:42:55 239

原创 20.规避脱标流

效果图：代码：规避脱标流 .father{ width:400px; height:400px; background:red; } .son{ width:100px; height:100px; background:black; margin-left:auto; /*

2018-02-03 11:39:53 213

原创 19.多盒子嵌套定位

效果图：代码：多盒子嵌套定位 .one{ width:500px; height:500px; background:red; position:relative; } .two{ width:400px; height:400px; background:green; pos

2018-02-03 11:36:27 847

原创 18.顺丰盒子定位

效果图：素材：代码： Document body,ul,li{ margin:0; padding: 0; } ul,li{ list-style: none; } .banner{ width: 1259px; height: 472px; margin: 0 auto;

2018-02-03 11:33:57 296

原创 17.定位的盒子居中显示

效果：代码：定位的盒子居中显示 body{ margin:0; padding:0; } .box{ height:500px; background:gray; position:relative; } .nav{ height:50px; width:800px;

2018-02-03 11:28:47 306

原创 16.网页的定位练习

效果：效果说明：网页翻滚时，两边的广告栏位置不动，最上边的导航栏也是固定的位置（无法被覆盖）。素材：代码：定位作业 /*CSS初始化*/ body,img{ margin:0; padding:0; } /*初始化结束*/ /*定义主体宽高*/ .box{ height:au

2018-02-03 11:26:16 834

原创 15.背景图+导航练习

效果：素材：代码：导航作业 /*css样式初始化*/ body,ul,li{ margin:0; padding:0; } li{ list-style:none; } img{ /*低版本的IE浏览器里会有一个默认的边框,去掉.*/ border:0; } a{ tex

2018-02-03 11:20:42 202

原创 14.用定位的方式仿小米导航

效果图：注：主要是利用死图片实现定位的方式素材：代码：小米导航 /*先定义总宽高*/ .main{ width:1226px; height:460px; /*父相子绝定位*/ position:relative; } /*定义导航栏宽高*/ .nav{ width:234p

2018-01-25 06:17:00 283

原创 13.overflow属性的运用案例

overflow:visible：默认值。内容不会被修剪，会呈现在元素框之外。overflow:hidden：内容会被修剪（超出部分被舍弃），并且其余内容是不可见的。overflow:scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。overflow:auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。与scroll相似

2018-01-25 04:26:21 491

原创 12.利用3种方式来解决浮动脱标的问题

问题：当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。父盒子有定义高度：父盒子没定义高度： ※父盒子没有了高度以后，子盒子看似还有高度形状（实质上已经脱标，浮动起来了，所以下面黑色的那个div块就占据了它们的位置）◆清除浮动不是不用浮动，清除浮动产生的不利影响。（比如让网页布局不会变乱）◆清除浮动的应用背景：比如打开浏览一个新闻（每条新闻

2018-01-25 04:14:21 3555 1

原创 11.两种简单DIV+Css布局形式的实现案例

案例1：案例2：案例1代码：浮动布局 .head,.main,.bottom{ margin:0; padding: 0; } .head{ width:400px; height:100px; background:#000000; } .main{ margin:5px 0; wi

2018-01-25 04:00:38 3367 1

原创 10.两个导航例子

例子1：例子2：例子2素材：例子1代码： Document body,ul,li{ /*将标签自带的内外边距属性初始化*/ margin:0; padding: 0; } .nav{ width: 800px; height: 40px; background: pink; margin:

2018-01-25 03:56:53 453

原创 9.个人资料案例（div+css）

目的：结合fireworks将图片转换为html界面图片：素材：代码： Document .box{ /*定义页面整体宽高*/ width: 208px; height: 384px; /*加边框*/ border: 1px solid #cecece; /*将页面相对于整体Body居中*/ margin:

2018-01-19 18:33:38 551

原创 8.综合案例：爱宠知识

目标：将效果图转换为html界面。截图：素材：代码： Document body,ul,li{ /*清除默认的内外边距属性*/ margin: 0; padding: 0; } ul{ background-color: #fff; height: 279px; width: 210px; margin-left: 10px; /*爱宠知识白色部

2018-01-19 10:08:15 2617

原创 7.垂直列表-行业动态案例（配合fireworks来测量像素宽高）

要求：将一张图转化为html和css元素。效果图：做法：结合fireworks来测量宽高的大小。争取完整还原。代码：垂直列表 .news{ /*先定义块的宽高*/ width:212px; height:147px; /*给总体加边框和给上边加黄色边框*/ border:1px solid #E3E8F3; border

2018-01-18 23:48:24 540

原创 6.overflow:hidden和设置边框解决外边距溢出的问题

想要达到这样的效果：如果是实现这样的源代码： demo .big{ height:300px; width:500px; background:#EEEEEE; } .small{ height:100px; width:100px; background:red; margin-top:5

2018-01-16 21:45:08 3628

原创 5.仿新浪网首页导航条

效果：把鼠标放在导航条上背景会变色（hover效果）这个例子重点在于内外边距的理解和运用：新浪首页 .nav{ height:40px; background:#eee; border-top:3px solid orange; border-bottom:1px solid #aaa; }

2018-01-16 20:57:50 448

原创 4.表单文本控件案例（去掉边框和去掉轮廓线）

去掉边框：border: 0 none; /*去掉边框*/去掉轮廓线：outline-style: none; /*去掉轮廓线*/什么是轮廓线？没有去掉轮廓线的文本控件：即使去掉了边框，选择输入框以后还是会出现方框（即轮廓线）去掉边框和轮廓线后的文本框：去掉边框和轮廓线还有下边框虚化的文本框：代码： .uemai

2018-01-16 18:18:13 7643

原创 table中cellspacing和cellspadding的用法

cellspacing：设置单元格之间的距离cellspacing=6的时候 …… cellspacing=1的时候 cellspacing=0的时候cellspadding的效果类似css样式中的text-align的效果：…… 123 123 123 123 123

2018-01-15 22:56:22 8948 1

原创 3.边框合并问题和cellspacing的用法

一段简单的代码：如果只给table加边框的话是这样的。 table{ width:300px; height:500px; border:1px solid red; }效果：如果给td标签也加上边框： td{ border:1px

2018-01-15 22:34:36 401

原创 2.五彩导航例子

素材：效果图：代码：五彩导航 .nav .one:link{ /*将行内元素转为行内块元素*/ display: inline-block; /*设置大小*/ width:120px; height:58px; /*插入图片*/ background:url("imag

2018-01-13 19:11:46 7865 1

原创 1.可以动态变化的购物车按钮

素材：效果：默认显示上半部分，鼠标移到按钮上触发hover显示下半部分。代码：购物车动态变化按钮 a:link{ /*1.将行内元素转成行内块元素*/ display: inline-block; /*2.对行内块元素定义大小*/ width:67px; height:31px; /*3.导入

2018-01-13 15:40:44 388

neilro的博客