A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

李黑马33

初级黑马

  • 黑马币:7

  • 帖子:2

  • 精华:0

       黑马学习已半月,所得甚多。本人不善言辞,奉承不实之语也不愿多言,亦不愿抄袭他人心得。然,受累于字数限制,唯将部分所学公布于此。望后来者斧正,携手共进。
      
HTML,CSS中需要注意的部分
        特殊字符集
        table
                 caption 整个表格的一个标题
                thead,tbody,tfoot
                tr
                        th
                        td
                cellspacing表格之间的距离
                cellpading内容与表格的距离
                text-align:
                        right,left,center
                                如果你想单独的控制某一个内容的位置,请把align的center属性写到当前想居中的元素身上
                合并
                        跨行合并:rowspan="合并单元格的个数"
                                <td colspan=“2”></td>。删除多余的单元格
                border-collapse合并相邻边框
        表单
                <form action='' method='' name=''>
                input type
                        buton按钮
                        checkbox复选
                                checked
                        file文件
                        hidden定义隐藏的输入字段
                        password密码
                                比value好用
                        radio单选按钮
                        reset重置
                        submit提交
                        text输入文本
                        placeholder占位符
                outline:0/none去掉默认文本边框
                lable
                        用for id
                        直接包含
                select
                        option
                                selected
                textarea
                        rows="3" cols="20"
                                resize: none;防止拖拽
        文本
                 font: font-style  font-weight  font-size/line-height  font-family;
                text-align: center;文本水平对齐
                text-decoration:;
                        underline
                        line-through
                        overline
                text-indent:2em/2px;
                line-height: 26px/1.5;
                对齐方式
                        vertical-align :top||middle||bottom||数值
                                写在被对齐的元素身上
        锚点
                a
                        href="#id"
                        元素id
        列表
                ul>li
                ol>li
                dl>dt,dd,dd
                list-style:none
        图片
                默认下方有三个像素的间隙
                        1.display:block
                        2.font-size:0
                        3.vertical-align:middle··
        c3h5
                css3
                        属性[]10
                                input[class="name"]
                                input[class^="na"]
                                input[class$="me"]
                                input[class*="n"所有包含b]
                        结构伪类选择器
                                nth-child
                                        li:first-child第一个li标签
                                        li:last-child最后一个li标签
                                        li:nth-child(3)选择第3个li标签
                                        li:nth-child(n)选则全部li标签
                                        li:nth-child(2n)选择所有偶数个li标签
                                        li:nth-child(2n-1)选择所有奇数个li标签
                                        li:nth-child(-n+9)选择前9个li标签
                                         li:nth-last-child(-n+3)选择最后3个li标签
                                        li:nth-child(n+9)选择从第9个li标签开始的所有标签
                                        先看个数再看个数
                                nth-of-type
                                        同上
                        伪元素
                                css模拟的假元素
                                        注意
                                                1.只能给双标签加
                                                伪元素冒号前不能有空格
                                                伪元素里面必须写上属性content:""
                                每一个元素都可以为伪元素
                                        before
                                        after
                                每个模拟伪元素
                                        相当于行内元素
                                        box和after其实是同级关系
                                                可以理解为伪元素寄生在box上
                                作用
                                        减少页面结构
                        盒子模型
                                border:px solid/dashed color
                                默认
                                        width=content+padding+border
                                box-sizing:boder-box
                                        改变盒子计算方式,只受width影响
                                                自动计算内容宽度content
                                padding的妙用
                                        子盒子不写宽度,默认100%父盒子
                                                此时给子盒子加padding值,不会撑大父盒子,而是使子盒子内容减小,子盒子总体大小与没加之前大小相等
                                        子盒子写宽度
                                                给子盒子加padding值,内容大小不变,子盒子总体大小变大
                                水平居中
                                        块级
                                                margin:0 auto
                                        行内块,内联
                                                text-align:center
                                垂直居中
                                        块级
                                                暂无
                                        行内块,内联
                                                line-height=height
                                圆角边框
                                        border-radius:左上 右上 右下 左下
                                        border-radius-left-top:
                                盒子塌陷
                                        垂直方向:取较大值
                                        父子嵌套,子盒子有margin-top,父盒子一起往下掉
                                                父盒子加上边框
                                                父盒子加内边距
                                                父盒子加overflow:hidden
                        计算盒子宽度
                                width: calc(100% - 80px);
                                        括号中可使用+-*/
                        图标模糊
                                blur模糊处理
                                        filter: blur(5px);
                        2D不影响页面结构
                                让元素在平面移动
                                        transform:translate(x,y)
                                                平移属性是根据自身大小平移的(百分比),占位置,不影响结构,对行内元素无效
                                        transform:translatex(x)
                                旋转
                                        tansform:rotate(xdeg)
                                旋转中心
                                        transform-origin:center(默认)、left···
                                        transform-origin:数字
                                缩放
                                        transform:scale(2)
                                        transform:scale(x,y)
                                倾斜
                                        transform:skew(30deg,0)
                                顺序
                                        不同顺序可能会导致不同结果
                                                transform:translate() ratate() ···
                        3D
                                 人和物体的距离 - 视距    这个值规定要设置给物体的父元素   perspertive:1000px/transform-style:preserve-3d
                                平移
                                        transform:translate3d(x,y,z)
                                        transfrm:translate(x)
                                旋转
                                        rotatex(deg)
                                rotated3d(x,y,z,deg)
                                        任意轴
                        动画
                                定义
                                        @keyframes 动画名称
                                                0%
                                                ···
                                                100%
                                调用
                                        div{animation: 动画名称 动画执行时间}
                                补充
                                        animation:动画名称 动画执行时间 执行速度 等待时间 执行次数 是否反向 动画结束位置
                                动画停止需要一个事件触发
                                        animation-play-state:running/paused
                        透明
                                rgba0-1
                                        只透明当前背景
                                opacity0-1
                                        里面内容都透明,带有继承性
                过渡
                        transition: 要过渡的属性  花费时间  运动曲线  何时开始;
                                属性 : 想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以
                                        能否过渡看该属性是否有中间值
                                花费时间: 单位是 秒(必须写单位) 比如 0.5s
                                运动曲线: 默认是 ease (慢-快-慢)
                                        linear匀速
                                        ease-in慢速启动
                                        ease-out慢速结束
                                        ease-in-out慢速启动和结束
                                何时开始:单位是 秒(必须写单位)可以设置延迟触发时间  默认是 0s  (可以省略)
                        transition:width 1s···,height 1s
                        过渡的使用口诀: 谁做过渡给谁加
                html5
                        语义化签
                                header
                                footer
                                nav
                                main
                        视频标签
                                vedio
                                        src
                                                在vedio和source标签中仅能存一,如在source中,则vedio中需要删去该标签
                                        autoplay谷歌不允许自动播放/preload预加载
                                        muted静音播放
                                        controls控制面板
                                        poster默认图片
                                        object-fit:fill让视频内容铺满整个video
                                        source
                                                存在于video中的单标签
                                                依次加载
                                        常用mp4
                        音频标签
                                常用格式mp3
                        表单
                                autocomplete="on"记录上次提交的内容
                                        email,url,search
                                        datetime,datetime-localweek,data,month,time,tel
                                        range范围,color
                                        number
                                                max="5" min="1" value="3" step步长
                                        multiple提交多个文件
                                        datalist可输入表单
        css
                继承性
                        color
                        text-
                        font
                        line
                        a标签本身有颜色,不继承父级
                选择器
                        通配符0
                        标签1
                        类,伪类10
                        id100
                        !improtant无穷大
                        交集,并集,混合,权重累加但不进位
                背景
                        background:color url() no-repeat scroll/fixed position
                                background-repeat
                                        repeat
                                        no-repeat
                                        repeat-x/y
                                background-position
                                        方位lleft,right,top,bottom,center
                                        x,y
                盒子阴影
                        box-shadow: x轴(必填项) y轴(必填项)模糊程度 阴影尺寸 颜色 内外;
                文本阴影
                        text-shadow: x轴(必填项) y轴(必填项)模糊程度 颜色;
                浮动
                        是兄弟就一起浮动
                        父盒子加清除浮动
                                .clearfix:after{visibility:hidden;display:block;font-size:0;content: " ";clear:both;height:0;}
.clearfix{*zoom:1;}
                        浮动虽脱离标准流,但不会压住文字
                        浮动会影响后面的元素,但不会影响前面的
                        子主题 5
                                浮动后(定位后),行内元素和块级元素都具备了行内块的特征(能够设置宽高、默认由内容撑开)
                display
                        block
                                显示
                        none
                                隐藏,不占位置
                visibility:hidden
                        占据位置
                定位position
                        静态static(默认)
                        relative
                                脱离标准流,但占据位置
                        absolute
                        fixed
                                定位在版心
                                        1.position:fixed;
                                        2.left:50%
                                        3.margin-left:盒子宽度一半
                        sticky粘性定位
                                语法position:sticky;top:100px
                        层级,只针对定位
                                默认0,后来者居上
                                z-index,首先看父级大小,拼爹
                overflow
                        visible默认显示
                                单行解决办法
                                        1.强制一排显示
                                                white-space: nowrap;
                                        2.溢出部分隐藏起来
                                                overflow: hidden;
                                        多余部分变成···
                                                text-overflow: ellipsis;
                                多行解决办法
                                        div.twe {
width: 100px;
height: 60px;
line-height: 30px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
/* 后面的数字就是决定你当前要显示多少排的一个数字 */
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-box-orient: vertical;
}
                        hidden
                                清除浮动
                                盒子塌陷
                        scroll无论内容,出现滚动条
                        auto视内容多少出现滚动
                精灵图
                        1.backround-image
                        2.ps从右下往左上量取坐标
                        3.weidth,height
                        4.position:x,y,要取负值
                字体图标
                        1.在阿里巴巴矢量图去选择图标
                        2.下载到本地
                        3.解压 demo_index.html
                        4.打开网页,选第二种 font class
                                引入css
                                        路径
                                写span字体图标
                                        把类名放到xxx中
                其他
                        手型cursor
                                pointer
                        三角形,利用边框特性,width=0,boeder=x
                                为了照顾兼容性 低版本的浏览器,加上 font-size: 0;  line-height: 0;
                        外边距负值
                                压住其他元素
                引入网页图标
                        1.制作favicon.ico图标
                        2.将图标放在根目录下
                        3.用<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">引入
        需要遵循顺序
                1.布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)
                2.自身属性:width / height / margin / padding / border / background
                3.文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
                4.其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
       以上所述,受格式所限,略显凌乱,却干货满满,字字均为所学所码。望诸君,凑活着看···

1 个回复

倒序浏览
自己当自己的一楼,望楼主好好学,变秃也变强了
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马