day08

最新推荐文章于 2025-05-10 13:41:29 发布

今天的代码敲了吗

最新推荐文章于 2025-05-10 13:41:29 发布

阅读量81

点赞数

文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/g877835148/article/details/131462449

版权

文章介绍了HTML和CSS中关于背景图片的设置，包括平铺方式和位置调整，并通过代码示例展示了如何使用多个背景图片。此外，讲解了元素转换的概念，如将块状元素转为行内块，以及行内元素和块状元素的特点。还涵盖了浮动元素在页面布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.背景图片平铺

属性名	属性值	作用
background-repeat	no-repeat	不平铺
	repeat-x	沿x平铺
	repeat-y	沿y平铺

2.背景图片的位置

/* 背景图片的位置 */

/* 后边跟方位名词也可以跟像素 */

/*第一个值表示水平第二个值表示垂直方向 */

background-position	center center	居中
	right bottom	右下角

2.1背景图片练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .max{
        width: 600px;
        height: 600px;
        /* background-color: pink; */
        border: 10px solid blue;

        /* 添加多个背景图片 */
        /* 背景颜色 图片路径 平铺方式 图片位置 图片大小 */
        background:  url(../day07/地下城与勇士.PNG) no-repeat left top /200px 200px,
         url(../day07/穿越火线.PNG) no-repeat right top /200px 200px,
         url(../day07/英雄联盟.PNG) no-repeat center center /200px 200px,
        url(../day07/英雄联盟.PNG) no-repeat left bottom /200px 200px,
        url(../day07/英雄联盟.PNG) no-repeat right bottom /200px 200px;

        background-color: pink;
    }

    </style>
</head>
<body>
    <div class="max">

    </div>
</body>
</html>

3.元素转换

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 元素转化 */
            /* 块状转化为 行内块 */
            display: inline-block;
        }

        span{
            width: 200px;
            height: 200px;
            background-color: #008000;

            /*转为 块状元素 */
            display: block;
        }

        a{
            width: 100px;
            height: 100px;
            background-color: blue;

            /* 转为行内块元素 */
            display: inline-block;
        }

        .max{
            width: 300px;
            height: 300px;
            background-color: #00FFFF;
        }
    </style>
</head>

<body>
    <!-- 块状元素
        独占一行 如果不设置宽度 他的宽度默认为容器的百分之百 -->
    <!-- 行内块元素
        一行排列多个 并且可以设置宽和高 -->
    <!-- 行内元素
        一行排列多个 不能设置宽高 -->

    <div>1</div>
    <div>2</div>
    <div>3</div>

    <span>我是一个span标签</span>
    <span>我是一个span标签</span>
    <span>我是一个span标签</span>

    <a href="">我是一个超链接</a>
    <a href="">我是一个超链接</a>
    <a href="">我是一个超链接</a>

    <div class="max">
        <p>我是可以隐身的</p>
    </div>

</body>

</html>

4.练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .max{
            width: 300px;
            /* height: 300px; */
            text-align: center;
            font-size: 60px;
            margin: 0 auto;
            background-color: #00FFFF;

            /* border: 1px solid red; */
            
        }
        .min1{
            height: 80px; 
            /* font-size: 60px; */
            overflow: hidden;
            /* border: 1px solid red; */
        }

        .min1:hover{
            height: 320px;
            transition: all 2s;
        }

        .PJ{
            background-color: red;
        }
        

    </style>
</head>
<body>
    <div class="max">
        <div class="min1">
            <div>啤酒</div>
            <div class="PJ">雪花</div>
            <div class="PJ">哈尔滨</div>
            <div class="PJ">崂山</div>
        </div>

        <div class="min1">
            <div>香烟</div>
            <div class="PJ">中华</div>
            <div class="PJ">十渠</div>
            <div class="PJ">帝豪</div>
        </div>

        <div class="min1">
            <div>游戏</div>
            <div class="PJ">地下城</div>
            <div class="PJ">英雄联盟</div>
            <div class="PJ">穿越火线</div>
        </div>
        
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            width: 100px;
            height: 170px;
            background-color: blue;

           border-radius: 150px;
           display: inline-block;
           
        }

        .mid{
            height: 80px;
            width: 300px;
            background-color: green;
            display: inline-block;
            margin-bottom: 43px;
            
        }

        .right{
            height: 180px;
            width: 800px;
            background-color: pink;
            display: inline-block;
            border-bottom-right-radius: 100%;
           
            margin-bottom: 10px;
          
        }

        /* *{
            display: inline-block;
        } */

        .max{
            height: 200px;
            width: 1300px;
            background-color: yellow;
            text-align: center;
        }
        .dao{
            height: 30px;
            width: 100px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    
         <div class="left"></div>
         <div class="mid"></div>
         <div class="right">
          
        </div>
   
   

</body>
</html>

5.浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
			.max{
				width: 600px;
				/* 给浮动元素的父元素添加高度 */
				/* height: 200px; */
				border: 10px solid lightblue;
			}
			.max>div:nth-child(1){
				width: 200px;
				height: 200px;
				background-color: #0000FF;
				float: left;
			}
			.max>div:nth-child(2){
				width: 200px;
				height: 200px;
				background-color: #008000;
				float: left;
			}
			.max>div:nth-child(3){
				width: 200px;
				height: 200px;
				float: left;
				background-color: pink;
			}
			.max1{
				width: 300px;
				height: 300px;
				background-color: #3967FF;
			}
			.max>div:nth-child(4){
				/* 清楚浮动 */
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="max">
			<div class="min1"></div>
			<div class="min2"></div>
			<div class="min3"></div>
			<div></div>
			<!-- 在浮动的最后一号元素后面添加一个空的div给这个div添加清楚浮动的属性 -->
		</div>
		<div class="max1"></div>
		<!-- 浮动的元素不能撑大容器 -->
	</body>
</html>

6.练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .max{
            width: 500px;
            height: 600px;
            background-color: orange;
            border: 10px solid yellow;
        }

        .top{
            width: 500px;
            height: 100px;
            background-color: blue;
        }
        .mid1{
            height: 20px;
            width: 500px;
            background-color: pink;
        }
        .mid2{
            height: 450px;
            width: 500px;
        }
        .left{
            height: 450px;
            width: 100px;
            background-color: #8f36b8;
            float: left;
        }
        .mid{
            height: 450px;
            width: 300px;
            background-color: #c96ee0;
            float: left;
        }
        .right{
            height: 450px;
            width: 100px;
            background-color: #00FFFF;
            float: left;
        }

    </style>
</head>
<body>
    <div class="max">
        <div class="top"></div>
        <div class="mid1"></div>
        <div class="mid2">
            <div class="left"></div>
            <div class="mid"></div>
            <div class="right"></div>
        </div>
        <!-- <div class="bottom"></div> -->
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .max {
            width: 1207px;
            height: 583px;
            background-color: green;
            
        }

        .left {
            height: 583px;
            width: 200px;
            background-color: #00FFFF;
            float: left;
        }

        .right {
            height: 280px;
            width: 230px;
            background-color: pink;

            border: 1px solid red;
            float: left;

            margin-left: 20px;
            margin-bottom: 20px;
        }

        
    </style>
</head>

<body>

    <div class="max">
        <div class="left"></div>

        <div class="right">1</div>
        <div class="right">2</div>
        <div class="right">3</div>
        <div class="right">4</div>
        <div class="right">5</div>
        <div class="right">6</div>
        <div class="right">7</div>
        <div class="right">8</div>
    </div>
</body>

</html>