CSS-day06,07总结
2020-10-28 本文已影响0人
山猪打不过家猪
DAY06
子绝父相
image.png
什么时候用？
类似于这样的小图标
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>哈根达斯</title>
<style>
.box {
position: relative;
width: 310px;
height: 190px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 10px;
}
.top {
/*float: left;*/
position: absolute;
top: 0;
left: 0;
}
.bottom {
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="images/top_tu.gif" alt="" class="top">
<img src="images/adv.jpg" alt="">
<img src="images/br.gif" alt="" class="bottom">
</div>
</body>
</html>
固定定位
新浪两侧广告
.ad-left,
.ad-right {
position: fixed;
top: 100px;
}
.ad-left {
left: 0px;
}
.ad-right {
right: 0px;
}
绝对定位的盒子居中
image.png
淘宝轮播图静态图总结
圆角
.arrow-r {
right: 0;
text-align: right;
/*圆角矩形*/
/*border-radius: 左上角 右上角 右下角 左下角;*/
border-radius: 15px 0 0 15px;
}
定位小结
| 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换（行内块） | 使用情况 |
|---|---|---|---|---|
| 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 |
| 相对定位relative | 不脱标，占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 |
| 绝对定位absolute | 完全脱标，不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
| 固定定位fixed | 完全脱标，不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 |
DAY07
display 显示（重点）
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
image.png
鼠标样式cursor
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed">我是文本</li>
</ul>
轮廓线 outline，防止文本拖拽
一般去掉原来的轮廓线
<input type="text" style="outline: none;"/>
防止文本拖拽
<textarea style="resize: none;"></textarea>
图片、表单和文字对齐，去除图片底边空白缝隙
image.png
出现缝隙的原因：
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙。
解决方案：
image.png
image.png
文字溢出解决方案
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
精灵图
定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>体会css精灵技术</title>
<style>
.icon2 {
width: 23px;
height: 23px;
background: url(images/index.png) no-repeat -157px -107px;
margin: 100px;
}
</style>
</head>
<body>
<div class="icon2"></div>
</body>
</html>
制作
image.png
精灵图应用——滑动门
核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
微信导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信导航栏案例</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
background: url(images/wx.jpg) repeat-x;
}
.nav {
margin-top: 20px;
}
.nav li {
float: left;
margin: 0 5px;
}
.nav a {
display: inline-block;
height: 33px;
background: url(images/to.png) no-repeat;
padding-left: 15px;
color: #fff;
line-height: 33px;
font-size: 14px;
}
.nav a span {
display: inline-block;
height: 33px;
background: url(images/to.png) no-repeat right;
padding-right: 15px;
}
/*鼠标经过了a 链接首先换背景图片 然后 链接里面的span 也要换*/
/*.nav a:hover {
background-image: url(images/ao.png);
}
.nav a:hover span {
background-image: url(images/ao.png);
}*/
.nav a:hover,
.nav a:hover span {
background-image: url(images/ao.png);
}
</style>
</head>
<body>
<div class="nav">
<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="#">
<span>三个字</span>
</a>
</li>
</ul>
</div>
</body>
</html>
margin负值之美，解决压边，突显效果
压边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
/*浮动的盒子是紧贴在一起的*/
float: left;
width: 200px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
突出显示某个盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin负值之美-突出显示某个盒子</title>
<style>
div {
position: relative;
/*浮动的盒子是紧贴在一起的*/
float: left;
width: 200px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
}
/*鼠标经过div 的意思 p:hover */
div:hover {
/*我要让当前鼠标经过的这个div 升到最高处来就好了*/
/*定位的盒子是最高层的 */
border: 1px solid #f40;
/*都是定位的盒子，我们通过z-index 来实现层级关系*/
z-index: 1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
