CSS样式

最新推荐文章于 2024-09-22 13:36:41 发布

逍遥浪子~

最新推荐文章于 2024-09-22 13:36:41 发布

阅读量176

点赞数

分类专栏：前端文章标签： CSS样式

本文链接：https://blog.csdn.net/xsh096011/article/details/88781772

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

首先HTML页面要引用CSS样式；
链接式：关键词link；

<link rel="stylesheet" href="~/Content/Css/style.css">

在这里插入图片描述
CSS样式怎么能少了盒子模型那？

Margin（外边距50px）
Border（边框）
Padding（内边距left 90px）
Content（内容600px * 100px）

利用这四个就可以对页面元素进行合理布局；

先看下效果：（主要功能实践）
在这里插入图片描述

.skin-part {
    padding: 0;
    position: relative;  /*相对定位*/
    top: 0;
    background: #00ffff;  /*背景颜色*/
    margin-top: 50px;     
    margin-bottom: 50px;
    border-top-width: 50px;   /*border宽度*/
    border-bottom-width: 50px;
    padding-left: 90px;       /*内边距*/
    width: 600px;             /*宽度*/
    height: 100px;
    font-size: 17px;          /*字体*/

    line-height: 50px  /*行间距*/
}

界面最外面是 div容器；引用的是class样式是:skin-part；

上面gif中选中管理出现下拉菜单和鼠标滑过白色字体变成黑色功能的代码如下：

<div class="dropdown">
        <span>管理</span>
        <div class="dropdown-content">
            <p>用户管理</p>
        </div>
    </div>

.dropdown {
    position: relative;
    display: inline-block;
    color: black;
}

.dropdown-content {
    display: none;
    position: absolute;
    color: black;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;

东西学会了，最终界面效果如下：
在这里插入图片描述