当前位置: 首页 » 用div+css设计一个页面布局,视频案例

用div+css设计一个页面布局,视频案例

作者: 江湖哥 分类: html css教程 发布时间: 2020-10-07 10:24 1,658 百度已收录

温馨提示:本文共774个字,预计阅读时间需要2分钟

大家好,通俗易懂讲营销,我是江湖哥,今天分享认识div课件

学习要点:

1、div概念

2、div用法

一、div概念

div作用就是实现布局、实现对内容样式控制、独占一行

用div+css设计一个页面布局,视频案例 html css教程 第1张
div层布局

二、div用法

1.<div id=”定义的名称”>…</div> 其在css中调用格式为 #定义的名称;

2.<div class=”定义的名称”>…</div> 具有继承性 其在css中调用格式为 .定义的名称;

3.<div style=”定义的样式”>…</div>

用div+css设计一个页面布局,视频案例 html css教程 第2张

用div+css设计一个页面布局,视频案例 html css教程 第3张
案例代码效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>div层元素</title>
</head>
<body style="background:#6666;font-size:32px;text-align: center;">
<div  style="width:980px;margin:0 auto;height:500px;background:#fff;padding:10px;">
	<div style="height:50px;border:1px solid red;margin-bottom: 20px;line-height:50px">DIV head</div>
 <div style="width:260px;border: 1px solid red;height: 250px;float:left;line-height:250px">DIV left</div>
<div style="width:700px;border: 1px solid red;float:right;height: 250px;line-height:250px">DIV right</div>
	</div>
</body>
</html>
用div+css设计一个页面布局,视频案例 html css教程 第4张
案例效果

关注我下面头条号,更多教学视频

听江湖哥讲营销

关于版权
除特别说明外,本博客内容皆为原创,可以自由转载传播,但请署名及注明出处链接:https://www.weitongsheng.com:443/archives/4830.html

如果觉得我的文章对您有用,请随意打赏或点赞.您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注