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
猜你喜欢
转载自blog.csdn.net/m0_62718093/article/details/121517857
今日推荐
周排行