使用浮动和内外边距来完成基本的页面布局

最新推荐文章于 2022-11-23 20:38:07 发布

cyx的fan

最新推荐文章于 2022-11-23 20:38:07 发布

阅读量903

点赞数

文章标签：新人日常记录

本文链接：https://blog.csdn.net/togsa/article/details/53672740

版权

初学者通过实战练习掌握了浮动和内外边距在页面布局中的应用。原本为解决布局问题而设定的固定高度在学习清除浮动后变得不再必要，从而深化了对CSS布局理解。

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

刚入门前端并自学了一段时间，在学习了Head First HTML与CSS以及看各路网站视频后，对浮动以及内外边距等知识点用 “实战”的方法来进行熟悉与了解。

以下是效果图：

以前是我根据图片效果编的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>布局</title>
	<style type="text/css">
	*{
	 margin: 0;
	 padding: 0;
	}

 		.all{
        width: 970px;
        height: 603px;
        margin:auto;
		}
		.p3 {    
	     
	     width: 277px;
	     height: 103px;
	     background-color: red;}

		.section1 {
	        float: right;
	        width: 816px;
		}


         .p1 {
         	  float: right;
         	  width:137px;
         	  height: 49px;