Заголовок CSS с входом в панель

Question

Заголовок CSS с входом в панель

0

Интересно, как написать CSS, чтобы получить эффект заголовка, такого как этот веб-сайт:

http://www.seek.com.au/

Я скопировал его HTML, но не написал CSS, который имеет те же эффекты. Может ли кто-нибудь помочь с CSS?

Компания Micro Devlopment

<div class="Login">
    <form id="LoginForm" method="POST" action="">
<div class="HeaderLogin">
        <ul class="hd-login">
        <li>
        <ul>
            <li><input type="text" id="email" name="email"  placeholder="Email" size=40 maxlength=60></li>
          <li><input type="password" id="password" name="password" placeholder="Password"></li>
          <li class="l-column mod-multi-button">
             <input type="submit" name="submit" id="submit" value="Login"></li>
       </ul>
     </li>
     <li>
       <ul class="">    
         <li class="">
             <input checked="checked" id="RememberMe" name="RememberMe" type="checkbox" value="true">
             <input name="RememberMe" type="hidden" value="false">
             <label for="RememberMe">Remember me</label>
         </li>
         <li class="">
              <a href="">Trouble signing in?</a>
         </li>
         <li class="l-column mod-multi-button">
                            <button type="submit" id="hiddenLogInButton" name="action" value="SignIn" style="display: none">Standalone</button>
         </li>
       </ul>
        </li>
  </ul>

  </form>

PS Я просто хотел узнать, как выровнять и поместить эти поля в заголовок страницы. Например, часть входа в заголовок довольно аккуратная, и ее не использовать для выравнивания. Я относительно новичок в css и просто хочу подражать этому стилю. Когда я просматриваю css веб-сайта, это кажется очень сложным, и есть так много классов и тому подобных вещей. Можем ли мы упростить css? Я имею в виду, мы просто держим HTML и упрощаем CSS, поэтому у него нет лишних правил.

user2967661 08 нояб. 2013, в 15:49

Источник

3

Вы можете посмотреть CSS для этого сайта и увидеть, как именно они это сделали. Проверьте исходный код HTML и найдите файлы CSS.
LuFaMa 08 нояб. 2013, в 14:18
0

Вам бы больше повезло, если бы вы получили помощь, если бы задали более конкретный вопрос. Как отметил @LuFaMa, вы можете проверить CSS, используемый на сайте; хотя он свернут, поэтому вам нужно использовать что-то вроде http://cssbeautify.com/, чтобы сделать его читабельным, или использовать веб-инспектор, чтобы увидеть, какие стили применяются к каждому элементу.
Dre 08 нояб. 2013, в 14:25
0

"эффект заголовка"? Можете быть более конкретными. Вы имеете в виду макет полной ширины, эффекты навигации / встроенное меню? @user2967661 user2967661
SuperDistros 08 нояб. 2013, в 14:34

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

0

Я загрузил файл css http://www.seek.com.au/ и оставил только необходимый html-код для головы, css, который я оставил как есть, и работаю правильно. Необходимый код:

Для head.css загрузите и переименуйте в head.css этот файл css

index.html

<html>
    <head>
        <title>LLM Title</title>
        <link href="head.css" rel="stylesheet">
    </head>
    <body class="body-home-index Main au">
        <div id="Header">
            <div class="mod-navigation state-horizontal state-sites-nav">
                <div class="l-row">
                    <div class="mod-switch pull-right">
                        <span class="is-selected">AU</span><a title="SEEK NZ" href="http://www.seek.co.nz/?cid=sk:main:au:nav:nz">NZ</a>            
                    </div>    
                    <div class="grid_6 l-h-centered">
                        <ul class="state-subsites-nav">
                            <li class="state-jobs active">
                               <a class="is-active">Jobs</a>
                            </li>
                            <li class="state-learning">
                                <a href="http://www.seeklearning.com.au/?CampaignCode=SEEK_BANNER_29" title="SEEK Learning">Courses</a>
                            </li>
                            <li class="divider"></li>
                            <li class="state-commercial">
                                <a href="http://www.seekcommercial.com.au/?tracking=sk:main:au:nav:bus" title="SEEK Commercial">Businesses for sale</a>
                            </li>
                            <li class="divider"></li>
                            <li class="state-volunteer">
                                <a href="http://volunteer.com.au/?tracking=SKMAU:main+header" title="SEEK Volunteer">Volunteering</a>
                            </li>
                        </ul>            
                    </div>
                </div>
            </div>
            <div class="mod-nav-login l-row">
                <form id="LoginHeaderForm" method="POST" action="https://www.seek.com.au/Login/Options?returnUrl=%2F">
                        <input id="Feature" name="Feature" type="hidden" value="Navigation">
                    <div id="loggedInName" class="mod-caption">
                        <ul class="mod-login">
                            <li>
                                <ul class="l-clearfix">
                                    <li class="l-column grid_2 state-ie-fix-grid">
                                        <input type="text" id="username" name="email" class="state-inp-sign-in hasPlaceholder" placeholder="Email" title="Email" tooltip="Email" clickev="true"></li>
                                    <li class="l-column grid_2 state-ie-fix-grid">
                                        <input type="password" id="password" name="password" class="state-inp-sign-in hasPlaceholder" placeholder="Password" title="Password" tooltip="Password" clickev="true"></li>
                                    <li class="l-column mod-multi-button">
                                        <button type="submit" id="logInButton" name="action" value="SignIn" class="mod-button state-button-alternate state-button-exception">Sign in</button>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <ul class="l-clearfix">
                                    <li class="l-column grid_2">
                                        <input checked="checked" id="RememberMe" name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
                                        <label for="RememberMe">Remember me</label>
                                    </li>
                                    <li class="l-column grid_2">
                                            <a href="./SEEK - Australia no. 1 jobs, employment, career and recruitment site_files/SEEK - Australia no. 1 jobs, employment, career and recruitment site.htm" data-lightbox-url="https://www.seek.com.au/Login/RestorePassword" data-lightbox-required="true">Trouble signing in?</a>
                                    </li>
                                    <li class="l-column mod-multi-button">
                                            <button type="submit" name="action" value="Register" class="mod-like-a-link" id="RegisterLinkStandalone" data-automation="nav-btn-regSubmit">or register</button>    
                                        <button type="submit" id="hiddenLogInButton" name="action" value="SignIn" style="display: none">Standalone</button>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="mod-banner l-clearfix">
                <div class="l-row">
                    <h1 class="AU-Main mod-logo">SEEK</h1>
                </div>
            </div>
        </div>
    </body>
</html>

Надеюсь, что поможет, если не скажешь мне, что ты просил, спасибо.

leoledmag 08 нояб. 2013, в 12:42

0

Спасибо! Я просто хотел знать, как выровнять и расположить эти поля в заголовке страницы. Например, входная часть заголовка довольно аккуратна, и для ее выравнивания не используется <table>. Я относительно новичок в CSS и просто хочу подражать этому стилю. Когда я проверяю CSS на веб-сайте, он кажется очень сложным, и есть много классов и тому подобных вещей. Можем ли мы упростить CSS? Я имею в виду, мы просто сохраняем HTML и упрощаем CSS, чтобы в нем не было лишних правил.
user2967661 09 нояб. 2013, в 06:07

Ещё вопросы

Вы можете посмотреть CSS для этого сайта и увидеть, как именно они это сделали. Проверьте исходный код HTML и найдите файлы CSS.
Вам бы больше повезло, если бы вы получили помощь, если бы задали более конкретный вопрос. Как отметил @LuFaMa, вы можете проверить CSS, используемый на сайте; хотя он свернут, поэтому вам нужно использовать что-то вроде http://cssbeautify.com/, чтобы сделать его читабельным, или использовать веб-инспектор, чтобы увидеть, какие стили применяются к каждому элементу.
"эффект заголовка"? Можете быть более конкретными. Вы имеете в виду макет полной ширины, эффекты навигации / встроенное меню? @user2967661 user2967661
Спасибо! Я просто хотел знать, как выровнять и расположить эти поля в заголовке страницы. Например, входная часть заголовка довольно аккуратна, и для ее выравнивания не используется <table>. Я относительно новичок в CSS и просто хочу подражать этому стилю. Когда я проверяю CSS на веб-сайте, он кажется очень сложным, и есть много классов и тому подобных вещей. Можем ли мы упростить CSS? Я имею в виду, мы просто сохраняем HTML и упрощаем CSS, чтобы в нем не было лишних правил.

leoledmag · Accepted Answer · 2013-11-09T09-26-00.000Z

Хорошо, если вы просто хотите, чтобы позиция элемента входа в систему была необходима, код:

index.html

<html>
    <head>
        <title>LLM Title</title>
        <link href="head.css" rel="stylesheet">
    </head>
    <body>
        <div id="Header">
            <div class="mod-banner">
                <h1 class="AU-Main mod-logo">logo</h1>
            </div>
            <div>
                <form>
                    <div class="mod-caption">
                        <ul class="mod-login">
                            <li>
                                <ul>
                                    <li class="l-column">
                                        <input type="text" id="username" name="email" class="state-inp-sign-in hasPlaceholder" placeholder="Email" title="Email" tooltip="Email" clickev="true"></li>
                                    <li class="l-column">
                                        <input type="password" id="password" name="password" class="state-inp-sign-in hasPlaceholder" placeholder="Password" title="Password" tooltip="Password" clickev="true"></li>
                                    <li class="l-column">
                                        <button type="submit" id="logInButton" name="action" value="SignIn" class="mod-button state-button-alternate state-button-exception">Sign in</button>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <ul>
                                    <li class="l-column">
                                        <input name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
                                        <label for="RememberMe">Remember me</label>
                                    </li>
                                    <li class="l-column">
                                            <a href="./SEEK - Australia no. 1 jobs, employment, career and recruitment site_files/SEEK - Australia no. 1 jobs, employment, career and recruitment site.htm" data-lightbox-url="https://www.seek.com.au/Login/RestorePassword" data-lightbox-required="true">Trouble signing in?</a>
                                    </li>
                                    <li class="l-column">
                                        <button type="submit" name="action" value="Register" class="mod-like-a-link" id="RegisterLinkStandalone">or register</button>    
                                        <button type="submit" name="action" value="SignIn" style="display: none">Standalone</button>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

head.css

body 
{
    margin: 0;
}

#Header
{
    position: relative;
}

.mod-caption
{
    position: absolute;
    top: 50%;
    right: 20px;
}

.mod-login
{
    display: inline-block;
    margin-top: 30px;
    list-style: none;
}

dl, menu, ol, ul
{
    margin: 9px 0;
}

.mod-login li
{
    height: 33px;
    list-style: none;
}

.l-column, .l-column-overflow
{
    margin-left: 18px;
    overflow: hidden;
    float: left;
}

.state-inp-sign-in
{
    -moz-outline: none;
    outline: none;
    width: 130px;
    height: 28px;
    line-height: 24px;
}

button, input, select, textarea
{
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
}

html, button, input, select, textarea
{
    font-family: Helvetica,Arial,sans-serif;
}
.mod-banner
{
        float:left;
}

Надеюсь, это поможет.

Кстати, я также хочу, чтобы логотип слева и панель входа справа, как и сайт, который я упоминал. Так что мне нужно переместить логотип (<h1>) влево, а плавающий элемент div, содержащий все данные для входа (вы написали выше), вправо?
Большое спасибо человек, я сейчас изучаю код. Как ты это понял? Я немного новичок в CSS и просто читаю книгу о CSS, но после прочтения книги и приведенных в ней примеров я обнаружил, что все еще не могу свободно разрабатывать макет страницы так, как мне хочется, так же, как я не писал CSS, глядя на этот сайт. Не могли бы вы дать мне несколько советов? Я обнаружил, что многие книги по CSS просто охватывают некоторую основную часть, но они никогда не рассказывают, как реализовать реальный макет страницы, как этот сайт. Любые предложения о том, как быть хорошим в CSS? Спасибо!
Я добавил сайт для логотипа, см. Код, пожалуйста. Для изучения программирования css я рекомендую использовать инструменты отладки из браузера, Chrome или Firefox.
Благодарю. «Для изучения программирования css я рекомендую использовать инструменты отладки из браузера, Chrome или Firefox» - вы имеете в виду использование Chrome DevTools или Firefox Inspect для проверки HTML-элементов на странице, а затем ознакомьтесь со всеми правилами CSS, стилизующими эти элементы справа. панель?