【JavaWeb学习】CSS（练习）

Garcia • Kirlant

已于 2022-05-15 10:11:50 修改

阅读量63

点赞数

分类专栏： web前端学习文章标签： css

于 2022-04-17 09:49:24 首次发布

本文链接：https://blog.csdn.net/WingNebula/article/details/124225310

版权

web前端学习专栏收录该内容

25 篇文章 1 订阅

订阅专栏

在这里插入图片描述

*{
    margin: 0px;
    padding: 0px;
}
.nav{
    width: 1205px;
    height: 48px;
    background-color: #E8E7E3;
    margin:  100px auto;
}
.nav li{
    line-height: 48px;
    float:left;
    list-style-type: none;
}
.nav a{
    /* 取消下划线 */
    text-decoration: none;
    /* 设置字体 */
    color: #777777;
    font-size: 18px;
    /* 将 a 转成块元素 */
    display: block;
    height: 100%;
    padding: 0px 39px;
}
.nav a:hover{
    background-color: #3F3F3F;
    color: #E8E7E3;
}

<html>
    <head>
        <meta charset="UTF-8">
		<meta name="keywords" content="kirlant">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>learn</title>
		<link rel="shortcut icon" href="../imgs/kirlant_logo.jpg" />
        <link rel="stylesheet" href="learn.css" />
    </head>
    <body>
        <ul class="nav">
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">Browser Side</a></li>
            <li><a href="#">Server Side</a></li>
            <li><a href="#">Programming</a></li>
            <li><a href="#">XML</a></li>
            <li><a href="#">Web Building</a></li>
            <li><a href="#">Reference</a></li>
        </ul>
    </body>
</html>

在这里插入图片描述

*{
    margin: 0px;
    padding: 0px;
}
.head,.main,.foot{
    width: 96%;
    margin: 2% 2%;  
}
.head{
    height: 10%;
    background-color: beige;   
}
.main{
    overflow: hidden;
    background-color: azure;
}
.main .left,.middle,.right{
    float: left;
    margin: 0% 1%;
    height: 130px;
}
.main .left{
    width: 18%;
    background-color: rgb(171, 241, 217);  
}
.main .middle{
    width: 58%;
    background-color: rgb(199, 227, 252);
}
.main .right{
    width: 18%;
    background-color: rgb(248, 218, 242);
}
.foot{
    height: 10%;
    background-color: bisque;
}

<html>
    <head>
        <meta charset="UTF-8">
		<meta name="keywords" content="kirlant">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>learn</title>
		<link rel="shortcut icon" href="../imgs/kirlant_logo.jpg" />
        <link rel="stylesheet" href="learn.css" />
    </head>
    <body>
        <div class="head">
            this is head.
        </div>
        <div class="main">
            <div class="left">This is the left part of the body.</div>
            <div class="middle">This is the middle part of the body.</div>
            <div class="right">This is the right part of the body.</div>
        </div>
        <div class="foot">
            this is foot.
        </div>
    </body>
</html>