使用flex布局整体首页效果,同时综合使用iconfont

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

一周的学习,做个综合使用看看效果,页面效果图如下:

  1. 整体大图

    2.头部设计

    3.媒体查询,窗口小的时候自动调整fontsize并隐藏相应元素

下面分项说明:

整体页面结构

代码折叠显示如下:

注意点有以下:

  1. 在CSS代码分为icon,media以及常规代码单独设计和引用
  2. 整体结构顶部设置了两个独立div,加中间的container以及底部的footer.
  3. 之所以头部设置两个DIV,是为了实现headbox中的导航部分的粘性定位(设置为body的子元素后才能实现整体窗口的滚动粘性定位),粘性定位代码如下:
    1. .headbox {
    2. position: sticky;
    3. top: 0;
    4. }
  4. 为了实现导航和登录的整体布局,采用了用.navtopdiv将两者包裹,再使用flex盒子,并设计为两端对齐,主要代码如下:
    1. .navtopdiv {
    2. background-color: blue;
    3. display: flex;
    4. flex-flow: row nowrap;
    5. place-content: space-between;
    6. }
  5. 顶部导航项目中,依旧通过flex来实现导航项目的布局,通过place-content: place-evenly设置平均分布,同时通过子元素item的margin-left以及首元素:first-child操作实现margin的整体效果
    1. .nav.top {
    2. margin-left: 3rem;
    3. width: 60vw;
    4. display: flex;
    5. flex-flow: row nowrap;
    6. place-content: place-evenly;
    7. text-align: center;  
    8. }
    9. .nav.top .item {
    10. height: 3rem;
    11. flex: auto;
    12. line-height: 3rem;
    13. margin-left: 1rem;
    14. }
    15. .nav.top .item:first-child {
    16. margin-left: 0;
    17. }

  6. 中间部分采用container整体对flex定位,同时对左右两个项目做无弹性的设置,中间center做弹性设置.

    1. .main.left {
    2. width: 5rem;
    3. flex: none;
    4. margin: 0px 1rem;
    5. }
    6. .main.center {
    7. flex: 1;
    8. }
    9. .main.right {
    10. width: 8rem;
    11. flex: none;
    12. }

  7. 最后对媒体查询做一些设置

    1. @media (min-width: 375px) and (max-width: 500px) {
    2. html {
    3.  font-size: 12px;
    4. }
    5. .keywords,.main.right {
    6.  display: none;
    7. }
    8. }
  8. iconfont的使用以及伪元素操作
    1. @import url(http://at.alicdn.com/t/c/font_3957852_otlkw49btkr.css);
    2. .gerenzhongxindenglu {
    3.  font-size: 2rem;
    4.  color: rgb(32, 26, 26);
    5. }
    6. .gerenzhongxindenglu:hover {
    7.  color: white;
    8.  cursor: pointer;
    9. }
【文章原创作者：国外高防服务器 http://www.558idc.com/shsgf.html转载请说明出处】
更多阅读