简单使用CSS与html制作了一个小网页

2022/8/6 23:23:28

编程Tag： 网页 css html flex color RGB border margin 201

本文主要是介绍简单使用CSS与html制作了一个小网页，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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">
    <title>soda</title>
    <link rel="stylesheet" type="text/css" href="justify.css">
</head>    

<body class="flex">
    <!--侧边栏-->
    <div style="padding:10px;align-items:center;justify-content: center;border-bottom: 1px solid;">
        <img src="./咩咩.jpg" width="100" height="100" />
        <div style=" color: aliceblue;margin-left: 20px;margin-top: 10px; margin-bottom: 30px;" >eMAY</div>
        <div style="font-style: inherit;margin-bottom: 5px;">导航栏</div>
        <div class="daoHang marginb">学习html</div>
        <div class="daoHang marginb">学习CSS</div>
        <div class="daoHang marginb">学习VUE</div>
    </div>
    <!--主区域-->
    <div class="flex1 flex column marginl">
        <!--头部栏-->
        <div style="height: 30px;" class="bgwhite blockst1"> something </div>
        <!--内容区-->
        <div class="flex1 margint">
            <div> 写点什么呢？ </div>
        </div>
    </div>
</body>



</html>

body{
    margin: 0;
    height: 100vh;
    background-color: rgb(197, 218, 218);
}
/*{
    border: 1px solid rgb(11, 8, 11);
}*/
.one{
    border-style: dotted;
    border-color: rgb(24, 210, 27);
    border-width: 2px;
}
.flex{
    display: flex;
}
.flex1{
    flex:1;
}
.blockst1{
    background-color: rgb(177, 226, 207);
    text-align: center;
    text-shadow: rgb(0, 0, 0);
    font-size: large;
    padding: 40px;
}
.blockst2{
    max-width: 700px;
    margin: 30px auto;
    padding: 15px;
    line-height: 1.7;
}
.column{
    flex-direction: column;
}
/* 导航条 */
.daoHang {
    padding: 10px 20px;
    border-bottom: 1px solid rgb(201, 201, 201);
    font-size: 14px;
    color: #666;
}
.bgwhite{
    background-color: aliceblue;
}
.marginb{
    margin-bottom: 5px;
}
.margint{
    margin-top: 15px;
}
.marginl{
    margin-left: 5px;
}
.marginr{
    margin-right: 5px;
}

这篇关于简单使用CSS与html制作了一个小网页的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

简单使用CSS与html制作了一个小网页

相关编程文章