点击div实现a标签的跳转效果

点击div实现a标签的跳转效果,第1张

<div id="ttt" style="width:100px; height:100px; background-color:#ccc;"></div>windowonload = function(){
    var obj = documentgetElementById('ttt');
    objonclick=function(){  
        windowlocationhref="跳转的地址";            
     }
 }

用onclick开启一个事件,然后打开窗口,在css中定义鼠标的形状。

可以把<div>想象成一个盒子,也可以把它想成一个容器。

一·页面的构成元素形状都是矩形的,严格的说,元素形成了一个矩形的区域,这个区域就是CSS中最基本的布局要素,      常被称作"box",你可以在很多W3CCSS21规范的原文中看到"box"这个字眼。

二·"BoxModule",通常被译作“盒子模型”,有的地方被译作“框模型”。      因为W3C的很多地方用到了"box"这个词,有些地方译作“盒子”不大通顺,所以也可译作“框”。

三·为了给文档树中的各个元素排版定位(布局),浏览器会根据渲染模型为每个元素生成四个嵌套的矩形框,

分别称作contentbox、paddingbox、borderbox和marginbox,它们是不可分割的,并可能会重合,

这就是CSS规范中描述的“框模型”(boxmodel)。它是以CSS的角度去看一个元素被渲染后的抽象形态。

在WEB前端开发中,HTML,CSS,JS这三家三驾马车分别代表着结构,展示,和交互。
在web10的时代,页面的逻辑并不是特别复杂,对用户体验的要求也不是很高,table被大量开发者用来做布局元素,横跨结构和展示两个部分,是很“重”的。

用a标签包起来就可以。
代码例如
<html>
<head><title>123</title></head>
<body>
<div>
<a href="链接地址">这里是DIV里面的内容 外面用A标签包起来即可。</a>
</div>
</body>
</html>

div里写两个超链接,一个居左一个居右可以参考下面的代码:

<div>

<a href="#" style="float:left">超链接1</a>

<a href="#" style="float:right">超链接2</a>

</div>

扩展资料:

div属性

font-variant:small-caps 小字体

letter-spacing: 1px 文字间距

line-height: 200% 设定行高

font-weight:bold 文字粗体

text-transform : lowercase 英文小写

vertical-align:super 上标字

text-decoration:line-through 加删除线

参考资料来源:百度百科-DIV (层叠样式表单元的位置和层次)


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13354189.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-20
下一篇 2023-07-20

发表评论

登录后才能评论

评论列表(0条)

保存