前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了。
而现在开始自己练习项目,发现前端知识也不可逃避,之前总觉的前端是记忆的东西,遵循常规套路即可,总感觉繁琐,现在逼着自己学习了DIV+CSS,感觉是自己以前多虑了,什么东西只要你肯学,就不是问题,任何困难在坚持的态度下都会迎刃而解。现在来讲下前端的DIV+CSS:
1、之前的网页布局设计
以前我们依赖于强大的Dreamweaver图形化界面,很轻松的将一个网站布局建立起来,可是这有一个缺点:就是它的代码修改及其繁琐,使用者往往不能根据自己的思想进行修改或者设计,这就对我们对网页源码提出了更高的要求,以前网页布局我们采用网格式的布局方式,遵循常规,模式单一。所以催生出了更高一级的布局,即DIV+CSS。现在一般的网站都是采用这种方式:灵活多样。代码编写的IDE也是很多:记事本、sublime,eclipse、myeclipse等等。
2、首先DIV+CSS到底是什么?
它首先是一个对网站的一个布局,相当于一个网页的架构。由一个个的盒子模型组成,每个DIV即一个盒子,每个盒子都可以嵌套或者包含在另外的盒子里面。而盒子与盒子直接的控制则是利用它的四边的边界来进行分离控制间距。所以DIV组成网页的格局,而css则是装饰的东西。比如建一栋房子,开始的架子是DIV,架子搭建好后开始装饰,这个装饰就是css样式。
盒子模型如下图:
DIV必须和css一起使用,只有这样才有网页的漂亮界面。
再来详细说下css:
利用DIV将网页的骨架搭建好后,我们开始装饰骨架,对于CSS的样式有以下四种:即在网页中使用css的方式:
一、使用STYLE属性: 将STYLE属性直接加在个别的元件标签里。
<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
例如:
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>
这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。
二、使用STYLE标签: 将样式规则写在<STYLE>...</STYLE>标签之中。
代码如下:
<STYLE TYPE="text/css">
<!--
样式规则表
-->
</STYLE>
例如:
<STYLE TYPE="text/css">
<!--
BODY {
color: BLUE;
background: #FFFFCC;
font-size: 9pt}
TD, P {
COLOR: GREEN;
font-size: 9pt}
-->
</STYLE>
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。
三、使用 LINK标签: 将样式规则写在.css的样式档案中,再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。
四、使用@import引入: 跟LINK用法很像,但必 放在<STYLE>...</STYLE> 中。
代码如下:
<STYLE TYPE="text/css">
<!--
@import url(引入的样式表的位址、路径与档名);
-->
</STYLE>
例如:
<STYLE TYPE="text/css">
<!--
@import url(http://yourweb/ example.css);
-->
</STYLE>
要注意的是,行末的分号是绝对不可少的!这种方式也可以把
@import url(http://yourweb/ example.css);
加到其它样式内调用。
以上是四种css的引用方式。
下面是css的样式选择器:
1.css选择器
(1)标记选择器: 选择器 { 属性1:值;属性2:值 }
用来指定确定标记的样式
如:<style>
h1 { color:red;font-size:25px;}
</style>
(2)类别选择器: 标志是点.
.class(类别名称){ 属性1:值;属性2:值;}
如:<style type="text/css">
.one{color:red;font-size:18px; }
</style>
对应的:
<body>
<p class="one">class选择器</p>
(3)ID选择器:标志是#
#id(id选择器) { 属性1:值;属性2:值; }
如:<style type="text/css">
#one{ font-weight:bold; }
#two{ font-size:30px; color:#009900; }
</style>
对应的:
<body>
<p id="one">ID选择器1</p>
<p id="two">ID选择器2</p>
</body>
2. 组合选择器:采用 ,逗号分开
<style type="text/css">
h1, h2, h3, h4, h5, p{ color:purple; font-size:15px; }
h2.special, .special, #one{ text-decoration:underline; }
</style>
对应的:
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
3.关联选择器:即标签内部包含标签,用空格隔开:
例如p标签内部包含em标签:
p em{
}
伪选择器:一般用于p标签或者a标签:即当鼠标点击时是什么样子,离开时是什么样子。详细看下面博文:
http://www.w3cplus.com/css3/pseudo-class-selector
4.css的嵌套
<html>
<head>
<title>CSS选择器的嵌套声明</title>
<style type="text/css">
<!--
p b{ /* 嵌套声明 */
color:maroon; /* 颜色 */
text-decoration:underline; /* 下划线 */
}
-->
</style>
</head>
<body>
<p>嵌套使<b>用CSS</b>标记的方法</p>嵌套之外的<b>标记</b>不生效
</body>
</html>
5.css的继承
如:
<html>
<head>
<title>父子关系</title>
<base target="_blank">
<style>
<!--
h1{
color:red; /* 颜色 */
text-decoration:underline; /* 下划线 */
}
h1 em /* 嵌套选择器 */
{
color:#004400; /* 颜色 */
font-size:40px; /* 字体大小 */
}
-->
</style>
</head>
<body>
<h1>祖国的首都<em>北京</em></h1>
<p>欢迎来到祖国的首都<em>北京</em>,这里是全国<strong>政治、<a href="economic.html"><em>经济</em></a>、文化</strong>的中心</p>
<ul>
<li>在这里,你可以:
<ul>
<li>感受大自然的美丽</li>
<li>体验生活的节奏</li>
<li>领略首都的激情与活力</li>
</ul>
</li>
<li>你还可以:
<ol>
<li>去八达岭爬长城</li>
<li>去香山看红叶</li>
<li>去王府井逛夜市</li>
</ol>
</li>
</ul>
<p>如果您有任何问题,欢迎<a href="contactus">联系我们</a></p>
</body>
</html>效果图:
前端之DIV+CSS布局的更多相关文章
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- DIV+CSS布局网站基本框架
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- DIV+CSS布局-固定页面开度布局
DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
- SEO为什么要求网页设计师用DIV+CSS布局网页?
问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- (转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
随机推荐
- ClassNotFoundException超限
错误日志图 被这弱智的错误吭了半个小时,项目本来好好的,然后因为改版加了很多东西,所以就超限了,一开始总是报下面那图的错,搞的我总以为是retrofit的错,但是好好的框架而且没改过,怎么可能会出错呢 ...
- ASP.NET压缩输出的HTML内容
在ASP.NET中,怎么压缩输出的HTML内容,怎么替换HTML中的换行符,空白,TAB等符号呢? 1.新建一个基类,继承自System.Web.UI.Page,代码如下: using System. ...
- SE Springer小组《Spring音乐播放器》软件需求说明3
3 需求规定 3.1对功能的规定 基本功能与相关的输入输出如下表所示.歌曲播放.停止.暂停等功能调用MCI库,数据在MCI库下如何运作与用户的直观感受无关,就不具体列出. 输入 处理 输出 用户登录信 ...
- 使用ganglia监控hadoop及hbase集群
一.Ganglia简介 Ganglia 是 UC Berkeley 发起的一个开源监视项目,设计用于测量数以千计的节点.每台计算机都运行一个收集和发送度量数据(如处理器速度.内存使用量等)的名为 gm ...
- Windows Server 2012 虚拟化实战:SCVMM的安装和部署
本篇大概介绍一下在Windows Server 2012 R2上安装和部署SCVMM的过程及其注意事项.下图是我们数据中心SCVMM的基本架构,其中 SCVMM Database 是用于存储了所有配置 ...
- Linux下如何查看版本信息
Linux下如何查看版本信息, 包括位数.版本信息以及CPU内核信息.CPU具体型号等等,整个CPU信息一目了然. 1.# uname -a (Linux查看版本当前操作系统内核信息) L ...
- 4-安装workpress
安装wordpress 软件下载 https://cn.wordpress.org/releases/ 在mysql数据库中创建wordpress数据库 mysql> create databa ...
- Java 加解密技术系列文章
Java 加解密技术系列之 总结 Java 加解密技术系列之 DH Java 加解密技术系列之 RSA Java 加解密技术系列之 PBE Java 加解密技术系列之 AES Java 加解密技术系列 ...
- C# 多线程之Task资料
博客 Stephen Toub From MicroSoft Crop. Stephen Cleary Parallelism in .NET 文章 It's All About the Sync ...
- USACO . Friday the Thirteenth
Friday the Thirteenth Is Friday the 13th really an unusual event? That is, does the 13th of the mont ...