html框架布局 页代码

HTML5的结构化标签，对引擎更友好

li 标签对不利于引擎的收录，尽量少用

banner图片一般拥有 ，不需要引擎收录，因此可以使用ul + li

samp/samp可用于浅色副标题

display:inline-block; 每个块存在水平间隙，解决是在父元素上添加font-size:0;

sublime安装csscomb插件

选中css代码，ctrl+shift+c 自动整理好代码

排序前：

排序后：

此时存在多余的空行

解决：

安装cssformat插件，对代码执行edit-cssformat-expanded 即可 空行

选中单句样式前面的空白部分（即tab空位）

然后alt+f3 会统一选中所有tab留白

按一次 ，再按一次 ，再空一格

此时这个效果：

然后按向下箭头，按向左箭头，按 一次，再加个空格

此时效果

再向下箭头，再

此时效果

css样式代码美化完毕。

新标签元素的浏览器兼容解决：

header,nav,section,aside,article,footer{display: block;}

最后晒出所有代码

index.html

!DOCTYPE htmlhtml lang=”en” manifest=”index.manifest”headmeta charset=”UTF-8″titleDocument/titlelink rel=”stylesheet” href=”style.css”/headbody header div /span /div /footer/body/html

style.css

{ font-size: 14px; margin: 0; padding: 0; border: none;}a { text-decoration: none;}ul { list-style: none;}/浏览器兼容解决/header,nav,section,aside,article,footer{display: block;}/头部/header { width: 100%; height: 60px; background-color: #000;}.container { width: 1200px; margin: 0 auto;}.container a { display: block; float: left; width: 150px; height: 60px; padding-left: 10px;}.container a img { height: 40px; padding-top: 10px;}nav { font-size: 0; float: right; padding-right: 10px;}nav a { font-size: 16px; line-height: 60px; display: inline-block; width: 100px; height: 60px; cursor: pointer; text-align: center; color: #fff;}nav a:first-child { background: rgb(212, 1, 18);}nav a:nth-child(2) { background: rgb(254, 184, 0);}nav a:nth-child(3) { background: rgb(120, 185, 23);}nav a:nth-child(4) { background: rgb(242, 124, 1);}nav a:last-child { background: rgb(1, 127, 203);}nav a:hover, nav a.active { padding-bottom: 5px;}/banner/.banner { background: #ccc;}.banner ul { position: relative; width: 1200px; height: 400px; margin: 0 auto; padding-top: 100px;}.banner ul li { position: absolute; z-index: 1; top: 0; bottom: 0; overflow: hidden; width: 500px; height: 250px; margin: auto;}.banner ul li img { overflow: hidden; width: 100%;}.banner ul li.active { z-index: 2; right: 0; /设置水平居中/ left: 0; width: 600px; height: 300px;}.banner ul li.left { /设置在左边/ left: 0;}.banner ul li.right { /设置在右边/ right: 0;}/主体部分/.main { width: 1200px; height: 350px; margin: 0 auto;}aside { float: left; width: 600px;}article { float: right; width: 600px;}.main h1 { font-size: 24px; font-weight: lighter; margin: 20px 0;}.main h1 samp { color: #7d7d7d;}aside img { height: 70px;}aside dl { position: relative; margin-bottom: 10px;}aside dl dt { position: absolute; top: 0; left: 90px;}aside dd.pic { overflow: hidden; width: 70px; height: 70px;}aside dd.text { position: absolute; top: 20px; left: 90px;}article img { overflow: hidden; height: 130px;}article p { margin-bottom: 10px;}/底部/footer { background-color: #000;}footer .container { width: 1200px; height: 60px; margin: 0 auto;}footer .container p { line-height: 60px; float: left; color: #fff;}footer .container span { float: right;}footer .container span img { width: 25px; height: 25px; margin-left: 10px; padding-top: 17px; cursor: pointer; opacity: .7;}footer .container span img:hover { opacity: 1;}/# sourceMappingURL=style.css.map /

效果图

链接：https://www.cnblogs.com/chenyingying0/p/12250255.html

喜欢小编的可以点个赞 小编哦，小编每天都会给大家分享 。

我自己是一名从事了多年的前端老程序员，小编为大家准备了新出的前端编程学习资料，免费分享给大家！

如果你也想学习前端，可以观看【置顶】 。也可以私信【1】 领取最新前端练手实战项目

以上就是与html框架布局 页代码相关内容，是关于margin的分享。看完html个人 页完整代码后，希望这对大家有所帮助！