zoukankan      html  css  js  c++  java
  • web前端 day12今日大纲

    内容回顾:
    一.HTML
    语义化标签
    目的:
    1.认识这些标签含义
    2.根据需求来搭建网页的结构
    img src
    <p>alex</p>
    缺点:太丑

    二.CSS
    作用: 网页的样式,美化页面.
    目的: 用户体验
    - css的引入方式
    1.行内样式
    优先级最高
    2.内嵌样式
    style标签
    3.外接样式
    link
    href属性连接css文件
    开发实战项目应用最多
    - 选择器
    1.基本选择器
    标签选择器
    div{}
    id选择器
    #box{}
    class选择器
    .box{}

    2.高级选择器
    后代选择器
    选中的是儿子,孙子....
    div p{}
    子代选择器
    只选中儿子-
    div>p
    组合选择器
    html,body,p,ul,ol,dl{
    padding: 0;
    margin: 0;
    }
    reset.css
    交集选择器
    div.active{
    }
    属性选择器
    input[type=text]{
    }
    伪类选择器
    a:hover{}
    3.继承性和特殊性
    继承:
    个别的属性: color,line-height,text-xxx,font-xxx
    特殊性:
    权重
    行内样式 > id > class > 标签
    1000 100 10 1

    数当前选择器的个数: id class 标签

    谁的数值大,权重就高,优先级就高

    继承来的属性优先级接近0
    4.网页常用排版样式
    字体的设置
    字体颜色:color:单词|rgb(0~255,0~255,0~255)| 十六进制表示法 #ff6700
    字体大小: font-size: px(像素:绝对单位),rem,em(相对单位:相对于当前盒子的字体大小),vh,vw
    字体粗细:font-weight: normal | bold | 100~900
    字体样式: font-style:none | italic
    文本的设置
    文本修饰:text-decoration:none | underline
    文本对齐方式:text-align:left | center | right
    文本的行高:line-height
    如何让一个盒子中的文本水平垂直居中
    text-align:center;
    line-height: 盒子模型的内容的高度
    5.盒子模型
    标准文档流:
    一个网页在不受任何布局的影响下,它内部HTML标签的默认排版样式

    从左往右,从上往下,这种布局叫流式布局
    内容的宽度
    height: 内容的高度
    padding: 内边距
    margin: 外边距
    border: 边框
    1px solid red;

    根据方向划分
    border-top: 1px solid red;

    border-color: red green blue yellow;
    border- 2px;
    border-style: solid;

    标准文档流下margin垂直方向会出现塌陷问题

    浮动的盒子,margin不会出现任何问题



    6.浮动
    float:left|right
    浮动的盒子:
    1.脱离标准文档流(脱标)
    2.贴边现象



    今日内容:
    一. 标签分类
    默认是在标准文档流
    display:inline|block|inline-block|none;

    - 标签分类
    行内标签
    span,a,em,i,strong,b

    特点:
    1.在一行内显示
    2.不能设置宽高,如果不设置宽 默认是字体的大小

    一个块级元素转行内 很少使用
    行内块标签: display:inline-block;
    input,img

    块级标签
    div p ul ol li dl dt form table h1~h6
    特点:
    1.独占一行
    2.可以设置宽高,如果不设置宽,默认是父元素100%的宽度

    ********一个行内转行内块和块应用最多********

    二. 浮动布局
    设计浮动布局的初衷: 文字环绕
    float:left|right
    浮动的盒子:
    现象:
    1.脱离标准文档流(脱标)
    2.贴边现象
    3.文字环绕
    4.收缩现象(一旦给元素设置浮动,可以任意设置宽高)
    好处:
    排版: 在一行上并排显示
    问题:
    一旦给子元素设置浮动,父元素不设置高度,因为浮动元素脱标了,不在页面上占位置,撑不起父元素的高度
    清除浮动的方式:
    1.给父盒子设置固定高度
    缺点:后期不易维护
    2.内墙法(理解)
    clear:both; 清除左右两边浮动带来的影响
    在最后一个浮动元素的后面加一个空的块级元素(标准文档流),并且设置该元素为
    缺点: 代码冗余
    3.伪元素清除法
    .clearfix::after{
    content:'';
    display: block;
    clear: both;
    /*display: none;*/
    /*visibility: hidden;*/
    /*height: 0;*/
    }
    3.overflow:hidden;




    三. 定位布局
    position:static;静态 默认的

    position: relative;相对定位
    参考点:以原来的位置为参考点
    现象:
    1.压盖现象(一般不用)
    2.微调元素

    布局方案:
    子绝父相

    position: absolute; 绝对定位
    参考点:
    单独设置绝对定位,以页面左上角为参考点
    有子绝父相,以最近的父辈元素的左上角为参考点
    现象:
    1.脱标
    2.压盖现象(常用)

    position: fixed; 固定定位
    参考点:浏览器的左上角
    现象:
    0.固定在网页上不变
    1.脱标
    2.压盖(一般不用)
    作用:
    固定导航栏,小广告,回到顶部
    四.z-index
    z-index只应用在定位的元素,默认z-index:auto;
    z-index取值为整数,数值越大,它的层级越高
    如果元素设置了定位,没有设置z-index,那么谁写在最后面的,表示谁的层级越高。
    从父现象。通常布局方案我们采用子绝父相,比较的是父元素的z-index值,哪个父元素的z-index值越大,表示子元素的层级越高。


    五. 背景图
    background-color:red;
    background-image:url(地址)

    HTML4.01 css2.1
    HTML5 CSS3(了解)


    练习:
    moment.js

    jquery.js
    下午: JS
    JS基础语法
    基本数据类型
    number string boolean null undefined
    引用数据类型

    ******流程控制****
    if
    switch
    while
    for


    常用对象:
    ********* 函数 *******
    ******* string *******
    ******* Array ********
    ****** Object *******

    字符串转数值?
    parseInt()
    parseFloat()
    数值转字符串
    小技巧: 一个数字+ ""
    toString();
  • 相关阅读:
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 实现业务
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 开发流程
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 报表系统集成说明
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 处理报表
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 数据访问
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 分布式应用
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 实现插件
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 对象设计器使用帮助
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 数据层开发
    Jquery 中的CheckBox、 RadioButton、 DropDownList、CheckBoxList、RadioButtonList的取值赋值
  • 原文地址:https://www.cnblogs.com/lilyxiaoyy/p/11151055.html
Copyright © 2011-2022 走看看