移动端——前端页面编写总结

练习一:百度首页编写
    小结:
        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;

vertical-align 属性设置元素的垂直对齐方式。
描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把次元素放置在父元素的中部
bottom 把元素的顶端和行中最低的元素的顶端对齐。
text-bottom 把元素的地段与父元素字体的低端对齐
length  
% 使用“line-height”属性的百分比值来排列此元素。允许使用负值
inherit 规定应该从父元素继承vertical-align 属性的值。




   

溢出显示

        overflow:scroll;
overflow 属性规定当内容溢出元素框时发生的事情。
描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

        盒子溢出显示
        flex-wrap:wrap;

        盒子移动方向
        flex-direction:column;

        div圆角
        border-radius: 15px;

        浏览器私有前缀
        需要附带私有前缀。就是诸如-moz-, -webkit-之类。
发布了7 篇原创文章 · 获赞 2 · 访问量 4653
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览