您好,欢迎来到网暖!

当前位置:网暖 » 站长资讯 » 建站基础 » 网络技术 » 文章详细 订阅RssFeed

web前端入门到实战:html的组成部分、DIV+CSS布局

来源:网络整理 浏览:220次 时间:2019-12-10
HTML的组成部分
  • dtd部分:文档类型说明,声明版本、标准

    web前端入门到实战:html的组成部分、DIV+CSS布局

web前端入门到实战:html的组成部分、DIV+CSS布局

  • header部分:给机器看的
  • body部分:给人看的
CSS控制div显示
  • <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
  • 如下代码是CSS通过id设置每个div的宽高和背景色
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        #a {            width: 200px;            height: 100px;            background: red;        }        #b {            width: 200px;            height: 100px;            background: blue;        }        #c {            width: 200px;            height: 100px;            background: green;        }    </style></head><body>    <div id="a"></div>    <div id="b"></div>    <div id="c"></div></body></html>web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

执行效果:

web前端入门到实战:html的组成部分、DIV+CSS布局

浮动布局

我们先写两个div设置上背景颜色看看效果

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        #lside {            height: 200px;            background: red;        }        #rside {            height: 200px;            background: green;        }    </style></head><body>    <div id="lside">我是左边</div>    <div id="rside">我是右边</div></body></html>web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

web前端入门到实战:html的组成部分、DIV+CSS布局

上文也说ddiv的内容会自动地开始一个新行,所以想将两个div左右排列就要进行浮动布局
我们分别在CSS中加上float属性

    <style type="text/css">        #lside {            height: 200px;            background: red;            float: left;        }        #rside {            height: 200px;            background: green;            float: right;        }    </style>

效果如下图:

web前端入门到实战:html的组成部分、DIV+CSS布局

清除浮动

当有浮动布局和普通div共同存在时,会发生如下覆盖的情况

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        #lside {            height: 200px;            background: red;            float: left;        }        #rside {            height: 300px;            background: green;            float: right;        }        #normal {            height: 400px;            background: blue;        }    </style></head><body>    <div id="lside">我是左边</div>    <div id="rside">我是右边</div>    <div id="normal">我不设置浮动</div></body></html>web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

web前端入门到实战:html的组成部分、DIV+CSS布局

所以如果不想被覆盖,就要清除浮动
在CSS中对普通元素设置clear属性
当我们增加 clear: left; 时,代表不让左边浮动盖着自己

        #normal {            height: 400px;            background: blue;            clear: left;        }

此时清除左浮的div就会贴着左浮的div下边显示,如图:

web前端入门到实战:html的组成部分、DIV+CSS布局

同样的还可设置 clear: right; 代表不让右边浮动盖着自己;设置 clear: both; 代表不让浮动盖着自己。这里不做演示

推荐站点

  • 腾讯腾讯

    腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐网是全球最大的中文门户网站,为用户提供24小时不间断的最新资讯,及搜索、邮件等网络服务。内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息,以及论坛、博客、微博、我的搜狐等互动空间。

    www.sohu.com
  • 网易网易

    网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。

    www.163.com
  • 新浪新浪

    新浪网为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道,同时开设博客、视频、论坛等自由互动交流空间。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com