H5网页布局+css代码美化，零基础参考

TML5的结构化标签，对搜索引擎更友好

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">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <a href="#"><img src="cat-little.jpg"></a>
            <nav>
                <a href="#" class="active">导航</a>
                <a href="#">导航</a>
                <a href="#">导航</a>
                <a href="#">导航</a>
                <a href="#">导航</a>
            </nav>
        </div>
    </header>

    <section class="banner">
        <ul>
            <li class="left"><img src="banner1.jpg"></li>
            <li class="active"><img src="banner3.jpg"></li>
            <li class="right"><img src="banner2.jpg"></li>
        </ul>
    </section>

    <section class="main">
        <aside>
            <h1>左边<samp>标题</samp></h1>
            <dl>
                <dt>小标题</dt>
                <dd class="text">文字内容哦~</dd>
                <dd class="pic"><img src="p1.jpg"></dd>
            </dl>
            <dl>
                <dt>小标题</dt>
                <dd class="text">文字内容哦~</dd>
                <dd class="pic"><img src="p2.jpg"></dd>
            </dl>
            <dl>
                <dt>小标题</dt>
                <dd class="text">文字内容哦~</dd>
                <dd class="pic"><img src="p3.jpg"></dd>
            </dl>
        </aside>
        <article>
            <h1>右边<samp>标题</samp></h1>
            <p>这是右边文章内容哦~</p>
            <img src="qrt.jpg">
            <p>这是右边文章内容哦~</p>
        </article>
    </section>

    <footer>
        <div class="container">
            <p>版权信息</p>
            <span>
                <img src="b1.jpg">
                <img src="b2.jpg">
                <img src="b3.jpg">
            </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】领取最新前端练手实战项目

言

浏览器自带的input标签，例如text,radio,checkbox的样式都显得很难看，虽然已经有类似于Bootstrap这种稳定的类库可以使用，但是对于定制化的input样式同样难以满足，今天我们就自己动手，一起来看看如何使用CSS3实现一个好看的input样式。

CSS3

如果感兴趣的，可以去github上去看源码进行学习，地址如下：

https://github.com/zhouxiongking/article-pages/tree/master/articles/beautifulInput

input-text

首先我们来看下type为text的文本框元素，实现的动态效果如下图所示。

效果图

实现过程

接下来我们来看看这样的效果是如何实现的。页面上的元素主要是以下几个部分。

input元素，将其border设置为none
label元素，与input元素绑定
div元素，实际为下面的横线

我们需要达到的效果是，在未点击input元素时，通过label元素显示提示信息；在input元素获得焦点后label元素会移动到input元素上面，并且显示出动态的获取焦点的过程，此后可以在input元素中正常输入信息。

代码组成

首先我们来看看HTML部分的代码。

HTML代码

通过html部分代码，可以看出页面主要由input，label，div三个元素构成。

然后我们再来看看CSS部分的代码，由于CSS部分代码比较多，我们拆开来看。

先看最外层的容器样式代码如下。

外层容器

然后是input标签的样式，在CSS3中提供了placehoder的样式，在这里为了防止placeholder属性会覆盖到label标签，我们将其透明度设置为0。关于input元素以及其placeholder属性值的css样式部分如下所示。

input样式

紧接着是下面的label标签的样式，因为在input获取焦点时，label元素会移动到input上方，因此需要给label元素加上一个动画效果。label部分代码如下所示。

label部分代码

其次是最下面的一条横线，在input元素未获取焦点的状态下，其长度为0。

横线

最后是在input获取焦点后的样式变化，下面的横线会逐渐延长至最大宽度，而且具有不同的颜色，这一动态效果由下面的代码决定。

获取焦点动态效果

至此，页面上所有的代码均已完成，在浏览器中运行页面后会看到文章开始时的效果。

结束

在万千已经成型的前端框架中，自己写出一个样式也算是一种收获，在后面的文章中，我会继续写关于如何实现checkbox和radio样式的文章，敬请期待~

5行CSS样式码，让你的表格更加漂亮，先放最终效果：

最终样式

HTML表格代码如下：

<table class="style-table">
        <thead>
            <tr>
                <th>序号</th>
                <th>物品名称</th>
                <th>金额</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>洗衣粉</td>
                <td>15.00</td>
                <td>自己用</td>
            </tr>
            <tr class="active-row">
                <td>2</td>
                <td>洁尔阴</td>
                <td>25.00</td>
                <td>老婆用</td>
            </tr>
            <tr >
                <td>3</td>
                <td>搓衣板</td>
                <td>5.00</td>
                <td>自己用</td>
            </tr>
        </tbody>
    </table>

CSS代码如下：

在线咨询

上一篇：2.8秒破百！车内还有5块大屏幕！这简直就是科幻座驾
下一篇：2022年四川省凉山州继续教育网公需科目学习网址登录

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商