1,chorme调式工具 -->右击-->检查
2,快速向下复制一行 shift+alt+向下箭头
二,1,emmet语法快速生成html样式
(5)-->p.demo(class) div#two(id)
(6)--> 有顺序div{$}*5 无顺序ul>li*5 div{文字}*5
<style>
/* 注意用空格隔开 */
ul li a {
color: beige;
}
/* 多个ol选一个 */
.nav li {
color: blue;
}
</style>
<body>
<ol class="nav">
<li>yayayy</li>
</ol>
<ol>
<li>啦啦啦啦</li>
</ol>
<ul>
<li><a href="#">阿巴巴</a></li>
</ul>
</body>
<style>
.div>a {
color: blueviolet;
}
</style>
<body>
<div class="div">
<!-- 只有这里的a变色 -->
<a href="#">儿子</a>
<p>
<a href="#">孙子</a>
</p>
</div>
</body>
<style> //习惯竖着写,最后一个选择器不加逗号
div,
p,
.pink li {
color: aquamarine;
}
</style>
<body>
<div>qw</div>
<p>df</p>
<ul class="pink">
<li>sda</li>
<li>eg</li>
</ul>
</body>
<style>
/*顺序固定需牢记*/
/* 链接伪类用: */
a:link {
/* 未访问过的链接 */
color: black;
}
a:visited {
/* 已经访问过的链接 */
color: coral;
}
a:hover {
/* 鼠标经过时的链接 */
color: cyan;
}
a:active {
/* 鼠标按下没有松开 */
color: darkkhaki;
}
</style>
<body>
<a href="#">小猪佩奇</a>
</body>
<style>
input:focus {
/* :focus把获得光标的input表单元格选取出来 */
background-color: darkorange;
}
</style>
<body>
<input type="text"><input type="text"><input type="text">
</body>
特点:1)自己独占一行
2)宽,高,行内外间距可变
3)宽度默认值与浏览器一样宽
4)可放任何元素,块元素,行内元素2
注:1)文字类元素(h1 p)不放块元素 (div)
特别: 1)多个可以在一行
2)宽高设置无效
3)宽度默认值是本身内容的宽度
4)行内元素只能收纳文本和其他元素
注:1)链接里面不再放链接
特别:1)一行放多个
2)可以设置长宽行内外边距
<style>
/* 转化为块元素:display:block */
/* 转为行内元素: display:inline */
/* 转化为行内块元素: display:inline-block */
</style>
六,
1,单行文字垂直居中
让line-height的像素等于height像素
2,背景颜色 透明色
background-color: transparent;
3,背景图片
background-image: url(插入背景图片,类似img);
background-images: none 无背景图
4,背景平铺
background-repeat
5,
背景图片位置-方位名词
1),指定两个值是方位名词,前后两个值顺序无关,比如left top和top left 效果一致
2)如果只指定了一个方位名词,另一个省略,则省略的默认居中对齐
上 (top)中(center)下 (bottom) 左 (left)中(center)右(right)
背景图片位置-精确单位
1),参数值是精确坐标,第一个一定是x轴,第二个一定是y轴
2)如果只指定一个数值,则一定是x轴,另一个居中对齐
背景图片位置-混合单位:第一个一定是x轴,第二个一定是y轴
6,综合案例
<style> /* 标题也能成为盒子 */ h3{ width: 118px; height: 40px; background-color: aqua; font-size: 14px; font-weight: 400; line-height: 40px; background-image: url(图片网址); background-repeat: no-repeat; /* 不平铺 ,二者基本连着用*/ background-position: left center; /* 注意空格 */ text-indent: 1.5em; } </style> </head> <body> <h3>成长守护平台</h3> </body> </html> <!-- 获取网页图片办法:打开检查,单击图片,找到源代码, --> <!-- 在旁边的代码里找到图片网址,右键open in new tab,然后图片另存为文件里面 --> <!-- 若图片不是居中对齐,则不在body里面插入图片,而是在head里面 -->
7,超大背景图
<style>
body{
background-image: url(图片网址);
background-repeat: no-repeat;
background-position: top center;
}
</style>
8,背景附着(默认图片跟着背景走)
background-attachment :fixed; 图像不随着文字滚动
9,背景复合写法:(用空格隔开)
background:transparent url() no-repeat fixed center top;
background:背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置;
10,背景颜色半透明:background:rgba(0,0,0,0.3)
1),最后一个参数是透明度,取值在0~1之间
2)背景半透明是盒子背景半透明,盒子里面内容不影响