CSS两种布局记录

最近看了两个javascript练手小项目，用了两种布局方式，记录一下。

第一种就是用div做成盒子套盒子，

项目地址：https://github.com/CodeExplainedRepo/Weather-App-JavaScript

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather App - JavaScript</title>
    <link rel="stylesheet" href="font/Rimouski.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="container">
        <div class="app-title">
            <p>Weather</p>
        </div>
        <div class="notification"> </div>
        <div class="weather-container">
            <div class="weather-icon">
                <img src="icons/unknown.png" alt="">
            </div>
            <div class="temperature-value">
                <p>- °<span>C</span></p>
            </div>
            <div class="temperature-description">
                <p> - </p>
            </div>
            <div class="location">
                <p>-</p>
            </div>
        </div>
    </div>
    
    <script src="app.js"></script>
</body>
</html>

CSS：

*{
    font-family: "Rimouski";
}

body{
    background-color: #293251;
}

.container{
    width: 300px;    
    background-color: #FFF;
    
    display: block;
    margin: 0 auto;
    
    border-radius: 10px;
    padding-bottom : 50px;
}

.app-title{
    width: 300px;
    height: 50px;
    border-radius: 10px 10px 0 0;
}

.app-title p{
    text-align: center;
    padding: 15px;
    margin: 0 auto;
    font-size: 1.2em;
    color: #293251;
}

.notification{
    background-color: #f8d7da;
    display: none;
}

.notification p{
    color: #721c24;
    font-size: 1.2em;
    margin: 0;
    text-align: center;
    padding: 10px 0;
}

.weather-container{
    width: 300px;
    height: 260px;
    background-color: #F4F9FF;
}

.weather-icon{
    width: 300px;
    height: 128px;
}

.weather-icon img{
    display: block;
    margin: 0 auto;
}

.temperature-value{
    width: 300px;
    height:60px;
}

.temperature-value p{
    padding: 0;
    margin: 0;
    color: #293251;
    font-size: 4em;
    text-align: center;
    cursor: pointer;
}

.temperature-value p:hover{
    
}

.temperature-value span{
    color: #293251;
    font-size: 0.5em;
}

.temperature-description{
    
}

.temperature-description p{
    padding: 8px;
    margin: 0;
    color: #293251;
    text-align: center;
    font-size: 1.2em;
}

.location{
    
}

.location p{
    margin: 0;
    padding: 0;
    color: #293251;
    text-align: center;
    font-size: 0.8em;
}

第二种是flex布局，做对称结构的页面很方便。

项目地址：https://github.com/ibanld/rhythmdrums 预览地址：https://ibanld.github.io/rhythmdrums/

最外层的大盒子container用 width: 100vw; height: 100vh 做成全屏，内部用flex布局，居中排列

中间的方形容器，width: 75%;height: 50%;设置大小，内部再用flex

HTML:

  
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="favicon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="./index.css">
        <title>Rhythm and Drums</title>
    </head>
    <body>
        <div class="container">
            <div id="drum-machine">
                <div class="btn-group">
                    <div id='lib-1'>Library One</div>
                    <div id='lib-2'>Library Two</div>
                    <div id='lib-3'>Library Three</div>
                </div>
                <div id="display">
                    <p id='beat-name'>Click a <strong>Pad</strong> or press a <strong>Key</strong></p>
                </div>
                <div id="pad-container">
                </div>
            </div>
        </div>
        <script src="./index.js" type="text/javascript"></script>
    </body>
    </html>

CSS：

@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alata&family=Nunito&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --font-primary: 'Alata', sans-serif;
    --font-secondary: 'Nunito', sans-serif;
    --primary: #febf63;
    --secondary: #ede682;
    --light: #ade498;
    --dark: #7fdbda;
}

.container {
    background: var(--primary);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

#drum-machine {
    background: var(--light);
    width: 75%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 2%;
    box-shadow: 0px 0px 25px 8px rgba(0, 0, 0, 0.51);
}

.btn-group {
    width: 50%;
    margin-top: 2%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.btn-group > * {
    background: var(--secondary);
    border: solid var(--dark) 2px;
    padding: 1.5%;
    font-family: var(--font-primary);
    font-weight: bold;
    color: salmon;
    text-align: center;
    margin: 10px;
    border-radius: 25%;
    cursor: pointer;
    box-shadow: 0px -2px 10px 5px rgba(0, 0, 0, 0.4);
}

.btn-group > *:hover {
    background: var(--dark);
    color: var(--light);
    border: solid var(--secondary) 2px;
    transform: translateY(-3px);
    transition: all ease 0.5s;
    box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.5);
}

#display {
    background: var(--dark);
    width: 95%;
    height: 50%;
    border: solid var(--secondary) 3px;
    padding: 2%;
}

#beat-name {
    font-family: var(--font-primary);
    font-size: 75px;
    color: salmon;
    text-align: center;
}

#pad-container {
    display: flex;
    width: 100%;
    height: 25%;
    display: flex;
    justify-self: flex-end;
}

.drum-pad {
    background: var(--secondary);
    width: 10%;
    height: 100%;
    border: solid var(--dark) 3px;
    border-bottom: 0;
    padding-top: 1%;
    margin-left: 2%;
    margin-right: 2%;
    font-family: var(--font-secondary);
    font-weight: bolder;
    color: var(--dark);
    text-align: center;
    cursor: pointer;
}

.drum-pad-hover {
    background: var(--primary);
    padding-top: 1%;
    color: var(--light);
    font-size: 5vh;
    box-shadow: 0px -2px 20px 5px rgba(0, 0, 0, 0.4);
    transition: all linear 0.3s;
}

.drum-pad-clicked {
    background: salmon;
    width: 10%;
    height: 100%;
    border: solid var(--dark) 3px;
    border-bottom: 0;
    padding-top: 1%;
    margin-left: 2%;
    margin-right: 2%;
    font-family: var(--font-secondary);
    font-weight: bolder;
    color: var(--light);
    font-size: 5vh;
    text-align: center;
    cursor: pointer;
}

@media (max-width: 690px) {
    #drum-machine {
        width: 100%;
        overflow: hidden;
    }

    #beat-name {
        font-size: 3rem;
        margin-top: 10%;
    }

    .btn-group > * {
        margin: 5px;
    }
}

posted @ 2021-03-15 10:45 import_SOBER 阅读(61) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

CSS两种布局记录

公告