DAY4 web布局

来陪可莉炸鱼吧

已于 2023-01-09 20:02:00 修改

阅读量95

点赞数

分类专栏：前端文章标签：前端 css css3

于 2023-01-09 19:39:58 首次发布

本文链接：https://blog.csdn.net/Sheldon_2020/article/details/128596755

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

综合布局

网站混合布局线框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <style>
        @import "./index.css";
    </style>
    <div class="left">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
    <div class="right">
        <div class="top"></div>
        <div class="bottom">
            <div class="left2"></div>
            <div class="right2"></div>
        </div>
    </div>
</body>
</html>

/*body不加.*/
body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    display: flex;
}
.left {
    width: 30%;
    border-right:1px solid #999;
    height:100vh;
}
.right{
   /* flex包含了flex-grow和flex-shrink
    等价于width:70%;*/
    flex: 1;
    height: 100vh;
}
.top{
    height: 60px;
    border-bottom: 1px solid #999;
}
.right .bottom{
    display: flex;
}
.left .bottom{
    display: flex;
}
.left2{
    width:40%;
    border-right: 1px solid #999;
    height: calc(100vh - 60px);
}
.right2{
    flex:1;
}

网站实现

Part1 个人中心

tips1 :标题

效果：

可实现方式：

设置line-height，同时设置text-align（针对纯文本）
使用flex布局，display:flex;justify-content:center;
浮动：float:center;

tips2:导航栏

目标效果：

错误记录：

background是一个多重属性，可以设置背景图像（background-img)
background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
在设置搜索按钮和搜索输入框垂直居中对齐时，应在父容器conent-search中设置flex布局，设置align-item(注意不是align-content--指的是多行的对齐）属性为center,同时将搜索按钮和搜索输入框包含在两个div盒子中，不然不会生效（猜测只有块级元素会生效）
关于display:inline-block; (区别于inline,block)可以是可以设置行类元素大小（inline不行）同时不会像block一样换行

可实现方式:

HTML部分：

  <div class="content-top">
            <!--搜索栏  -->
            <div class="content-search">
                <div  class="content-search-btn"></div>
                <div>
                    <input class="content-search-input" placeholder="请搜索..."></input>
                </div>
            </div>
            <!--标签栏  -->
            <div class="content-tab">
                <span class="content-tab-email">邮箱</span>
                <span class="content-tab-day">日历</span>
            </div>
        </div>

CSS部分

  .content-top {
        display: flex;
        border-bottom: 1px solid gray;
        height: 40px;
        justify-content: space-between
    }

    .content-search {
        width: 30%;
        display: flex;
        align-items: center;
    }

    .content-search-btn {
        background: url("./img/搜索.png") no-repeat;
        width: 18px;
        height: 18px;
        margin-left: 5%;
        line-height: 40px;
        border: 0;
        padding: 0;
    }

    .content-search-input {
        border: 0;
        font-size: 8px;
        margin-left: 7px;
        height: 20px;
    }

    .content-tab {
        margin-top: 5px;
        width: 180px;
        border-radius: 100px;
        background-color: rgb(213, 213, 213);
        height: 30px;
        margin-right: 20px;
    }

    .content-tab-email {
        display: inline-block;
        text-align: center;
        width: 100px;
        border-radius: 100px;
        line-height: 30px;
        background-color: cornflowerblue;
        color: white;
        font-size: 5px;
    }

    .content-tab-day {
        /* display: inline-block; */
        text-align: center;
        width: 100px;
        line-height: 30px;
        font-size: 5px;
    }

个人中心内容

效果：

技术难点：

实现头像左偏移时，可以使用cal函数：margin-left: cal(50% - 60px/2) ‘-’号前面要有空格
设置个人中心按钮时，用一个父类div盒子（display:relative;不能为static就行)将3个button（display:absolution;)包含，通过改变position属性调整消息数目位于button的右上方（-6px,-6px,0,0)
实现展开动态消息功能，通过伪类元素：hover实现;
```
.info-dynamic:hover {
        cursor: pointer;
    }
```

动态消息左右布局实现方式：1）float（缺点是：不换行）2）flex布局 align-items:flex-end

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class="wrapper">
     <div class="left one"></div>
     <div class="right two "></div>
     <div class="left three"></div>
   </div>
</body>
</html>

.wrappe{
 /*  display:flex;
  flex-direction:column; */
  width:500px;
  height:800px;
  border:1px solid black;
  /* align-items:flex-start; */
}
.one{
  width:70%;
  height:30px;
  background-color:red;
}
.two{
  /*width:30%;会不换行，因为float不是普通文档流*/
  width:50%;
  height:30px;
  background-color:blue;
  /*align-self:flex-end;*/
}
.three{
  width:70%;
  height:30px;
  background-color:green;
}
.left{
  float:left;
}
.right{
  float:right;
}

 <div class="info-dynamic">
            <button class="info-dynamic-btn">展开显示动态消息 V</button>
            <div class="info-block">
                <div class="info-block-left"> &nbsp;&nbsp;&nbsp;&nbsp;您关注的 <span style="color: red;">诺诺师姐</span> 动态有更新啦~&nbsp; &nbsp;&nbsp;&nbsp;</div>
                <div class="info-block-right"> &nbsp;&nbsp;&nbsp;&nbsp;执行部任务请点开 >&nbsp;&nbsp;&nbsp;&nbsp;</div>
                <div class="info-block-left"> &nbsp;&nbsp;&nbsp;&nbsp;凯撒 给你发了 <span style="color: red;">1条</span> 留言 &nbsp;&nbsp;&nbsp;&nbsp;</div>
                <div class="info-block-right"> &nbsp;&nbsp;&nbsp;&nbsp;您的任务已更新，请及时处理。&nbsp;&nbsp;&nbsp;&nbsp;</div>
                <div class="info-block-left"> &nbsp;&nbsp;&nbsp;&nbsp;诺玛提醒：前方有龙王级波动 &nbsp;&nbsp;&nbsp;&nbsp;</div>
            </div>
        </div>

  .info-dynamic:hover .info-block {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 80%;
    }

    .info-block {
        display: none;
    }

    .info-block-left {
        align-self: start;
        background-color: rgb(215,237,241);
        font-size: 10px;
        height: 30px;
        border-radius: 10px;
        margin-bottom: 30px;
        text-align: center;
        line-height: 30px;
    }

    .info-block-right {
        align-self: end;
        background-color: rgb(215,237,241);
        font-size: 10px;
        height: 30px;
        border-radius: 10px;
        margin-bottom: 30px;
        text-align: center;
        line-height: 30px;

    }

记事本

效果：

技术难点：

底部栏始终位于最下方，通过设置父类盒子为flex布局，同时使记事本内容flex属性(包含flex-grow，flex-shrink)为1，占据全部剩余空间。
文字围绕图片使用float属性，记得清除浮动
浏览器滚动时固定顶部记事本，使用position：sticky;滚动用overflow-y:scroll;实现
记事本使用ul无序列表，border-bottom添加下划线

邮箱

效果：

技术难点：

float:right置于最右边；或者使用flex弹性布局，设置justify-content:right(flex-end);
头像旁边介绍使用flex布局设置为纵向排列

响应式设计

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>实验一</title>
</head>

<body>
<style>
  .box {
    background-color: red;
    width: 90%;
    height: 500px;
  }

  @media screen and (max-width:1024px) {
    .box{
      background-color: pink;
    }
  }
  @media screen and (max-width:768px) {
    .box{
      background-color: green;
    }
  }
  @media screen and (max-width:414px) {
    .box{
      background-color:blue;
    }
  }
  @media screen and (max-width:375px) {
    .box{
      background-color:yellow;
    }
  }
</style>
<div class="box"></div>

</body>