Web前端程序设计作业--CSS浮动

最新推荐文章于 2024-07-12 20:49:16 发布

haoshuai_121

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量225

点赞数

分类专栏： Web前端程序设计学习文章标签： css 前端 css3

本文链接：https://blog.csdn.net/haoshuai_121/article/details/128095401

版权

Web前端程序设计学习专栏收录该内容

17 篇文章 1 订阅

订阅专栏

实现如图效果：
在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>haoshuai的文档2020214387</title>
<style>

.box{

	width:1580px;

	height:860px;

	background-color:#0FF;

	margin:0 auto;}

	* {

            padding: 0;

            margin: 0;

        }

	    li {

            list-style: none;

        }

	    .left {

            width:300px;

            height:860px;

            background-color: purple;

            float: left;

        }



        .right {

            width:1280px;

            height: 860px;

            background-color: #0FF;

            float: left;

        }

		.right li {

            width: 300px;

            height: 400px;

            background-color:pink;

            float: left;

            margin-left: 20px;

			

        }

		.right .lis{

			margin-top:60px;}

		

</style>

</head>



<body>

<div class="box">

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

  <div class="right">

   <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li class="lis">5</li>

    <li class="lis">6</li>

    <li class="lis">7</li>

    <li class="lis">8</li>

   </ul>

  </div>

 </div>

</body>
</html>