导航网站怎么做点击,忘记wordpress的账号和密码忘记,微信小程序开发的优势,制作二维码的方法▐ 文档流#xff1a;
由于网页默认是一个二维平面#xff0c;当我们在网页中一行行摆放标签时#xff0c;块标签会独占一行#xff0c;行标签则只占自身大小#xff0c;这种情况下要实现网页布局就很麻烦了#xff0c;所以我们就需要通过一些方法来改变这种默认的布局方…▐ 文档流
由于网页默认是一个二维平面当我们在网页中一行行摆放标签时块标签会独占一行行标签则只占自身大小这种情况下要实现网页布局就很麻烦了所以我们就需要通过一些方法来改变这种默认的布局方式
▐ 浮动
CSS中的浮动属性可以让标签脱离原来的文档流也就是二维平面浮动后的标签默认是内容的大小且可以为其设置宽和高。
➱ 语法floatleft(向左浮动) / right(向右浮动) / none(不浮动)
▐ 存在问题 浮动后的标签不占用原来文档流的空间下面的标签就会向上移动会影响后面的网页布局。
▐ 如何解决浮动问题 1. 为父级标签设置高度将父级标签撑开。 2. 在浮动的标签后使用清除浮动属性自动让父级标签撑开推荐 ▐ 实战练习 ✎. 例如我们做一个导航栏如图所示 第一步用4个div标签来修饰内容并通过css设置背景颜色和文字颜色 !DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle.content{//设置文字颜色和背景颜色color: antiquewhite;background-color: #50536e; }/style/headbodydiv classcontent消息/divdiv classcontent动态/divdiv classcontent收藏/divdiv classcontent投稿/div/body
/html第二步通过css的浮动属性让4个div漂浮在一行且浮动后的div标签默认是内容大小 !DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle.content{color: antiquewhite;background-color: #50536e;//向左浮动float: left;}/style/headbody div classcontent消息/divdiv classcontent动态/divdiv classcontent收藏/divdiv classcontent投稿/div/body
/html第三步为浮动后的4个div标签设置宽和高并使文本内容居中 !DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle.content{color: antiquewhite;background-color: #50536e; float: left;//设置宽高以及文本居中text-align: center;width: 150px;height: 50px;line-height: 50px; }/style/headbodydiv classcontent消息/divdiv classcontent动态/divdiv classcontent收藏/divdiv classcontent投稿/div /body
/html第四步使这4个div标签整体在页面上居中。需要在这4个div标签外部再套一个div标签 并设置这个父级div标签宽度4*子级div标签宽度通过margin: 0% auto;使其居中即可。 这里只有让父级div标签宽度4*子级div标签宽度 才能实现居中否则该父级div标签是默认占一整行的无法通过margin: 0% auto;使其居中. 不了解margin属性的小伙伴可以参考之前 CSS盒子模型 的文章 CSS盒子模型-CSDN博客 !DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle.content{color: antiquewhite;background-color: #50536e;float: left;text-align: center;width: 150px;height: 50px;line-height: 50px; }.head{width: 600px;margin: 0% auto;} /style/headbodydiv classheaddiv classcontent消息/divdiv classcontent动态/divdiv classcontent收藏/divdiv classcontent投稿/div/div/body
/html第五步清除浮动影响即在浮动标签后添加一个clear属性修饰的空div标签即可。 ➱ 注意是在浮动的标签后添加不要添加到父级标签之后了! !DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle.content{color: antiquewhite;background-color: #50536e;float: left;text-align: center;width: 150px;height: 50px;line-height: 50px; }.head{width: 600px;margin: 0% auto;} /style/headbody div classheaddiv classcontent消息/divdiv classcontent动态/divdiv classcontent收藏/divdiv classcontent投稿/divdiv styleclear: left;/div!-- 清除浮动影响 --/div /body
/html清除浮动后在之后的网页布局中下面的标签就不会向上移动了例如我们在这个导航栏后添加一个标题标签h1标题h1测试下 这是不清除浮动效果的结果 本次的分享就到此为止了希望我的分享能给您带来帮助创作不易也欢迎大家三连支持你们的点赞就是博主更新最大的动力如有不同意见欢迎评论区积极讨论交流让我们一起学习进步有相关问题也可以私信博主评论区和私信都会认真查看的我们下次再见 海漫浩浩,我亦苦作舟!大家一起学习,一起进步! 本人微信g2279605572
