我在新的代码把我一直在研究,希望这是我的目标是什么更清晰的画面。
我想从基础到div
建立一个表去,我已经试过
<div class="image"></div>
这个CSS
div.image:before {
content:url(http://placehold.it/350x150);
}
但我不确定文本的位置的,也把一个图像中的div
以及确保尺寸是正确的。
HTML代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Site</title>
<meta http-equiv="Content Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bgimg {
background-image: ('file:///C:/Location/somimg.jpg');
}
</style>
</head>
<body>
<img src="somimg.jpg" width="246" height="94" alt="sm pic'/>
<div class="bgimg">
</div>
<div class="mainsection">
</div>
</body>
</html>
CSS代码:
td {
text-align: left;
vertical-align: top;
font-family:Tahoma;
font-weight: bold;
font-size:15px;
color: #E5E5E5;
}
.div-with-bg
{
width: 263px;
height: 94px;
background-image:url('smpic.jpg');
margin:0;
padding:0;
}
a {
text-decoration: underline;
color:#9D5FBB;
}
A:Hover {
color : #DBACF2;
text-decoration : underline;
}
h1 {
color: #9929bd;
font-weight: normal;
font-size: 20px;
font-family: Tahoma;
}
H3 {
color: #7F409E;
font-weight: bold;
font-size : 20px;
font-family:Tahoma;
}
我的目标是有div的外出浏览器的边缘,因为我有多个表,我想用div元素来代替。我曾认为这一设置在浏览器和div和形象出现,但不会在页面的边缘。
我不知道如果我理解你问什么,但我只是复制的崇高文字的HTML,而这样做对CSS:
div.image:before {
width: 263px;
height: 94px;
background-image:url('somepic.jpg');
content:url(http://placehold.it/350x150);
margin:0;
padding:0;
}
这个对我有用。我对左边和右边的div它旁边的左股利。
另外,我想在CSS文件的div的风格:
div.right {
float: "middle"
}
div.left {
float: "left";
}
而对于HTML:
<body>
<div class="image left">Left Div</div>
<div class="right"">Right Div</div>
</body>
如果你想使您的生活更轻松只是学习Flexbox的。路上,我学会了用this网站。
.container{
display:flex;
}
<div class="container">
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
RIGHT
</div>
</div>
不过,我认为你应该改变这样的问题到如何学习在浏览器设计(例如https://hackernoon.com/css-box-model-45ecf4ac219e)什么的。