1.HTML的框架集
1.1 框架集概述
<!--
通过多个子页面的组合,形成了框架集
应用场景:一般只做模板形式的框架页面,现在用得少,都被div所取代;(以前老项目常用)
使用:frameset标签,与body标签不能共存
子标签:frame,通过src属性去引入子页面
noresize="noresize":固定大小
-->
<!-- 案例:在框架集中显示3列的子页面 -->
<frameset cols="20%,*,30%">
<frame src="a.html"/>
<frame src="b.html" noresize="noresize"/>
<frame src="c.html"/>
</frameset>
1.2 框架集案例
<!-- 案例: 先按行划分2行,再按列划分两列的框架集 -->
<frameset rows="20%,*">
<frame src="head.html" />
<frameset cols="15%,*">
<frame src="menu.html" />
<!-- name属性:相当于超链接的设置锚点 -->
<frame src="content.html" name="cont" />
</frameset>
</frameset>
<body bgcolor="red">
<a href="http://sina.com.cn" target="cont">新浪搜索</a><br />
</body>
2. CSS的使用
2.1 样式分类及基本选择器(重点)
<head>
<meta charset="UTF-8">
<title></title>
<!-- 外部样式 -->
<link rel="stylesheet" type="text/css" href="../css/red.css"/>
<!-- 样式的场景:
行内样式:用在简单单个标签的测试
内部样式: 用在当前页面中,项目中常用
外部样式:在多个页面中复用,项目中常用
样式优先级:行内>(内部=外部,看顺序)
-->
<!-- 内部样式 -->
<style type="text/css">
/* 通过选择器来设置样式属性 */
/* *{}: 通配符选择器(了解)
* 场景:
* 标签选择器: 标签{...}: 一般用在测试中
* 类选择器: .类名{...}:有多个设置class属性的标签 (项目中常用)
* id选择器: #id{...}:唯一标签的设置(项目中常用)
* 优先级:id>class>标签
*
* */
div{
color: blue;
font-size: 36px;
font-family: "arial narrow";
}
/* #hh{
color: green;
}*/
/* .cc{
color: red;
}*/
</style>
</head>
<body>
<!--什么是CSS:层叠样式表,多个样式可以层叠为一(叠加到html),如果样式出现冲突,则选择优先级高的
与html的关系:html相当于毛坯房,那CSS就是内部及外部装修
CSS作用:美化效果,表现(CSS)与内容(html)分离, 使得标签的结构更简洁
CSS使用:通过选择器来设置样式属性
选择器格式:选择器{属性:值;属性2:值2;}
-->
<!-- 行内样式:了解 -->
<p>段落标签</p>
<div id="hh" class="cc">容器标签</div>
</body>
2.2 属性选择器
<head>
<meta charset="UTF-8">
<title></title>
<!-- 属性选择器:基本选择器[属性][属性=‘值’]{...} -->
<style type="text/css">
h1[name='zs'][id]{
color: red;
}
</style>
</head>
<body>
<h1 name='zs' id="xx">标题1</h1>
<h1 name='zs'>标题2</h1>
</body>
2.3 伪元素选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 伪元素选择器:用在a标签中,针对鼠标不同动作,显示不同效果 */
a:link{ /* 未访问时的效果 */
color: red;
}
a:hover{ /*鼠标悬停效果 */
color: green;
}
a:active{ /* 触发未放开鼠标的效果 */
color: yellow;
}
a:visited{ /*完成后的效果*/
color: gray;
}
</style>
</head>
<body>
<h1><a href="#">点我吧</a></h1>
</body>
2.4 层级选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 层级选择器: 后代,子代,相邻兄弟 */
/* 后代选择器: 父选择器 子选择器{}: 后代都起作用
* 子代选择器: 父选择器>子选择器{}: 儿子起作用
* 相邻兄弟选择器: 选择器+选择器{}: 相邻兄弟起作用
* */
/*ul a{
color: red;
}*/
/*ul>a{
color: green;
}*/
#xx+li{ /*作用在兄弟上,自己不起作用 */
color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a href="#">床前明月光</a></li>
<li id="xx"><a href="#">疑是地上霜</a></li>
<li><a href="#">举头望明月</a></li>
<a href="#">低头思故乡</a>
</ul>
</body>
3. 样式属性(重点)
3.1 基本样式属性
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
/* 文字属性 */
font-size: 40px;
font-family: "微软雅黑";
font-style: italic; /*斜体 */
font-weight: bold; /* 1~599 细体 600~900粗体*/
/* 文本属性 */
color: red;
text-indent: 50px; /* 文本缩进 */
text-decoration: underline; /* 划线修饰 */
/*text-align: center;*/ /*文本对齐 */
line-height: 120px; /*带格式行高 */
/*height: 120px;*/ /*不带格式的行高 */
word-spacing: 30px; /*字间距 */
border: 4px blue solid; /*1.线条宽度 2.颜色 3.样式:实线,虚线,点线等 */
/*四个取值依次是: 水平偏移;垂直偏移;模糊值;阴影颜色;*/
text-shadow: 30px 40px 30px gray;
/* 背景属性 */
/*
background-color: yellow;
background-image: url(../img/002.png);
background-repeat: no-repeat;
background-position: 30px 50px;
*/
/* 背景属性组合 */
background: yellow url(../img/005.png) no-repeat;
}
</style>
</head>
<body>
<div>样式 属性</div>
</body>
3.2 列表属性(了解)
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 列表属性,可以将列表标签的类型改变(了解) */
ol{
list-style-type: disc; /*改无序效果 */
list-style-image: url(../img/002.png);
list-style-position: inside; /*显示到内部 */
}
</style>
</head>
<body>
<ol>
<li>草根精神</li>
<li>创新精神</li>
<li>协同精神</li>
<li>奉献精神</li>
</ol>
</body>
3.3 尺寸与显示属性
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 尺寸的属性设置: 宽,高 */
div{
width: 200px;
height: 150px;
border: dashed 3px red;
/* 显示属性:块级显示(默认):独占一行,行级显示,行级块:不换行,保留宽高 */
display: inline; /*行级:不换行,且不保留宽高 */
}
</style>
</head>
<body>
<div>第一个盒子</div>
<div>第二个盒子</div>
</body>
3.3 轮廓属性(了解)
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 轮廓属性: 与边框属性用法一致(了解) */
div{
width: 200px;
height: 200px;
/*
outline-color: yellow;
outline-style: solid;
outline-width: 4px;
*/
outline: solid 4px yellow; /*轮廓属性组合 */
/*
border-color: blue;
border-width: 3px;
border-style: dashed;
*/
border: dashed blue 3px; /*边框组合*/
}
</style>
</head>
<body>
<div>轮廓属性与边框区别</div>
</body>
3.4 浮动属性(重点)
<head>
<meta charset="UTF-8">
<title></title>
<!-- 浮动:
标签设计都是基于标准文档流自上而下的排版;如果需要编程横向排列,需要进行浮动
注意:设置了浮动之后,用完了要清除浮动,否则脱离了文档流的设计,排版变得混乱
-->
<style type="text/css">
.one{
width: 100px;
height: 120px;
background-color: red;
/*float: right;*/ /*浮动到右边 */
float: left; /* 向左浮动 */
}
.two{
background-color: green;
float: left; /* 向左浮动 */
}
.three{
background-color: blue;
float: left; /* 向左浮动 */
}
.dd{
width: 100px;
height: 100px;
}
#parent{
width: 299px; /*如果父容器宽度不够,第三个盒子和移到下面 */
overflow:hidden; /*清除浮动2 */
}
#clear{
clear: both; /* 清除浮动 */
}
</style>
</head>
<body>
<div id="parent">
<div class="one"></div> <!-- 红色 100px -->
<div class="dd two"></div> <!-- 绿色 100px-->
<div class="dd three"></div> <!--蓝色 100px -->
<!--清除浮动1: -->
<!--<div id="clear"></div>-->
</div>
<h2>标题2</h2>
</body>
4. 定位与模型
4.1 相对定位
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 定位: 相对定位,绝对定位,固定定位 */
/* 相对定位:相对于当前位置的定位,移动后,保留原有位置 */
.dd{
width: 100px;
height: 100px;
}
.one{
background-color: red;
}
.two{
background-color: green;
left: 50px; /*左边间隔50px*/
top: 30px; /*上边移动30px */
position: relative; /* 相对定位 */
}
.three{
background-color: blue;
}
</style>
</head>
<body>
<div class="dd one"></div> <!-- 红色 100px -->
<div class="dd two"></div> <!-- 绿色 100px-->
<div class="dd three"></div> <!--蓝色 100px -->
</body>
4.2 绝对定位
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 定位: 相对定位,绝对定位,固定定位 */
/* 绝对定位:相对于父容器的定位,如果父容器没有,则最后基于body的定位,
* 且绝对定位,不会保留原有位置 */
.dd{
width: 100px;
height: 100px;
}
.one{
background-color: red;
}
.two{
background-color: green;
left: 50px; /*左边间隔50px*/
top: 30px; /*上边移动30px */
position: absolute; /* 绝对定位 */
}
.three{
background-color: blue;
}
.parent{
border: solid black 2px;
position: relative; /*相对于父容器的定位 */
}
</style>
</head>
<body>
<div class="dd parent">
<div class="dd one"></div> <!-- 红色 100px -->
<div class="dd two"></div> <!-- 绿色 100px-->
<div class="dd three"></div> <!--蓝色 100px -->
</div>
</body>
4.3 固定定位
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 固定定位:与绝对定位一致,只是固定定位,任何情况下不会移动位置 */
#left {
width: 200px;
height: 200px;
background-color: red;
position: fixed;
left: 0px;
bottom: 0px;
}
#right {
width: 200px;
height: 200px;
background-color: green;
position: fixed;
right: 0px;
bottom: 0px;
}
#middle{
width: 200px;
height: 200px;
background-color: blue;
position: fixed;
left: 0px;
bottom: 50%;
}
</style>
</head>
<body>
<div id="left">左下</div>
<div id="right">右下</div>
<div id="middle">中间</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
4.4 盒子模型
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dd{
width: 100px;
height: 100px;
}
/* 边框:将基本值括起来
* 内边距:边框和内容之间的间距,默认为0,会将盒子撑大
* 外边距:边框与其他控件的间距,默认为0
* */
.one{
border: solid 4px red; /* 边框: */
padding-left: 30px; /*内边距左侧间隔30像素 */
/*margin-bottom: 50px; *//*外边距间隔 */
}
.two{
margin-top: 50px;
border: solid 4px green;
}
</style>
</head>
<body>
<div class="dd one">第一个盒子</div>
<div class="dd two">第二个盒子</div>
</body>
Java程序猿必学第三十一篇——CSS
最新推荐文章于 2024-08-31 21:39:38 发布