0

このウェブサイトのようなヘッダーの効果を得るには、CSS をどのように記述すればよいでしょうか。

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

HTML をコピーしましたが、同じ効果を持つ CSS を記述していません。誰でもCSSを手伝ってもらえますか?

マイクロ開発会社

<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 を単純化するだけなので、不要なルールはありません。

4

2 に答える 2

0

要素の位置にログインするだけの場合、必要なコードは次のようになります。

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's no. 1 jobs, employment, career and recruitment site_files/SEEK - Australia's 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;
}

それが役立つことを願っています。

于 2013-11-09T10:38:32.823 に答える
0

css ファイルhttp://www.seek.com.au/をダウンロードし、head に必要な 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's no. 1 jobs, employment, career and recruitment site_files/SEEK - Australia's 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>

あなたが尋ねたことを教えてくれなくても、それが役に立てば幸いです、ありがとう。

于 2013-11-08T15:15:35.540 に答える