您好,欢迎来到网暖!
?
当前位置:网暖 » 站长资讯 » 建站基础 » 网络技术 » 文章详细 订阅RssFeed

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

来源:网络整理 浏览:203次 时间: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)是中国浏览量最大的中文门户网站,是腾讯公?#23601;?#20986;的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网?#25945;迤教ā?#36890;过?#30475;?#30340;实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。

    www.qq.com
  • 搜狐搜狐

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

    www.sohu.com
  • 网易网易

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

    www.163.com
  • 新浪新浪

    新浪网为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻?#24405;?#20307;坛赛事、娱乐时?#23567;?#20135;业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽?#26723;?0多个内容?#26723;潰?#21516;时开设博客、视频、论坛等自由互动交流空间。

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

    百度一下,你就知道

    www.baidu.com
?
诙谐财富送彩金
网络麻将一毛赌博 时时彩定位胆买法 安徽11选5开奖公告 重庆时时彩计划群 彩票123app 排列三开奖走势图 海南麻将规则怎么有番 比分网188 极速十分彩 棋牌游戏哪个网站好 天津快乐10分 彩仙阁挂机软件教程 重庆时时开奖号码纪录 河北11选5预测号码推荐 江西快三结果500彩票 山西福彩快乐10分