前端学习day1 html+css+flex布局学习

最新推荐文章于 2024-06-12 11:13:48 发布

-lyslyslys

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量78

点赞数

文章标签：前端学习

本文链接：https://blog.csdn.net/qq_43568078/article/details/129466181

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/index.css"/>
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="flex1">
            <div class="flex1-left">
                    <img src="../images/one.png" alt="some_text">
                    <div>首页</div>
            </div>
            
            <div class="flex1-right">欢迎您!李强【今天是2022年12月12日 星期一】</div>
        </div>
        <div class="lines"></div>
         <!-- <hr /> -->
        <div class="flex2">
            代办件提醒
        </div>
        <div class="lines"></div>
         <!-- <hr /> -->
        <div class="flex3">
            <div class="flex3-left">
                <div class="flex3-left1">当日接件</div>
                <div class="flex3-left2">待受理</div>
                <div class="flex3-left3">带现场核查</div>
                <div class="flex3-left4">待审批</div>
            </div>
            <div class="flex3-right">
                <div class="flex3-right1">已退回</div>
                <div class="flex3-right2">代打证</div>
                <div class="flex3-right3">代归档</div>
                <div class="flex3-right4">代注销</div>
            </div>
        </div>
        <div class="lines"></div>
        <div class="flex4">已办件提醒</div>
        <div class="lines"></div>
        <div class="flex5">
            <div class="flex5-left">
                <div>小餐饮店名称:
                    <input type="text" name="fname" value="请输入小餐饮店名称">
                </div>
                <div>经营地址:<input type="text" name="fname" value="请输入经营地址"></div>
                <div>受理日期:<input type="date" id="time" min="1900-01-01" max="2100-01-01">-<input type="date" id="time" min="1900-01-01" max="2100-01-01"></div>
            </div>
            <div class="flex5-right">
                <div>状态:
                    <select>
                        <option>-全部-</option>
                    </select>
                </div>
                <div>申请类型
                    <select>
                        <option>-全部-</option>
                    </select>    
                </div>
                <div>主体状态:
                    <select>
                        <option>-全部-</option>
                    </select>
                </div>
                <div>
                    <button>查询</button>
                </div>
            </div>
        </div>
        <div class="lines"></div>
        <div class="flex6">
            <table border="1">
                <tr>
                  <th>序号</th>
                  <th>小餐饮店名称</th>
                  <th>主体状态</th>
                  <th>经营者(负责人)</th>
                  <th>申请类型</th>
                  <th>受理日期</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
                <tr>
                  <td>1</td>
                  <td>多肉牛肉干</td>
                  <td>小餐饮</td>
                  <td>$100</td>
                  <td>January</td>
                  <td>$100</td>
                  <td>January</td>
                  <td>$100</td>
                </tr>
                <tr>
                  <td>February</td>
                  <td>$80</td>
                  <td>January</td>
                  <td>$100</td>
                  <td>January</td>
                  <td>$100</td>
                  <td>January</td>
                  <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                    <td>January</td>
                    <td>$100</td>
                    <td>January</td>
                    <td>$100</td>
                    <td>January</td>
                    <td>$100</td>
                  </tr>
                  <tr>
                    <td>February</td>
                    <td>$80</td>
                    <td>January</td>
                    <td>$100</td>
                    <td>January</td>
                    <td>$100</td>
                    <td>January</td>
                    <td>$100</td>
                  </tr>
              </table>
        </div>
    </div>
</body>
</html>

.main{
    background-color: white;
    display: flex;
    flex-direction: column;
}
.flex1{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    margin-top: 10px;
}
.flex1-left{
    display: flex;
    align-items:flex-start;
}
.flex1_right{
    display: flex;
    align-items:flex-end;
}
.flex2{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}
.flex3{
    display: flex;
    flex-direction: column;
    margin: 20px;
   
}
.flex3-left{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
}
.flex3-left1{
    background-color:yellow;
    height: 75px;
    width: 75px;
    text-align: center;
    line-height: 75px;
}
.flex3-left2{
    background-color: springgreen;
    height: 75px;
    width: 75px;
    text-align: center;
    line-height: 75px;
}
.flex3-left3{
    background-color: slateblue;
    height: 75px;
    width: 75px;
    text-align: center;
    line-height: 75px;
}
.flex3-left4{
    background-color: turquoise;
    height: 75px;
    width: 75px;
    text-align: center;
    line-height: 75px;
}
.flex3-right{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
}
.flex3-right1{
    background-color: tomato;
    height: 75px;
    width: 75px;
    text-align: center;
    line-height: 75px;
}
.flex3-right2{
    background-color: turquoise;
    height: 75px;
    width: 75px;
    text-align: center;
    line-height: 75px;
}
.flex3-right3{
    background-color: slategrey;
    height: 75px;
    width: 75px;
    text-align: center;
    line-height: 75px;
}
.flex3-right4{
    background-color: red;
    height: 75px;
    width: 75px;
    text-align: center;
    line-height: 75px;
}
.flex4{
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}
.flex5{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin: 30px;
}
.flex5-left{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
}
.flex5-right{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
}
.flex6{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 30px;
    
}


table{
    width: 100%;
    border-collapse: collapse;
    }
    
table,table tr td {
    border:1px solid #ccc;
    height: 70px;

}
    
table tr td{

padding: 5px 10px;

}

.lines{
    border-bottom: 1px solid #DDDDDD;
}

th{
    background-color: cyan;
}