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

我下载了 css 文件http://www.seek.com.au/，只留下了头部所需的 html 代码，我留下的 css 保持原样，并且工作正常。所需的代码是：

对于 head.css 下载并重命名为 head.css 这个文件css

索引.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 回答
0

好的，如果您只想登录元素位置，则必要的代码是：

索引.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>

头.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 回答