年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 781|回复: 0

[HTML+CSS] 第二讲:简单html+css综合演练--导航与头部

[复制链接]
  • TA的每日心情
    倒霉
    2021-4-22 22:52
  • 签到天数: 369 天

    [LV.9]以坛为家II

    发表于 2018-1-6 21:53:33 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2018-1-6 21:53 编辑

    1、先上效果图

    屏幕快照 2018-01-06 下午9.04.09.png

    2、结构分析;
    2.1、先将页面划分为四个部分:顶部导航、头部、主体、底部,这也是大多数页面的常规分法;
    2.2、从大的方面先将结构搭好,不关心内部结构,不关心细节,给大的组件定义一个css类;
    2.3、最粗的div结构如下:
    [HTML] 纯文本查看 复制代码
    <div class="top-nav"></div>
    <div class="header"></div>
    <div class="main-promote"></div>
    <div class="footer"></div>
    2.4、再往下细分一级,则要区分每一个部分横向结构,同样不关心细节,只关心每个部分需要几个横向纵列及纵列所占的比例即可;
    [HTML] 纯文本查看 复制代码
    <div class="top-nav">
            <div class="container">
                    <div class="fl"></div>
                    <div class="fr"></div>
            </div>
    </div>
    
    <div class="header">
            <div class="container">
                    <div class="col-2"></div>
                    <div class="col-5"></div>
                    <div class="col-3"></div>
            </div>
    </div>
    
    <div class="main-promote">
            <div class="container">
                    <div class="col-2"></div>
                    <div class="col-6"></div>
                    <div class="col-2"></div>
            </div>
    </div>
    
    <div class="footer">
            <div class="container">        
            </div>
    </div>
    2.4、当前因为只有div结构,因此还看不到任何内容,先将顶部导航与头部简单实现;2.4.1、顶部导航分为两个部分,分别左浮动与右浮动,然后分别用超链接实现,css设置超链接的样式即可;
    2.4.2、头部分为三部分,分别占比20%、50%、30%;
    2.4.3、20%直接用文字或logo图片贴上即可,50%部分为搜索,分别一个input和button搞定!
    2.4.4、30%部分使用一个超链接即可;
    2.4.5、结构样式示例:
    [HTML] 纯文本查看 复制代码
    <div class="top-nav">
            <div class="container">
                    <div class="fl">
                            <a class="item" href="#">首页</a>
                    </div>
                    <div class="fr">
                            <a class="item" href="#">我的订单</a>
                            <a class="item" href="#">我的订单</a>
                            <a class="item" href="#">我的订单</a>
                            <a class="item" href="#">我的订单</a>
                    </div>
            </div>
    </div>
    
    <div class="header">
            <div class="container">
                    <div class="col-2">香菇街</div>
                    <div class="col-5">
                            <input tpye="text" />
                            <button>搜索</button>
                    </div>
                    <div class="col-3">
                            <a href="#">我的购物车</a>
                    </div>
            </div>
    </div>
    
    3、结构有了之后,样式就慢慢调咯
    [CSS] 纯文本查看 复制代码
    * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: background 200ms;
      -o-transition: background 200ms;
      transition: background 200ms;
    }
    body {
      background: #F0F0F0;
      font-size: 14px;
      color: #444;
    }
    a {
      text-decoration: none;
    }
    .fl {
      float: left;
    }
    .fr {
      float: right;
    }
    .cf:after,
    .cf:before {
      content: "";
      clear: both;
      display: block;
    }
    .container {
      max-width: 1080px;
      margin: 0 auto;
      /* border: 1px dashed red; */
    }
    
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 {
      float: left;
      display: block;
      position: relative;
      min-height: 1px;
    }
    .col-1 {
      width: 10%;
    }
    .col-2 {
      width: 20%;
    }
    .col-3 {
      width: 30%;
    }
    .col-4 {
      width: 40%;
    }
    .col-5 {
      width: 50%;
    }
    .col-6 {
      width: 60%;
    }
    .col-7 {
      width: 70%;
    }
    .col-8 {
      width: 80%;
    }
    .col-9 {
      width: 90%;
    }
    /* top-nav */
    .top-nav {
      background: #ccc;
    }
    .top-nav .item {
      margin: 6px 10px;
      display: inline-block;
      color: #666;
    }
    .top-nav .item:hover {
      color: #333;
    }
    
    /* header */
    .header {
      padding: 20px 0;
    }
    .header .logo {
      font-size: 30px;
    }
    
    .header .search-bar {
      border: 2px solid red;
      background: red;
    }
    
    .header .search-bar input,
    .header .search-bar button {
      border: 0;
      padding: 10px;
      float: left;
    }
    
    .header .search-bar input {
      width: 80%;
      outline: 0;
    }
    .header .search-bar input:focus {
      -webkit-box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.3);
      box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.3);
    }
    .header .search-bar button {
      width: 20%;
      background: red;
      color: white;
    }
    .header .search-bar button:hover {
      background: #c00;
    }
    
    .header .cart {
      text-align: center;
    }
    .header .cart a{
      padding: 10px;
      background: #fff;
      border: 2px solid #eee;
      float: right;
      width: 80%;
      color: red;
    }
    
    4、源示例代码下载:
    游客,如果您要查看本帖隐藏内容请回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2021-6-18 20:03 , Processed in 1.050222 second(s), 21 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表