html 前端 背景图片 局部添加超链接

快乐起航2020 2018-11-16 04:52:12
html 前端 背景图片 局部添加超链接
如下图


定位的时候 ，红色字 经常跑到容器外 ，要么就没有链接效果

前端代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>奥佳华订单系统</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #efefef;
font-family: Georgia, Times, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

div#mother {
margin: 0 auto;
/*width: 943px;
height: 572px;*/
width: 800px;
height: 550px;
position: relative;
}

div#errorBox {
background: url(/images/404_bg.png) no-repeat top left;
background-size: cover;
width: 661px;
height: 401px;
margin: auto;
}

div#errorText {
color: #39351e;
padding: 16px 15px 0 300px;
}

div#errorText p {
width: 330px;
font-size: 14px;
line-height: 20px;
}

div.link {
/*background:#f90;*/
height: 50px;
width: 145px;
float: left;
padding-top: 0px;
padding-left: 0px; /*18.11.16 原 0px*/
}

div#home {
margin: 20px 0 0 44px;
}

div#contact {
margin: 20px 0 0 25px;
}

h1 {
font-size: 30px;
/*margin-bottom: 30px;*/
}

#bottom {
/*margin:330px 15px 15px 295px;*/
position: relative;
padding-top: 80px;
padding-left: 320px;
}
</style>
</head>
<body>
<div id="mother">
<div id="errorBox">
<div id="errorText">
<h1>Sorry..页面没有找到！</h1>
<p>
似乎你所寻找的网页已移动或丢失了。
<p>
或者也许你只是键入错误了一些东西。
</p>
<p>
请不要担心，这没事。如果该资源对你很重要，请与管理员联系。
</p>
<p style="font-weight: bold; font-family: 'Arial','Microsoft YaHei','黑体','宋体',sans-serif;">
火星不太安全，我可以免费送你回地球
</p>
</div>
<a href="/main.aspx" title="立即返回首页">
<div class="link" id="home"></div>
</a>
<a href="/Login.aspx" title="重新登录">
<div class="link" id="contact"></div>
</a>
<div id="bottom" style="font-weight: bold;font-size: 20px; color: red;">
正在返回首页 <span style="color: green; font-size: 28px;" id="time">5</span> 秒
</div>
</div>

</div>
<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function goBack() {
var time = parseInt($("#time").html());
if (time <= 0) {
window.location.href = "main.aspx";
}
else {
time--;
$("#time").html(time);
}
}
window.setInterval("goBack();", 1000);
</script>
</body>
</html>
...全文
952 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
快乐起航2020 2018-11-19
  • 打赏
  • 举报
 回复
[quote=引用 4 楼 weixin_43590947 的回复:]
十分感谢你提供的思路，用了你的代码，效果如下，还有些许的瑕疵
快乐起航2020 2018-11-17
  • 打赏
  • 举报
 回复
你好！





原先的例子a标签里面有有div也是可以的，就是例子的图片大，我缩小了，这些链接的功能也就不行了
原先例子 ，源代码
问题里面的代码我是我做了修改
----------修改部分 开始----------
div#mother {
margin: 0 auto;
/*width: 943px;
height: 572px;*/
width: 800px;
height: 550px;
position: relative;
}

div#errorBox {
background: url(/images/404_bg.png) no-repeat top left;
background-size: cover;
width: 661px;
height: 401px;
margin: auto;
}
----------修改部分 结束----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>这个.. 页面没有找到！！！_SJ5D.COM</title>

<style type="text/css">
body{ margin:0; padding:0; background:#efefef; font-family:Georgia, Times, Verdana, Geneva, Arial, Helvetica, sans-serif; }
div#mother{ margin:0 auto; width:943px; height:572px; position:relative; }
div#errorBox{ background: url(404_bg.png) no-repeat top left; width:943px; height:572px; margin:auto; }
div#errorText{ color:#39351e; padding:146px 0 0 446px }
div#errorText p{ width:303px; font-size:14px; line-height:26px; }
div.link{ /*background:#f90;*/ height:50px; width:145px; float:left; }
div#home{ margin:20px 0 0 444px;}
div#contact{ margin:20px 0 0 25px;}
h1{ font-size:40px; margin-bottom:35px; }
</style>



</head>
<body>
<div id="mother">
<div id="errorBox">
<div id="errorText">
<h1>Sorry..页面没有找到！</h1>
<p>
似乎你所寻找的网页已移动或丢失了。
<p>或者也许你只是键入错误了一些东西。</p>
请不要担心，这没事。如果该资源对你很重要，请与管理员联系。
</p>

<p>
火星不太安全，我可以免费送你回地球
</p>
</div>
<a href="http://www.cssmoban.com/" title="返回SJ5D首页">
<div class="link" id="home"></div>
</a>
<a href="http://www.cssmoban.com/" title="联系管理员">
<div class="link" id="contact"></div>

</a>
</div>
</div>
</body>
</html>

StarXDer!!! 2018-11-17
  • 打赏
  • 举报
 回复
StarXDer!!! 2018-11-17
  • 打赏
  • 举报
 回复
你用a包裹div元素在html的标准上是不合法的，但是部分浏览器可以解析，不知道啥时候就有问题了。 这两个div 你给的是float，所以这俩元素会把文字挤出去。你最好用背景图显示这两个按钮。 我又从最原先的基础上写了一下，如果用a包裹div，然后a还能点击的话 首先得消除浮动 .link::after{ content: " "; clear: both; } 然后a本身是一个inline元素，给改成inline-block a{ display: inline-block; } 这样就可以了 完整版代码： 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>奥佳华订单系统</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background: #efefef;
            font-family: Georgia, Times, Verdana, Geneva, Arial, Helvetica, sans-serif;
        }

        div#mother {
            margin: 0 auto;
            /*width: 943px;
            height: 572px;*/
            width: 800px;
            height: 550px;
            position: relative;
        }

        div#errorBox {
            background: url(/images/404_bg.png) no-repeat top left;
            background-size: cover;
            width: 661px;
            height: 401px;
            margin: auto;
        }

        div#errorText {
            color: #39351e;
            padding: 16px 15px 0 300px;
        }

            div#errorText p {
                width: 330px;
                font-size: 14px;
                line-height: 20px;
            }

        div.link {
            background:#f90;
            height: 50px;
            width: 145px;
            float: left;
            padding-top: 0px;
            padding-left: 0px; /*18.11.16 原 0px*/
        }

        div#home {
            margin: 20px 0 0 44px;
        }

        div#contact {
            margin: 20px 0 0 25px;
        }

        h1 {
            font-size: 30px;
            /*margin-bottom: 30px;*/
        }

        #bottom {
            /*margin:330px 15px 15px 295px;*/
            position: relative;
            padding-top: 80px;
            padding-left: 320px;
        }
        
        a{
            display: inline-block;
        }

        .link::after{
            content: " ";
            clear: both;
        }
    </style>
</head>
<body>
    <div id="mother">
        <div id="errorBox">
            <div id="errorText">
                <h1>Sorry..页面没有找到！</h1>
                <p>
                    似乎你所寻找的网页已移动或丢失了。
                <p>
                    或者也许你只是键入错误了一些东西。
                </p>
                <p>
                    请不要担心，这没事。如果该资源对你很重要，请与管理员联系。
                </p>
                <p style="font-weight: bold; font-family: 'Arial','Microsoft YaHei','黑体','宋体',sans-serif;">
                    火星不太安全，我可以免费送你回地球
                </p>
            </div>
            <a href="/main.aspx" title="立即返回首页">
                <div class="link" id="home">home</div>
            </a>
            <a href="/Login.aspx" title="重新登录">
                <div class="link" id="contact">reload</div>
            </a>
            <div id="bottom" style="font-weight: bold;font-size: 20px; color: red;">
                正在返回首页 <span style="color: green; font-size: 28px;" id="time">5</span> 秒
            </div>
        </div>
       
    </div>
    <script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        function goBack() {
            var time = parseInt($("#time").html());
            if (time <= 0) {
                window.location.href = "main.aspx";
            }
            else {
                time--;
                $("#time").html(time);
            }
        }
        window.setInterval("goBack();", 1000);
    </script>
</body>
</html>
StarXDer!!! 2018-11-16
  • 打赏
  • 举报
 回复
你的写法错误在于a无法包含div元素， 把a元素中div去掉 给样式加上 display: block; background-color: aqua;//改成自己的背景图 width: 100px; height: 20px;
HTML基础课程
HTML是学会制作网页的第一步，是从事web前端工程师必须学会的标记语言，本课程从基本的HTML入门和作用入手，主要介绍了HTML常见标签如：排版标签、列表、图片、标题、超链接、表格、表单等等。之后扩充讲解了HTML5...
css-实现鼠标移至图片上显示黑色半透明遮罩层，且不至于遮住图片上的超链接的方法
一般情况下，让一个图片有超链接，可以用a标签把 img包住，但是要做hover鼠标经过显示黑色半透明遮罩层如果用定位的话，定位的半透明遮罩层就会把图片遮住，以至于鼠标经过没有小手指，也点不到链接，所以这里给出一...
前端三件套 HTML+CSS+JS基础知识内容笔记
HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签 文本和超链接标签 标题标签 段落标签 换行标签 水平标签 强调标签 图片标签与超链接标签 图片标签 超链接标签 音频标签视频标签 ...
前端css和js练习
可以用ps测量图片大小，用qq截图工具来吸取图片颜色2在body里面添加背景颜色） 3，超链接 颜色设置（点击前，悬浮状态，选中，点击后） （超链接是行内元素，需要转成块元素，实现可以在一个部分点击，而不是仅仅在...
Web前端：HTML最强总结 附详细代码
Web前端基础： Web前端：HTML最强总结 附详细代码 Web前端：CSS最强总结 附详细代码 Web前端：JavaScript最强总结 附详细代码 Web前端工具： Web前端： JQuery最强总结（附上详细代码） Web前端：Bootstrap最强...
CSS

61,112

社区成员

60,732

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章