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">
<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:; padding:; 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:; 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:; top:; bottom:; overflow: hidden; width: 500px; height: 250px; margin: auto;}
.banner ul li img { overflow: hidden; width: 100%;}
.banner ul li.active { z-index:; right:; /*设置水平居中*/ left:; width: 600px; height: 300px;}
.banner ul li.left { /*设置在左边*/ left:;}
.banner ul li.right { /*设置在右边*/ right:;} /*主体部分*/
.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:; 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:;}
/*# sourceMappingURL=style.css.map */
效果图
H5网页布局+css代码美化的更多相关文章
- 网页布局 CSS实现DIV并列等高
同事去笔试遇到的问题 要求3列div根据内容的变化通过css实现等高 效果图: 原理: 同列的div设置一个父级 overflow:hidden 超出部分隐藏 给同列的div设置css margin- ...
- Web设计之网页布局CSS技巧
1.两列布局 1.1.左列固定,右列自适应 #left{ width:190px; float:left; } #right{ margin-left:205px; } 1.2.右列固定, ...
- 用图片做div背景的列表布局 CSS代码
思路: 1.因为是竖型列表,所以外层用 相对定位,这样 在不会重叠在一起 relative 2.里面用绝对位置 absolute,覆盖在图片上面 3.这里有个小技巧,我里面有个特效,文字竖立,并向右旋 ...
- 【网页布局基础】css布局学习总结
三种定位机制 1.标准文档流:从上到下,从左到右输出文档内容 2.浮动 3.绝对定位 需要注意的是块级元素如div p ul 等 行级元素如span strong img input等 块级元素与行级 ...
- [CSS属性设置,盒子模型,网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- MasonJS – 创建完美的砌体结构网页布局
MasonJS 插件用来解决目前大多数的网格系统使用中的问题——间距.当使用 Masonry,Isotope 或任何其他网格插件时,布局中会出现空白或边缘参差不齐的情况.MasonJS 可以帮助你填补 ...
- 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
- PHP.3-DIV+CSS标准网页布局准备工作(上)
DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
随机推荐
- HanLP《自然语言处理入门》笔记--6.条件随机场与序列标注
笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 6. 条件随机场与序列标注 本章介绍一种新的序列标注模型条件随机场.这种模型与感知 ...
- 开源镜像站-Android镜像
mirrors.neusoft.edu.cn www.opencas.org ubuntu.buct.edu.cn Android developer 最新国内镜像:http://wear.techb ...
- ThreadLocal源码分析-黄金分割数的使用
前提 最近接触到的一个项目要兼容新老系统,最终采用了ThreadLocal(实际上用的是InheritableThreadLocal)用于在子线程获取父线程中共享的变量.问题是解决了,但是后来发现对T ...
- 微信小程序—Flex布局
参考教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html https://xluos.github.io/demo/flexb ...
- 用MYSQL的存储过程创建百万级测试数据表
创建随机字符串函数,便于创建名称 DROP function if EXISTS rand_string; #创建一个指定字符个数的函数 create function rand_string(n I ...
- CodeForces 1B 模拟题。
H - 8 Time Limit:10000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Statu ...
- 杭电------2048神上帝以及老天爷(C语言写)
#include<stdio.h> ] = { -,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,-,- }; ] = { }; long long jiec ...
- 蓝桥杯ALGO-1,区间k大数查询
#include<stdio.h> int devide(long a[], int low, int high) { long key = a[high]; while (low< ...
- 【转】netty-transport版本冲突
Springboot整合Elasticsearch报错 今天使用SpringBoot整合Elasticsearch时候,相关的配置完成后,启动项目就报错了. nested exception is j ...
- go每日新闻--2020-02-19
gocn_news_2020-02-19 1.使用 t.Cleanup 做测试收尾 https://ieftimov.com/post/testing-in-go-clean-tests-using- ...