DIV+CSS布局心得

本文详细探讨了DIV+CSS布局的心得体会,从清空原有样式开始,逐步解析了页面布局分析、HTML标签、CSS选择器和属性的使用。重点讲解了浮动定位、定位属性、display属性、盒子模型、圆角边框、阴影效果以及渐变、过渡和动画等高级技巧,旨在帮助读者掌握灵活的页面布局策略。
摘要由CSDN通过智能技术生成

DIV+CSS布局心得

1,清空所有原有样式

在这里插入图片描述

body,img,ul,li{
   
	padding: 0px; //内边框清零
	margin: 0px;//外边框清零
}

随时对HTML和CSS进行注释

<!--banner start-->
<!--banner end-->
//banner star
//banner end

2,分析页面布局

以b站(哔哩哔哩弹幕网为例)
在这里插入图片描述
网站布局

”头部“
可以在每个页面的顶部看到。包含所有页面的相关信息(包括站点名字或logo)以及一个便于使用的导航系统。
“主要内容”
最大的区域,展示了当前页面的内容。
“边缘内容”(Stuff)
包括:1、主要内容的补充部分;2、信息分享列表;3、单选导航栏。 实际上,任何可以在当前页面展示又没有写入主要内容的部分都是可以划分在这的。
“页脚”
可以在每个页面的底部看到。和头部一样,包含一些对于整个页面而言不是很重要的信息,例如法律声明和联系信息。

每一个框为一个 DIV 为一个盒子模型。通过CSS进行布局

DIV+CSS布局页面

页面常用HTML标签

<!--无意义块状标签-->
<div></div>  
<!--无意义行内元素-->
<span></span>
<!--段落标签-->
<p></p>
<!--无序列表-->
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值