DIV+CSS标准化布局
1、DIV+CSS布局
说明:在网页开发制作中,需要对页面内容进行“模块化标准布局”,把内容放入到某个位置,让页面形成固定规律展示出来
模块化:在网页中所有的内容都是以块来展示的
标准化:在开发网站时是有一定的标准的,W3C制定标准。
优点:为了把HTML页面和CSS代码进行分离,在以后的维护时和合作开发时有利于搜索引擎的抓取。
2、无意义的“div”和“span”
说明:在HTML标记中一般都是有自带“名称”,如:h1是标题,a是超链接
只有div和span是没有意义的,所以布局就使用div和span,div一般给大块的内容布局,span是给行内的内容布局。
块元素:不管内容多少,都会占一行,可以改变大小,还是独占一行
行内元素:内容多少占多少
3、块元素和行内元素的互相转换
display的描述:1块元素和行内元素的转换 Block(块)、inline(行内)、inline-block(行内块)
2显示和隐藏 None(隐藏)、block(显示)
<head>
<style type="text/css">
a{
border: 1px solid red;
width: 100px;
display:block;/*转换成块元素*/
display: inline-block;/*转换成行nne内块*/
text-align: center;
}
a.a4{
display: none;/*隐藏*/
display: block/*显示*/
}
</style>
</head>
<body>
<a href="#">首页</a>
<a href="#">简介</a>
<a href="#">新闻</a>
<a class="a4" href="#">联系我们</a>
</body>
DIV+CSS标准化布局的更多相关文章
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- div,css&table布局有哪些区别
DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...
- <转载>div+css布局教程之div+css常见布局结构定义
在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...
- 常见div+css网页布局(float,absolute)
网页布局-常见 1, float布局 (1)常规方法 <div id="warp"> <div id="column&quo ...
- 对于用div+css随心所欲布局的思考
在div+css取代Table成为主流的时代,学会用其进行随心所欲的布局是一个不可回避的技能.那么,重点掌握哪几个要点呢? 整体布局:从整体到局部的顺序进行布局,逐步定义div集css样式: 灵活运用 ...
- 利用Div+CSS整体布局页面的操作流程
简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>: <!DOCTYPE html><html> <head> <meta chars ...
- 第6天:DIV+CSS页面布局实战
今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...
- div css float布局用法
float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...
随机推荐
- python的起源及基本语句
一.Python的起源 Python是吉多范罗苏姆于1989年的圣诞节期间在阿姆斯特丹进行编写的,于1991年编写完成,Python是一门解释型弱类型的编程语言. Python在多个领域中都有应用,比 ...
- System.Byte.cs
ylbtech-System.Byte.cs 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934 ...
- 使用Navicat连接管理远程linux服务器上的mysql数据库
第一步:选择连接,选择mysql 第二步:填写下面弹出框的信息:连接名随便写,主机名或IP地址:写上服务器的ip. 端口不变 用户名不变. 密码:输入服务器数据库的密码12345678. 接着测 ...
- day4:Python列表(list)元组( tuple)字典(dict)
列表----list 列表:中括号,每个元素用‘,’分割,列表里面也可以嵌套列表,列表里面可以包含数字,字符串,布尔值等,也就是元素的集合 例:test = [2,4,'sun','yao'] #索引 ...
- 20.multi_case01
# 多进程,使用Pool from multiprocessing import Pool def f(x): return x*x if __name__ == '__main__': p = Po ...
- 13-5-let和()的作用域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android开发 设备横屏与竖屏的详解
需要了解横竖屏切换关键知识 1.在Android设备的横竖屏幕,每一次切换横竖屏其实是在重新创建Activity,Activity会重新走一遍生命周期.从onCreate 到 onDestroy 2. ...
- 中国剩余定理模数互质的情况模板(poj1006
http://poj.org/problem?id=1006 #include <iostream> #include <cstdio> #include <queue& ...
- 异常处理记录: Servlet class X is not a javax.servlet.Servlet
使用Maven的tomcat插件启动Web项目, 访问资源时, 发生如下异常: https://stackoverflow.com/questions/1036702/my-class-is-not- ...
- HashMap数据结构
2.1 HashMap 2.1.1 HashMap介绍 先看看HashMap类头部的源码: public class HashMap<K,V> extends AbstractMap< ...