gpt4 book ai didi

html - 列表中链接的图像未显示。 HTML5 和 CSS3

转载 作者:太空宇宙 更新时间:2023-11-04 12:02:35 25 4
gpt4 key购买 nike

HTML:

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="IndexStyleTesting.css" title="IndexStyleTesting">
<title>Christian's Portfolio</title>
</head>

<body>

<div id="wrapper">

<div id="callout">
<p>Contact me at <b>(386)123-4567</b></p>
</div>

<header>
<a href=""><img scr="MyHeaderImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a>
</header>

<nav>
<ul>
<li class='active'><a href="">Home</a></li>
<li><a href="">About Me</a></li>
<li><a href="">HTML5 and CSS3 Projects</a></li>
<li><a href="">Other Projects</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact Me</a></li>
</ul>

<div class="clearfix"></div>

</nav>

<div class="banner">
<img scr="MyBannerImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
</div>

<div align="center">
<img scr="NextImageOfBigWordsHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/> </div>

<section class="left-col">
<p style="text-indent: 50px";>Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here Paragraph Here </p>
<p style="text-indent: 50px";>Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here Second Paragraph Here </p>
</section>

<aside class="sidebar">
<div class="RightImage">
<img scr="MyRightImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
</div>
</aside>

<div class="clearfix"></div>

<div class="section">
<h3>Left Section</h3>
<img scr="MyLeftSectionImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
<p></p>
</div>

<div class="section">
<h3>Middle Section</h3>
<img scr="MyMiddleSectionImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
<p></p>
</div>

<div class="section">
<h3>Right Section</h3>
<img scr="MyRightSectionImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
<p></p>
</div>

<div align="center">
<img scr="NextImageOfBigWordsHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
</div>
<footer>
<div class="section">
<p>Christian</p>
<p><b>(386)123-4567</b> <br>
Top Notch Coding <br>
Christian@gmail.com</p>
</div>

<div class="section">
<ul>
<li><a href=""><img scr="IndexImagesTesting/Facebook.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
<li><a href=""><img scr="IndexImagesTesting/Googleplus.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
<li><a href=""><img scr="IndexImagesTesting/Twitter.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
<li><a href=""><img scr="IndexImagesTesting/Youtube.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
</ul>
</div>

<div class="section">
<img scr="RightLogoImageHere.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/>
</div>
</footer>

</div>

<p style="text-align: center; padding: 0px;">&#169;Copyright - Christian 2015</p>

</body>

CSS:

body {
background-image: url("IndexImagesTesting/wood.jpg");
background-repeat: repeat;
background-attachment: fixed;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 16px;
overflow: auto;
}

h1, h2, h3 {
text-align: center;
padding-left: 5%;
color: #00CC99;
}

p {
padding-left: 2%;
color: #000000;
}

img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}

#wrapper {
margin: 0 auto;
max-width: 1020px;
width: 98%;
background: #FEFEE8;
border: 1px solid #684E36;
border-radius: 2px;
box-shadow: 0 0 10px 0px rgba(12, 3, 25, 0.8);
}

#callout {
width: 100%;
height: auto;
background: #00CC99;
overflow: hidden;
}

#callout p {
text-align: right;
font-size: 13px;
padding: 0.1% 5% 0 0;
color: #FEFEE8;
}

#callout p a {
color: #FEFEE8;
text-decoration: none;
}

header {
width: 98%;
min-height: 125px;
padding: 5px;
text-align: center;

}

nav ul {
list-style: none;
margin: 0px;
padding-left: 50px;
}

nav ul li {
float: left;
border: 1px solid #00CC99;
width: 15%;
}

nav ul li a {
background: #FEFEE8;
display: block;
padding: 5% 12%;
font-weight: bold;
font-size: 18px;
color: #00CC99;
text-decoration: none;
text-align: center;
}

nav ul li a:hover, nav ul li.active a {
background-color: #00CC99;
color: #FEFEE8;
}

.banner img {
width: 100%;
/* border-top: 1px solid #00CC99;
border-bottom: 1px solid #00CC99; */
}

.clearfix {
clear: both;
}

.left-col {
width: 55%;
float: left;
margin: -2% 1% 1% 1%;
}

.sidebar {
width: 40%;
float: right;
margin: 1%;
text-align: center;
}

.banner {
float: left;
margin: 0 auto;
width: 100%;
height: auto;
padding: 1%, 1%;

}

.section {
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}

footer {
background: #00CC99;
width: 100%;
height: auto;
overflow: hidden;
}

footer p, footer h3 {
color: #FEFEE8;
}

footer p a {
color: #FEFEE8;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
display: inline;

}

ul li a {
display: block;
width: auto;
height: 60px;
}

ul li img {
height: 48px;
}


/*THIS IS WHERE MEDIA STARTS*/
@media screen and (max-width: 478px) {
body {
font-size: 13px;
}
}

@media screen and (max-width: 740px) {
nav {
width: 100%;
margin-bottom: 10px;
}
nav ul {
list-style: none;
margin: 0 auto;
padding-left: 0;
}
nav ul li {
text-align: center;
margin-left: 0 auto;
width: 100%;
border-top: 1px solid #00CC99;
border-right: 0px solid #00CC99;
border-left: 0px solid #00CC99;
border-bottom: 1px solid #00CC99;
}
nav ul li a {
padding: 8px 0;
font-size: 16px;
}
.left-col {
width: 100%;
}
.sidebar {
width: 100%;
}
.section {
width: 100%;
float: left;
margin: 0;
}
}

问题:

                <div class="section">
<ul>
<li><a href=""><img scr="IndexImagesTesting/Facebook.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
<li><a href=""><img scr="IndexImagesTesting/Googleplus.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
<li><a href=""><img scr="IndexImagesTesting/Twitter.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
<li><a href=""><img scr="IndexImagesTesting/Youtube.png" alt="Christian's Image Keywords" title="Christian's Image Keywords"/></a></li>
</ul>
</div>

我知道链接指向正确的位置,因为当我将鼠标悬停在括号中的链接上时,会出现正确的图像。我还尝试使用完全不同的图像以确保不是这样。我尝试使用内联样式和通过 css 表手动设置它们的宽度和高度,但无济于事。

我在这里遗漏了什么或做错了什么??

谢谢!!!

最佳答案

scr 应该是 src

插入 lorem ipsum 文本,因为答案太短* :)

关于html - 列表中链接的图像未显示。 HTML5 和 CSS3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29641277/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com