用html怎样实现这种效果

html-css023

用html怎样实现这种效果,第1张

你好,

顶部菜单和左侧菜单的写法是相似的,

都是选项卡

每个菜单选项都对应一个新的盒子,每个盒子的内容就是该选项卡需要展示的内容。

展示效果的实现是通过点击菜单选项之后,将其他菜单选项所对应的展示内容的盒子隐藏,只显示当前选项的内容盒子。display: none | block

其他都类似,你可以通过框架来实现,就不用自己写了。

用PS做的是效果图,需要前端开发人员编写代码才可以在网站上展示出来。

简单来说,在PS里做好之后,需要切图。把图片切割成适合在网站上浏览。

切图时需要把文字分离出图片的要处理好。

切好图片之后,需要用html结合JavaScript等知识编写代码。

这样写出的页面还只是静态的网站。

如果想要做成动态的效果,还需要搭建后台,连接数据库等。

jquery 中的siblings方法

你一行的每一列都是同一层的

<ul class="第三行">

<li class="1">查看列</li>

<li class="2">添加列</li>

<li class="3">修改列</li>

<li class="4">完全控制列</li>

</ul>

$(function(){

if("li.4").html()!="")

{

$(function(){

$(this).siblings("li").addClass("打勾样式")

})

}

})