(一)初识div+css
关于div+css，一直以来都是听其名，而不知其为何。今天看了半天的视频，终于对此略有了解，感觉挺好的，相比之前的table布局页面，div+css就是一把页面布局利器！！
div全称division（分割、分开、部门），css全称Cascading style sheet（层叠式样式表）
网页的布局分为三个时期：table布局，table+css布局（过渡时期），div+css布局（当前主流）
相对于div+css布局，table布局的缺点：1、显示样式和数据绑定在一起；2、布局的灵活度不高；
3、大量的<table>标签，造成代码冗余；4、带宽较大；5、搜索引擎不喜欢
优点： 1、理解比较简单；2、不同浏览器，显示结果相同；3、显示数据效果很好
简单描述了div+css之后，那么如何使用它们呢？
使用css，需要小了解css的常用选择器：
1、类选择器：定义格式（.class1{属性1：值; 属性2：值;}）
引用格式：<div class="class1"> </div>
2、id选择器：定义格式（#id1{属性1：值; 属性2：值;}）
引用格式：<div id="id1"> </div>
3、html元素选择器：定义格式（元素{属性1：值; 属性2：值;}）
引用格式：<元素></元素>
4、通配符选择器：定义格式（*{属性1：值; 属性2：值;}）
应用于页面内的所有内容
5、父子选择器：定义格式（.class1 span{属性1：值; 属性2：值;}或.id1 span{属性1：值; 属性2：值;}）
<div class="class1"或者id="id1">不<span>抛弃</span>不<span>放弃</span></div>
注意：父子选择器不能有太多级数
选择器的优先级：id选择器>类选择器>html元素选择器>通配符选择器
构造了css之后，那么如何在html文件中进行引用呢？
html中引用css有三种方式：
1、外部样式表：
<head>
<link rel="stylesheet" type="text/css" href="名字1.css"/>
<link rel="stylesheet" type="text/css" href="名字2.css"/>
<link rel="stylesheet" type="text/css" href="名字3.css"/>
</head>
2、内部样式表
<head>
<style type="text/css">
body{属性1：值; 属性2：值;}
p{属性1：值; 属性2：值;}
</style>
</head>
3、内联样式表
<p style="属性1：值; 属性2：值"></p>
优先级：内联样式表>内部样式表>外部样式表
css文件中，若多个选择器有相同的属性值，如何操作呢，或者一个css文件如何引入另一个css文件呢？
1、若一个css文件中的多个选择器有相同的属性值
.class1,#id1,p{属性1：值; 属性2：值;} /*相同属性进行合并*/
2、一个css文件引入另一个css文件
@import url() /*将多个css文件导入到一个css文件中，如今通常使用link方法*/
css的使用基本就是这些了，关于属性的设置还有很多内容，由于刚开始学习，知道的属性少之又少，看来这部分主要靠查阅帮助文档进行熟记了。。
(一)初识div+css的更多相关文章
- 初识DIV+CSS
div元素是用来为html文档内大声(block-level)的内容提供结构和背景的元素. css是Cascading Style Sheets(层叠样式表单)的缩写,是一种用来表现html或xml等 ...
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- div+css页面右侧底部悬浮层
效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...
- DIV+CSS规范命名大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...
- DIV+CSS 清除浮动方法总结
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
- 十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
- DIV+CSS布局网站基本框架
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- DIV+CSS常用的网页布局代码
单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...
随机推荐
- 题解 P1876 【开灯】
题目链接 编者说得对 一道很明显的数学题,相信大家小学都做过. 通俗一点,就是找因数为奇数个的数.而这一类的数.明显的是平方数. 所以就是找n以内的平方数. 废话少说,直接上题解. #include& ...
- luoguP2664 树上游戏
https://www.luogu.org/problemnew/show/P2664 考虑对于每种颜色包含的点和这些点的子节点建出虚树,发现只要将一个联通块中的东西 Dp + 差分一下就行了 当然要 ...
- mysql自动备份并上传至git仓库
自动备份 备份需求 数据库备份的重要性再怎么强调也不为过.当你的操作出现差错,但又因为没有作备份导致数据无法还原时,你就能体会到“万念俱灰”的心情了. 数据库备份有多种形式,本文以我的个人网站数据 ...
- GCD BZOJ2818 [省队互测] 数学
题目描述 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. 输入输出格式 输入格式: 一个整数N 输出格式: 答案 输入输出样例 输入样例#1: 复制 4 ...
- LeetCode8. 字符串转整数 (atoi)
8. 字符串转整数 (atoi) 描述 实现 atoi,将字符串转为整数. 在找到第一个非空字符之前,需要移除掉字符串中的空格字符.如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连 ...
- 【原创】nginx入门
一.简介 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点( ...
- Loj 6433. 「PKUSC2018」最大前缀和 （状压dp）
题面 Loj 题解 感觉挺难的啊- 状压\(dp\) 首先,有一个性质 对于一个序列的最大前缀和\(\sum_{i=1}^{p} A[i]\) 显然对于每个\(\sum_{i=p+1}^{x}A[i] ...
- zoj4062 Plants vs. Zombies 二分+模拟（贪心的思维）
题目传送门 题目大意:有n个植物排成一排,标号为1-n,每株植物有自己的生长速度ai,每对植物浇一次水,该株植物就长高ai,现在机器人从第0个格子出发,每次走一步,不能停留,每一步浇一次水,总共可以走 ...
- Codeforces 1136D Nastya Is Buying Lunch (贪心）
题意: 给一个序列和一组交换序列(a,b),当且仅当a在b的前面(不允许有间隔),这两个数才能交换,问最后一个数最多能移动多少个位置. 分析: 这题是思路是十分的巧妙呀 , 用一个数组num[x] ...
- Aop之使用Castle动态代理实现对方法的拦截
using System; using System.Linq; using Castle.DynamicProxy; namespace AopTest { class AopTest { stat ...