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

Как правильно настроить макет с точки зрения того, где стоят картинки и текст на сайте?

Недавно я немного кодировал для школьного проекта и нуждался в некоторой помощи с макетом.
Вот мои вопросы:

1. Что мне сделать на моем css, чтобы изменить внешний вид текста "NRL 15/07/18?
2. Как мне переместить текст с надписью "Чемпионат мира" рядом со второй картинкой? ( Мне нужно сэкономить немного места, чтобы я мог поместить футбол 16.07.18 над текстом "Чемпионат мира", но рядом с картинкой. Посмотрите, что я сделал с НРЛ; то же самое, но
3. Как мне исправить макет сайта и как он выглядит в целом? (цвет, цвет фона, размер шрифта, какие улучшения я должен сделать, чтобы получить больше отметок?)

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

Вот этот html код:

<DOCTYPE html>
        <head>
            <title> GWS News- Home</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css"/>    
        </head>
    
    <body>
        <header>
            <div class="container">
                <h1> Grass World Sport News</h1>
                <img src=img/logo.jpg class="logo">
                <ul class="nav">
                    <li class="active"><a href="file:///Users/rarichenjoseph/Desktop/GWS%202/Website.html">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>    
        <div class="body">
            <h1> Latest Sport News</h1>
        </div>
        <div class="pics">
            <img class="nrl-image" src="img/dvw.jpg">
            <p3> NRL   15/07/18</p3>
            <h2> Can St George Illawarra Dragons keep their place on top of the ladder?</h2>
            <p1> West Tigers beat St George Illawarra Dragons, 20-16. Robbie Farah stuns all of Dragons with a match-winning performance that leads to Dragons first loss at their home ground. Farah carried the tigers by running 42 metres to go with two linebreak assists, two try assist and 42 tackles in a complete performance. This win for the Tigers allow them to stay in top 8 and possibly have a chance to win the finals. The Dragons were disappointing in front of their home crowd and now faces the possibility of dropping out of the top place on the ladder, with the Panthers and Sharks right behind them. They did produce some good plays second half and closed the gap, but it proved to be not enough. </p1>
        </div>
        <div>
        <div style="clear: both;"></div>
        <div style="margin-top:20px"></div>
            <img class="world-cup" src="img/wcf.jpg"
        </div>
        <div> 
        <h1> World Cup</h1>    
        </div>
    </body>
</DOCTYPE html>




Вот это css:

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

    div.container{
        margin: 0;
        padding: 0 30px;
    }

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

    header h1{
        color: #ffffff;
        text-transform: uppercase;
        float: left;
        font-size: 50px;
    }

    .logo{
        margin: 10px 50px;
        height: 120px;
        float: left;
    }

    .nav {
        float: right;
        list-style-type: none;
        list-style: none;
        padding: 10px 100px;
        margin: 20px;
    }

    .nav li {
        display: inline-block;
        margin: 10px 5px;
    }

    ul.nav li a{
        color: #ffffff;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 20px;
        font-family: "Roboto", sans-serif;
        margin-bottom: inherit;
        padding: 5px 10px;
        letter-spacing: 2px;
        border: 1px solid #ffffff;
    
    }

    .nav li a:hover{
        background: #fff;
        transition: .4s;
        color: #000000
    }

    .nav li.active a{
        border: 2px solid white;
        background: #ffffff;
        color: #000;
    }

    .banner-image {
        width: 100%;
    }

    .body{
        border: 1px solid black;
        background: #000000;
        color: #ffffff;
        font-size: 20px;
    }

    .nrl-image{
        float: left;
    }

		    
                    

                    
                

                

                                            

                            

                                Richard Deeming
                                
                            

                            
Ваш HTML-код недействителен. Это должно начаться с: 
<!DOCTYPE html>
<html>
 и закончим на этом: 
</html>




Один из ваших img теги не закрываются.


В спецификации HTML нет таких тегов, как "p1" или "p3". Они будут рассматриваться большинством браузеров как неизвестные общие элементы блочного уровня.


И ваш вопрос в основном сводится к следующему "как мне оформить сайт", который слишком широк, чтобы ответить здесь.


                        

                                    

            

            

                

                    
0 Ответов