css 手稿
CSS
网页的布局和外观的显示样式
没有一张图解决不了的事：https://www.processon.com/mindmap/5e368a8be4b0d27af184e118
选择器
* 通配符选择器
复合选择器
后代选择器
.nav a {
}
.riven ul li {
}
子元素选择器
不是子子孙孙，只找儿子
div>strong{
}
并集选择器(集体声明)
p和span同时选择
p,
span {
}
交集选择器
既是p 标签 又是 .red 类选择器
p.red{
}
伪类选择器
链接伪类：
a:link 未访问的连接。
a:visited 已经访问的连接。
a:hover 鼠标移动到连接上。
a:active 选定的连接。
字体 fon-family
fon-family:'宋体'
中文字体记得加双引号
中文字体必须用 \588B \4F53 加双引号
字体粗细font-weight
font-weight: bold normal 700 400
可以修改 h1标签
css中文手册
字体风格 font-style
font-style:intalic normal
文本对齐text_align
text-align: left right center
行高行间距line-height:
line-height:24px;
首行空四个空格text-indent
text-indent:2em 25px
文本的装饰(去除下划线)
text-decoration:none underline line-through overline
color属性用来自定义文本颜色
SFC 吸取颜色
名字定义
16进制 #
RGB
块级元素
h1 p dvi ul ol li
宽度，高度，内边距，外边距 都能控制
div 是一个盒子 可以设置 长 宽 里面放啥都行
注意
p 标签不能放div
h1 dt 文字类的标签只能放文字 不能放其他块级元素
行内元素
a strong b em i del s ins u span
span
一行可以显示多个
高宽没有用 默认文字一样
行内元素 只能包含文本 或者 其他 行内元素 a 不能包a
行内块元素
img input td
可以对它可以设置 宽 高 外边距 宽边距
标签的转换
把行内元素转换成块级元素
display：block
把块级元素转换成行内元素
display：inline
都可以转换成行内块标签
a{
display:inline-block
}
行高和垂直居中
行高的测量方法
顶线----------
中线 --------
基线 --------
底线 --------
上一行的基线和下一行的基线 称为行高
单行文本垂直居中
行高 = 上距离+内容高度+下距离
line-height:50
结论
行高 = 高度 文字会垂直居中
行高 > 高度 文字会垂直居中
行高 < 高度 文字会偏上
行高 === line-height ： 文字居中
背景
背景颜色
background-colro：pink；
背景图片
bacground-image:url(路径);
默认为 none
背景平铺
background-repeat:repeat
no-repeat
repeat-x
repeat-y
背景位置
必须要有背景图片(以下两个值可以混用)
background-position:length 10px 50px
background-position:position top center bottom left center right
实例 右上角
right top
背景附着
background-attachment:scroll | fixed
背景简写
背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: #cc url() no-repeat fixed venter top
背景半透明
background:rgba(0,0,0, 0.3)
取值是 0-1之间
背景尺寸自动伸缩
CSS三大特性
层叠性：
出现了两个div 两个color
样式冲突的话 后面的样色会层叠 前面的样式，样式不冲突不会层叠。
继承性
子标签 会 继承 父标签的一些元素 （text font line color）
优先级
由低到高
标签
类
id
行内
强制优先 ！important 其他都是浮云
权重叠加
继承的权力为零
* 和 继承的权力为零
如果 权力相同就是 就近原则
css盒子模型
网页布局的本质： 先建立一个盒子，或者在盒子里面再建立一个盒子，然后往盒子里面丢内容就行了
盒子边框border
border-style dotted dashed solid
border-color
border-width：5px
圆角边框
圆形的话：
barder-radius:50%;
矩形的话：
给高度的一半
简写
border：5px solid pink
指定单独边框
border-top：宽度 样式
各类边框可以有不同颜色
可以修改 input 中的边框
在表格中border-collapse:collapse; 合并相邻的边框 1+1 = 1
内边距（padding）
控制 内容和边框中的距离
padding-right left top botton
会影响盒子会变大的问题？
解决，改变内容宽度
如果这个子盒子 没有宽度 则pading 不会撑开盒子。 如果给了 就会撑开盒子
外边距（margin）
margin-left：100px right top button
简写：和padding一样
块级盒子水平居中
1.盒子必须指定宽度
2.然后给 左右外边距设置为auto
margin-left:auto
margin-right:auto
插入图片和背景图片的区别
1.移动位置的方式不一样
img 可以用margin，pading
background 使用background-position：0，0 移动 ， 一般用来做小图标和超大背景
相邻块元素垂直上下外边距合并问题
取较大的值，尽量给一个盒子添加margin值。
嵌套块元素垂直外边距的合并（塌陷）
当嵌套中 子元素 指定上marging时会出现，连带父元素移动
1. 给父元素添加一个border transparent（透明）
1.可以给父级 指定一个上 padding-top：1px
3.overflow：hidden
list-style：none ===== 取消列表的头样式
盒子阴影
box-shadown:
推荐
box-shadow:0 15px 30px rgba(0,0,0,.3)
浮动（float）
网页布局的核心就是用css来摆放盒子
普通流 ： 累积盒子。自上而下 就用块级。 从左到右就用行内
浮动流：
div能排成一列
实现盒子左右对齐
文字环绕图片
定位：
浮动口诀一--浮
浮到上方（脱离标准流）
浮动口诀一--漏
后面的文档 将浮动起来的文档 占有了
浮动口诀一--特
浮动特性 = float 属性会改变display属性。 转换为行内快，但没有缝隙
注意： 浮动是脱离标准流的 所以我们 要给浮动的元素添加一个标准流的父亲。
如果父元素有 border和pading值 子元素不会压住父元素，不会超过父元素的边框，也不会超过父盒子的内边距。
清除浮动
主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
标准流不会影响页面布局
有时候父盒子不方便给高度,让子盒子有多少内容就显示多少内容。自动撑开父亲。父盒子不需要给高度
浮动流会影响页面布局
因为 大毛 二毛 浮动了，不占有位置，而父级又没有高度，所以two就到底下去了。
方法
clear：left right both
1. 额外标签法（隔墙法）
在最后一个浮动的元素后面添加一个新的空标签div 。 然后 clear： both
多余的标签
2.父级添加overflow属性方法 overflow：hidden | auto | scroll
给父元素添加一个 overflow：hidden
内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素。
3.使用after伪元素清除浮动
.clearfix:after {
content:"";
display:block;
height:0;
visibility:hidden;
clear:both
}
IE6 IE7 所使用的清除浮动
.clearfix {
*zoom:1
}
4. 使用双伪元素清除浮动
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
IE6 IE7 所使用的清除浮动
.clearfix {
*zoom:1
}
css属性书写顺序
布局流程
页面制作
定义版心 单独写一个类 后面直接调用就可以了；
/* 版心 1200 水平居中 */
.w {
width: 1200;
margin: auto; }
所有需要配置的项(css 初始化代码)
* {
margin: 0px;
padding: 0px;
}
/* 清除列表样式 */
li {
list-style: none;
}
整个网页底色
body {
background-color: #f3f5f7;
}
头部制作
头部代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>学成网在线</title>
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<!-- header头部模块 -->
<div class="header w">
<!-- logo -->
<div class="logo">
<img src="./image/images/logo.png" alt="">
</div>
<!-- nav -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- search -->
<div class="search">
<input type="text" value="请输入关键词">
<button></button>
</div>
<!-- user -->
<div class="user">
<img src="./image/images/user.png" alt="">
Mark
</div>
</div>
<!-- header头部模块结束 -->
</body>
</html>
css
* {
margin: 0px;
padding: 0px;
}
/* 清除列表样式 */
li {
list-style: none;
}
button {
border: none;
}
body {
background-color: #f3f5f7;
}
/* 版心 1200 水平居中 */
.w {
width: 1200px;
margin: auto;
}
/* header start */
.header {
height: 42px;
/* background-color: pink; */
margin: 30px auto;
}
.logo {
float: left;
margin-right: 60px;
}
.nav {
float: left;
}
.nav li {
float: left;
}
.nav ul li a {
display: block;
height: 40px;
padding: 0 10px;
margin-right: 20px;
line-height: 40px;
font-size: 18px;
color:#050505;
text-decoration: none;
}
/* 鼠标经过连接 才有底边框 */
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
}
.search {
float: left;
margin-left: 70px;
}
.search input {
float: left;
width: 340px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0px;
padding-left: 20px;
color: #ccc;
}
.search button {
float: left;
width: 50px;
height: 42px;
background-image: url(../image/images/btn.png);
}
.user {
float: left;
height: 42px;
line-height: 42px;
margin-left:30px ;
font-size:14px ;
}
<!-- banner部分开始 -->
<div class="banner">
<div class="w">
<!-- 左侧subnav -->
<div class="subnav">
<ul>
<li><a href="#">英语基础<span>></span></a></li>
<li><a href="#">语法大全<span>></span></a></li>
<li><a href="#">雅思托福<span>></span></a></li>
<li><a href="#">疯狂背代词<span>></span></a></li>
<li><a href="#">20天成长计划<span>></span></a></li>
<li><a href="#">英语速成<span>></span></a></li>
<li><a href="#">逻辑英语<span>></span></a></li>
<li><a href="#">出国必备<span>></span></a></li>
<li><a href="#">商务英语<span>></span></a></li>
</ul>#
</div>
<!-- 右侧课程模块 -->
<div class="course">
<div class="course-hd">
跟着Mark学英语
</div>
<div class="course-bd">
<ul>
<li>
<h4>继续学习 Mark英语基础</h4>
<p>正在学习-音标入门</p>
</li>
<li>
<h4>继续学习 Mark雅思托福</h4>
<p>正在学习-行为语法</p>
</li>
<li>
<h4>继续学习 Mark商务英语</h4>
<p>正在学习-出神入化</p>
</li>
</ul>
<a href="#" class="all">全部课程</a>
</div>
</div>
</div>
</div>
<!-- banner部分结束 -->
CSS
* {
margin: 0px;
padding: 0px;
}
/* 清除列表样式 */
li {
list-style: none;
}
button {
border: none;
}
a {
text-decoration: none;
}
body {
background-color: #f3f5f7;
}
/* 版心 1200 水平居中 */
.w {
width: 1200px;
margin: auto;
}
/* header start */
.header {
height: 42px;
/* background-color: pink; */
margin: 30px auto;
}
.logo {
float: left;
margin-right: 60px;
}
.nav {
float: left;
}
.nav li {
float: left;
}
.nav ul li a {
display: block;
height: 40px;
padding: 0 10px;
margin-right: 20px;
line-height: 40px;
font-size: 18px;
color:#050505;
text-decoration: none;
}
/* 鼠标经过连接 才有底边框 */
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
}
.search {
float: left;
margin-left: 70px;
}
.search input {
float: left;
width: 340px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0px;
padding-left: 20px;
color: #ccc;
}
.search button {
float: left;
width: 50px;
height: 42px;
background-image: url(../image/images/btn.png);
}
.user {
float: left;
height: 42px;
line-height: 42px;
margin-left:30px ;
font-size:14px ;
}
/* banner start */
.banner {
height: 420px;
background: url(../image/images/777.png) no-repeat top center;
}
.subnav {
float: left;
width: 150px;
height: 420px;
padding: 0 40px;
/* 背景半透明 */
background-color:rgba(0,0,0,.3);
}
.subnav li {
height: 45px;
line-height: 45px;
}
.subnav li a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
.subnav li a span {
float: right;
}
.subnav li a:hover {
color: #00b4ff;
}
.course {
float: right;
width: 228px;
height: 300px;
background-color: #fff;
margin-top: 50px;
}
.course-hd {
height: 48px;
background-color: #9bceea;
font-size: 18px;
text-align: center;
line-height: 48px;
color: #fff;
font-weight: bold;
}
.course-bd {
padding: 0 15px;
}
.course-bd li {
height: 50px;
border-bottom: 1px solid #ccc;
margin-top: 10px;
}
.course-bd li h4 {
font-size:14px ;
color: #4e4e4e;
}
.course-bd li p {
font-size: 12px;
color: #a5a5a5;
}
.all {
display: block;
height: 38px;
margin-top: 10px;
border: 1px solid #00a4ff;
font-size: 16px;
color:#00a4ff;
text-align: center;
line-height: 38px;
}
.all:hover {
background-color:#00a4ff ;
color: #fff;
}
/* banner end */
<!-- goods start -->
<div class="goods w">
<h3>Mark推荐课程</h3>
<div class="goods-item">
| <a href="#">疯狂英语</a>
| <a href="#">商务英语</a>
| <a href="#">逻辑英语</a>
| <a href="#">疯狂背代词</a>
| <a href="#">Mark阅读</a>
| <a href="#">20天速成</a>
</div>
<div class="mod">
<a href="#">修改兴趣</a>
</div>
</div>
css
* {
margin: 0px;
padding: 0px;
}
/* 清除列表样式 */
li {
list-style: none;
}
button {
border: none;
}
a {
text-decoration: none;
}
body {
background-color: #f3f5f7;
height: 3000px;
}
/* 版心 1200 水平居中 */
.w {
width: 1200px;
margin: auto;
}
/* header start */
.header {
height: 42px;
/* background-color: pink; */
margin: 30px auto;
}
.logo {
float: left;
margin-right: 60px;
}
.nav {
float: left;
}
.nav li {
float: left;
}
.nav ul li a {
display: block;
height: 40px;
padding: 0 10px;
margin-right: 20px;
line-height: 40px;
font-size: 18px;
color:#050505;
text-decoration: none;
}
/* 鼠标经过连接 才有底边框 */
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
}
.search {
float: left;
margin-left: 70px;
}
.search input {
float: left;
width: 340px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0px;
padding-left: 20px;
color: #ccc;
}
.search button {
float: left;
width: 50px;
height: 42px;
background-image: url(../image/images/btn.png);
}
.user {
float: left;
height: 42px;
line-height: 42px;
margin-left:30px ;
font-size:14px ;
}
/* banner start */
.banner {
height: 420px;
background: url(../image/images/777.png) no-repeat top center;
}
.subnav {
float: left;
width: 150px;
height: 420px;
padding: 0 40px;
/* 背景半透明 */
background-color:rgba(0,0,0,.3);
}
.subnav li {
height: 45px;
line-height: 45px;
}
.subnav li a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
.subnav li a span {
float: right;
}
.subnav li a:hover {
color: #00b4ff;
}
.course {
float: right;
width: 228px;
height: 300px;
background-color: #fff;
margin-top: 50px;
}
.course-hd {
height: 48px;
background-color: #9bceea;
font-size: 18px;
text-align: center;
line-height: 48px;
color: #fff;
font-weight: bold;
}
.course-bd {
padding: 0 15px;
}
.course-bd li {
height: 50px;
border-bottom: 1px solid #ccc;
margin-top: 10px;
}
.course-bd li h4 {
font-size:14px ;
color: #4e4e4e;
}
.course-bd li p {
font-size: 12px;
color: #a5a5a5;
}
.all {
display: block;
height: 38px;
margin-top: 10px;
border: 1px solid #00a4ff;
font-size: 16px;
color:#00a4ff;
text-align: center;
line-height: 38px;
}
.all:hover {
background-color:#00a4ff ;
color: #fff;
}
/* banner end */
/* goods start */
.goods {
height: 60px;
margin-top: 10px;
/* 利用行高可以继承的特性 */
line-height: 60px;
/* background-color: pink; */
box-shadow: 2px 2px 2px rgba(0,0,0,.2);
}
.goods h3 {
float: left;
margin: 0 30px;
font-size: 16px;
color: #00a4ff;
}
.goods-item {
float: left;
color: #bfbf;
}
.goods-item a {
font-size:16px;
color: #050505;
margin: 0 30px;
}
.mod a{
float: right;
margin-right: 30px;
font-size: 14px;
color: #00a4ff;
}
/* goods end */
box
<div class="box w">
<div class="box-hd">
<h3>Mark精品推荐</h3>
<a href="#">查看全部</a>
</div>
<!-- 清除浮动 -->
<div class="box-bd clearfix">
<ul>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
</ul>
</div>
</div>
<!-- box end -->
<div class="box w">
<div class="box-hd">
<h3>Mark精品推荐</h3>
<a href="#">查看全部</a>
</div>
<!-- 清除浮动 -->
<div class="box-bd clearfix">
<ul>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
<li>
<img src="./image/images/888.jpg" alt="">
<h4>
Mark is a strong man and he have a big butt
</h4>
<p><span>高级</span>> - 875895人在学习 </p>
</li>
</ul>
</div>
</div>
css
* {
margin: 0px;
padding: 0px;
}
/* 清除浮动 */
.clearfix:before,
.clearfix {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom:1
}
/* 清除列表样式 */
li {
list-style: none;
}
button {
border: none;
}
a {
text-decoration: none;
}
body {
background-color: #f3f5f7;
height: 3000px;
}
/* 版心 1200 水平居中 */
.w {
width: 1200px;
margin: auto;
}
/* header start */
.header {
height: 42px;
/* background-color: pink; */
margin: 30px auto;
}
.logo {
float: left;
margin-right: 60px;
}
.nav {
float: left;
}
.nav li {
float: left;
}
.nav ul li a {
display: block;
height: 40px;
padding: 0 10px;
margin-right: 20px;
line-height: 40px;
font-size: 18px;
color:#050505;
text-decoration: none;
}
/* 鼠标经过连接 才有底边框 */
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
}
.search {
float: left;
margin-left: 70px;
}
.search input {
float: left;
width: 340px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0px;
padding-left: 20px;
color: #ccc;
}
.search button {
float: left;
width: 50px;
height: 42px;
background-image: url(../image/images/btn.png);
}
.user {
float: left;
height: 42px;
line-height: 42px;
margin-left:30px ;
font-size:14px ;
}
/* banner start */
.banner {
height: 420px;
background: url(../image/images/777.png) no-repeat top center;
}
.subnav {
float: left;
width: 150px;
height: 420px;
padding: 0 40px;
/* 背景半透明 */
background-color:rgba(0,0,0,.3);
}
.subnav li {
height: 45px;
line-height: 45px;
}
.subnav li a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
.subnav li a span {
float: right;
}
.subnav li a:hover {
color: #00b4ff;
}
.course {
float: right;
width: 228px;
height: 300px;
background-color: #fff;
margin-top: 50px;
}
.course-hd {
height: 48px;
background-color: #9bceea;
font-size: 18px;
text-align: center;
line-height: 48px;
color: #fff;
font-weight: bold;
}
.course-bd {
padding: 0 15px;
}
.course-bd li {
height: 50px;
border-bottom: 1px solid #ccc;
margin-top: 10px;
}
.course-bd li h4 {
font-size:14px ;
color: #4e4e4e;
}
.course-bd li p {
font-size: 12px;
color: #a5a5a5;
}
.all {
display: block;
height: 38px;
margin-top: 10px;
border: 1px solid #00a4ff;
font-size: 16px;
color:#00a4ff;
text-align: center;
line-height: 38px;
}
.all:hover {
background-color:#00a4ff ;
color: #fff;
}
/* banner end */
/* goods start */
.goods {
height: 60px;
margin-top: 10px;
/* 利用行高可以继承的特性 */
line-height: 60px;
/* background-color: pink; */
box-shadow: 2px 2px 2px rgba(0,0,0,.2);
}
.goods h3 {
float: left;
margin: 0 30px;
font-size: 16px;
color: #00a4ff;
}
.goods-item {
float: left;
color: #bfbf;
}
.goods-item a {
font-size:16px;
color: #050505;
margin: 0 30px;
}
.mod a{
float: right;
margin-right: 30px;
font-size: 14px;
color: #00a4ff;
}
/* goods end */
/* box start */
.box {
margin-top: 15px;
}
.box-hd {
height: 60px;
line-height: 60px;
/* background-color: pink; */
}
.box-hd h3 {
float: left;
font-size: 20px;
color: #494949;
font-weight: 400;
}
.box-hd a {
float: right;
margin-right: 30px;
font-size: 12px;
color: #a5a5a5;
}
.box-bd {
/* 这个盒子不要给高度 */
width: 1215px;
}
.box-bd li {
float: left;
margin-right: 15px;
margin-bottom: 15px;
width: 228px;
height: 270px;
background-color: #fff;
box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}
.box-bd li img {
width: 100%;
}
.box-bd li h4 {
margin: 20px 20px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.box-bd li p {
margin: 0 20px;
font-size: 12px;
color: #999;
}
.box-bd p span {
color: orange;
}
/* box end */
<!-- footer start -->
<div class="footer">
<div class="w">
<!-- 左侧 -->
<div class="copyright">
<img src="./image/images/logo.png" alt="">
<p>为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。<br>这里有两种组件的注册类型：全局注册和局部注册。<br>至此，我们的组件都只是通过 Vue.component 全局注册的：</p>
<a href="#" class="app">下载APP</a>
</div>
<!-- 右侧 -->
<div class="links">
<dl>
<dt>关于mark课程</dt>
<dd><a href="#">关于</a></dd>
<dd><a href="#">管理团队</a></dd>
<dd><a href="#">工作机会</a></dd>
<dd><a href="#">客户服务</a></dd>
<dd><a href="#">帮助</a></dd>
</dl>
<dl>
<dt>Mark英语基础班</dt>
<dd><a href="#">牛逼呀</a></dd>
<dd><a href="#">速成</a></dd>
<dd><a href="#">有趣</a></dd>
<dd><a href="#">轻松</a></dd>
<dd><a href="#">帮助</a></dd>
</dl> <dl>
<dt>关于mark单词</dt>
<dd><a href="#">一天500个</a></dd>
<dd><a href="#">一周4000词</a></dd>
<dd><a href="#">厉害厉害</a></dd>
<dd><a href="#">一次300</a></dd>
<dd><a href="#">帮助</a></dd>
</dl>
</div>
</div>
</div>
css
定位
css布局的三种机制
定位模式
静态定位（static）
相当none 没有定位的意思。没有边偏移。
我们几乎不用。
相对定位（relative）
div{
position:relative;
top:100px;
left:100px;
}
相对它原来的位置，在走100px。原来在标准流中的位置继续占有。
绝对定位（absolute）重要
一般标准流的子盒子总是以父级元素为准。
如果父级 没有定位 绝对定位子盒子以我们文档为准浏览器移动位置。
如果父亲有绝对定位，那绝对定位的子盒子就以父级定位为准。（绝对，固定，相对定位也可以）
如果爷爷有绝对定位就以爷爷为准。
绝对定位的盒子 不占有位置，不保留原来的位置。
定位的盒子通常情况下要但写宽度
div{
position:absolute;
top:100px;
left:100px;
}
子绝父相
绝对定位的盒子居中
先让子盒子走父盒子的一半：left：50%
往回走自己盒子的一半：margin-left：-100px
在版心盒子左侧的盒子定位
先left 50%
走版心的一半
在走自己的宽度
堆叠顺序（z-index）
如果3个盒子都有绝对定位，默认前浪将死在沙滩上。
可以通过 z-index:1 大的值在上。
只能应用于 绝对定位 相对定位 固定定位
固定定位（flxed）重要
跟父元素没关系。
不随着滚动条的滚动而移动。固定在浏览器可视窗口的位置。
定位改变display属性
inline-block 转换为行内块。
有了定位 不用转换。直接给宽高就行。
外边距合并
子盒子移动带动父盒子移动。
有 绝对定位 固定定位。就没有问题。
圆角矩形设置四个角
示例
css高级技巧
元素的显示和隐藏
display显示（重点）
display:none 隐藏元素.
display:block 显示元素.
visibility可见性（了解）
visibility:hidden 元素隐藏。保留位置。占位置。
visibility:visble 元素显示。
overflow溢出（重点）
css 用户界面样式
鼠标样式（cursor）
cursor:pointer
取消轮廓线
防止拖拽文本区域
垂直对齐（vertical-align）
图片后面的文字居中对齐
去除图片底侧空白缝隙
溢出的文字用省略号来显示
css精灵技术
为什么需要精灵技术
制作精灵图
滑动门
margin 负值之美
鼠标经过div的时候
div:hover {
}
css 三角形只美
css 手稿的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- 09. C语言内嵌汇编代码
C语言函数内可以自定义一段汇编代码,在GCC编译器中使用 asm 或 __asm__ 关键词定义一段汇编代码,并可选添加volatile关键字,表示不要让编译器优化这段汇编代码. 内嵌汇编代码格式如下 ...
- jquery中.html(),.text()和.val()的差异总结
.html(),.text(),.val()三种方法都是用来读取选定元素的内容: .html()是用来读取元素的html内容(包括html标签): .text()用来读取元素的纯文本内容,包括其后代元 ...
- 原生微信小程序
new Date 跨平台兼容性问题 在 Andriod 使用 new Date("2018-05-30 00:00:00")木有问题,但是在ios 下面识别不出来.因为 IOS 下 ...
- Unity新的MeshData API学习
在新版本的Unity中提供了MeshDataArray和MeshData等多个API,使Mesh数据操作支持多线程:以更好的支持DOTS. API文档:https://docs.unity3d.com ...
- ETSI GS MEC 013，UE 位置 API
目录 文章目录 目录 版本 功能理解 Relation with OMA APIs Relation with OMA API for Zonal Presence Relation with OMA ...
- UnityShader数学基础篇
Mathf Mathf和Math 1.Math是C#中封装好的用于数学计算的工具类,位于System命名空间中. 2.Mathf是Unity中封装好的用于数学计算的工具结构体,位于UnityEngin ...
- 在 JS 中使用 canvas 给图片添加文字水印
实现说明: 1.先通过 new Image() 载入图片: 2.图片加载成功后使用 drawImage() 将图片绘制到画布上: 3.最后使用 fillText() 函数绘制水印. 下面展示了详细用法 ...
- 源码分析——MyBatis与Spring整合后如何保证SqlSession线程安全
在MyBatis架构中SqlSession是提供给外层调用的顶层接口,它是MyBatis对外暴露的最重要的接口,用户通过该接口即可完成数据库的全部操作.在上文中我们明白了我们常用的Mybatis动态代 ...
- 研二学妹面试字节，竟倒在了ThreadLocal上，这是不要应届生还是不要女生啊？
一.写在开头 今天和一个之前研二的学妹聊天,聊及她上周面试字节的情况,着实感受到了Java后端现在找工作的压力啊,记得在18,19年的时候,研究生计算机专业的学生,背背八股文找个Java开发工 ...
- HTML——img标签
在HTML中,图像由标签定义的,它可以用来加载图片到html网页中显示.网页开发过程中,有三种图片格式被广泛应用到web里,分别是 jpg.png.gif. img标签的属性: /* src属性: 指 ...