Html 在特定位置显示div
我创建了一个Html 在特定位置显示div,html,css,web,Html,Css,Web,我创建了一个网页，如下所示 我必须用我制作的黄色标记显示一个图像库。我什么都试过了，但都在页脚下。我能知道我怎样才能做到这一点吗 这是我的密码 <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
网页页脚下。我能知道我怎样才能做到这一点吗
这是我的密码
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index_style.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul class="pull-right">
<li>Welcome to our Store</li>
<li><a href="login_page.html">Login</a></li>
<li>or</li>
<li><a href="register_page.html">Register</a></li>
<li>yourself!</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="extra0">
<div class="cata-head">
Choose a category!
</div>
<ul class="cata">
<li><a href="#">Men's Clothing</a></li>
<li><a href="#">Men's Accesories</a></li>
<li><a href="#">Women's Clothing</a></li>
<li><a href="#">Women's Accesories</a></li>
<li><a href="#">Baby Products</a></li>
</ul>
</div>
<div class="extra">
<a href="#"><img src="extra.png"></a>
<a href="#"><img src="extra1.png"></a>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="foot">
<footer>
Policies: Terms of use | Security | Privacy | Infringement <b> UsamaRehan & AsjadHussaini©</style> </b>
<a href="https://facebook.com"><img src="face.png"></a>
<a href="https://twitter.com"><img src="tweet.png"></a>
<a href="https://youtube.com"><img src="you.png"></a>
</footer>
</div>
</body>
</html>
我添加了一些额外的div来浮动元素。这是下面的链接
HTML
我改变了你的html结构，即
使用类库创建了一个div，并将所有图像放入该div中
在html中，图像没有任何父对象。如果您使用parent，则可以根据parent移动所有冷藏的冷藏箱
注意：全屏查看结果
- 欢迎光临本店
- 或
- 你自己
选择一个类别！
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
政策：使用条款|安全|隐私|侵权| UsamaRehan&AsjadHussaini | 169；
我添加了一些新的div和css，这里是链接检查：
正文{
//溢出：隐藏；
背景色：#d0e4fe；
//背景图片：url（“background.jpg”）；
字体系列：“古董书”，时代新罗马，佐治亚州，衬线；
}
.导航
{
边框样式：实心；
}
.导航a{
颜色：#5A5A；
字体大小：15px；
字体大小：粗体；
填充：14px 10px；
文本转换：大写；
}
李国荣先生{
显示：内联；
}
a:悬停{
颜色：珊瑚；
}
.向左拉
{
浮动：左
}
.侧边栏{
浮动：左；
宽度：250px；
}
.向右拉
{
浮球：对
}
清楚的
{
明确：两者皆有；
}
.集装箱
{
右边填充：75px；
右边距：自动；
左边距：自动；
背景色：#bbb；
}
.画廊{
浮动：左；
宽度：80%；
边缘底部：40px；
}
.extra0{
背景色：#555；
宽度：250px；
垫底：10px；
边缘顶部：5px；
边框样式：实心；
边框颜色：#0ca3d2；
}
卡塔头酒店
{
字号：18px；
字体大小：粗体；
填充：10px 0px 5px 15px；
文本转换：大写；
颜色：活动边框；
边框样式：实心；
边框底色：#0ca3d2；
左边框颜色：#555；
右边框颜色：#555；
边框顶部颜色：#555；
}
卡塔先生
{
颜色：#b3c0c8；
列表样式图像：url（“list.png”）；
线高：2.333em；
}
脚
{
背景#ffab62；
宽度：100%；
高度：30px；
位置：固定；
底部：0；
左：0；
浮动：左；
左侧填充：15px；
垫底：5px；
}
B
{
颜色：耐火砖；
}
.额外的
{
宽度：250px；
填充顶部：12px；
左侧填充：12px；
}
梅因先生
{
边框样式：实心；
边框颜色：黑色；
显示：块；
宽度：250px；
利润率：10px 10px；
}
部门经理{
/*保证金：5px；
填充物：5px；
边框：1px实心#0000ff；
高度：自动；
宽度：自动；
浮动：左；
文本对齐：居中*/
利润率：10px 10px；
宽度：自动；
边框：3px实心#73AD21；
填充：10px；
浮动：左；
}
部门经理经理经理{
显示：内联；
保证金：5px；
边框：1px实心#ffffff；
}
第a部分：悬停式img{
边框：1px实心#0000ff；
}
分区描述{
文本对齐：居中；
字体大小：正常；
宽度：120px；
保证金：5px；
}
提供头衔
- 欢迎光临本店
- 或
- 你自己
选择一个类别！
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
政策：使用条款|安全|隐私|侵权| UsamaRehan&AsjadHussaini | 169；
body {
//overflow: hidden;
background-color: #d0e4fe;
//background-image: url("background.jpg");
font-family: "Book Antiqua",Times New Roman, Georgia, Serif;
}
.nav
{
border-style: solid;
}
.nav a {
color: #5a5a5a;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
a:hover {
color: coral;
}
.pull-left
{
float:left
}
.pull-right
{
float:right
}
.clear
{
clear:both;
}
.container
{
padding-right: 75px;
margin-right: auto;
margin-left: auto;
background-color:#bbb;
}
.extra0{
background-color: #555;
width: 250px;
padding-bottom: 10px;
margin-top: 5px;
border-style: solid;
border-color: #0ca3d2;
}
.cata-head
{
font-size: 18px;
font-weight: bold;
padding: 10px 0px 5px 15px;
text-transform: uppercase;
color: activeborder;
border-style: solid;
border-bottom-color: #0ca3d2;
border-left-color:#555;
border-right-color: #555;
border-top-color: #555;
}
.cata
{
color: #b3c0c8;
list-style-image: url("list.png");
line-height: 2.333em;
}
.foot
{
background:#ffab62;
width:100%;
height:30px;
position:absolute;
bottom:0;
left:0;
padding-left: 15px;
padding-bottom: 5px;
}
b
{
color: firebrick;
}
.extra
{
width: 250px;
padding-top: 12px;
padding-left: 12px;
}
.main
{
border-style: solid;
border-color: black;
display: block;
width: 250px;
margin: 10px 10px;
}
div.img {
/* margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;*/
margin: 10px 10px;
width: auto;
border:3px solid #73AD21;
padding: 10px;
float: left;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
<div class="nav">
<div class="container">
<ul class="pull-left">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul class="pull-right">
<li>Welcome to our Store</li>
<li><a href="login_page.html">Login</a></li>
<li>or</li>
<li><a href="register_page.html">Register</a></li>
<li>yourself!</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<div class="pull-left">
<div class="extra0">
<div class="cata-head">
Choose a category!
</div>
<ul class="cata">
<li><a href="#">Men's Clothing</a></li>
<li><a href="#">Men's Accesories</a></li>
<li><a href="#">Women's Clothing</a></li>
<li><a href="#">Women's Accesories</a></li>
<li><a href="#">Baby Products</a></li>
</ul>
</div>
<div class="extra">
<a href="#"><img src="extra.png"></a>
<a href="#"><img src="extra1.png"></a>
</div>
</div>
<div class="pull-left">
ADD GALLERY HERE <br>
<img src="http://placehold.it/500x200">
<img src="http://placehold.it/500x200">
<img src="http://placehold.it/500x200">
</div>
<div class="clear"></div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="clear"></div>
<div class="foot">
<footer>
Policies: Terms of use | Security | Privacy | Infringement <b> UsamaRehan & AsjadHussaini©</style> </b>
<a href="https://facebook.com"><img src="face.png"></a>
<a href="https://twitter.com"><img src="tweet.png"></a>
<a href="https://youtube.com"><img src="you.png"></a>
</footer>
</div>
body {
overflow: hidden;
background-color: #d0e4fe;
background-image: url("background.jpg");
font-family: "Book Antiqua",Times New Roman, Georgia, Serif;
}
.nav
{
border-style: solid;
}
.nav a {
color: #5a5a5a;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
a:hover {
color: coral;
}
.pull-left
{
float:left;
}
.pull-right
{
float:right;
}
.clear
{
clear:both;
}
.container
{
padding-right: 75px;
margin-right: auto;
margin-left: auto;
background-color:#bbb;
}
.extra0{
background-color: #555;
width: 250px;
padding-bottom: 10px;
margin-top: 5px;
border-style: solid;
border-color: #0ca3d2;
}
.cata-head
{
font-size: 18px;
font-weight: bold;
padding: 10px 0px 5px 15px;
text-transform: uppercase;
color: activeborder;
border-style: solid;
border-bottom-color: #0ca3d2;
border-left-color:#555;
border-right-color: #555;
border-top-color: #555;
}
.cata
{
color: #b3c0c8;
list-style-image: url("list.png");
line-height: 2.333em;
}
.foot
{
background:#ffab62;
width:100%;
height:30px;
position:absolute;
bottom:0;
left:0;
padding-left: 15px;
padding-bottom: 5px;
}
b
{
color: firebrick;
}
.extra
{
width: 250px;
padding-top: 12px;
padding-left: 12px;
}
.main
{
border-style: solid;
border-color: black;
display: block;
width: 250px;
margin: 10px 10px;
}
div.img {
/* margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;*/
margin: 10px 10px;
width: auto;
border:3px solid #73AD21;
padding: 10px;
float: left;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
<div class="container">
<div class="extra0">
</div>
<div class="gallery">
<!---all imaged-->
</div>
</div>