zoukankan      html  css  js  c++  java
  • 软件测试学习-CSS基础

    1.单选按钮

    <input type="radio" name="xb" id="nan" checked="checked"/> <label for="nan">男</label>

    注意 : 添加name属性实现单选效果

        添加label标签实现选男也可以实现单选效果,前提是for属性与对应的单选按钮的id属性值一致

        设置默认选中状态,要给单选按钮添加checked="checked"属性

    2.下拉菜单

    <select name="">

      <optgroup label="鹤山">

        <option>沙坪</option>

        <option selected="selected">古劳</option>

      </optgroup>

    </select>

    selected="selected"默认选中状态

    3.文本域

    <textarea width='' " height=" " placeholder=""></textarea >

    注意不能用cols rows 来设置宽高,要用width,height设置  placeholder设置提醒文字

    4.多选框

    <input type="checkbox">

    设置与单选框一致

    5.按钮

    <input type="reset">重置按钮

    <input type="sumbit">提交按钮

    设置autofocus="autofocus"设置第一个文本框上,默认选中状态

    6.css基础语法

    放在head标签之间

    <style type="text/css">

    标签选择器   p{Text-indent:2em;}

    id选择器        #id名

    类选择器      .class名(经常用,可以重用,并且可以可以添加多个样式)

    选择器的权重  id选择器  >类选择器 >标签选择器

    后代选择器    Div span

    并级选择器     Div,span

    标签选择器   div.类名

    </style>

    <div></div>大容器           (可以在一行显示)

     <span></span>小容器   ( 可以在一行显示)

    7.css的引入方式

    内嵌式  电商首页必须用

    外链式   使用<link />(标签) 实现代码分离

    行内式(权重最高)

    内嵌式和外链式权重一样,先写会被后写覆盖

    8.css常用属性

    font-weight 设置字体的粗细 normal 代表不加粗   bold代表加粗

    font-style 设置字体倾斜  italic 代表倾斜 normal代表不倾斜

     text-decoration 设置线 none 没有线 underline 下划线  overline 上划线

    line-through  贯穿线 删除线

    world-break:breal-all  强制换行

    :hover  代表鼠标悬停状态的样式

    line-height 行高

    9.边框属性

    Border:1px solid(实线) red;  dashed(虚线)  四个方向border-left (right top right bottom )只有实线和虚线兼容

    10.css盒子模型

    padding 内边距  margin 外边距

    11.html5  新标签  建议pc端不要用,手机段可以用

    header  头部

    nav  导航

    aside  侧导航

    article  文章块

    footer  底部

  • 相关阅读:
    你必须会的 JDK 动态代理和 CGLIB 动态代理
    Dubbo 扩展点加载机制:从 Java SPI 到 Dubbo SPI
    volatile 手摸手带你解析
    Dubbo之服务消费原理
    Dubbo之服务暴露
    ElasticSearch之映射常用操作
    Redis5新特性Streams作消息队列
    .NET 开源项目 StreamJsonRpc 介绍[下篇]
    .NET 开源项目 StreamJsonRpc 介绍[中篇]
    .NET 开源项目 StreamJsonRpc 介绍 [上篇]
  • 原文地址:https://www.cnblogs.com/1617-fung/p/11331949.html
Copyright © 2011-2022 走看看