css引入
引用 css
<!-- 方法1:引用css文件 -->
<link rel="stylesheet" href="/public/css/bootstrap.css">
<!-- 方法2:直接写在页面里面 -->
<style>
/* 点开头作用于指定的 class */
.a_class_name{
background-color: red;
font-size: 18px;
border: 1px solid #fff;
width: 100%;
height: 300px;
}
/* 井号开头作用于 id */
#id_name{
font-size: 40px;
}
/* 什么也不加，作用于所有这样的标签 */
div{
color: red;
}
/* 加逗号，表示这两个都生效 */
h1,h2{
color:blue;
}
/* 空格表示指定子标签，这里也可以用点或井号 */
a div{
color: yellow;
}
</style>
<div class="a_class_name">通过class指定样式</div>
<div id='id_name'>通过id指定样式</div>
<h1>标题1</h1>
<h2>标题2</h2>
<a><div>指定的嵌套才生效</div></a>
知识点
- 作用类型：
- 点开头作用于指定的class
- 井号开头作用于指定的id
- 什么也不加作用于指定的标签
- 逗号分割，表示两个并列的有一样的样式
- 空格分割，表示子标签。
- 空格前后可以是第一条的3种类型（点开头，井开头，什么也不加）
- 可以多层级
背景图片
<style>
#demo_background{
background-image:url('https://www.guofei.site/public/about/me.png');
background-repeat:no-repeat; /* 默认重复显示图片填充 */
height: 300px;
background-position: -29px 30px; /* 调整位置 */
/* 大小 */
background-size: 100%;
}
</style>
<div id='demo_background'>展示背景图片</div>
展示背景图片
块
从外到内：margin，border，padding
边框border
<style>
#demo_border{
border: 1px solid red; /* 粗细、样式、颜色 */
height: 50px;
border-right: 10px solid red;
border-top-style:dotted; /* 虚线 */
border-top-color: blue;
border-top-width: 10px;
/* 可以同样对 left/right/bottom修改 */
}
</style>
<div id="demo_border">展示边框</div>
展示边框
margin
margin
margin-top : 10px
margin : 10px , 0 , 0 , 0 # 顺序是上下左右
padding
内边距，边框到内容的距离
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
/*上 左右 下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;
margin
外边距，盒子边框到附近最近盒子的距离
/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
margin-bottom: 100px;
其它知识
鼠标形状
<span style="cursor:help">help</span>
<span style="cursor:wait">wait</span>
<span style="cursor:move">move</span>
鼠标 放到 这里 就会 变化
还有更多的，右键检查可以替换。
漂浮效果
<div style="background-color: red;float:left">左漂浮</div>
<div style="background-color: blue;float:right;width:50%">右漂浮</div>
左漂浮
右漂浮
注意：如果同等级有其它文字，会放中间
position
- fixed：固定在某个位置。使用场景：可以作为固定横幅；左侧标题拦；返回顶部按钮。
- relative&absolute：“父div”是relative，“子div”是absolute，效果：子div的位置会相对父div
position=fixed 把div固定在某个位置，top控制位置
透明度
opacity，可用于图片、文字、背景色等
<div style='background-color:red;height:100px;opacity:0.4'></div>
hide效果
.hide{
display: none;
}
示例
<style>
.demo-iframe-holder {
width: 100%;
height: 300px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.demo-iframe-holder iframe {
height: 100%;
width: 100%;
}
</style>
