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 html> <html lang="en" manifest="index.manifest"headmeta charset="UTF-8"title>Document</link rel="stylesheet" href="style.css"body> header> div class="container"> a href="#"><img src="cat-little.jpg"></anav> ="#" class="active">导航div> section ="banner"ulli ="left"="banner1.jpg"li="banner3.jpg"="right"="banner2.jpg"section="main"asideh1>左边samp>标题dldt>小标题dd ="text">文字内容哦~dd="pic"="p1.jpg"="p2.jpg"="p3.jpg"article>右边p>这是右边文章内容哦~="qrt.jpg"footer>版权信息span="b1.jpg"="b2.jpg"="b3.jpg"> html>
style.css
* { font-size: 14px; margin: 0; padding: border: none;} a { text-decoration: ul { list-style: none;} /*浏览器兼容解决*/ header,1)"> block;} 头部 header { width: 100%; height: 60px; background-color: #000;} .container { 1200px; 0 auto;} .container > a { display: block; float: left; 150px; padding-left: 10px;} .container > a img { 40px; padding-top: nav { right; padding-right: nav > a { 16px; line-height: inline-block; 100px; cursor: pointer; text-align: center; color: #fff;} nav > a:first-child { background: rgb(212,1,18);} nav > a:nth-child(2) { rgb(254,184,0);} nav > a:nth-child(3) { rgb(120,185,23);} nav > a:nth-child(4) { rgb(242,124,1);} nav > a:last-child { rgb(1,127,203);} nav > a:hover,nav > a.active { padding-bottom: 5px;} banner .banner { #ccc;} .banner ul { position: relative; 400px; 0 auto; 100px;} .banner ul li { absolute; z-index: 1; top: bottom: overflow: hidden; 500px; 250px; auto;} .banner ul li img { 100%;} .banner ul li.active { 2; right: 0; 设置水平居中*/ left: 600px; 300px;} .banner ul li.left { 设置在左边 0;} .banner ul li.right { 设置在右边 0;} 主体部分 .main { 350px; aside { 600px;} article { .main h1 { 24px; font-weight: lighter; 20px 0;} .main h1 samp { #7d7d7d;} aside img { 70px;} aside dl { margin-bottom: aside dl dt { 90px;} aside dd.pic { 70px; aside dd.text { 20px; article > img { 130px;} article > p { 10px;} 底部 footer { footer > .container { footer > .container > p { footer > .container > span { right;} footer > .container > span > img { 25px; margin-left: 10px; 17px; opacity: .7;} footer > .container > span > img:hover { 1;} # sourceMappingURL=style.css.map */
效果图