练习一:百度首页编写
小结:
1.不要用空格分割元素,浏览器或者手机空格大小不一致
2.css,js事件用动态绑定的方式,不要写在行内样式中。防止其它人添加样式被覆盖
3.少用p标签,浏览器不支持。
4.css样式从后往前找。知道怎么回事,但是还是没有理解怎么优化
5.颜色用16进制,字母机器识别不一致。
生僻标签:
a标签的四种状态
*a:link 普通的、未被访问的链接样式
*a:visited 用户已访问的链接样式
*a:hover 鼠标指针位于链接上方样式
*a:active 链接被点击的时刻样式
text-decoration:none;/用于去除下划线/
transform: translate(-50%, -50%);2D旋转
title="点击一下,了解更多" 图片加title,鼠标移入显示文字
练习2:图书详情
小结:
生僻标签:
设置盒子
/* 盒子 */
display: flex;
display: -webkit-flex;
分配盒子
flex: 1;
-webkit-flex:1;
图片居中
盒子溢出显示
flex-wrap:wrap;
盒子移动方向
flex-direction:column;
div圆角
border-radius: 15px;
浏览器私有前缀
需要附带私有前缀。就是诸如-moz-, -webkit-之类。
小结:
1.不要用空格分割元素,浏览器或者手机空格大小不一致
2.css,js事件用动态绑定的方式,不要写在行内样式中。防止其它人添加样式被覆盖
3.少用p标签,浏览器不支持。
4.css样式从后往前找。知道怎么回事,但是还是没有理解怎么优化
5.颜色用16进制,字母机器识别不一致。
生僻标签:
a标签的四种状态
*a:link 普通的、未被访问的链接样式
*a:visited 用户已访问的链接样式
*a:hover 鼠标指针位于链接上方样式
*a:active 链接被点击的时刻样式
text-decoration:none;/用于去除下划线/
transform: translate(-50%, -50%);2D旋转
title="点击一下,了解更多" 图片加title,鼠标移入显示文字
练习2:图书详情
小结:
生僻标签:
设置盒子
/* 盒子 */
display: flex;
display: -webkit-flex;
分配盒子
flex: 1;
-webkit-flex:1;
图片居中
vertical-align:middle;
值 | 描述 |
baseline | 默认。元素放置在父元素的基线上。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把次元素放置在父元素的中部 |
bottom | 把元素的顶端和行中最低的元素的顶端对齐。 |
text-bottom | 把元素的地段与父元素字体的低端对齐 |
length | |
% | 使用“line-height”属性的百分比值来排列此元素。允许使用负值 |
inherit | 规定应该从父元素继承vertical-align 属性的值。 |
溢出显示
overflow:scroll; 值 | 描述 |
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
盒子溢出显示
flex-wrap:wrap;
盒子移动方向
flex-direction:column;
div圆角
border-radius: 15px;
浏览器私有前缀
需要附带私有前缀。就是诸如-moz-, -webkit-之类。