【汇智学堂】-div+css布局十五(汇智学堂主页-工程项目展示）

效果图：

html文件的第一行div：

<div style="height: 250px;"><div style="margin:0 auto;width: 1200px;"><img id="img01" src="img/101.png" style="float: left;width: 400px;height: 250px;" onmouseover="changeimg('img01')" onmouseout="changeimg2('img01')">                </div><div><img id="img02" src="img/102.png" style="float: left;width: 400px;height: 250px;" onmouseover="changeimg('img02')" onmouseout="changeimg2('img02')"> </div><div><img id="img03" src="img/103.png" style="float: left;width: 400px;height: 250px;" onmouseover="changeimg('img03')" onmouseout="changeimg2('img03')"> </div></div>

js文件的内容：


<script type="text/javascript">function changeimg(id){var a=document.getElementById(id);switch (id){case "img01":a.src="img/1011.png";break;case "img02":a.src="img/1012.png";break;case "img03":a.src="img/1013.png";break;         case "img04":a.src="img/1014.png";break;case "img05":a.src="img/1015.png";break;case "img06":a.src="img/1016.png";break;      case "img07":a.src="img/1017.png";break;case "img08":a.src="img/1018.png";       break;case "img09":a.src="img/1019.png";break;case "img010":a.src="img/1020.png";break;case "img011":a.src="img/1021.png";break;case "img012":a.src="img/10122.png";break;}}function changeimg2(id){//alert(id);var a=document.getElementById(id);           switch (id){case "img01":a.src="img/101.png";break;case "img02":a.src="img/102.png";break;            case "img03":a.src="img/103.png";break;             case "img04":a.src="img/104.png";break;   case "img05":a.src="img/105.png";break;case "img06":a.src="img/106.png";break;            case "img07":a.src="img/107.png";break;case "img08":a.src="img/108.png";break;            case "img09":a.src="img/109.png";break;case "img010":a.src="img/1010.png";break;      case "img011":a.src="img/10111.png";break;case "img012":a.src="img/10121.png";break;}}
</script>

【汇智学堂】-div+css布局十五(汇智学堂主页-工程项目展示）相关推荐

【汇智学堂】-div+css布局十二(商品列表图文展示）
效果图: html文件: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
DIV+CSS布局,第五课,DOCTYPE的选择,零起点细说网站制作
DOCTYPE的选择 DOCTYPE的选择也就是文档类型选择,这决定页面元素和定义的CSS会不会生效,因为在不同的DOCTYPE中,页面中可以使用的HTML元素不同,让我们一起来看一下. 什么是DOC ...
Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
知识点:网页布局的方式 1.网页布局常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...
前端 HTML/CSS （十五）
目录前端 HTML/CSS (十五) 动画简单的实现设置多个动画延迟播放动画的迭代次数设置动画的播放方向 animation-timing-function,改变内部的时序关键帧动画响 ...
DIV+CSS布局基本流程及实例介绍
都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称.DIV+CS ...
DIV+CSS布局心得
DIV+CSS布局心得文章目录 DIV+CSS布局心得 1,清空所有原有样式随时对HTML和CSS进行注释 2,分析页面布局 DIV+CSS布局页面页面常用HTML标签 CSS常用选择器 CSS ...
【小5聊】使用div+css布局绘制32支球队比赛对阵图，拭目以待冠军花落谁家
虽然不是狂爱足球爱好者,但多少会有关注下,像梅西和C罗是经常听到的可能是没有我们队的原因,关注会比较少,只看个结果,所以趁着这次机会,通过js前端技术div+css布局方式绘制本次世界杯足球比赛对 ...
网页设计（四）——DIV+CSS布局3
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...

【汇智学堂】-div+css布局十五(汇智学堂主页-工程项目展示）

【汇智学堂】-div+css布局十五(汇智学堂主页-工程项目展示）相关推荐

最新文章

热门文章