您的位置：首页 > 百科管理 > 详情

怎么制作div创意-前端怎么做立体div

原创：找图网 2023-04-18 16:10:06

用div怎样制作网页特效

启动dreamweaver cs5,执行文件-新建命令,在弹出的新建文档对话框选择html文件,点击创建按钮。

网页中如何使用div展示图片效果

在标签<title>无标题文档</title>中修改名称为<title>div布局图片效果</title>。

网页中如何使用div展示图片效果

在<title>标签下方输入<style>相关的代码,定义网页的整体样式,样式直接影响着网页的美观程度。

网页中如何使用div展示图片效果

接着在<body>中输入div标签三个,并分别设置他们所属于的类,最外边的div设置类为db,中间两个分别为zpxc1和zpxc,在下方就会看到基本的框架效果。

网页中如何使用div展示图片效果

外部的框架设计好之后,接着设计使用div布局图片,书写相应的代码,设置div的尺寸大小和相关属性,同时设计图片的相关属性。

代码为:

img{margin:0px; height:220px; width:120px; margin-top:10px; border: 1px solid #333;}

{float:left; height:240px; width:140px; margin:6px; padding:0px; margin-top:10px; filter:light; background:#333; margin-left:0.8em;}

.pic{ float:right;}

在类为zpxc1的div中建立新的四个div,并设置img的 src属性值,对图片进行正确的链接。

按f12进行在浏览器中进行预览效果,出现提醒信息“是否将改动保存到”,直接点击是,找一个合适的位置进行保存。

接着在类为zpxc的div中输入“作品展示”四个字,再次才看效果,如果不合适可进行再次修改。

如果图片过多,可以修改类zpxc1和db的高度,反复修改直至合适为止,重复步骤6、7采用同样的方法建立多个图片div。

如果对“作品展示”四个字不满意的话,可以使用图片进行替换,达到满意为止,再次按f12进行在浏览器中进行查看效果,

执行文件-另存为命令,在弹出的对话框中输入名称为“div布局图片”,找到一个合适的位置进行保存即可。

前端怎么做立体div

前端怎么做立体div如下:

将图片定位到相同的div后,设置该div的transform-style属性为preserve-3d,然后将图片沿着它的y轴旋转一定的角度,这几张图片的旋转角度之和要是360度,这样才能形成一个圈;旋转角度之后,其实是为了改变每张图片z轴指向(z轴总是垂直于该图片),然后就可以沿着z轴进行位移,相当于把div撑开了,类似于游乐园里的旋转木马。最后就会形成散开的效果图。