A我今天学习到了什么
1温习day07的知识点
1.实现一个下拉菜单//运用知识点float,position
//HTML
<ul class="item">
<li><a href="#">收藏夹</a>
<div class="box">
<a href="#">收藏宝贝</a><a href="#">收藏店铺</a>
</div>
</li>
<li> <a href="#">卖家中心</a></li>
<li><a href="#">联系客服</a></li>
</ul>
//css
* {margin: 0;padding: 0}
ul {list-style: none;text-align: center;}
a {text-decoration: none}
.item {width: 1200px;background: pink;margin-left: auto;margin-right: auto}
.item:after {display: table;content: "";clear: both}
.item > li {float: left;width: 100px;line-height: 60px;}
.item>li:hover{background: pink;}
.item > li > a {color: aliceblue;}
.item > li:hover > .box {display: block;}
.box{display: none;position: absolute;width: 100px;background: red;}
.box>a{display: block}
.box>a:hover{background: yellow;}
2.width的继承问题
给父级相对定位,子级绝对定位，子级不会继承父元素的宽度
3.边框border-radius
边框border-radius 可以将边框设置为圆角
border-radius:value 四个边都会改变
可以单独改变一边
border-top-left-radius: value;//左上角
border-top-right-radius:value;//右上角
border-bottom-left-radius:value;//左下角
border-bottom-right-radius:value;//右下角
4.box-shadow可以给块或内联块元素添加阴影
box-shadow可以给元素添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
*h-shadow*
必需 水平阴影的位置。允许负值。
*v-shadow*
必需。垂直阴影的位置。允许负值。
*blur*
可选。模糊距离。
*spread*
可选。阴影的尺寸。
*color*
可选。阴影的颜色。请参阅 CSS 颜色值。
inset
可选。将外部阴影 (outset) 改为内部阴影。
5.文字效果
//设置文字的阴影
text-shadow: h-shadow v-shadow blur color;
//用的不多，但面试的时候碰到过
2.3.2 text-overflow 文本溢出属性指定如何显示溢出内容
p{ overflow: hidden;text-overflow: ellipsis; white-space:nowrap;
//white-space指定文字是否换行}
//HTML
<div class="bian">
<p>你真帅</p>
<p>你真帅</p>
</div>
.bian {width: 300px;height: 300px;margin: 20px auto;
border: 1px solid #000;border-top-left-radius: 150px;
box-shadow: 0 -5px 5px 5px yellow inset}
.bian p{text-shadow: 5px 5px 2px red;margin: 50px auto;
font-size: 40px;text-align: center}
01.PNG
2.拓展day08的知识点
1.公共样式的提取
样式文件，分层：
1.1 base：底层样式，
a.样式重置，
b.封装的样式，像浮动，伪元素清除浮动，定位，居中，宽度，伪元素设置边框等；
//就是将常用的样式进行自己的一个封装，从而简化代码
1.2 common：公共样式，一个项目中共同使用的样式，比如色调等；
//单个项目组多次运用的样式,组合
1.3 page：就是每个页面使用的样式，在其他的页面不使用的样式；
（参考bootstraps）
2.css 2d转换（transform）
transform:translate(x,y) rotate(30deg)
2.1 位移：translate(x,y)
//translateX，translateY同理
2.2 旋转： rotate（30deg）
2.3 倾斜：skew（x，y）
2.4缩放：scale(x,y)
//X,Y值设置一个则默认为两个值一样，同理
3、垂直水平居中
垂直水平居中margin：auto
//HTML
<div class="one">
<div class="two">
</div>
</div>
//css
.one{
width:400px;
height:400px;
background-color: red;
position: relative;
}
.two{
width:100px;
height:100px;
background-color: pink;
position: absolute;
margin:auto;
left:0;
top:0;
bottom:0;
right:0;｝
垂直水平居中margin：left/right
position: absolute;
margin-left：-50%width；
margin-top：-50%height；
left:50%;
top:50%;
垂直水平居中transform:translate(x,y)
position: absolute;
top:50% ;
left:50%;
transform:translate(-50%,-50%)
4.过渡（transition）
代码如下：
<style>
div{
background: #333;
height: 200px;
width: 200px;
}
.box:hover{
transform: translateX(100px) rotate(360deg);
background: pink;
transition: all 2s linear 2s;
/*属性 动作需要时间 过渡的效果 延迟时间*/
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
B我掌握了的
1.公共样式的提取
样式文件，分层：
1.1 base：底层样式，
a.样式重置，
b.封装的样式，像浮动，伪元素清除浮动，定位，居中，宽度，伪元素设置边框等；
//就是将常用的样式进行自己的一个封装，从而简化代码
1.2 common：公共样式，一个项目中共同使用的样式，比如色调等；
//单个项目组多次运用的样式,组合
1.3 page：就是每个页面使用的样式，在其他的页面不使用的样式；
（参考bootstraps）
2.css 2d转换（transform）
transform:translate(x,y) rotate(30deg)
2.1 位移：translate(x,y)
//translateX，translateY同理
2.2 旋转： rotate（30deg）
2.3 倾斜：skew（x，y）
2.4缩放：scale(x,y)
//X,Y值设置一个则默认为两个值一样，同理
3、垂直水平居中
垂直水平居中margin：auto
//HTML
<div class="one">
<div class="two">
</div>
</div>
//css
.one{
width:400px;
height:400px;
background-color: red;
position: relative;
}
.two{
width:100px;
height:100px;
background-color: pink;
position: absolute;
margin:auto;
left:0;
top:0;
bottom:0;
right:0;｝
垂直水平居中margin：left/right
position: absolute;
margin-left：-50%width；
margin-top：-50%height；
left:50%;
top:50%;
垂直水平居中transform:translate(x,y)
position: absolute;
top:50% ;
left:50%;
transform:translate(-50%,-50%)
4.过渡（transition）
代码如下：
<style>
div{
background: #333;
height: 200px;
width: 200px;
}
.box:hover{
transform: translateX(100px) rotate(360deg);
background: pink;
transition: all 2s linear 2s;
/*属性 动作需要时间 过渡的效果 延迟时间*/
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
C我没有掌握的
无，多多练习
网友评论