0
HTML, CSS 및 JAVAScript를 배우고 있으며 최근에 아주 간단한 코드를 작성했습니다. div 클래스 "mainLeft"를 추가 할 때까지 모든 것을 보여 주며 잘 작동했습니다. 그 후에는 해당 클래스 앞에있는 코드를 제외하고는 아무 것도 표시하지 않습니다. 친절하게 도와 드릴 수 있습니까? 다음은 HTML 및 CSS 코드입니다.웹 페이지에 HTML 요소가 모두 표시되지 않습니다.
CSS 코드
**CSS Code**
body {
background-color: white;
}
.main h1 {
font-family: Candara;
text-align: center;
color: white;
}
.main {
display: table;
height: 50px;
width: 600px;
margin-left: auto;
margin-right: auto;
background-color: #13b5ea;
}
.SME {
display: table;
position: absolute;
width: 250px;
height: 250px;
left: 50%;
top: 50%;
margin-left: -125px;
margin-top: -125px;
color: #13b5ea;
}
.SME h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.DataAnalysis {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 28%;
margin-left: -100px;
margin-top: -100px;
color: #13b5ea;
}
.DataAnalysis h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.ProdMonitor {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 72%;
margin-left: -100px;
margin-top: -100px;
color: #13b5ea;
}
.ProdMonitor h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.mainLeft h1 {
font-family: Candara;
text-align: center;
color: white;
}
.mainLeft {
display: table;
height: 50px;
width: 600px;
margin-right: auto;
background-color: #13b5ea;
}<html>
<head>
<link type="text/css" rel="stylesheet" href="satmap.css" />
<title>My Home</title>
</head>
<body>
<!--Go bananas!-->
<div class="main">
<h1> XYZ</h1>
</div>
<div class="mainLeft">
<h1> Current Stats </h1>
</div>
<div class="SME">
<h4> My Explorer </h4>
</div>
<div class="DataAnalysis">
<h4> Data Analysis </h4>
</div>
<div class="ProdMonitor">
<h4> Production Monitoring </h4>
</div>
</body>
</html>
어디서나 'position : absolute'을 사용하지 않는 것이 좋습니다. – j08691
코드가 제대로 작동하지 않는 것 같습니다. 당신의 코드로 만든 스 니펫을보십시오. –
당신이 Hs를 위해 color : white를 사용하지 않는다면, 당신은 텍스트가 보여 질 것입니다. http://jsfiddle.net/mplungjan/p42boov2/ – mplungjan