html - 无法在 CSS 中移动 div 并且 src img 不显示

标签 html css

只是练习我在 HTML 和 CSS 中的定位，但我遇到了这个问题，我无法更改 id=menu 的 div 的位置并且源 img 不显示。我逐行检查了语法，但找不到问题。

HTML:

<!doctype html>
<html>
<head>
<title>dreampage</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>



<div class="headermenu">
 //here is my problem in html par
 <div id="menu">
<a href="fun.html" /><img src=<img src="./img/logo/fun.png" height="30px"     width="40px"/></a>
<a href="home.html" /><img src=<img src="./img/logo/home.png"     height="30px" width="40px"/></a>
<div id="partition" >

</div>
<a href="addrequest.html" /><img src=<img src="./img/logo/addrequest.png"    height="30px" width="40px"/></a>
<a href="message.html" /><img src=<img src="./img/logo/message.png" height="30px" width="40px"/></a>


<a href="notification.html" /><img src=<img src="./img/logo/notification.png" height="30px" width="40px"/></a>
<a href="help.html" /><img src=<img src="./img/logo/help.png" height="30px" width="40px"/></a>
<a href="setting.html" /><img src=<img src="./img/logo/setting.png" height="30px" width="40px"/></a>


</div> 
<div id="wowlogo"> 
<img src="./img/logo/wowlogo.png" />

</div>


<div id="wow_meter">

<p>9999!</p>
</div>


<div id="searchlogo">

<img src="./img/logo/search.png" height="20px" width="15px"/>

</div>


<div class="searchbox">

<form action="search.php" method="GET" id="search">
    <input type="text" name="search" size="80"  placeholder="Search">
</form>
</div>

</div>
<div class="sidepic" style="height: 100%;">
<div class="top5">
<p><font color="#472b1d">top 5 in your friendlist</font></p>
</div>
<div class="pdframe">

</div>


<div class="post">
<p>

</div>
<div class="pdpic">
<img src="./img/logo/profilepicdummy.png" />
</div>

<div class="top5names">
<img src="./img/logo/profilepicdummy.png" />
<p>Godwin Romero</p>
<img src="./img/logo/profilepicdummy.png" />
<p>Retchle Fernandez</p>
<img src="./img/logo/profilepicdummy.png" />
<p>Danelie Agpuldo</p>
<img src="./img/logo/profilepicdummy.png" />
<p>Cassandra Agpuldo</p>
<img src="./img/logo/profilepicdummy.png" />
<p>Jay Mendoza</p>
</div>
<div class="usergroup">
<p align="right"><b>City: </b></p>
<p align="right"><b>School: </b></p>
<p align="right"><b>Group: </b></p>
</div>
<div class="usergroupanswer">
<p>Quezon City</p>
<p>QCPU</p>
<p>BSIE</p>
</div>
</div>
<div class="newsbackground">
<div class="newsfeed">
<div id="top1feed">
<div class="pd">
<img src="./img/logo/profilepicdummy.png" />
</div>
<div class="feedusername">
<p>Cassandra Agpuldo</p>
</div>
<div class="feeduserlastpost">
<p>12 hrs.ago</p>
</div>
<div class="postpartitionupper">

</div>
<div class="feedusercomment">
<p>Her comment....</p>

<div class="postpartitionlower">


</div>
</div>
<div class="feeduserlikelogo">
<img src="./img/logo/like.png" />
</div>
<div class="feeduserlike">
<p>like</p>
</div>
<div class="feedusercommentor">
<p>comment</p>
</div>
<div class="feedusercommentorlogo">
<img src="./img/logo/comment.png" />
</div>



</div>

<div id="top2feed">
<div class="pd">
<img src="./img/logo/profilepicdummy.png" />
</div>
<div class="feedusername">
<p>Lougen Valenzuela</p>
</div>
<div class="feeduserlastpost">
<p>2 hrs.ago</p>
</div>
<div class="postpartitionupper">

</div>
<div class="feedusercomment">
<p>Her comment.... <3</p>

<div class="postpartitionlower">


</div>
</div>
<div class="feeduserlikelogo">
<img src="./img/logo/like.png" />
</div>
<div class="feeduserlike">
<p>like</p>
</div>
<div class="feedusercommentor">
<p>comment</p>
</div>
<div class="feedusercommentorlogo">
<img src="./img/logo/comment.png" />
</div>



</div>
</div>
</div>

</div>

</div>
</div>

</body>
</html>

我不认为我的 CSS 有问题，因为我仔细检查了 id，它是相同的，但似乎我放在 #menu 部分的所有内容都没有显示HTML。

CSS:

* {margin: 0px;
padding; 0px;

font-family:comic sans ms;


}
body {background-color: #f1ead7;
overflow: scroll;}
.newsbackground {
position: fixed;
top: 38px;
left: 200px;
height: 100%;
width: 660px;
# background-color: red;

}

.newsfeed {
position: fixed;
top: 38px;
left: 225px;
left: 225px;
height: 100%;
width: 600px;
color: #472b1d;

}

#top1feed{
position: relative;
top: 5px;
left: 0px;

 margin-bottom: 20px;
width: 100%;
background-color: #d2c195;

}
#top2feed{
position: relative;
top: 5px;
left: 0px;

 margin-bottom: 20px;
width: 100%;
background-color: #d2c195;

}
.pd img {
position: absolute;
height: 50px;
width: 75px;
top: 10px;
left: 10px;
}

.feedusername {
font-weight: bold;
font-size: 20px;
position: relative;
left: 100px;
top: 3px;
color: #97752b;
}

.postpartitionupper {
position: absolute;
top: 59px;
left: 100px;

Width:500px;

height: 1px;
background-color: #472b1d;
}

.postpartitionlower {
position: relative;
top: 0px;
left: 0px;

Width: 500px;
height: 1px;
background-color: #472b1d;
}
.feeduserlastpost{
position: absolute;
left:100px;
top: 33px;
font-size: 15px;
color: #8f7c5b;
}
.feeduserlikelogo img {
position: relative;
left:100px;
top:36px;
height: 30px;
width: 30px;

}
.feeduserlike {
position: relative;
left:140px;
top: 8px;
height: 30px;
width: 30px;

}
.feedusercomment {
    position: relative;
left:100px;
top: 30px;
font-size: 18px;
}

.feedusercommentorlogo img {
    position: relative;
left:180px;
top: -50px;
height: 30px;
width: 30px;
}


.feedusercommentor {
    position: relative;
left:220px;
top: -25px;
font-size: 18px;
}
.top5names {
position: fixed;
top: 325px;
left: 10px
}


.top5names img
{height: 50px;
width:   75px;

min-height: 100%;
max-height; 300%;

}
.top5 {
position: fixed;
font-weight: bold;
top: 300px;
left: 10px;

}
.usergroup {
position: fixed;
top: 230px;
left: 10px


}
.usergroupanswer {
position: fixed;
top: 230px;
left: 80px
}
.sidepic {
position: fixed;
top: 38px;
left: 0px
height: 100%;
width: 200px;
background-color: #d2c195;
margin-top: 0px;
margin-left: 0px;

padding-left: 0px;
padding_right: 0px;
padding_bottom: 0px;
padding_top: 0px;
}
.pdframe {
position: fixed;
top: 58px;
left: 0px;
height: 150px;
width: 200px;
background-color: #857d66;
}   
.pdpic {
position: fixed;
top: 68px;
left: 8px;

    margin-top: 0px;
margin-left: 0px;

padding-left: 0px;
padding_right: 0px;
padding_bottom: 0px;
padding_top: 10px;

}
.pdpic img {
height: 130px;
width:  180px;
min-height: 100%;
max-height; 300%;
}



.headermenu {

position: fixed;
left: 0px;
top: 0px;
background-color: #472b1d;
height: 38px;
border-bottom; 0px;
padding-left: auto;
padding_right: auto;
width: 100%;
color: #f8f6f5;

}


#searchlogo {
position: fixed;
left: 184px;
top: 6px;


padding-left: 1px;
padding_right: 2px;
padding_bottom: 0px;
padding_top: 0px;


background-color: #f1ead7;
}
#searchlogo img {

min-height: 100%;
max-height; 200%;
}
.searchbox{
position: fixed;
top: 6px;
left: 200px;

background-color: #f1ead7;


#search {


}
//here is the style for menu
#menu {

position: fixed;
left: 870px;
top: 3px;


padding-top: 10px;
padding-left: 10px;
margin-left:100px;


}

#menu img {
height:30px;
width: 40px;

}

最佳答案

你可以使用错误的标签 <img src=<img src="./img/logo/fun.png" height="30px" width="40px"/> 你应该使用 <img src="./img/logo/fun.png" height="30px" width="40px"/>

enter image description here

在 Dreamweaver 中检查您的代码。

关于html - 无法在 CSS 中移动 div 并且 src img 不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47426132/

上一篇：css - 使用 CSS 创建固定的、内容重叠的页脚

下一篇：javascript - 使用 JavaScript 更改背景

相关文章：

javascript - Google App Script 通过 my-drive 生成​​指向 pdf 的可点击链接

html - 使用标签中的样式更改 Div 的背景颜色？

html - 如何在表格 th 或 td 中设置分词符，当列和表格布局自动使用 CSS

javascript - 约束和可拖动元素未出现在顶部 - 版本 II

css - 最后 float 框添加空间？

javascript - 当我尝试获取值时，文本转换不起作用

html - 将 CSS 形状的边框宽度设置为始终形成三 Angular 形

html - CSS 文件名区分大小写 & Css 文件缓存

javascript - 如何等到用户在文本输入中完成书写后调用函数？

html - 在 Firefox 中缩放会导致页面布局中断

©2024 IT工具网  联系我们