![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Div+Css
文章平均质量分 68
neilro
前端入门……
展开
-
1.可以动态变化的购物车按钮
素材:效果:默认显示上半部分,鼠标移到按钮上触发hover显示下半部分。代码: 购物车动态变化按钮 a:link{ /*1.将行内元素转成行内块元素*/ display: inline-block; /*2.对行内块元素定义大小*/ width:67px; height:31px; /*3.导入原创 2018-01-13 15:40:44 · 392 阅读 · 0 评论 -
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 · 204 阅读 · 0 评论 -
16.网页的定位练习
效果:效果说明:网页翻滚时,两边的广告栏位置不动,最上边的导航栏也是固定的位置(无法被覆盖)。素材:代码: 定位作业 /*CSS初始化*/ body,img{ margin:0; padding:0; } /*初始化结束*/ /*定义主体宽高*/ .box{ height:au原创 2018-02-03 11:26:16 · 845 阅读 · 0 评论 -
17.定位的盒子居中显示
效果:代码: 定位的盒子居中显示 body{ margin:0; padding:0; } .box{ height:500px; background:gray; position:relative; } .nav{ height:50px; width:800px;原创 2018-02-03 11:28:47 · 313 阅读 · 0 评论 -
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 · 298 阅读 · 0 评论 -
19.多盒子嵌套定位
效果图:代码: 多盒子嵌套定位 .one{ width:500px; height:500px; background:red; position:relative; } .two{ width:400px; height:400px; background:green; pos原创 2018-02-03 11:36:27 · 851 阅读 · 0 评论 -
20.规避脱标流
效果图:代码: 规避脱标流 .father{ width:400px; height:400px; background:red; } .son{ width:100px; height:100px; background:black; margin-left:auto; /*原创 2018-02-03 11:39:53 · 217 阅读 · 0 评论 -
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 · 242 阅读 · 0 评论 -
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 · 1116 阅读 · 0 评论 -
23.复杂滑动门的效果
效果图:注:把鼠标移动到按钮上会变成蓝色。素材:难点: ①.文字的长短决定了图片的长短。 ②.该按钮由两张图片组成,但一个标签不能包含两个图片,如何解决?(答:在a标签里嵌套一个span标签,a标签调用一张图片,span标签调用另外一张图片)代码: 复杂滑动门 /*CSS初始化*/ body,ul,li{原创 2018-02-03 18:04:31 · 247 阅读 · 0 评论 -
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 · 2627 阅读 · 0 评论 -
7.垂直列表-行业动态案例(配合fireworks来测量像素宽高)
要求:将一张图转化为html和css元素。效果图:做法:结合fireworks来测量宽高的大小。争取完整还原。代码: 垂直列表 .news{ /*先定义块的宽高*/ width:212px; height:147px; /*给总体加边框和给上边加黄色边框*/ border:1px solid #E3E8F3; border原创 2018-01-18 23:48:24 · 544 阅读 · 0 评论 -
14.用定位的方式仿小米导航
效果图: 注:主要是利用死图片实现定位的方式素材:代码: 小米导航 /*先定义总宽高*/ .main{ width:1226px; height:460px; /*父相子绝定位*/ position:relative; } /*定义导航栏宽高*/ .nav{ width:234p原创 2018-01-25 06:17:00 · 286 阅读 · 0 评论 -
2.五彩导航例子
素材:效果图:代码: 五彩导航 .nav .one:link{ /*将行内元素转为行内块元素*/ display: inline-block; /*设置大小*/ width:120px; height:58px; /*插入图片*/ background:url("imag原创 2018-01-13 19:11:46 · 7899 阅读 · 1 评论 -
3.边框合并问题和cellspacing的用法
一段简单的代码: 如果只给table加边框的话是这样的。 table{ width:300px; height:500px; border:1px solid red; }效果:如果给td标签也加上边框: td{ border:1px原创 2018-01-15 22:34:36 · 406 阅读 · 0 评论 -
4.表单文本控件案例(去掉边框和去掉轮廓线)
去掉边框:border: 0 none; /*去掉边框*/去掉轮廓线:outline-style: none; /*去掉轮廓线*/什么是轮廓线?没有去掉轮廓线的文本控件:即使去掉了边框,选择输入框以后还是会出现方框(即轮廓线)去掉边框和轮廓线后的文本框:去掉边框和轮廓线还有下边框虚化的文本框:代码: .uemai原创 2018-01-16 18:18:13 · 7666 阅读 · 0 评论 -
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 · 3639 阅读 · 0 评论 -
5.仿新浪网首页导航条
效果:把鼠标放在导航条上背景会变色(hover效果)这个例子重点在于内外边距的理解和运用: 新浪首页 .nav{ height:40px; background:#eee; border-top:3px solid orange; border-bottom:1px solid #aaa; }原创 2018-01-16 20:57:50 · 452 阅读 · 0 评论 -
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 · 456 阅读 · 0 评论 -
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 · 3376 阅读 · 1 评论 -
12.利用3种方式来解决浮动脱标的问题
问题:当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误。父盒子有定义高度: 父盒子没定义高度: ※父盒子没有了高度以后,子盒子看似还有高度形状(实质上已经脱标,浮动起来了,所以下面黑色的那个div块就占据了它们的位置)◆清除浮动不是不用浮动,清除浮动产生的不利影响。(比如让网页布局不会变乱)◆清除浮动的应用背景:比如打开浏览一个新闻(每条新闻原创 2018-01-25 04:14:21 · 3571 阅读 · 1 评论 -
13.overflow属性的运用案例
overflow:visible:默认值。内容不会被修剪,会呈现在元素框之外。overflow:hidden:内容会被修剪(超出部分被舍弃),并且其余内容是不可见的。overflow:scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。overflow:auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。与scroll相似原创 2018-01-25 04:26:21 · 498 阅读 · 0 评论 -
9.个人资料案例(div+css)
目的:结合fireworks将图片转换为html界面图片:素材:代码: Document .box{ /*定义页面整体宽高*/ width: 208px; height: 384px; /*加边框*/ border: 1px solid #cecece; /*将页面相对于整体Body居中*/ margin:原创 2018-01-19 18:33:38 · 554 阅读 · 0 评论