H5网页布局+css代码美化

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 */

效果图

 

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...