Jack the Christian Ответов: 1

Как переместить только навигационную панель в правую сторону? Почему я не могу изменить шрифт текста?


У меня есть два вопроса: Как переместить только навигационную панель вправо?

Как мне переместить все ссылки вправо, но сохранить заголовок слева? Название означает "Grass World Sport News". Каждый раз, когда я использую float, он перемещает всю мысль, включая заголовок.

2-й вопрос:

Каждый раз, когда я пытаюсь изменить шрифт для заголовка, который называется Grass World Sport News, шрифт не меняется. Шрифт вообще не меняется: весь шрифт: 15px; игнорируется.

Как мне это исправить?

Что я уже пробовал:

1-й вопрос:

Here is my html: 

<pre><DOCTYPE html>
    <head>
        <title> GWS News</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>    
    </head>
    
    <body>
        <header>
            <div class="container">
                <h1> Grass World Sport News</h1>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">World Cup</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Schedule</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
            <div class="banner">
                <img class="banner-image" src=img/banner1.jpeg>
            </div>
        </header>
    </body>

Here is my css:

html,body{
    background-color: #5f5f5f;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

div.container{
    max-width: 1200px;
    margin: 0;
    padding: 0 30px;
	
}

header{
    background-color: #000000;
    float: left;
    width: 100%;
}

header h1{
    color: #ffffff;
    text-transform: uppercase;
    float: left;
}

header ul{
    list-style-type: none;
    padding: 0;
    margin: 22px 0 0 0;
    float: right;
    
}

header ul li{
    display: inline-block;
    text-decoration: underline;
}

header li a:hover{
    color: #D3D3D3
}

header ul li a{
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px;
    display: block;
}

.banner-image {
    width: 100%;
    
}


2-й вопрос;

Это же кодирование, но ориентируясь на эту часть в CSS:

заголовок h1{
цвет: #ffffff;
текст-преобразования: заглавные;
поплавок: левый;
шрифт: 10px;
}

Когда я открываю веб-сайт и проверяю элемент в chrome: есть строка через "шрифтовую" часть css.
Почему это, что я не могу сделать его больше или меньше?

Bryian Tan

должен быть размер шрифта.

Jack the Christian

Спасибо

1 Ответов

Рейтинг:
1

Bryian Tan

1. Я могу предложить использовать Бутстрап. Вот вам пример: CP_menu_bootstrap - JSFiddle[^]

2. синтаксис должен быть размером шрифта

3. Придерживаться современной конструкции: [CP_menu_orig]


Jack the Christian

Как работает этот бутстрэп? Нужно ли просто вставить [CP_menu_orig] под заголовком h1 ?

Bryian Tan

Вам просто нужно добавить ссылки bootstrap и jQuery. Посмотрите на эту страницу, https://fiddle.jshell.net/bryiantan/dpLjxgec/show/ , щелкните правой кнопкой мыши браузер, просмотр источника.