【无标题】

最新推荐文章于 2024-04-19 09:39:59 发布

小令yyds

最新推荐文章于 2024-04-19 09:39:59 发布

阅读量89

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_63841538/article/details/121854607

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细讲解了HTML中背景颜色的设置，包括蓝色紫罗兰、灰色图片的定位，CSS边框的样式、宽度和颜色，内边距与外边距的控制，以及如何实现元素的浮动和阴影效果。了解这些基础知识有助于提升网页布局和视觉设计技能。

摘要由CSDN通过智能技术生成

1、背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景颜色的样式设置</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #cccccc;
            position: absolute;
            left: 8px;
            top: 8px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: rgb(255,255,0);
            position: absolute;
            left: 8px;
            top: 120px;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: rgba(0,255,255, .3);
            position: absolute;
            left: 120px;
            top: 20px;
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

运行结果如下:
在这里插入图片描述
rgh()中需要写数字，数字范围0～255值越小颜色越深。rgha()与rgh()一样，不同的是a，a的值在0～1之间，表示颜色的透明程度，值越大越透明。
2、背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片样式设置</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px dotted #000000;
            background: gray url("images/02.png") no-repeat center center;
        }
    </style>
</head>
<body>
<div class="box">雪狐</div>
</body>
</html>

运行结果如下:
在这里插入图片描述
通过样式来设置背景图片时，需要使用 background-image属性来设置，而图片的路径需要写在 url()中。但是，默认情况下，背景图片如果不有容器大的话，那么它会把背景图平铺后再显示。对于背景图的处理，我们有以下几种方式：1. no-repeat: 不平铺2. repeat-x: x轴方向平铺3. repeat-y: y轴方向平铺4. repeat: x轴和y轴方向都平铺（默认方式）要想设置面的值，我们需要另外的属性叫background-repeat。希望背景图在容器的中间位置，怎么做？需要使用 background-position属性来指定，它是通过坐标轴来设置的。有以下几种设置方式：1. left top: 左上角（默认值）2. right top: 右上角3. left bottom: 左下角4. right bottom: 右下角5. left center: 左中间位置6. right center: 右中间位置7. center center: 居中位置以上的这些属性，我们可以使用 background 来统一指定，它的语法格式为：background: color position size repeat origin clip attachment image。
3、边框属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框属性</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: #cccccc;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div class="box">雪狐</div>
</body>
</html>

运行如下图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        .box {
            width: 200px;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="box">雪狐雪狐雪狐雪狐雪狐雪狐雪狐雪狐雪狐雪狐雪狐雪狐雪狐</div>
</body>
</html>

运行如下图所示:
在这里插入图片描述
容器中的内容和容器的边线之间的距离就叫内边距。内边距的指定是使用 padding 属性来设置的，- 左边使用 padding-left- 上边使用 padding-top- 右边使用 padding-right- 下边使用 padding-bottom可以使用 padding 属性来设置这四个边距。它的设置顺序为：1. 如果设置四个值，则表示：上、右、下、左2. 如果设置三个值，则表示：上左右下3. 如果设置二个值，则表示：上下左右5. 如果设置一个值，则表示：上右下左的值都是一样的。
5、外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid gray;
        }
        .inner {
            width: 200px;
            height: 100px;
            border: 1px solid blueviolet;
            margin: 20px 50px 30px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="inner"></div>
</div>
</body>
</html>

运行如下图所示:
在这里插入图片描述
容器与另一个容器之间的距离就叫外边距。外边距使用 margin 属性来指定。它的使用和语法格式与 padding 相同。- margin-left: 左边外距- margin-top: 上外边距- margin-right: 右外边距- margin-bottom: 下外边距仍然可以使用 margin 属性来简化，它顺序如下：1. 如果设置四个值，则表示：上、右、下、左2. 如果设置三个值，则表示：上左右下3. 如果设置二个值，则表示：上下左右5. 如果设置一个值，则表示：上右下左的值都是一样的盒子模型。
6、浮动


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        ul,li {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
            width: 60px;
            height: 25px;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<ul>
    <li>首页</li>
    <li>新闻</li>
    <li>活动</li>
</ul>
<div class="clear"></div>
</body>
</html>

在这里插入图片描述
默认情况下，li中的内容是竖着显示的，如果想要横着显示，那么就需要浮动。浮动是使用 float 属性来定义，它有两个值：- left: 左浮动- right: 右浮动注意：在开发中不建议使用浮动，因为它会影响后面的元素的位置。
7、阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: deeppink;
            box-shadow: 50px 20px 2px blueviolet;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

运行结果如下:
在这里插入图片描述
定义阴影效果使用 box-shadow 属性，它的语法格式为：box-shadow: h-shadow v-shadow blur spread color position;- h-shadow：必需。水平阴影的位置。允许负值。- v-shadow：必需。垂直阴影的位置。允许负值。- blur：可选。模糊距离。- spread：可选。阴影的尺寸。- color：可选。阴影的颜色。请参阅 CSS 颜色值。- position：可选。将外部阴影 (outset) 改为内部阴影。默认为inset。
8、圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角</title>
    <style>
        .box {
            width: 120px;
            height: 160px;
            background: blueviolet;
            border-radius: 70px 70px 70px 70px/100px 100px 70px 70px;
        }
    <×yle>
</head>
<body>
<div class="box"></div>
</body>
<cml>

运行如下图所示:
在这里插入图片描述
定义圆角使用 border-radius 属性来定义，它的语法为：border-radius：length/persentage；1. 四个属性值，分别表示左上角、右上角、右下角、左下角的圆角大小（顺时针方向）2. 三个属性值，第一个值表示左上角，第二个值表示右上角和左下角（对角），第三个值表示右下角。3. 两个属性值，第一个值表示左上角和右下角，第二个值表示右上角和左下角。4. 斜杠二组值：第一组值表示水平半径，第二组值表示垂直半径，每组值也可以同时设置1到4个值，规则与上面相同。