-
css字体样式属性
（1）font-size字体大小
（2）font-family字体
常用技巧：
a.网页中普遍使用14px;
b.尽量使用偶数得数字字号；
c.各种字体之间必须使用英文状态下得逗号隔开。
d.中文字体需要加引号，英文字体中除非包含#,$,空格等符号。
e.尽量使用系统默认字体。
（3） font-weight字体粗细：normal,bold,bolder, -
一些常用工具
sublime,Dreamweaver -
选择器
（1） 类选择器
以class标识：.类名{属性1：属性值；属性2：属性值}
（2）多类名选择器
（3）id选择器
#id {}
注：类选择器可以反复重复使用的，但是id不能重复。
（4）通配符选择器
“* {}”匹配页面中所有的元素。
（5）伪类选择器
：{}用于向某些选择器添加特殊效果。
-
命名规则：
长名称或词组可以使用中横线来为选择器命名。不建议用下划线。不要用纯数字或中文等命名。 -
css外观属性
-
一般网页字体颜色
-
css样式表
（1）内部样式表
（2）行内式（内联样式）
（3）外部样式表（外链式）
-
HTML标签分为块标签和行内标签，也称为块元素和行内元素
-
块级元素
-
行内元素
-
块级元素和行内元素的区别
-
行内块元素
-
显示模式 转换
-
css复合选择器
（1）交集选择器
（2）并集选择器
（3）后代选择器
后代选择器可以选择儿子，孙子，重孙子等等。
（4）子元素选择器
（5）属性选择器
属性选择器用中括号
（6）伪元素选择器
-
CSS背景
精确单位，第一个值一定是x坐标，
-
背景附着
-
背景简写
-
背景缩放
常用cover -
多背景图片
-
凹凸文字
-
背景半透明
-
王者荣耀
技巧：在一个行内的盒子内，设定行高等于盒子的高度，就可以使文字垂直居中。
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<script></script>
<style>
body {
background:url(wangzherongyao.jpg) no-repeat scroll top left;
}
div {
height:200px;
background:rgba(0,0,0,0.7);
}
a {
width:200px;
height:50px;
display:inline-block;/*把a从行内元素转换为行内块元素*/
text-align:center;/*文字水平居中*/
line-height:50px;
font-size:22px;
color:#fff;
text-decoration:none; /*取消下划线*/
}
a:hover {
background-color:orange;
}
</style>
</head>
<body>
<div>
<a href="#">专区说明</a>
<a href="#">申请资格</a>
<a href="#">资历兑换</a>
<a href="#">下载游戏</a>
</div>
</body>
</html>
-
CSS三大特性
CSS层叠性
CSS继承性
CSS优先级 -
CSS层叠性
层叠行是指多种CSS样式的叠加。出现冲突，则就近原则。 -
继承性
子标签继承父标签的样式。
-
CSS优先级
注意： （1）权重可以叠加。
（2）继承的权重是0。
答案是蓝色
答案是黄色
27. 盒子模型
- 盒子边框
- 表格的细线边框
- 圆角边框
（1）一个数值表示四个角都是相同的，顺时针。
（2）数值取宽度和高度一半，则会变成一个圆。或者50%也可以变成一个圆。
（3）两个值，则第一个值表示左上角和右下角，第二个值表示右上角和左下角。
（4）
- 内边距
（1）只写一个值，表示上下左右都是
（2）两个值，表示上下第一个值，左右第二个值
(3)三个值，表示
（4）四个值，顺时针。上右下左。 - 新浪导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
nav {
height:41px;
background-color: #FCFCFC;
border-top: 3px solid orange;
border-bottom: 1px solid gray;
}
nav a {
font-size: 14px;
color: #4c4c4c;
text-decoration: none;
padding: 0px 15px;
height:41px;
line-height: 41px;/*行高等于高度可以文字垂直居中*/
display: inline-block;/*链接是行内元素没有大小，所以需要转换成行内块*/
}
nav a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<nav>
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">网站导航</a>
<a href="#">三个字</a>
</nav
</body>
</html>
- 外边距
- 小细节
一般情况下，背景图片适合做小图标。产品展示就用插入图片 - 清除元素的默认内外边距
尽量不要给行内元素指定上下的内外边距。 - 外边距合并问题
- 盒子模型的宽度和高度
解释：盒子没有宽度，所以padding不会影响盒子的宽度。同样，如果盒子没有指定宽度，只是继承了父亲的宽度，padding也不会影响盒子的宽度。高度同理。 - 计算盒子模型宽度案列
- 搜索趣图分析（案例）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索趣图</title>
<style>
* {
padding:0px;
margin: 0px;
}
ul {
list-style: none;/*取消列表自带的小点*/
}
div {
width: 238px;
height: 294px;
border:1px solid #ccc;
border-top: 3px solid #FF8400;
margin: 100px;
}
.searchPic h3 {
border-bottom: 1px solid #ccc;
padding-left: 12x;
height: 35px;
font-size: 16px;
font-weight: normal;
line-height: 35px;/*文字垂直居中*/
}
.searchPic img {
width: 218px;
height: 160px;
margin:7px 0 0 8px;
}
.searchPic ul li a{
font-size: 12px;
color:#666;
text-decoration: none;/*取消下划线*/
/*margin-left: 10px;*//*这种调格式的方式不好，右边会多出来，用li的padding较好*/
}
.searchPic ul li {
paddding-left:10px;
height: 26px;
line-height: 26px;
}
.searchPic ul {
padding-left: 12px;
}
.searchPic ul li a:hover {
text-decoration: underline;
color: #FF8400;
}
</style>
</head>
<body>
<div class="searchPic">
<h3>搜索趣图</h3>
<img src="1.jpg" alt="">
<ul>
<li><a href="#">量子传输突袭NASA首次用城市网络实现</a></li>
<li><a href="#">量子传输突袭NASA首次用城市网络实现</a></li>
<li><a href="#">量子传输突袭NASA首次用城市网络实现</a></li>
</ul>
</div>
</body>
</html>
缺少一个背景图片当作图标
- 盒子模型布局稳定性
- CSS3盒模型
- 盒子阴影
- 水晶图片案例（复习盒子阴影）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
div {
width: 249px;
height: 249px;
margin:250px;
line-height: 249px;
background: url(shuijin.jpg) 0px 0 no-repeat;
font-size:26px;
text-align: center;
color:rgba(255, 255, 255, 0.5);
border-radius: 50%;
box-shadow: 0px 5px 20px 10px rgba(0, 0, 0, 0.8),
5px 4px 10px rgba(255, 255, 255, 0.4) inset;
}
</style>
</head>
<body>
<div>
水晶
</div>
</body>
</html>
- 浮动流
CSS的定位机制有3种：普通流（标准流）、浮动和定位。
- 普通流（标准流、文档流）
- 体会浮动
- 浮动
- 浮动使用方式（重点）
块级元素添加浮动之后，具有行内块的特性，行内元素添加浮动之后，具有行内块的特性。行内块：可以一行放多个，有宽度和高度，盒子的大小是由内容决定。
- 版心和布局流程
- 一列固定宽度且居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一列固定宽度且居中</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.top,
.banner,
.main,
.footer {
border: 2px dashed #ccc;
text-align: center;/*文字居中对齐*/
line-height: 100px;
width:960px;
margin:0 auto;/*盒子居中对齐*/
margin-bottom: 5px;
}
.top {
height: 100px;
}
.banner {
height: 40px;
}
.main {
height: 500px;
}
.footer {
height: 180px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
- 两列左窄右宽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列左窄右宽</title>
<style>
* {
padding: 0;
margin:0;
}
.top {
border: 2px dashed #ccc;
height: 200px;
line-height: 200px;
width: 960px;
text-align: center;
margin: 0 auto;
margin-bottom: 10px;
}
.banner {
border: 2px dashed #ccc;
height: 80px;
line-height: 80px;
width: 960px;
text-align: center;
margin: 0 auto;
margin-bottom: 10px;
}
.center {
height: 500px;
line-height: 500px;
width: 960px;
text-align: center;
margin: 0 auto;
margin-bottom: 10px;
}
.left {
border: 2px dashed #ccc;
float: left;
width: 300px;
/*margin-right: 2px;*//*left+right之和小于center2像素，此时会在中间。*/
}
.right {
border: 2px dashed #ccc;
float:right;
width: 650px;
}
.footer {
border: 2px dashed #ccc;
height: 280px;
line-height:280px;
width: 960px;
text-align: center;
margin: 0 auto;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
- 通栏平均分布型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通栏平均分布型</title>
<style>
* {
padding: 0;
margin:0;
}
.top {
border: 2px dashed #ccc;
height: 30px;
margin:0 auto;
text-align: center;
line-height: 30px;
margin-bottom: 10px;
}
.banner {
border: 2px dashed #ccc;
width: 960px;
height: 80px;
margin:0 auto;
text-align: center;
line-height: 80px;
margin-bottom: 10px;
}
.center {
width: 960px;
height: 70px;
margin:0 auto;
margin-bottom: 10px;
background-color: blue;
}
.center ul {
list-style: none;
}
.center ul li{
border: 2px dashed #ccc;
width: 236px;
height: 70px;
background-color: red;
float: left;
}
.main {
width: 960px;
height: 150px;
margin:0 auto;
margin-bottom: 10px;
background-color:yellow;
}
.footer {
border: 2px dashed #ccc;
height: 120px;
margin:0 auto;
text-align: center;
line-height: 120px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="center">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="main">
</div>
<div class="footer">footer</div>
</body>
</html>
-
清除浮动的本质
即清除浮动的影响。
-
清除浮动法
（1）额外标签法
（2）父级添加overflow属性方法
（3）使用after伪元素清除浮动
（4）使用before和after双伪元素清除浮动
-
ps基本使用
-
学成网案例
版心测量：用矩形工具或者标尺工具 -
定位
-
静态定位
一般用来清除定位的。一个原来有定位的盒子 ，不想加定位，就可以写这句话。 -
相对定位
绝对定位完全脱标，完全不占位置。
若父亲没有定位，孩子以浏览器为基准点对齐。
若父亲有定位，则以父元素为基准。position:relative absolute
子绝父相：父级相对定位，孩子绝对定位
加了绝对定位的盒子，margin左右auto就无效了。
-
权重
这个样式被层叠了。由于之前学习的权重问题。解决方式是改变一下选择器，优先级问题。 -
固定定位
固定定位的盒子一定要写宽度和高度，除非有内容撑开不用写。
-
叠放次序
-
定位总结
-
固定绝对定位模式转换
应用
-
元素的显示与隐藏
-
overflow溢出
-
CSS高级技巧
-
垂直对齐
不能用于块级元素
图片和文字默认基线对齐
图片、表单和文字对齐都用vertical-align
-
去除图片底侧空白缝隙
将其转化为块级元素
-
溢出的文字隐藏
-
CSS精灵技术
为了避免请求多张图，多服务器发起多次请求，就将所有背景图都放在一张图上，只要移动精灵图的位置，就可以得到想要显示的背景图。
-
制作精灵图
-
字体图标的优点
-
下载兼容字体包
-
使用下载的字体包
-
滑动门
为了在各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常用于各种导航栏的滑动门。
-
微信导航栏
-
伪元素的本质
-
鼠标经过显示边框
-
过滤
-
2D变形
谁做动画就给谁加过度效果 -
让盒子完美居中对齐的方式
原有方法，改为绝对定位，left以父级宽度为准，走50%，再margin-left走自己宽度的一半
现有方法
-
2D变形-缩放
-
2D变形-旋转
-
2D-倾斜
-
3D变形
左手法则
-
透视
translateZ是物体到屏幕的距离，这个值越大，我们看到物体越近，物体越大。
perspective仅仅是为了让物体有立体效果，但是立体效果展示时物体到底多大，是通过translateZ来展示的 -
translate3D
-
开门大吉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开关门</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
width: 1920px;
height: 1080px;
margin: 200px auto;
background: url(yangyuhuan.jpg) no-repeat;
position: relative;
perspective: 1000px;
}
.door-l,
.door-r {
height: 100%;
width: 50%;
position: absolute;
background-color: #7f5233;
border: 1px solid #000;
transition: all 5s;
}
.door-l {
left: 0;
transform-origin: left;
}
.door-r {
right: 0;
transform-origin: right;
}
.door-l::before,
.door-r::before {
content: "";
position: absolute;
top: 50%;
width: 50px;
height: 50px;
border: 1px solid #000;
border-radius: 50%;
transform: translateY(-50%);
}
.door-l::before {
right: 20px;
}
.door-r::before {
left: 20px;
}
section:hover .door-l {
transform: rotateY(-120deg);
}
section:hover .door-r {
transform: rotateY(120deg);
}
</style>
</head>
<body>
<section>
<div class="door-l"></div>
<div class="door-r"></div>
</section>
</body>
</html>
-
翻转的图片
-
体会动画
-
多组动画
-
汽车动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多组动画</title>
<style>
img {
width: 358px;
height: 173px;
animation: go 6s infinite;
}
@keyframes go {
0% {
transform: translateX(0);
}
50% {
transform: translateX(1200px);
}
51% {
transform: translateX(1200px) rotateY(180deg);
}
100% {
transform: translateX(0) rotateY(180deg);
}
}
</style>
</head>
<body>
<div>
<img src="xiaoqiche.png" alt="">
</div>
</body>
</html>
- 无缝滚动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
* {
padding:0px;
margin: 0px;
}
nav li img{
width: 200px;
float: left;
}
nav {
margin: 200px auto;
border: 2px solid red;
width: 1200px;
overflow: hidden;
}
nav ul {
list-style: none;
width: 200%;
animation: moveing 3s linear infinite;
}
@keyframes moveing {
from {
transform:translateX(0);
}
to {
transform: translateX(-1200px);
}
}
nav:hover ul {
animation-play-state:paused;
}
</style>
</head>
<body>
<nav>
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
</ul>
</nav>
</body>
</html>
- 伸缩布局
传统布局三等份，可以随着屏幕变化
这种会出现问题，不能给section加margin，否则盒子会掉下来。
伸缩布局三等分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩布局三等份</title>
<style>
section {
width: 1200px;
height: 400px;
border:2px solid red;
display: flex;
margin: 100px auto;
}
section div {
height: 100%;
float: left;
}
section div:nth-child(1) {
background-color: pink;
flex: 1;
}
section div:nth-child(2) {
background-color: purple;
margin: 0 5px;
flex: 2;
}
section div:nth-child(3) {
background-color: pink;
flex: 1;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩布局三等份</title>
<style>
section {
width: 1200px;
height: 400px;
border:2px solid red;
display: flex;
margin: 100px auto;
min-width: 500px;/*规/*定最小缩放宽度到达500px以后就不会再进行缩放。*/
flex-direction: row;规定排列的方向*/
}
section div {
height: 100%;
float: left;
}
section div:nth-child(1) {
background-color: pink;
flex: 1;
}
section div:nth-child(2) {
background-color: purple;
margin: 0 5px;
flex: 2;
}
section div:nth-child(3) {
background-color: pink;
flex: 1;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
- 携程网案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>携程网案例</title>
<style>
* {
padding:0px;
margin: 0px;
}
ul {
list-style: none;
}
body {
min-width: 320px;
max-width: 540px;
margin: 0 auto;
}
header {
width: 100%;
}
header img {
width: 100%;
}
nav {
padding:5px;
}
.row {
height: 90px;
width: 100%;
background-color: #ff697a;
border-radius: 10px;
display: flex;
margin-bottom: 5px;
}
nav .row:nth-child(2){
background-color: #3d98ff;
}
nav .row:nth-child(3){
background-color: #44c522;
}
nav .row:nth-child(4){
background-color: #fc9720;
}
.row3 {
/*float: left;*/
height: 100%;
flex: 1;
border-left:1px solid #fff;
}
.row div:first-child {
border:0;
}
.hotel {
display: flex;
flex-direction: column;
}
.hotel a {
/*width: 100%;*/
flex: 1;
text-align: center;
text-decoration: none;
color: #fff;
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.3)
}
.hotel a:first-child {
border-bottom: 1px solid #fff;
}
</style>
</head>
<body>
<div>
<header>
<img src="guanggaotiao.gif" alt="">
</header>
<nav>
<div class="row">
<div class="row3">1</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3">1</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3">1</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
</nav>
</div>
</body>
</html>
-
justify-content调整主轴对齐（水平对齐）
-
align-items属性（垂直对齐）
-
flex-wrap控制是否换行
-
align-content属性（多行垂直对齐方式）
-
flex-flow属性
-
order属性（用CSS来控制盒子的先后顺序）
数值越小越往前。可以是负数
扫一扫
1775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
