练习了布局噢~

最新推荐文章于 2022-04-05 18:54:12 发布
最新推荐文章于 2022-04-05 18:54:12 发布
阅读量125 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45819938/article/details/103544604
版权

 布局1

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
        margin:0 auto;
        color:white;
        text-align:center;
        font-size: 20px;
        font-weight: bold;
       
    }
    .main{
        width:80%;
        height:670px;
        background-color: coral;
        
    }
    .header{
        height:80px;
        line-height: 80px;
        margin-top:10px;
        background-color:lightcoral; 
        

    }
    .center{
        height:450px;
        width:90%;
        margin-top:15px;
    }
    .center-left{
        width:49%;
        background-color: cornflowerblue;
        height:450px;
        line-height: 450px;
        float:left;
        
    }
    .center-right{
        width:49%;
        background-color: cornflowerblue;
        height:450px;
        line-height: 450px;
        float:right;
    }
    .footer{
        background-color: aquamarine;
        height:60px;
        line-height: 60px;
        margin-top: 15px;
    }
    
    </style>
</head>
<body>
    <div class="main">
        <div class="header">header</div>
        <div class="center">
            <div class="center-left">center-left</div>
            <div class="center-right">center-right</div>
        </div>
        <div class="footer">footer</div>
    </div>
    
</body>
</html>

布局2

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
        margin:0 auto;
        color:white;
        text-align:center;
        font-size: 20px;
        font-weight: bold;
       
    }
    .main{
        width:80%;
        height:670px;
        background-color: coral;
        
    }
    .header{
        height:80px;
        line-height: 80px;
        margin-top:10px;
        background-color:lightcoral; 
        

    }
    .center{
        height:450px;
        width:90%;
        margin-top:15px;
    }
    .center-left{
        width:25%;
        background-color: cornflowerblue;
        height:450px;
        line-height: 450px;
        float:left;
        
    }
    .center-right{
        width:73%;
        background-color: cornflowerblue;
        height:450px;
        line-height: 450px;
        float:right;
    }
    .footer{
        background-color: aquamarine;
        height:60px;
        line-height: 60px;
        margin-top: 15px;
    }
    
    </style>
</head>
<body>
    <div class="main">
        <div class="header">header</div>
        <div class="center">
            <div class="center-left">center-left</div>
            <div class="center-right">center-right</div>
        </div>
        <div class="footer">footer</div>
    </div>
    
</body>
</html>

布局3

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
			text-align: center;
			color:white;
			font-weight:border;
			font-size: 25px;
			padding:5px;
            margin:0;
		}
		.main{
			background-color:#fb6;
			width:1500px;
			height:700px;
			margin-top:3px;
			}
		.header{
			height:90px;
			background-color: #fcc;
			line-height:90px;
			margin-top:20px;
			}

		.center-left{
			height:400px;
			width:23%;
			background-color:#cef;
			float:left;
			line-height: 400px;
			margin-top:20px;
		}
		.center-left::after{
			content:"";
			clear:both;
			display:block;
		}
		.center-center{
			height:400px;
			width:50%;
			background-color:#7df;
			overflow:hidden;
			line-height: 400px;
			margin-top:20px;
			display:inline-block;
		}
		.center-right{
			height:400px;
			width:23%;
			background-color:#cef;
			float:right;
			line-height: 400px;
			margin-top:20px;
			}
		.center-right::after{
			content:"";
			clear:both;
			display:block;
		}
		
		.footer{
			height:80px;
			width:1490px;
			background-color:#fd7;
			float:left;
			display:inline-block;
			line-height: 80px;
			margin-top:20px;
		}
	</style>
</head>
<body>
    <div class="main">
        <div class="header">header</div>
        <div class="center">
            <div class="center-left">center-left</div>
            <div class="center-right">center-right</div>
            <div class="center-center">center-center</div>
        </div>
        <div class="footer">footer</div>

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

布局4

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
			color:white;
			font-weight:border;
			font-size: 25px;
			padding:5px;
			text-align: center;
		}
		.main{
			background-color:#fb6;
			width:1500px;
			height:700px;
			margin-top:3px;
			}
		.header{
			height:auto;
			background-color: #fcc;
			line-height:90px;
			margin-top:20px;
			
			}

		.center-left{
			height:auto;
			width:23%;
			background-color:#cef;
			float:left;
			margin-top:20px;
		}
		.center-left::after{
			content:"";
			clear:both;
			display:block;
		}
		.center-center{
			height:auto;
			width:50%;
			background-color:#7df;
			overflow:hidden;
			margin-top:20px;
			display:inline-block;
		}
		.center-right{
			height:auto;
			width:23%;
			background-color:#cef;
			float:right;
			margin-top:20px;
			}
		.center-right::after{
			content:"";
			clear:both;
			display:block;
		}
		
		.footer{
			height:80px;
			width:1490px;
			background-color:#fd7;
			float:left;
			display:inline-block;
			line-height: 80px;
			margin-top:295px;
		}

    </style>
</head>
<body>
    <div class="main">
        <div class="header">header</div>
        <div class="center">
            <div class="center-left">center-left <br>我是自适应的1</div>
            <div class="center-right">center-right <br>我是自适应的2 <br> 我是自适应的2</div>
            <div class="center-center">center-center <br>我是自适应的3 <br>我是自适应的3 <br>我是自适应的3</div>
        </div>
        <div class="footer">footer</div>


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

布局5

效果如图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
        margin:0 auto;
        color:white;
        text-align:center;
        font-size: 20px;
        font-weight: bold;
       
    }
    .main{
        width:80%;
        height:670px;
        background-color: coral;    
    }
    .header{
        height:80px;
        line-height: 80px;
        margin-top:10px;
        background-color:lightcoral; 
    }
    .center{
        height:450px;
        width:90%;
        margin-top:15px;
    }
    .center-left{
        width:45%;
        background-color: cornflowerblue;
        height:450px;
        float:left;
        padding:20px;
        
    }
    .center-right{
        width:45%;
        background-color: cornflowerblue;
        height:450px;
        padding:20px;
        float:right;
        
    }
    .footer{
        background-color: aquamarine;
        height:60px;
        line-height: 60px;
        margin-top: 50px;
     
    }
    .title{
        color:white;
        font-size: 25px;
        font-weight: bolder;
    }
    /* .header-word{
        font-size: 20px;
        color: white;
        font-weight: bold; */
    }
    .word{
        color:white;
        font-size: 18px;
    }
    img{
        width:180px;
        height:180px;
        border-radius: 50%;
    }
    
    </style>
</head>
<body>
    <div class="main">
        <div class="header">
            <div class="title">那些年————我追过的动画片</div>
        </div>
        <div class="center">
            <div class="center-left">
                <div class="picture"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576337954356&di=a1ad90283156c74a965d4d84d0287a1e&imgtype=0&src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2Ff1ac9488da3fee92.jpg" alt=""></div>
                <div class="title">Tom and Jerry</div>
                <div class="word">猫和老鼠吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦</div>
            </div>
            <div class="center-right">
                <div class="picture"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576338094150&di=9db359126e532f8a39dd5d5f2c9a2955&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201406%2F24%2F20140624170857_yf52v.jpeg" alt=""></div>
                <div class="title">蜡笔小新</div>
                <div class="word">蜡笔小新吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦吧啦</div>
            </div>
        </div>
        <div class="footer">footer</div>
    </div>
    
</body>
</html>

布局6

效果如图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
			padding:5px;
            margin:0;
           
		}
		.main{
			margin: 0 auto;
			width:80%;
			height:700px;
			margin-top:3px;
            border:1px solid black;
            background-color:lightgray;
			}
		.header{
			height:90px;
			text-align: center;
			line-height:90px;
			margin-top:20px;
            font-size: 40px;
            font-weight: bolder;
            border:1px solid black;
			}

		.center-left{
			height:400px;
			width:23%;
			border:1px solid black;
			float:left;
			margin-top:20px;
            display:inline-block;
            text-align: center;
		}
		.center-left::after{
			content:"";
			clear:both;
			display:block;
		}
		.center-center{
			height:400px;
			width:50%;
			border:1px solid black;
			overflow:hidden;
            margin:20px 5px;
			display:inline-block;
            text-align: center;
		}

		.center-right{
			height:400px;
			width:23%;
			border:1px solid black;
			float:right;
			margin-top:20px;
            display:inline-block;
            text-align: center;
			}
		.center-right::after{
			content:"";
			clear:both;
			display:block;
		}
		
		.footer{
			height:80px;
			width:98%;
			text-align: center;
			display:inline-block;
			line-height: 80px;
			margin-top:20px;
            font-size: 30px;
            border:1px solid black;
		}
        .picture{
            height:350px;
			
        }
        h2{
            margin:0 auto;
        }
	</style>
</head>
<body>
    <div class="main">
        <div class="header">岁寒三友————松竹梅</div>
        <div class="center">
            <div class="center-left">
                <h2>墨松</h2>
                <img class="picture" src="https://p2.ssl.qhimgs1.com/sdr/400__/t014f3332c7f540ccb2.jpg" alt="">
            </div>
            <div class="center-right">
                <h2>墨梅</h2>
                <img class="picture" src="http://file7.gucn.com/file/CurioPicfile/20130724/GucnP_U68615T031514901374658158852.jpg" alt="">
            </div>
            <div class="center-center">
                <h2>墨竹</h2>
                <img class="picture"  src="http://www.sh1122.com/upimg/2018/0328/66512_0_1522209638.jpg" alt="">
            </div>
        </div>
        <div class="footer">footer</div>

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

再补充一个知识点：

calc的用法：
.element{
        width:calc(expression);
   }
其中，expression是一个用来计算长度的表达式，支持“+”，“-”，“*”，“/”运算符。
特别声明：表达式中有“+”，“-”运算符的，前后必须要有空格。
例如 “width:calc(100% - 20px)”这种写法；
而对于“*”，“/”并没有这种要求，但为了风格的统一，建议前后也要留空格。
对于calc()，总结以下要点：
    1.兼容性：在IE9+、FF4.0+、Chrome19+、Safari6+支持较好，移动端支持不理想；
    2.表达式支持加、减、乘、除运算，同时也支持单位的混合使用（%、px、em等）;
    2.表达式中有“+”，“-”运算符的，前后必须要有空格。 
 

巧克力味的胡萝卜
关注
CSS基础试题
张润东的博客
07-30 4万+
一、单选题 1.CSS是利用（  B   ）XHTML标签构建网页布局。 A.         B.        C.       D. 2.在CSS语言中下列哪一项是“左边框”的语法（  C  ） A.border-left-width:值>          B.border-top-width：值>   C. border-left:值>               D.
CSS布局练习
前端攻城狮进阶之路
06-23 1912
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;Page Title&amp
简单类名转为class_13 网页各区域div的常见类名
weixin_39678089的博客
12-06 204
成长是一辈子的事儿！大家好！我是时问新(前几天改了名字，现在觉得还是用时问新这个名字更好点)。分享前端、Python等技术，以及个人成长路上的那些事儿。div标签的常见类名div是划分网页结构和区域的“盒子”，为了方便对每一个“盒子”进行修饰，往往需要给div取一个类名。类名是为css服务的。对于一个网站的首页来说，一般会由页头、logo(网页的图标)、导航条、横幅、内容区域、页脚等几个大的部分组...
Flex 弹性布局 骰子篇练习
qq_23966661的博客
10-11 2845
Flex布局实例——骰子布局 在CSS布局中，实现垂直居中、相同高度的列等一直是令人头疼的问题，但不管是什么布局，Flex往往都可以几行命令搞定；93%的人现在正在运行的浏览器都已经支持Flexbox，这比支持HTML5 的<video>元素要好；所以现在我们一起来见证Flexbox的神奇，看看利用Flex如何实现骰子布局。 1.单项目 <div class="fi...
前端小练习～网页布局
qq_53142796的博客
04-05 203
css布局练习
shiyu18的博客
10-28 841
css练习 css练习布局，并完成一下布局: 要求:主要练习布局，并且精简代码（浏览器加载时 提升浏览器加载速度） 分析:除首航文字外，其余部分均是图片，并且一二行图片和三四行图片间距，宽高相等。 代码实现: 1.html部分： <!doctype html> <html> <head> <meta charset="utf-8"> <title>2</title> <link rel="stylesheet" ty
前端练习-CSS布局
qq_42385482的博客
02-08 2147
前端练习-CSS布局 文章目录前端练习-CSS布局在线练习一、盒模型CSS1 盒模型 - content-boxCSS2 盒模型 - border-boxCSS3 盒模型- 外边距折叠二、浮动CSS4 浮动CSS5 浮动 - 清除三、定位CSS7 定位 - inheritCSS8 定位 - absoluteCSS9 定位 - absolute - 评注CSS10 定位 - z-indexCSS11 定位 - relativeCSS12 定位 - fixedCSS13 定位 - fixed - 广告四、dis
Android界面布局练习
茨时代べ 的博客
10-21 1570
Android界面布局练习 一、实验目的 掌握常用的几种界面布局方法。 能够熟练综合应用各种布局方法进行界面设计。 二、实验内容 制作如下图所示的手机QQ登陆界面。 给控件绑定监听器，当用户点击登陆按钮时，把用户所填写的注册内容显示在“注册”按钮下面的文本框内。 2、课本上其它示例程序。 三、预备知识 无 四、实验步骤 1、新建一个Android项目，项目名称中须包含学号后三位，如“Pr...
flex布局练习题，面试必备，持续更新建议收藏~
你好呀，很高兴你在看这里~
06-15 5389
现在网页布局大多都是flex布局，像浮动这些用得比较少，在面试中flex也是被经常问到的。而有些同学学完flex后，又不懂怎么练习巩固，所以，所以，所以，我汇聚了一些常见的flex的练习题案例，写完再次加强掌握flex~
练习flex布局
_小郑有点困了的博客
04-05 807
联系flex布局 头部样式，使用flex，两边有宽，中间flex：1，占满剩余 1，效果 2，html 3，css 宫格样式，有两种实现方式： 效果： 1，使用table，table-cell，外层盒子display：table;里层元素，display：table-cell，宽度百分比，左浮动 1.1html 1.2css 2，使用flex布局，外层盒子display: flex; ...
网站布局练习div模板
04-02
在练习中，你可以尝试使用`div`来创建这些基本的布局模式，通过调整`div`的排列和尺寸，理解其在不同场景下的应用。 2. **CSS布局技术**：CSS提供了多种布局方法，如流式布局（Flow Layout）、网格布局（Grid ...
练习JAVA GUI设计和布局设计_java布局和日历_练习JAVAGUI设计和布局设计_
09-28
本练习主要关注GUI的设计和布局管理，以及如何创建一个显示日历的窗口。在Java中，我们通常使用Java Swing库来创建GUI组件，如按钮、文本框、面板等，并通过布局管理器来控制这些组件在窗口中的排列和大小。 首先，...
Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
在描述中提到的“布局练习”，很可能是让你通过CSS的`display`属性，比如`block`、`inline`、`flexbox`或`grid`，来实现不同类型的布局。浮动（float）是早期常用的布局方法，通过设置`float:left`或`float:right`，...
table布局练习.html
09-29
前段时间做的表格布局。是同学老师布置的一个作业，作业要求是用DW做，我拿来写代码练手了，因为我还没有系统的学习完看起来有点乱，至少在命名规范这一方面，而且很多HTML5不在用的标签也在用，是跟着作业要求一步...
QT简单布局实例，用于练习
04-11
QT是一个流行的开源跨平台应用程序开发框架，主要用于创建图形用户界面（GUI）应用。它由The Qt Company维护，并被广泛应用于Windows、Linux、macOS等多种操作系统...因此，花时间学习和练习这些基本布局是非常值得的。
考研复习-英语二真题考试题集-带答案
09-14
英语二考研真题复习资料，带答案版
2024中美独角兽公司发展分析报告.pdf
09-14
全球各大洲独角兽企业分布、中美独角兽企业对比（数量、估值、新增及退榜情况、行业分布、所在城市）、
C++ 中的异步编程模型是什么
09-14
在C++中，异步编程模型是处理并发任务、提高程序性能和响应性的关键技术。以下是C++中实现异步编程的几种主要方式： 每种异步编程模型都有其适用场景和优缺点。选择合适的模型可以提高代码的可读性、可维护性和性能。随着C++标准的不断发展，异步编程模型也在不断进化，为开发者提供了更多的工具和选择。 在实际开发中，应根据具体需求选择合适的异步编程模型。例如，对于简单的异步任务，回调函数可能是最直接的选择；而对于需要结构化错误处理和结果获取的复杂异步任务，std::async和std::future可能更合适；在需要高效资源管理的场景下，线程池是一个不错的选择；而对于需要编写大量异步代码的现代应用程序，协程提供了一种更简洁、更直观的解决方案。 总之，C++中的异步编程模型是多核和高并发环境下提高程序性能的重要工具。通过合理使用这些模型，开发者可以构建出更高效、更可靠的软件系统。
正则表达式Regex是一种文本模式.docx
最新发布
09-14
正则表达式（Regular Expression，简称Regex或Regexp）是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。正则表达式是强大的文本处理工具，广泛用于搜索、编辑或操作文本和数据。 基本组成 普通字符：大多数字符，包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号，都是普通字符。正则表达式中的普通字符表示它们自身。例如，正则表达式test会匹配字符串"test"。 特殊字符（元字符）：一些字符在正则表达式中具有特殊的意义，如^、$、.、*、+、?、{、}、[、]、|、\等。这些特殊字符用于表示在搜索文本时要匹配的一个或多个字符。例如，.匹配除换行符之外的任何单个字符。 字符类：字符类允许你指定一组字符中的任何一个字符。例如，[abc]匹配"a"、"b"或"c"中的任意一个字符。你也可以使用范围，如[a-z]匹配任何小写字母。 预定义字符类：正则表达式提供了一些预定义字符类，用于匹配常见的字符集合。例如，\d匹配任何数字（等价于[0-9]），\s匹配任
css移动端布局练习
09-16
CSS移动端布局练习是用于设计和开发适应移动设备的网页的练习。移动设备的屏幕尺寸较小，需要针对不同尺寸的设备进行响应式布局，以保证页面在不同设备上的显示效果和用户体验。 在进行CSS移动端布局练习时，需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值