-2
온라인에서 찾은 템플릿에서 웹 페이지를 만들고 있으며 웹 페이지의 모든 HTML은 내 스타일 페이지를 참조합니다. 그것은 내가 크롬에서 (그리고 나는 Safari와 Firefox에서도 가정했지만 체크하지 않았을 것이라고) 기대했지만 Internet Explorer에서는 index.html이 스타일 페이지에 전혀 액세스하지 않고 default_controls.html 부분적으로 만 액세스하는 것처럼 보입니다. . 나는 템플릿의 스타일 페이지를 많이 사용하지 않으므로 많은 스타일 페이지가 폐기되었습니다. 또한 웹 페이지가 아직 게시되지 않은 것일 수도 있습니다. 저는 HTML에 익숙하지 만 (저는 Java 놈입니다) 가능하면 도움을주십시오!html의 스타일은 Chrome에서만 작동합니다.
내 스타일 페이지 :
<!--/*-------------------------------------------------
GLOBALS CLASSES
-------------------------------------------------*/-->
*{padding:0; margin:0;}
body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#1491c1; background:url(../images/bg.jpg) repeat;}
img{border:none;}
h1{ font-family: 'Droid Serif', serif; font-weight:normal; color:#fff;}
h2{ font-family: 'Droid Serif', serif; font-weight:normal; color:#1491c1; font-size:18px;}
P{ line-height:20px;}
a{text-decoration:none; color:#1491c1;}
a:hover{color:#fff;}
<!--/*-------------------------------------------------
GENERAL CLASSES
-------------------------------------------------*/-->
.mar-top{ margin-top:40px;}
.mar-top30{ margin-top:30px;}
.mar-bottom{ margin-bottom:40px;}
.mar-Right{ margin-right:40px;}
.mar-right115{ margin-right:115px;}
.float-left{ float:left;}
.float-right{ float:right;}
.clearing { clear:both;}
.bor-bottm-non{border-bottom:none!important;}
.panel{}
.title{}
.content{}
.wrap{width:960px; margin:0 auto;overflow:hidden; background:url(../images/page-bg.jpg);}
.page{ width:580px; margin:0 auto;overflow:hidden; padding-bottom:50px;}
.page-content{ width:580px; margin:0 auto;overflow:hidden; padding-bottom:30px; padding-top:30px;}
.block{padding:20px 20px 20px 20px; margin:0 auto;}
.block2{padding:20px 20px 20px 20px; margin:0 auto;}
.button a{text-decoration:none; display:block; width:70px; height:30px; background:#1491c1; color:#ffffff; font-family:Arial, Helvetica, sans-serif; line-height:30px; text-align:center;}
.button a:hover{ background:#0e5295;}
<!--/*-------------------------------------------------
CONTENT CLASSES
-------------------------------------------------*/-->
.page-content{ width:580px; margin:0 auto;overflow:hidden; padding-bottom:30px; padding-top:30px;}
.page-content .content h3{ padding-bottom:20px;font-family: 'Droid Serif', serif; font-weight:normal; color:#fff; font-size:16px;}
.page-content .content p{ padding-bottom:15px;}
<!--/*-------------------------------------------------
HEADER CLASSES
-------------------------------------------------*/-->
.header-wrap{ background:#083266; height:162px;}
.header{ width:1860px; margin:0 auto;}
.logo{ float:left; background:#1491c1; width:300px; float:left;}
.logo h1{font-size:52px; text-align:center; padding:52px 0px 50px 0px;}
.menu{ float:left;}
.menu ul li{ list-style:none; float:left; border-right:#093e76 solid 1px; padding:115px 20px 30px 20px;}
.menu ul li a{ text-decoration:none; color:#80d2f8; font-size:14px; text-align:center;}
.menu ul li a:hover{ color:#1491c1;}
.menu ul li a.active{ color:#1491c1;}
<!--/*-------------------------------------------------
LEFTCOL CLASSES
-------------------------------------------------*/-->
.leftcol{ float:left; width:300px; overflow:hidden;}
.leftcol .title{ margin-bottom:25px;}
.leftcol .content ul li{ list-style:none; border-bottom:#0c4680 solid 1px; line-height:40px;}
.leftcol .content ul li a{ text-decoration:none; color:#1491c1;}
.leftcol .content ul li a:hover{color:#80d2f8;}
.leftcol .panel img{ float:left; border:#fff solid 4px; margin:9px 20px 0px 0px;}
.leftcol .panel .content{ color:#1491c1; overflow:hidden;}
.leftcol .panel .content .button a{ width:53px; height:24px; line-height:24px; float:left; margin:15px 0px 20px 0px;}
.block2 .panel{border-bottom:#0c4680 solid 1px; margin-bottom:18px;}
<!--/*-------------------------------------------------
RIGHT CLASSES
-------------------------------------------------*/-->
.rightcol{ float:left; width:660px; overflow:hidden;}
.rightcol .title{ margin-bottom:25px;}
.rightcol .button{ margin-top:0px;}
.rightcol img{ float:left; margin-right:40px;}
.rightcol .content p{ padding-bottom:30px;}
.button2 a{text-decoration:none; display:block; width:70px; height:30px;
background:#1491c1; color:#ffffff; font-family:Arial, Helvetica, sans-serif; line-height:30px; text-align:center; float:left;}
.button2 a:hover{ background:#0e5295;}
<!--/*-------------------------------------------------
BOX CLASSES
-------------------------------------------------*/-->
.box{ width:230px; background:#083266; padding:20px 20px 35px 20px; float:left;}
.box img{ margin-bottom:25px;}
.box .title{margin-bottom:20px;}
.box .title h1{ font-size:20px; font-weight:normal;}
<!--/*-------------------------------------------------
CONTACT FORM CLASSS
-------------------------------------------------*/-->
.contact-form { background:#0d3d78; padding:30px; width:440px; float:left;}
.contact-form label {display: block; padding:10px 0 10px 0;}
.contact-form label span {display: block; color:#fff;font-size:14px; float:left; width:80px; text-align:left; padding:5px 20px 0 0; font-family: 'Droid Serif', serif;}
.contact-form .input_text {padding:10px 10px;width:318px;background:#07366b; border:none; color:#fff; outline:none;}
.contact-form .message{padding:10px 10px;width:318px; background:#07366b; border:none; overflow:hidden;height:150px; color:#fff; font-size:14px; outline:none;}
.contact-form .button{padding:8px;background:#1491c1; color:#ffffff; text-transform:uppercase; font-family:'Oswald', sans-serif;border:0px solid;margin-left:100px;margin-top:20px;}
.address { float:left; width:250px; margin-left:30px; margin-top:50px;}
.address .panel { border:none; color:#fff;}
.address .panel .title h1 { color:#1491c1; padding-bottom:10px;}
.address .panel .content p span { color:#fff;}
.address .panel .content p .number{ font-size:15px;}
<!--/*-------------------------------------------------
FOOTER CLASSES
-------------------------------------------------*/-->
.footer-wrap{ background:#1491c1; overflow:hidden;}
.footer{ width:960px; margin:0 auto; padding:40px 0px 50px 0px; overflow:hidden;}
.footer .bolg{ width:598px; float:left;}
.footer .panel{ float:left; width:230px;}
.footer .title{ border-bottom:#107eb4 solid 1px; padding-bottom:20px; margin-bottom:30px;}
.footer .title h1{ font-size:20px;}
.footer .panel .content ul li{ float:left; list-style:none; color:#062c5b; font-weight:bold;}
.footer .panel .content p{ color:#fff; font-size:12px; line-height:inherit; padding-top:20px; clear:both;}
.footer .panel .content p a{color:#062c5b; text-decoration:none;}
.footer .panel .content p a:hover{ color:#fff;}
.footer .panel .content p span{ color:#062c5b; font-weight:bold; font-size:12px;}
.footer .quickcontact{ width:270px; float:right;}
내 index.html을 : 사전에
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EMS WebGIS Help Center: Home</title>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="Styles.html" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header-wrap">
<div class="header">
<div class="logo"><h1>Help Center</h1></div>
<div class="menu">
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="default_controls.html">Default & Controls</a></li>
<li><a href="webmaps_toc.html">Table of Contents</a></li>
<li><a href="identify.html">Identify</a></li>
<li><a href="draw.html">Draw</a></li>
<li><a href="measure.html">Measure</a></li>
<li><a href="add_file.html">Add File to Map</a></li>
<li><a href="print.html">Print</a></li>
<li><a href="bookmarks.html">Bookmarks</a></li>
<li><a href="overview_basemaps.html">Overview & Basemaps</a></li>
<li><a href="users_login.html">Users & Login</a></li>
<li><a href="app_launcher.html">App Launcher</a></li>
</ul>
</div>
</div>
</div><!---header-wrap--->
<div class="wrap">
<div class="leftcol">
<!-- <div class="block">
<div class="panel">
<div class="title">
<h1></h1>
</div>
<div class="content">
<ul>
<li><a href="#">Sed do eiusmod tempor incididunt ut </a></li>
<li><a href="#">Praesent sit amet purus ac ligula tem </a></li>
<li><a href="#">Nam convallis mauris id eros condiment</a></li>
<li><a href="#">Donec a sem sit amet neque iaculis p</a></li>
<li><a href="#">Duis sit amet augue ut urna auctor rut</a></li>
<li><a href="#">Ut fringilla scelerisque enim, nec he</a></li>
<li class="bor-bottm-non"><a href="#">Donec vitae magna in turpis congue</a></li>
</ul>
</div>
</div>
</div> -->
<div class="block2">
<div class="panel">
<img src="images/Calleguas-logo-80px.png" alt="image" />
<div class="content">
<p>Go to the WebGIS program</p>
<div class="button"><a href="http://cloud.emswebmap.com/webgis/src/index.html?agency=callegaus#/homemap">Go</a></div>
</div>
</div>
</div>
<div class="block2">
<div class="panel">
<img src="images/EMSLogoo.gif" alt="image" />
<div class="content">
<p>Visit the EMS Website</p>
<div class="button"><a href="http://www.emsol.com/emsol/index.shtml">Go</a></div>
</div>
</div>
</div>
</div><!---leftcol--->
<div class="rightcol">
<!--<div class="banner"><img src="images/bannerInsert.png" alt="banner" /></div> -->
<div class="page">
<div class="panel mar-bottom">
<div class="title">
<h1></h1>
<h2></h2>
</div>
<div class="content">
<p> <h2>Welcome to the Help Center for the EMS WebGIS program for the Calleguas Municipal Water District. </h2> <br>
<h4>This Help Center provides walkthroughs and information to help users find their way in and out of the WebGIS program.
This page provides the basics to navigation along the map, identification of objects, and much more.
With the help of the EMS WebGIS Help Center, you can become comfortable with the program and its resources.</h4>
<p> <h4>The EMS WebGIS Help Center provides assistance in the following subjects of the program:</h4>
</div>
</div>
<!--Index boxes-->
<div class="box mar-Right">
<div class="panel">
<img src="images/mouse.png" alt="image" />
<div class="title">
<h1>Default & Controls</h1>
</div>
<div class="content">
<p>Familiarize yourself with the program's basics in the map's layout and location of tools, zoom, pan, setting to default and other controls.</p>
<div class="button" align="center"><a href="default_controls.html">Go</a></div> <p />
</div>
</div>
</div>
<div class="box">
<div class="panel">
<img src="images/table_of_contents.png" alt="image" />
<div class="title">
<h1>Table of Contents</h1>
</div>
<div class="content">
<p>Learn to access the map's sliders that change appearances in bases and water lines along with toggling items' appearance on the map.</p>
<div class="button" align="center"><a href="webmaps_toc.html">Go</a></div> <p />
</div>
</div>
</div>
<div class="box mar-Right">
<div class="panel">
<img src="images/identify.png" alt="image" />
<div class="title">
<h1>Identify</h1>
</div>
<div class="content">
<p>Master selection, identification, and access of specific information.</p>
<div class="button" align="center"><a href="identify.html">Go</a></div> <p />
</div>
</div>
</div>
<div class="box">
<div class="panel">
<img src="images/draw.png" alt="image" />
<div class="title">
<h1>Draw</h1>
</div>
<div class="content">
<p>Discover addition of graphics such as lines, circles, rectangles, and text.</p>
<div class="button" align="center"><a href="draw.html">Go</a></div> <p />
</div>
</div>
</div>
<div class="box mar-Right">
<div class="panel">
<img src="images/measure.png" alt="image" />
<div class="title">
<h1>Measure</h1>
</div>
<div class="content">
<p>Learn the controls to ascerain length, area, perimeter and more of any selected polygon, line, or circle.</p>
<div class="button" align="center"><a href="measure.html">Go</a></div> <p />
</div>
</div>
</div>
<div class="box">
<div class="panel">
<img src="images/add_file.png" alt="image" />
<div class="title">
<h1>Add File to Map</h1>
</div>
<div class="content">
<p>Become an expert at knowing which files to add to the map and browsing your computer for a file to be added to the map.</p>
<div class="button" align="center"><a href="add_file.html">Go</a></div> <p />
</div>
</div>
</div>
<div class="box mar-Right">
<div class="panel">
<img src="images/print.png" alt="image" />
<div class="title">
<h1>Print</h1>
</div>
<div class="content">
<p>Learn customization of a capture of the map, saving the page as a pdf, and printing it. </p>
<div class="button" align="center"><a href="print.html">Go</a></div> <p />
</div>
</div>
</div>
<div class="box">
<div class="panel">
<img src="images/bookmarks.png" alt="image" />
<div class="title">
<h1>Bookmarks</h1>
</div>
<div class="content">
<p>Figure out how to create, edit, and delete custom presets of specific areas of the map.</p>
<div class="button" align="center"><a href="bookmarks.html">Go</a></div> <p />
</div>
</div>
</div>
<div class="box mar-Right">
<div class="panel">
<img src="images/overview_basemaps.png" alt="image" />
<div class="title">
<h1>Overview & Basemaps</h1>
</div>
<div class="content">
<p>Discover the overview window and learn to toggle it, and customize your map to your satisfaction using basemaps.</p>
<div class="button" align="center"><a href="overview_basemaps.html">Go</a></div> <p />
</div>
</div>
</div>
<div class="box">
<div class="panel">
<img src="images/users_login.png" alt="image" />
<div class="title">
<h1>Users & Login</h1>
</div>
<div class="content">
<p>Create an account or log in, customize your account, and configure account user settings.</p>
<div class="button" align="center"><a href="users_login.html">Go</a></div> <p />
</div>
</div>
</div>
<div class="box mar-Right">
<div class="panel">
<img src="images/app_launcher.png" alt="image" />
<div class="title">
<h1>App Launcher</h1>
</div>
<div class="content">
<p>Utilize the potential of the program's applications such as Screen Capture and Spreadsheet.</p>
<div class="button" align="center"><a href="app_launcher.html">Go</a></div> <p />
</div>
</div>
</div>
<!--End index boxes-->
<!-- <div class="clearing"></div> ---Image6 clearing below boxes, commented out---
<div class="panel mar-top">
<img src="images/image6Insert.png" alt="image" />
<div class="content">
<p>Donec eros lectus, elementum quis commodo a, lobortis ut mauris. Duis leo risus, fermentum facilisis auctor tempus, elementum ut enim. Maecenas ornare tincidunt semper. Nulla facilisi. </p>
<p>In tristique tellus vel nisi sagittis id bibe ndum tellus varius auris conva</p>
<div class="button2"><a href="#">More Info</a></div>
</div>
</div>-->
</div> <!---page--->
</div><!---Rightcol--->
</div>
<div class="footer-wrap">
<div class="footer">
</div>
</div><!---footer--->
</body>
</html>
감사합니다. 'didn를 - 당신의 HTML 인덱스 페이지에서
는'/'링크에 그것은 CSS의, – Li357
감사를 html로하지를 제거해야해야 문제를 해결하지 못한다. – Uhhhhhhhh
'Styles.css'를'Styles.html'이 아닌 것으로 사용하십시오. – Li357