写页面几个常见版心构思

导航栏版块

企业站导航栏样式：
上网看到的第二排的导航栏就是
发现大部分导航栏无外乎包括有logo、介绍栏、搜索框、登录信息等等
下面我就写一款简单，先了解下这部分在页面中如何书写代码 （注意仅是简单展示方法，暂时不作其他交互效果，以便初学者参考，大佬可忽略。。。）

简单实现原理：这里我用的是 ul>li>a 的方式（有更好的话可以交流，也更方便学习）

1. 用无序列表ul写外围结构
2. 给ul嵌套li和a
3. 样式给li添加浮动
4. 给li添加大小
5. 调整文本大小

html结构

  <!-- nav的版心 -->
        <ul class="nav-con">
            <!-- 导航条的结构 -->
            <li class="margin_left">
                <a href="#">集团介绍</a>
            </li>
            <li>
                <a href="#">集团介绍</a>
            </li>
            <li>
                <a href="#">集团介绍</a>
            </li>
            <li>
                <a href="#">集团介绍</a>
            </li>
            <li>
                <a href="#">集团介绍</a>
            </li>
            <li>
                <a href="#">集团介绍</a>
            </li>
            <li>
                <a href="#">集团介绍</a>
            </li>
            <li class="border_none">
                <a href="#">集团介绍</a>
            </li>
        </ul>

css样式

/* nav */
#nav{
    height:58px;
    background:#303030;
}
.nav-con{
    height:58px;
    /* 
        给ul添加padding-left 把li往右挤27px
        padding-left:27px;
        width:975px; 
    */
}
.nav-con li{
    /* 1：让所有的导航项横向排列 */
    float:left;
    /* 2: 给导航项目添加宽高 */
    width:119px;
    height:58px;
    /* 3: 添加边框 */
    border-right:1px solid #4a4a4a;
    /* 4: 调整文本样式 */
    text-align:center;
    line-height:58px;
    font-size:12px;
}
.nav-con li a{
    /* 如果自身有默认样式的时候,必须调整自身的样式 */
    color:#fff;
    display: block;
}
.nav-con .margin_left{
    margin-left:27px;
}
/* 给最后一个去掉边框 */
.nav-con .border_none{
    border:none;
}

效果图如下：

注意：后面需要所有的样式都给a写，li只需要加浮动

<ul class="nav float_right">
            <li><a href="">HOME</a></li>
            <li><a href="">HOME</a></li>
            <li><a href="">HOME</a></li>
            <li><a href="">HOME</a></li>
            <li><a href="">HOME</a></li>
            <li><a href="">HOME</a></li>
        </ul>

.nav{
    width:650px;
    height:81px;
}
.nav li{
    float:left;
}
.nav li a{
    display:block;
    height:81px;
    padding:0 30px;
    font-size:14px;
    color:#646464;
    line-height:81px;
}

补充导航栏样式1：

 <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>欢迎您！ </li>
                    <li>
                        <a href="#">请登录</a>
                        <a href="#" class="style-red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的购</a>
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">我的会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">关注我的</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">客户服务</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站导航</a> <i class="icomoon"></i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 其中i标签是小图标，这里没给出部分代码，主要看代码书写-->

css样式：

/*版心*/
.w {
	width: 1200px;
	margin: 0 auto;
}
.style-red {
	color: #c81623;
}
.spacer {
	width: 1px;
	height: 12px;
	background-color: #666;
	margin: 9px 12px 0;
}
/*顶部快捷导航*/
.shortcut {
	height: 31px;
	background-color: #f1f1f1;
	line-height: 31px;
}
.shortcut li {
	float: left;
}

练习案例：

 <style>
    *{
      margin: 0;
      padding: 0;
    }
    a{
      text-decoration: none;
    }
    ul,li{
      list-style-type: none;
    }
    ul{
      width: 960px;
      height: 49px;
      background: #00659c;
      margin: 0 auto;
    }
    ul li{
      float: left;
    }
    li a{
      display: block;
      font-size: 14px;
      color: #fff;
      height: 49px;
      line-height: 49px;
      padding: 0 34px 0 31px;
    }
    ul li:nth-child(even){
      width: 1px;
      height: 13px;
      margin-top: 19px;
      background: #fff;
    }
    ul li:hover{
      background: #004b8b;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#">首页</a></li>
    <li></li>
    <li><a href="#">产品服务</a></li>
    <li></li>
    <li><a href="#">成功案例</a></li>
    <li></li>
    <li><a href="#">媒体报道</a></li>
    <li></li>
    <li><a href="#">我的观点</a></li>
    <li></li>
    <li><a href="#">关于我们</a></li>
    <li></li>
    <li><a href="#">合作伙伴</a></li>
    <li></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</body>

导航样式图2

<ul>
    <li><a href="#">文本文本</a></li>
    <li><a href="#">文本文本</a></li>
    <li><a href="#">文本文本</a></li>
    <li><a href="#">文本文本</a></li>
    <li><a href="#">文本文本</a></li>
  </ul>

css样式：

ul{
      width: 728px;
      height: 23px;
      /*字体到边框的距离，上面白色区域不计算*/
      border-bottom: 1px solid #ccc;
    }
    li{
      float: left;
      margin-right: 31px;
      padding-bottom: 9px;
    }
    li a{
      font-size: 14px;
      display: block;
      height: 14px;
      line-height: 14px;
      color: #666;
    }
    ul li:hover{
      color: #000;
      border-bottom: 1px solid #000;
    }

电商头部—小图标部分

举例说明：

<style>
      *{
          margin:0;
          padding:0;
      }
      .box{
          width:200px;
          height:40px;
          background:orange;
          margin:100px auto;
          text-align:center;
          line-height:40px;
          font-size:20px;
          color:#fff;
          position: relative;
      }
      .box i{
          display:block;
          width:10px;
          height:10px;
          background:red;
          position: absolute;
          left:30px;
          top:15px;
      }
      .box em{
          display:block;
          width:10px;
          height:10px;
          background:blue;
          position:absolute;
          right:30px;
          top:15px;
      }
  </style>
</head>
<body>
    <div class="box">
        网站导航
        <i></i>
        <em></em>
    </div>
</body>

效果如下：

注意：这里要说的是，大部分电商的头部会有一些小图标，这时用定位写会比较方便，直接在background中导入小图标路径即可

导航—鼠标划过数据部分

举例说明：

<style>
      *{
          margin:0;
          padding:0;
      }
      ul{
          list-style:none;
      }
      .nav{
          width:100%;
          height:40px;
          background:#d00;
      }
      .nav-con{
          width:1000px;
          height:40px;
          background:orange;
          margin:0 auto;
      }
      .nav-con .li1{
          width:250px;
          height:40px;
          background:blue;
          text-align:center;
          line-height:40px;
          font-size:30px;
          color:#fff;
          position: relative;
      }
      .list{
          width:250px;
          height:300px;
          background:rgba(0,0,0,.6);
          position: absolute;
          top:40px;
      }
      .banner-con{
          width:1000px;
          height:300px;
          background:purple;
          margin:0 auto;
      }

  </style>
</head>
<body>
    <div class="nav">
        <ul class="nav-con">
            <li class="li1">
                商品分类
                <div class="list"></div>
            </li>
        </ul>
    </div>
    <!-- banner -->
    <div class="banner-con"></div>
</body>

效果如下：

新闻版块

新闻列表步骤如下：

    1：结构：
        如果新闻列表后面有时间
    2: 给li设置宽高
        高度得获取，量行高即可

    3: 如果新闻列表后面有时间，
        给a添加左浮动
        给放时间得标签添加右浮动

    4: 调整文样式（文本大小、文本颜色）

    5: 以背景图得形式给li添加列表符号
        让背景图在左侧 并且上下居中

    6：给li添加line-height 让文本上下居中，

    7: 给li添加padding-left 把文字往右侧挤，露出背景图

            <li>
                <a href="#"> 新闻内容新闻内容新闻内容新闻内容新闻内容 < /a>
                <span>时间</span>
            </li>

html结构：

    <div class="news_l">
      <h3 class="news_tit">文本文本</h3>
      <ul  class="news_list">
        <li>
          <a href="#">文本文本文本文本文本文本文本文本文本文本...</a>
          <span>2020-05-14</span>
        </li>
        <li>
          <a href="#">文本文本文本文本文本文本文本文本文本文本...</a>
          <span>2020-05-14</span>
        </li>
        <li>
          <a href="#">文本文本文本文本文本文本文本文本文本文本</a>
          <span>2020-05-14</span>
        </li>
        <li>
          <a href="#">文本文本文本文本文本文本文本文本文本文本</a>
          <span>2020-05-14</span>
        </li>
        <li>
          <a href="#">文本文本文本文本文本文本文本文本文本文本...</a>
          <span>2020-05-14</span>
        </li>
        <li>
          <a href="#">文本文本文本文本文本文本文本文本文本文本...</a>
          <span>2020-05-14</span>
        </li>
      </ul>
    </div>

css样式代码：

.news_tit{
  font-size: 18px;
  color: #595d66;
  /* background: blue; */
  line-height: 18px;
  padding-top: 36px;
}

.news_l{
  width: 479px;
  height: 240px;
  /* background: pink; */
  float: left;
  padding-left: 21px;
}
.news_list{
  margin-top: 24px;
}
.news_list li{
  width: 438px;
  height: 24px;
  background: url(../images/listbg_03.jpg) no-repeat left center;
  line-height: 24px;
  padding-left: 13px;

}
.news_list li a{
  float: left;
  color: #585858;
  font-size: 12px;
}
.news_list li span{
  float: right;
  font-size: 10px;
  color: #969696;
}

效果图如下：

下面补充一点的是新闻版块后面省略号的写法（备注我这里并没有加这个属性和属性值）：

需求：让单行文本超出省略号显示如下

1：控制文本的换行，不让文本进行换行
    white-space:nowrap;

2：让超出的文本隐藏。
    overflow:hidden;

3: 让超出的文本省略号显示
    text-overflow:clip/ellipsis
        clip ： 不产生省略号
        ellipsis :产生省略号

4: 容器的宽度是必须的

1、空白（空余）空间的处理：该属性是用来设置如何处理元素内的空白；
white-space: ;

属性值：

• normal 默认值 空白会被浏览器忽略
• pre 会保留空格，类似于 < pre>标签，并且文本不换行
• pre-line 合并空白符序列 ，但是保留换行符
• pre-wrap 保留空白，换行
• inherit： 规定应该从父元素继承white-space属性的值（IE不支持）
• nowrap 让文本不换行

2、溢出（超出）容器之后的显示状态：
overflow: ;

属性值：

• visible 默认值，内容不会修剪，会成现在元素框之后；
• scroll 让容器产生滚动条，可以让用户拖动滚动查看溢出的内容。
• auto 自动（当内容超出的时候有滚动条，没有超出的时候没有滚动条）
• inherit： 规定应该从父元素继承white-space属性的值（IE不支持）
• hidden 超出隐藏

补充一点：overflow-x/y 控制纵向或者横向的溢出状态;

导航栏二级菜单

这里用的和之前是一样的过程，就不多说了，直接上代码
HTML：

<ul class="nav">
    <li class="nav_li">
      <a href="#">一级导航</a>
      <ul class="subnav">
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
      </ul>
    </li>
    <li class="nav_li">
      <a href="#">一级导航</a>
      <ul class="subnav">
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
      </ul>
    </li>
    <li class="nav_li">
      <a href="#">一级导航</a>
      <ul class="subnav">
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
      </ul>
    </li>
    <li class="nav_li">
      <a href="#">一级导航</a>
      <ul class="subnav">
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
        <li><a href="#">二级导航</a></li>
      </ul>
    </li>
  </ul>

css样式:

 <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul,li{
      list-style: none;
    }
    a{
      text-decoration: none;
    }
    .nav{
      margin: 100px auto;
      width: 424px;
      height: 50px;
      background: pink;
    }
    li{
      float: left;
      background: orange;
      position: relative;
    }
    .nav_li{
      margin: 0 3px;
    }
    li a{
      display: block;
      width: 100px;
      height: 50px;
      font-size: 16px;
      color: #fff;
      line-height: 50px;
      text-align: center; 
    }
    .subnav{
      position: absolute;
      top: 50px;
      left: 0;
      display: none;
    }
    li a:hover{
      color: #000;
      background: skyblue;
    }
    li:hover .subnav{
      display: block;
    }
  </style>

效果图如下：

banner部分

因为banner图的大小有可能比电脑分辨率还要大，所以如果添加img会导致出现左右的滚动条，记住一定不要出现左右的滚动条，会影响左右的布局，下面来说下如何去写比较好；

参考以下代码进行分析：
主要是在css样式中给banner加入定位，然后隐藏多余部分，也就是会造成左右滚动条的部分，以版心为父元素参考物relative，给img（子元素）加absolute，让其父元素版心与 img（子元素）的最左边对齐（向右移动一半版心的距离left：50%），然后移动 img（子元素）的一半距离就可以了。

html结构部分：

 <!-- banner -->
    <div id="banner">
    <!--版心区域-->
        <div class="banner-wrap">
            <img src="./images/banner_02.jpg" alt="">
        </div>
    </div>

css部分：

/* banner */
#banner{
    /* 防止banner图片撑开左右滚动条 */
    overflow:hidden;
}
.banner-wrap{
    width:1082px
    height:469px;
    margin:0 auto;
    position: relative;
}
.banner-wrap img{
    position: absolute;
    /*向右移动一半版心的距离*/
    left:50%;
    /* 图片大小为 1352px */
    margin-left:-676px;
}

案例部分

因为案例部分要考虑高度自适应方面，所以这部分的高度要设置为min-height，但是也要注意因高度问题引起的高度塌陷，注意下面这一部分 以理解为好，个人习惯不同，需求情况不同；

<!-- case -->
<div id="case">
    <!-- case的版心 -->
    <div class="case-wrap">
        <h2 class="h2_tit">{ 客户案例 }</h2>
        <h3 class="h3_tit">With the best professional technology, to design the best innovative web site</h3>
        <div class="case_box">
            <div class="a_box clear_fix">
                <a href=""><img src="./images/case_03.jpg" alt=""></a>
                <a href=""><img src="./images/case_03.jpg" alt=""></a>
                <a href=""><img src="./images/case_03.jpg" alt=""></a>
            </div>
        </div>
        <a href="#" class="case_btn">view more</a>
    </div>
</div>

/* case */
#case{
    background:#f8f8f8;
}
.case-wrap{
    width:1082px;
    min-height:338px;
    margin:0 auto;
    padding:56px 0 66px;
}
.case-wrap .h2_tit{
    color:#66c5b4;
}
.case-wrap .h3_tit{
    text-transform: lowercase;
}
.case-wrap .h3_tit:first-letter{
    text-transform: uppercase;
}
.case_box{
    width:1055px;
    min-height:181px;
    /* margin:0 auto; */
    margin:38px auto 36px;
    /*隐藏a_box超出的部分*/
    overflow:hidden;
}
.case_box a{
    float:left;
    width:339px;
    height:181px;
    margin-right:19px;
}
.case_box a img{
    width:100%;
    height:100%;
}
.a_box{
     /*此处默认已处理高度塌陷 clear_fix*/
    width:1080px;
}

.case_btn{
    display:block;
    width:176px;
    height:37px;
    background:url(../images/abg_03.jpg) no-repeat;
    margin:0 auto;
    text-align:center;
    line-height:37px;
    font-size:14px;
    color:#fff;
    text-transform: uppercase;
}

主要是探讨里面版心的一个小地方，就是case_box里面又包含了一个a_box，这里是什么意思呢？
先看需要，如果里面案例不止有3个情况下，就不能随便给哪一个img加margin的值（因后面不知道会加什么个案例需求，所以这里推荐这样写）

先举个例子：

<style>
      *{
          margin:0;
          padding:0;
      }
      .box{
          width:500px;
          min-height:300px;
          background:orange;
          margin:0 auto;
          /* overflow:hidden; */
      }
      .h2_box{
          width:600px;
          overflow:hidden;
          background:purple;
      }
      h2{
          width:200px;
          height:200px;
          background:red;
          float:left;
          margin-right:100px;
          text-align:center;
          line-height:200px;
          color:#fff;
          font-size:50px;
      }
  </style>
</head>
<body>
    <div class="box">
        <!-- 在H2的外围嵌套一个元素，把父元素宽度增加直到能放下下面一个元素 -->
        <div class="h2_box">
            <h2>h2</h2>
            <h2>h2</h2>
        </div>
    </div>
</body>

解释：img（子元素）撑开a_box（这里的a_box是没有高度的），然后a_box 撑开 case_box ，给case_box 设置高度自适应，所以以后如果再有三个或者多个案例进来页面时，也不会影响整个case的布局情况

这些内容比较基础，当然先学会，再去尝试的用。

最后以上页面中会经常用到版心内容，写多了就很熟悉了，简单实用，当然梳理完之后，发现写起来会很轻松。。。
后续遇到其他版心可以整理归类好每个版块以便以后书写页面时使用

有些地方可能整理的不是很明白，多多包涵，不懂或者有什么好的看法，可私！