本帖最后由 黑色Ace 于 2024-8-21 09:42 编辑
【写在前面】我知道我写的很烂，其实是在其他模版上自己瞎改的，没有系统学过，但因为急用，所以请大伙轻点喷~
【想要效果】创建840*750大小的区域，其中第一行是photo1，占840*100，第二行是photo2和photo3并排，分别占420*650。三个区域初始显示旧图，鼠标移动到任一区域，会显示该区域的新图，且对应区域的边框有亮色提示，点击对应区域可以跳转网页
【实际效果】
【存在问题】
问题一：photo2和photo3无法并排，测试发现photo3的width小于等于410px时可以并排，但整体格式未对齐
问题二：图片下方出现一条空白区域，查阅发现和“基线对齐”相关，但已经添加了“display: block;”，且也试过“vertical-align:middle;”，都是一样的情况【感谢~】请大伙麻烦帮看看问题出在哪里，该怎么修改，万分感谢！【源代码】
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<html>
<head>
<style type="text/css">
/** 重置浏览器默认标签样式 */
* {
margin: 0;
padding: 0;
}
body {
background-image: url(img/background.jpg);
background-size: cover;
}
.xttblog {
width: 840px; /** 大框宽 */
height: 750px; /** 大框高 */
margin-top: 30px; /** 顶距 */
margin-left: auto;
margin-right: auto;
color: black;
}
.box {
list-style-type: none;
}
.box:after {
content: ".";
display: block;
line-height: 0;
width: 0;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
.box li {
float: left;
}
.box li a, .box li a:visited {
display: block;
border: 5px solid #ccc; /** 框线厚度 */
margin-left: -5px; /** 框线重叠 */
margin-top: -5px; /** 框线重叠 */
position: relative;
z-index: 1;
}
.box li a:hover {
border-color: rgb(233, 99, 121);
z-index: 2;
}
</style>
</head>
<body>
<div class="xttblog">
<ul class="box">
<li><a class="photo1" target="_blank" href="../1/1.html"><img src="img/1.jpg" onmouseover='this.src="img/1-after.jpg"' onmouseout='this.src="img/1.jpg"' width="840px" height="100px" /></a></li>
<li><a class="photo2" target="_blank" href="../2/2.html"><img src="img/2.jpg" onmouseover='this.src="img/2-after.jpg"' onmouseout='this.src="img/spring.jpg"' width="420px" height="650px" /></a></li>
<li><a class="photo3" target="_blank" href="../3/3.html"><img src="img/3.jpg" onmouseover='this.src="img/3-after.jpg"' onmouseout='this.src="img/summer.jpg"' width="420px" height="650px" /></a></li>
</ul>
</body>
</html>
| 
发表于 2024-8-21 09:38
发表于 2024-8-22 05:22
