2016-09-02 2 views
1

Я видел следующую проблему, обсуждаемую на этом сайте, но ни одна из предложенных исправлений не работала для меня. Я вложу в текст все файлы и мою структуру каталогов. Это не что иное, как привязка из .html-файла к внешней таблице стилей. Результатом должно быть то, что при запуске lounge.html lounge.css следует применять в качестве таблицы стилей, чтобы указанные стили отображались в файле elixer.html и routes.html. Но эти стили не появляются.Ссылка на файл .html на внешнюю таблицу стилей?

Я видел предложения, которые указывают, что это невозможно запустить локально на компьютере, но может быть запущено на веб-сервере, но я не могу представить, что это так. Есть идеи? Заранее спасибо. Вот структура справочника:

C:/HFHTMLCSS/chapter2/lounge/lounge.css 

C:/HFHTMLCSS/chapter2/lounge/lounge.html 

C:/HFHTMLCSS/chapter2/lounge/elixer.html 

C:/HFHTMLCSS/chapter2/lounge/directions.html 


When I run lounge.html, 

lounge.css: 

h1, h2 { 
    font-family: sans-serif; 
    color: gray; 
} 

h1 { 
    border-bottom: 1px solid black; 
} 

p { 
    color: maroon; 
} 

lounge.html: 

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Head First Lounge</title> 

     <link type="text.css" rel = "stylesheet" href="lounge.css"> 
    </head> 
    <body> 
    <h1>Welcome to the Head First Lounge</h1> 
    <p> 
    <img src="C:/HFHTMLCSS/chapter2/lounge/images/drinks.gif" alt="Drinks"> 
</p> 
<p>  
     Join us any evening for refreshing <a href="C:/HFHTMLCSS/chapter2/lounge/elixir.html">elixers</a> 
     conversation and maybe a game or two of 
     <em>Dance Dance Revolution</em>. 
     Wireless access is always provided; 
     BYOWS (Bring your own web server). 
    </p> 
    <h2>Directions</h2> 
    <p> 
     You'll find us right in the center of downtown Webville. 
     If you need help finding us, check out our <a href="C:/HFHTMLCSS/chapter2/lounge/directions.html">detailed directions</a>. 
     Come join us! 
    </p> 
    </body> 
</html> 

elixer.html: 

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Head First Lounge Elixirs</title> 
    <link type="text/css" rel="stylesheet" href=lounge.css"> 
    </head> 
    <body> 
    <h1>Our Elixirs</h1> 

    <h2>Green Tea Cooler</h2> 
    <p> 
     <img src="images/green.jpg"> 
     Chock full of vitamins and minerals, this elixir 
     combines the healthful benefits of green tea with 
     a twist of chamomile blossoms and ginger root. 
    </p> 
    <h2>Raspberry Ice Concentration</h2> 
    <p> 
     <img src="images/lightblue.jpg"> 
     Combining raspberry juice with lemon grass, 
     citrus peel and rosehips, this icy drink 
     will make your mind feel clear and crisp. 
    </p> 
    <h2>Blueberry Bliss Elixir</h2> 
    <p> 
     <img src="images/blue.jpg"> 
     Blueberries and cherry essence mixed into a base 
     of elderflower herb tea will put you in a relaxed 
     state of bliss in no time. 
    </p> 
    <h2>Cranberry Antioxidant Blast</h2> 
    <p> 
     <img src="images/red.jpg"> 
     Wake up to the flavors of cranberry and hibiscus 
     in this vitamin C rich elixir. 
    </p> 
    <p> 
     <a href="beverages/lounge.html">Back to the Lounge</a> 
    </p> 

    </body> 
</html> 

directions.html: 

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Head First Lounge Directions</title> 
    <link type="text/css" rel="stylesheet" href="lounge.css"> 
    </head> 
    <body> 
    <h1>Directions</h1> 
    <p>Take the 305 S exit to Webville - go 0.4 mi</p> 
    <p>Continue on 305 - go 12 mi</p> 
    <p>Turn right at Structure Ave N - go 0.6 mi</p> 
    <p>Turn right and head toward Structure Ave N - go 0.0 mi</p> 
    <p>Turn right at Structure Ave N - go 0.7 mi</p> 
    <p>Continue on Structure Ave S - go 0.2 mi</p> 
    <p>Turn right at SW Presentation Way - go 0.0 mi</p> 
    </body> 
</html> 

ответ

0

HTML - это не то, что вы запускаете. Это формат документа, примерно сопоставимый с текстовым процессором, который ваш веб-браузер может отображать в макет. Синтаксис HTML требует использования URI (a Универсальный идентификатор ресурса) для атрибута src различных элементов, таких как изображения или таблицы стилей, и важно правильно указывать атрибуты. elixer.html просто отсутствует двойная кавычка перед именем файла CSS.

Кстати, эти ссылки и изображения обязательно будут разбиты на реальном веб-сервере. То, что вы там вставляете, - это полусинхронизация с полусинхронизмом с унифицированной косой чертой и буквой диска Windows. Это не сработает. Просто сделайте их относительные идентификаторы URI, как

<img src="images/drinks.gif" alt="Drinks"> 
<a href="elixir.html"> 

Таким образом, они будут работать на локальном поле так же, как и на веб-сервере.

Смежные вопросы