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

最新推荐文章于 2021-06-22 03:24:24 发布

cyx的fan

最新推荐文章于 2021-06-22 03:24:24 发布

阅读量892

点赞数

文章标签：新人日常记录

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

版权

刚入门前端并自学了一段时间，在学习了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;

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cyx的fan

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用浮动和内外边距来完成基本的页面布局

刚入门前端并自学了一段时间，在学习了Head First HTML与CSS以及看各路网站视频后，对浮动以及内外边距等知识点用 “实战”的方法来进行熟悉与了解。以下是效果图：以前是我根据图片效果编的代码：布局 *{ margin: 0; padding: 0; } .all{ wid
复制链接

扫一扫