CSS学习(中2/2) 前端入门很简单

五 用CSS制作链接与网站导航

1.超链接基础

2.链接标记

3.各种形式的超链接

4.项目列表

六 CSS+DIV布局入门基础

1.网站与web标准:web标准中的经典应用模式是“CSS+Div”

2.什么是web标准

3.怎样改进现有网站

4.Div标记与Span标记

5.盒子模型

6.盒子的浮动与定位


五 用CSS制作链接与网站导航

1.超链接基础

1.超链接的基本概念:

.绝对路径

  绝对路径是包括服务器规范在内的完全路径。不管源文件在什么位置,通过绝对路径都可以非常精确的将目标文档找到,除非它的位置发生变化,否则连接不会失败。

  采用绝对路径的好处是,它与链接的源端点无关。只要网站的地址不变,则无论文档在站点中如何移动,都可以正常实现跳转而不会发生错误。另外,如果如果希望连接到其它站点上的文件,就必须使用绝对路径。

  采用绝对路径的缺点在于,这种方式的链接不利于测试。如果在站点中使用绝对路径,要想测试链接是否有效,就必须在Internet服务器端对链接进行测试。

.相对路径

  相对路径也叫文档相对路径,对大多数的本地链接来说,是最适合的路径。在当前文档与所链接的文档处于同一文件夹内时,文档相对路径特别有用。文档相对路径还可以用来链接到其它文件夹中的文档,方法是利用文件夹的层次结构,指定从当前文档到所链接文档的路径。

 

2.使用页面属性设置超链接

  <style type=”text/css”>

a {font-family:”黑体”;font-size: 15px; color: #F54447;}

a:visited {color: #627B04;}

a:hover {color: #9A830C;}

a:active { color: #F4C16C;}

</style>

 

2.链接标记

  1. a:link:表示未访问过的链接的状态,link选择器不会设置已经访问过的链接的样式。
  2. a:visited:表示超链接被访问过后的样式
  3. a:active:表示超链接的激活状态,用来定义鼠标单击链接但还没有释放之前的样式。
  4. a:hover:表示当鼠标移到链接上时的样式。

 

3.各种形式的超链接

1.背景色变幻链接

下面使用CSS制作一个背景色变换的超链接

<ul class=”leftmenu”>

<li><a target=”_blank” href=”#”>首页</a>

<li><a target=”_blank” href=”#”>公司简介</a>

<li><a target=”_blank” href=”#”>公司新闻</a>

<li><a target=”_blank” href=”#”>产品展示</a>

</ul>

body {

font-family:”黑体”;

font-size: 14pt

}

.menu {

width:130px;

text-align: center;

}

.menu li {

display: inline;

white-space: nowrap;

}

.menu span,

.menu a:active,

.menu a:visited,

.menuu a:link {

display: block;

text-decoration: none;

margin: 6px 10px 6px 0px;

padding: 2px 6px 2px 6px;

color:#000000;

background-color:#D1F968;

border: 1px solid #CC3300;

}

.menu a:hover {

color: #FFFF00;

background-color:#CC3300;

}

.menu span {

color: #a13100;

} }

 

2.下划线链接

代码实例:

<style>

.a {

text-decoration:none;

background: url(ti.gif) repeat-x 100% 100%;

padding-bottom; 4px;

white-space: nowrap;}

</style>

font-family:”黑体”;

font-size: 30pt

<p><span class=”a”><a href=”#”>下滑线连接</a></span></p>

 

3.图像翻转链接

  制作原理就是a:link和a:hover在不同状态下,利用background-images显示不同的图像制作而成。

4.边框变换链接

  边框变换链接是指当鼠标经过链接时改变连接对象边框的样式,包括边框颜色、样式和边框宽度。

 

4.项目列表

1.有序列表

1)有序列表标记:ol

  ol标记的属性

 

属性名

说明

标记固有属性

type=项目符合

有序列表中列表项的项目符号格式

start

有序列表中列表项的起始数字

可在其它位置定义的属性

id

在文档范围内的识别标志

lang

语言信息

dir

文本方向

title

标记标题

style

行内样式信息

 

基本语法:

<ol>

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

...

</ol>

语法说明:

  在该语法中,<ol>和</ol>表示这有序列表的开始和结束,而<li>和</li>标记表示一个列表项的开始。

 

2)有序列表的类型:type

  在默认情况下,有序列表的类型是数字,通过type属性可以设置有序列表的类型。

有序列表的类型

类型值

含义

1

数字1、2、3/4......

a

小写英文字母

A

大写英文字母

i

小写罗马数字

I

大写罗马数字

基本语法:

<ol type=”有序列表的类型”>

<li>项目一</li>

<li>项目二</li>

<li>项目三</li>

...

</ol>

 

3)有序列表的起始数值:start:使用start属性可以调整有序列表的起始数值,这个数值可以对数字起作用,也可以作用于英文字母或者罗马数字。

基本语法:

<ol start=”起始数值”>

<li>列表</li>

<li>列表</li>

<li>列表</li>

...

</ol>

 

2.无序列表

1)无序列表标记:ul

ul标记的属性

 

属性名

说明

标记固有属性

type=项目符合

定义无序列表中列表项的项目符号图形样式

可在其他位置定义的属性

id、class

在文档范围内的识别标志

lang

语言信息

dir

文本方向

title

标记标题

style

行内样式信息

基本语法:

<ul>

<li>列表</li>

<li>列表</li>

<li>列表</li>

...

</ul>

2)设置无序列表的类型:type:默认情况下,无序列表的项目符号是●,而通过属性可以调整。

类型值

含义

disc

circle

square

基本语法:

<ul type=”符号类型”>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

...

</ul>

3.菜单列表标记

基本语法:

<menu>

<li>列表项<//li>

<li>列表项<//li>

<li>列表项<//li>

...

</menu>

4.目录列表:dir:用于显示文件内容的目录大纲,通常能够设计一个压缩的比较窄的列表,以及显示一系列的列表内容。

基本语法:

<dir>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

...

</dir>

 

5.横排导航

1.文本导航

  一般位于网站的顶部,是一种比较重要的导航行驶。

2.标签式导航

3.竖排导航

  #nave对象是竖排导航的容器。

 

六 CSS+DIV布局入门基础

  设计网页的第一步时设计布局

1.网站与web标准:web标准中的经典应用模式是“CSS+Div”

2.什么是web标准

  网页主要由3个部分组成:结构、表现和行为。对应的网站标准也分为3个方面:结构化标准语言,主要包括XHTML和XML;表现标准语言主要包括CSS;行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。

1)结构

  结构(structure)对网页中用到的信息进行分类与整理。在结构中用到的技术主要包括HTML、XML和XHTML。

2)表现

  表现(presentation)用于对信息进行板式、颜色、大小等形式的控制。在表现中用到的技术主要是CSS叠层样式表。

3)行为

  行为(behavior)是指文档内部的模型定义及交互行为的编写,用于编写交互式的文档。在行为中用到的技术主要包括DOM和ECMAScript.

DOM(Document Object Model)文档对象模型:是浏览器与内容结构之间的沟通接口,使你可以访问页面上的标准组件。

ECMAScript脚本语言:是标准脚本语言,用于实现具体的界面上对象的交互操作。

 

3.怎样改进现有网站

  大部分设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHEML+CSS的方法需要一个过程,要分阶段来逐步达到网站标准。

1.初级改进

.为网页添加正确的doctype

.设定一个名字空间

.声明编码语言

.用小写字母书写所有的标签

.为图片添加alt属性

.给所有属性值加引号

.关闭所有的标签

 

2.中级改进

.用CSS定义元素外观

.用结构化元素替代无意义的垃圾代码

.给每个表格和表单加上id

 

4.Div标记与Span标记

1.Div概述

实例代码:

<!doctype html>

<html>

<head>

<meta charset=”utf-8”>

<title>DIV的简单实用</title>

<style type=”text/css”>

<!--

div{

font-size:26px;

font-weight:bold;

font-family:Arial;

color:#5C1012;

background-color:#A3F020;

text-align:center;

width:500px;

height:150px;

}

-->

</style>

 </head>

<body>

</div>div的简单实用</div>

</body>

</html>

 

2.Div与Span的区别

  Span是用来定义内嵌内容而不是大块内容的,Div是一个块级元素也可以包含段落、标题、表格,甚至如章节、摘要和备注等。而Span是行内元素,span的前后是不会换行的,他没有结构意义,纯粹是应用样式,当其他行内元素都不适合,可以使用span。

 

5.盒子模型

1.盒子模型概念

一个盒子由4个独立部分组成

最外面的是边界(margin)

第二部分是边框(border)。边框可以有不同的样式

第三部分是填充(padding)。填充可以用来定义内容与边框之间的空白。

第四部分是内容区域。

  填充边框都分为“上、右、下、左”4个方向。为了计算盒子所占的实际区域必须加上padding、border和margin。

实际宽度=左边界+左边框+左填充+内容高度+右填充+右边框+右边界

 

2.border

1)边框样式:border-style

基本语法:

border-style:样式值

border-top-style:样式值

border-right-style:样式值

border-bottom-style:样式值

border-left-style:样式值

语法说明:

边框样式取值和含义

属性值

描述

none

默认值,无边框

dotted

点线边框

dashed

虚线边框

solid

实线边框

double

双实线边框

groove

3D凹槽

ridge

3D凸槽

inset

使整个边框凹陷

outset

使整个边框突起

 

2)边框颜色:border-color

基本语法:

border-color:颜色值

border-top-color:颜色值

border-right-color:颜色值

border-left-color:颜色值

border-bottom-color:颜色值

 

3)边框宽度:border-width

基本语法:

border-width:宽度值

border-top-width:宽度值

border-right-width:宽度值

border-left-width:宽度值

border-bottom-width:宽度值

语法说明:

border-width的属性值

medium

默认值

thin

dashed

 

2.padding

基本语法:

padding:取值

padding-top:取值

padding-right:取值

padding-left:取值

padding-bottom:取值

语法说明:

td {padding: 0.5cm 1cm 4cm 2cm}

 

3.margin

基本语法:

margin:边距值

margin-top:上边距值

margin-bottom:下边距值

margin-left:左边距值

margin-right:右边距值

语法说明:

取值范围如下:

.长度值相当于设置顶端的绝对边距值,包括数字和单位。

.百分比是设置相对于上级元素的宽度的百分比,允许使用负值

.auto是自动取边距值,即元素默认值。

代码如下:

.top {margin-top: 4px;

margin-right: 3px;

margin-bottom: 3px;

margin-left: 4px;}

 

6.盒子的浮动与定位

1.盒子的浮动float

基本语法:

float:none| left | right

语法说明:

none是默认值,表示对象不浮动;left表示对象浮在左边;right表示对象浮在右边。

CSS允许任何元素浮动。无论先前元素是什么状态,浮动后都成为块级元素。浮动元素的宽度默认为auto。

 

2.position定位

基本语法:

Position: static | absolute | fixed | relative

语法说明:

.static:静态(默认),无定位

.relative:相对,对象不可层叠,但将依据left、right、top、bottom等属性在正常文档流中偏移位置。

.absolute:绝对,将对象从文档流中拖出,通过width、height、left、right、top、bottom等属性与margin、padding、border进行绝对定位。绝对定位可以有边界,但这些边界不压缩。而其层叠通过z-index属性定义。

.fixed:固定。

 

3.z-index空间位置

  z-index是设置对象的层叠顺序的样式。该样式只对position属性为relative或absolute的对象有效。

基本语法:

z-index:auto,数字

语法说明:

auto遵从其父对象的定位,数字必须是无单位的整数值,也可以取负值。z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定次属性的定位对象,z-index值为正数的对象会在其之上,负数的在下。(z-index用来定位元素,用来确定定位元素在垂直于显示屏方向(成为Z轴)上的层叠顺序)

实例代码:

<!doctype html>

<html>

<head>

<meta charset=”utf-8”>

<title>z-index</title>

<style type=”text/css”>

<!--

#Layer1 {

position:absolute; left:56px; top:115px; width:283px; height:140px;

z-index:-5; background-color:#FFA8A9;}

#Layer2 {

position:absolute; left:226px; top:60px; width:286px; height:108px;

z-index:1; background-color:#76FF81;}

#Layer13{

position:absolute; left:256px; top:141px; width:234px; height:145px;

z-index:-10; background-color:#F8F760;}

-->

</style>

</head>

<body>

<div id=”Layer1”><strong>z-index:-5;</strong></div>

<div id=”Layer2”><strong>z-index:1;</strong></div>

<div id=”Layer3”><strong>z-index:10;</strong></div>

</body>

</html>

@欢迎大家指出问题,谢谢

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

threecat.up

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值