• day51 Pyhton 前端02


    内容回顾:

      1.h1~h6:加粗,数字越大级别越小,自动换行

      2.br:换行;hr:分割线; (特殊符号,空格)

      3.p:与前边和后边内容之间有间距

      4.a标签的href:本地文件连接;网络连接;锚链接

        target:_blank另起页面,默认是自己页面

        name:主要为了设置锚链接的锚点

      5.img图片,src:本地文件地址和网络地址

        alt:图片损坏时给的提示

        align:图片的对齐方式

        title:鼠标悬浮时提示的文字

        宽度

        height:高度

      6.ul:无序列表,内部能包裹li,type更改显示的样式,默认是实心圆,还可以更改为空心圆(circle)和正方块(square)

      7.ol有序列表,内部能包裹li,type类型,默认是阿拉伯数字,可更改为大小写字母,还可以更改为罗马文字 start,序号起始位置

      8.dl定义列表dt,dd*5 tab一下就出来了,pycharm帮我做的

      9table表格标签,border:边框类型;bordercolor:边框颜色;bgcolor:背景颜色,background:被禁图片,宽高align:对齐方式;style='border-collapse:collapse''让表格的线条变成实心线.

      tr代表一行

      td代表一行内的一个单元格;rowspan:纵向合并;colspan:横向合并

      10.form表单;action:对应要提交的网络地址;method:get和post两个方法,默认是get

        input的类型们

       text普通文本输入框

       password密文文本输入框

       checkbox,多选框,多用来服务条款点那个对号

       radio 单选,多用于选择性别,name得统一才能实现单选

       file 文件上传按钮

       date,日期选择框

       submit:form表单提交数据时候用它

       button:普通按钮

       image:一个图片,自带submit,src(王瑞东)=图片地址

       select:下拉菜单,更改下拉菜单的多选multiple,size

         option 下拉的每一个选项,默认选中此选项用selected

       textarea:文本输入框,可改变大小

    今日内容

      HTML尾巴

      CSS的引入方式

      CSS的选择器

      CSS选择器进阶

      CSS选择器的优先级

      CSS的伪类选择器

    div

      是块儿级标签,块级标签内的文本,超过了块的宽度则会自动换行,但是如果是长英文没分割的字符串,不会换行,会溢出

    span

      是行级标签,一个行内的宽高和背景大小由填充的内容决定,不管内容多少,都不会溢出

    行内块

       可以设置宽高,不自动换行.在一行内显示,而且可以设置宽高,一个底边对齐的现象img图片标签,input输入框,textarea文本输入区域

    行内标签

      不能设置宽高,不自动换行,同时具备,a标签,span标签,b加粗标签 strong与b一样都是加粗标签,em将字符变斜标签,i将字符变斜标签,u字体里加下划线标签,del字体中间加划线标签

    块级标签

      可以设置宽高,可以自动换行同时具备,p标签,h1~h6,table,列表:ol;ul;dl,div

     其他:不在上边三类里的

      form标签  不算,它是一个容器,容器内放了很多标签,他自己有自己的属性,br,hr

    CSS的简介

    cascdaing style sheet 层叠样式表,简称CSS

    层叠:通过CSS的属性等把页面层叠起来

    样式:设置页面每一块的样式

    表:页面排版

    CSS的书写方式

    方式一:行内式,在标签中直接书写

      优点:肯定不会选错标签

      缺点:代码冗余,且修改不方便

    方式二:一个页面内接入的,称为内接式

      书写在head里的style标签里

      优点:修改方便,直观

      缺点:关联性太强.如果写错变量名可能会酿成大祸

    方式三:外接式

      导入方式:利用link标签导入

      优点:协同开发,不同类型的代码分文件存放

       缺点,文件出问题或者丢了,页面就塌了

    CSS基本选择器

    基本选择器中的标签选择器

      通过标签名直接就可以选择到标签,页面中所有符合选择条件的标签都会被选择

    id选择器:常涛

      通过#号找到id

      id不能以数字开头

      指哪打哪,因为id是唯一的

    类选择器

      通过.找到类名

      类名可以重复

      类一般值的同一群相同属性的统称

    通配符选择器

      用*号操作所有标签

      使用场景:删除边框

    * {
                 100px;
                height: 100px;
                margin: 0;
                padding: 0;
            }

    CSS的优先级

      标签选择器层级一致的时候,从上往下,以下边的为准

      类的选择器的优先级大于标签选择器

      通过id找到的具有唯一性,优先级最高

      行内样式的设置优先级最高

      继承的样式优先级是最低的s

    CSS的高级选择器

    后代选择器

    /* 后代选择器 */
            body li {
                color: red;
            }

    子代选择器

     /*!* 子代选择器 *!*/
            body ul > p {
                color: green;
            }

    弟弟选择器

    /*!* 弟弟选择器 *!*/
            h1 ~ h2 {
                color: pink;
            }

    毗邻选择器

    /*!* 毗邻选择器 *!*/
            h1 + h2 {
                color: #cc6600;
            }

    组合选择器

    /* 组合选择器 */
    h1 ~ h2, li, h1 {
        color:darkviolet ;
        color: green;
    }
    伪类选择器
    
    a标签的四个形态:爱恨准则  LoVe HAte
    <style>
            /* 爱恨准则LoVe HAte */
            a:link {
                color: green;
            }
            a:visited {
                color: blueviolet;
            }
            a:hover {
                color: yellow;
            }
            a:active {
                color: red;
            }
        </style>
    <body>
    <a href="http://www.jd.com">a标签未被点击时的形态link</a><br>
    <a href="#">a标签被点击时的形态</a><br>
    <a href="#">a标签点击完毕时的形态</a><br>
    <a href="#">a标签悬浮时的形态</a><br>
    
    </body>

    伪元素选择器

       <style>
            /* 在文本之前添加内容 */
            div:before {
                content: "SB";
            }
            /* 在文本之后添加内容 */
            div:after {
                content: "翔";
            }
            /* 文本的第一个字母发生变化 */
            div:first-letter {
                color: green;
            }
            /* 文本的首行发生变化 */
            div:first-line {
                color: #cc6600;
            }
        </style>
    <div>alex吃...</div>

    注意:伪元素选择器,仅仅适用于块级标签.

  • 相关阅读:
    .Net Core使用xxljob定时任务
    Nginx分片限流实现
    [LeetCode] 2288. Apply Discount to Prices
    [LintCode] 183. Wood Cut
    [LeetCode] 1995. Count Special Quadruplets
    [LeetCode] 1534. Count Good Triplets
    [LeetCode] 2280. Minimum Lines to Represent a Line Chart
    【pandas官方文档用户指南】2.数据结构简介
    【pandas官方文档新手教程】:2.十个入门问题
    【pandas官方文档用户指南】1.十分钟入门
  • 原文地址:https://www.cnblogs.com/pythonz/p/10181203.html
Copyright © 2020-2023  润新知