AI 助理
备案控制台
开发者社区 人工智能 文章 正文

html和css进阶

2023-09-19 53
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： html和css进阶

一、表单

input

应用场景：登录  注册  搜索  --- 用户输入    input

他们的共同点是用户输入之后才可以进行

表单的作用：供用户输入


表单域 form action：提交地址  method提交方法get和post

5.0之前没有placeholder新增功能，之前是value（提示的文字需要用户删除，而且字的颜色也没有变暗）实现的

<input> -- type属性取值不同则功能不同

文本框：text

密码框：password

单选框：radio（实现单选功能）

  1. 单选功能：把input加name属性且保证取值相同即可
  2. 默认选中：xhtml1.0 checked=“checked”；html5.0如果k==v，省略等号引号保留一个单词也是键值对的意思 – checked
  3. 扩大触发区域（在添加文字也有选择功能的时候）：
  1. Xhtml1.0：文字放到label标签里面，保证label标签的for属性值和radio的id属性值相同
  2. Html5.0：文字和radio放到一个label标签里面即可

复选框：checkbox

上传文件：file

提交按钮：submit

普通按钮:button

重置按钮：reset

  1. submit  w3c已经封装好了提交的功能，后端不需要再写功能
  2. 重置按钮有重置这个功能，但是基本不用，没有需求
  3. button按钮有提交功能，但是老是出错，不用

文本域：textarea标签

  1. 焦点框：获得焦点  失去焦点
  2. outline为none可以取消焦点框

下拉菜单：select嵌套option  默认选中selected


小拓展知识：


表单提交中get和post方式的区别有5点
1.get是从服务器上获取数据，post是向服务器传送数据。
2.get是把参数数据
队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各
个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5.get安全性非常低，post安全性较高。

代码：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
     textarea{
        /* 禁用拖拽功能 */
        resize: none;
        width: 500px;
        height: 300px;
        /* 去掉焦点框 */
        outline: none;
    }
    </style>
</head>
<body>
    <!-- 将来发送数据 收集好之后再发送 -- 收集功能的是form标签  form:表单  表单域 -->
<form action="提交地址" method="post">
    <!-- form里面的功能标签叫表单控件 -->
    <!--  placeholder="请输入用户名" 是html5.0新增功能 -->
    <!-- **** 获取用户输入的内容就是获取value属性的值而已 -->
    文本框：<input type="text" value="设置会员名">
    <br><br>
    密码框：<input type="password">
    <br><br>
    单选框：<input type="radio" name="sex" value="man" id="nan"><label for="nan">男</label> <label><input type="radio" name="sex" value="woman" checked>女</label>
    <!-- 
        单选功能：input 加name=“” 取值相同: 
        只要表单就是为了提交数据：应该是键值对的方式提交，值是vlaue属性值，key是name属性值
        sex=man
        1.sex=man
        2.sex=woman  后边的键值对覆盖前面的键值对所以加name保证取值一样可以实现单选功能
     -->
     <br><br>
     复选框： <input type="checkbox" checked>读书 <input type="checkbox">旅游 <input type="checkbox">打游戏
     <br><br>
     上传文件：<input type="file">
     <br><br>
     文本域：
     <textarea></textarea>
     <br><br>
     下拉菜单：
        <select>
                <option>北京</option>
                <option selected>上海</option>
                <option>广州</option>
            </select>
     <br><br>
     <input type="submit" value="同意并注册">
     <input type="button" value="普通按钮">
     <input type="reset">
     <button>按钮</button>
</form>
</body>
</html>



二、表格

知道有这么个东西，碰到的时候能认识就好了，用的少，只在数据统计的时候用。

国内2005年互联网网站大量改版：从表格布局改版成div布局

表格布局：浏览器读取所有代码显示效果

Div布局：浏览器读取一部分代码则显示一部分效果

 

现在表格用来做网站的   数据统计区域

 

表格 table

行  tr

单元格 td

表头 th


代码：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>
 <body>
    <!--**** 结构：table嵌套tr，tr嵌套td，table是表格，tr是行，td是单元格 th是表头 -->
    <table border="1">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>
</html>


三、常用特殊效果小标签

  1. 带有强调语义的标签，搜索引擎很喜欢，搜索关键字，抓取网页的时候，会更排名靠前。是一种技术推广手段。
  2. 在写标签的时候，提前写好，否则在加选择器的时候，推广改掉之后，你的属性都会变，省去麻烦。


功能

强调语义

普通语义

倾斜

em

i

下划线

ins

u

加粗

strong

b

删除线

del

s


代码：


<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
     b{
        font-size: 40px;
        color: blue;
    }
    </style>
</head>
<body>
    <b>加粗</b>
    <i>倾斜</i>
    <u>下划线</u>
    <s>删除线</s>
   <!-- 所有标签都是有语义的 ：强调语义   普通语义 -->
    <strong>python</strong>
    <em>emem</em>
    <ins>ins</ins>
    <del>del</del>
</body>
</html>


四、*选择器

选择器就是找标签的方法，找到之后让它去执行css。

组选择器写标签的时候顺序无所谓


1、层级选择器/后代选择器  -- 空格

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
     <style>
         /* 空格父子级就是层级选择器：最终选中子级执行键值对 */
    ul li{
        color: red;
    }
    </style>
</head>
<body>
    <ul>
        <li>ul里面li</li>
       <p>pppppp</p>
    </ul>
    <ol>
        <li>ol里面的li</li>
    </ol>
</body>
</html>


2、组选择器 – 逗号

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
     /* body{
        color: red;
    } */
    /* 通配符选择器：选所有标签 */
    /* *{
        color: green;
    } */
    /* 逗号表示组选择器 */
    h1,span,div,p{
        color: blue;
    }
    </style>
</head>
<body>
    <h1>logo</h1>
    <span>span</span>
    <p>pppp</p>
    <div>divdiv</div>
</body>
</html>


3、伪类选择器： 以冒号开头 ：hover  -- 表示鼠标滑过  鼠标悬停

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <!-- <style>
     a:link{
        /* 单击前 */
        color: red;
    }
    a:visited{
        /* 单击后 */
        color: green;
    }
    a:hover{
        /* 鼠标悬停 */
        color: blue;
    }
    a:active{
        /* 点击时 */
        color: pink;
    }
    </style> -->
    <style>
  a{
        color: red;
    }
    a:hover{
        color: green;
    }
    </style></head>
<body>
    <!-- 伪类表示状态  超链接用到几率多  当什么什么时候 -->
    <!-- 伪类以冒号开头，后面紧跟一个w3c定义好的表示伪类的单词 -->
    <a href="#">东晓</a>
</body>0</html>



五、**盒子模型

5.1 布局

边框线：border：粗细  颜色  线条种类；

内边距 padding

外边距：margin

   margin和padding的设置方法完全一样，可以英文单词，可以四值写法。

加border和padding会撑大盒子：

  1. 手动减宽度高度；
  2. css3.0 启动盒子内减模式 box-sizing：border-box


占位尺寸：padding + border + content

手动写宽和高是css2.0上的作法；

css3.0上box-sizing：border-box

为了在形式上显示div的一个换行后的占位效果，外边距有可能显示的很多，其实没变。


5.2 边框线：

      单独设置单独方向的边框线border-方向英文单词  top  bottom  left  right

Solid – 实线

dashed – 虚线

dotted – 点线

 

5.2 padding-英文单词

5.3 padding多值写法

1：四个方向相同

2：上下  左右

3：上  左右  下

4： 上  右  下  左


代码：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
     div{
        width: 300px;
        height: 200px;
        background: #ccc;
        /* border 多值写法，各个值用空格隔开即可，值不分先后顺序 */
        /* border: 粗细  颜色  线条种类;   */
        border: 1px red solid;
        /* 内边距：边和内容之间的距离 */
        padding: 20px;
        /* css3.0 启动盒子内减模式的属性 */
        box-sizing: border-box;
       /* 外边距 margin */
        margin: 50px;
    }
   </style>
</head>
<body>
    <!-- 比喻句  标签 和 生活盒子： 快递盒：产品  纸箱子  填充物 -->
   <div>女装</div>
    sdfasdfasdf
</body>
</html>


盒子模型详解：


<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
    div{
        width: 200px;
       height: 200px;
        background: pink;
   }
    .box1{
        /* border-方向英文单词  top  bottom  left right */
        border-top:red 1px solid;
        border-right: 5px green dashed;
        border-bottom: 5px blue dotted;
    }
    .box2{
        padding-top: 10px;
        padding-right: 20px;        padding-bottom: 40px;
        padding-left: 80px;
    }
    /* padding可以和border一样取多值写法？最多写几个值 */
    .box3{
        /* 4值： 上  右   下  左 -- 从上顺时针一圈 */
        /* padding: 10px 20px 40px 80px; */
        /* 3值: 上 左右 下 */
        /* padding: 10px 40px 80px; */
        /* 2值： 上下  左右 */
        padding: 10px 80px;
    }
    </style>
</head>
<body>
    <!-- border -->
    <div class="box1">box</div>
<br><br>
    <!-- padding -->
   <div class="box2">box</div>
    <br><br>
    <div class="box3">box</div>
</body>
</html>

版心居中：


<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
    div{
        width: 1000px;
        height: 300px;
        background: green;
        /* 版心居中保证margin左右方向一样 */
        margin: 0 auto;
    }
    </style>
</head>
<body>
    <!-- 版心  居中：水平居中  1000 -1200 -->
    <!-- 版心：网页真实有效内容的标签 -->
    <div></div>
</body>
</html>


css初始化：


<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
    blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
        margin: 0;
       padding: 0;
    }
    ul,ol{
        /* 去掉列表符号 列表样式  项目符号 */
       list-style:none;
    }
    </style>
</head>
<body>
    <!-- css reset -->
    <h1>logo</h1>
    <p>ppppp</p>
   <div>div</div>
    <ul>
        <li>lili</li>
    </ul>
</body>
</html>


六、overflow属性

解决内容查出父级如何显示的问题

hidden    溢出隐藏

auto       溢出滚动，超出了才滚动

scroll      溢出滚动，无论是否超出都滚动


代码：


<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
    <style>
     div{
        width: 300px;
        height: 200px;
        background: pink;
        /* 默认值 超出显示 */
        /* overflow: visible; */
        /* ****  超出隐藏  溢出隐藏 */
        /* overflow: hidden; */
        /****** 溢出滚动：如果内容超出则加滚动条 */
       overflow: auto;
        /* 溢出滚动：无论内容是否超出都显示滚动条的位置 */
        /* overflow: scroll; */
    }
    </style>3</head>
<body>
    <div>解决内容查出父级</div>
</body>
</html>


七、display属性


转换元素类型：换行 – 块标签   不换行 – 行内

标签 == 标记 == 元素

 

块：换行，宽高生效，如果不写宽度占父级100%  block

行内：不换行，宽高不生效，尺寸和内容一样大 inline

行内块：不换行，宽高生效  inline-block

 

Display：none  隐藏  配合js

 

元素类型 == 标准流/文档流


代码：


<!DOCTYPE html>
 <html lang="en">
 head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
     div{
       width: 200px;
        height: 200px;
        background: green;
        /* display: inline; */
        /* display: inline-block; */
        /* 不占位隐藏 */
        /* display: none; */
        visibility: hidden;
    }
    span{
        width: 500px;
        height: 300px;
        background: blue;
        display: block;
    }
    /* 
        不换行的标签 -- 行内：书写宽高不生效；尺寸和内容一样大
        换行的标签 -- 块：书写宽度高度生效，不写宽度，宽度和父级一样大
        行内块 ：宽度高度生效，在一行显示
        拓展：浏览器执行 行内和行内块标签的时候当做文字处理，如果是文字之间敲空格或回车会识别一个空格的距离
    */
    </style>
</head>
<body>
        <div>div</div>
        <div>div</div>
        <span>span</span>
        <span>span</span>
</body>
</html>


八、**浮动


浮动：让块标签在一行没有间距的显示

None 默认值

Left    标签都左侧对齐显示

Right  右侧对齐显示


浮动的时候就是元素不再占用标准流的位置，但是会占用上层位置，就好像浮起来一样。

  1. 下面三个盒子，都设置了左浮动的时候，会按书写代码的先后顺序，依次排开。
  2. 如果是右浮动的话，还是按书写代码的先后顺序依次排开。也就是都设置浮动了，那么他们都浮起来了，会占用上面的位置。
  3. 如果是一个设置了左浮动，但是另外两个没有设置左浮动，那么就会出现下面的状况：1号设置了左浮动，他会不占用标准流的位置，浮起来，那么2号和3号会从标准流从头开始排序，也就是会出现1号套在了2号里面。（举的例子是下面的代码显示，不代表其他。）其他的话，就是相当于1号浮起来了，2号会从头开始，忽略了1号的位置。


代码：


<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
    <style>
     .box1{
        width: 100px;
        height: 100px;
        background: red;
        float: right;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: green;
        float: right;
    }
    .box3{
        width: 300px;
        height: 300px;
        background: blue;
        float: right;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>





九、**定位


让任意的标签叠加显示

Static – 静态定位 默认值

 

相对  relative

    <style>
     div{
         border: 1px solid red;
         position: relative;
         left: 200px;
         top: 200px;
     }
     /* 
        特点：
            1、参照物：它自己原来的位置
            2、占位
            3、不改变元素类型特点
    */
    </style>


绝对  absolute

    <style>
     div{
         border: 1px solid red;
         width: 500px;
         position: absolute;
         left: 0;
         top: 100px;
     }
     /* 
        特点：
            1、参照物：以最近的已经定位的父级为参照物，如果没有这样的父级则以浏览器为参照物
            2、不占位脱离标准流
            3、元素类型特点:行内块
    */


固定  fixed

    <style>
     div{
         border: 1px solid red;
        width: 500px;
         position: fixed;
         left: 0;
         top: 0;
     }
     /* 
        特点：
            1、参照物：浏览器
            2、不占位脱离标准流
            3、元素类型特点:行内块
   */
    </style>

 

改变定位标签的位置：配合偏移量属性  left  top  bottom right

  K：v;

Left:xx;


占位：就是我离开了原来的位置，但是原来的位置还给我留着。


固定定位和绝对定位最大的区别就是，设置了固定定位的元素不变化，但是网页其他内容会动。就好像网站里面，那些讨人厌的小广告，好像粘在了屏幕上一样，一直不改变位置。


只要是以浏览器为参照物，那么屏幕的分辨率就会干扰位置。


定位的应用：


<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
     /* 
        1、****验证子级绝对父级相对
        2、****父级绝对导致居中不生效 -- 绝对定位标签水平垂直居中
        3、定位的标签z-index改变显示顺序
        4、opacity测试内容和背景透明
        5、background只透明背景
    */
    .father{
        width: 500px;
        height: 300px;
        border: 1px solid black;
        margin: 0 auto;
        /* position: relative; */
        position: absolute;  /* 绝对的定位元素类型具备行内块特点：一行显示多个 auto无法进行计算*/
        left: 50%;
        margin-left: -250px;
        top: 50%;
        margin-top: -150px;
    }
    .father div{
        width: 100px;
        height: 50px;
    }
    .son1{
        background: green;
        position: absolute;
        left: 50px;
        top: 30px;
        z-index: 9;
    }
    .son2{
        background: pink;
        position: absolute;
        left: 100px;
        top: 50px;
        z-index: 10;
        /* opacity: 0.3; */
        background: rgba(0,0,0,0.5);
    }
    </style>
</head>
<body>
    <!-- 工作中：相对和绝对配合使用： 子级绝对，父级相对 -->
    <!-- 定位默认后来者居上 z-index，取值是整数，取值越大显示顺序越靠上 -->
    <!-- 设置透明度 完全透明  完全不透明  半透明 -->
    <!-- opacity:0-1闭区间 内容和背景一起透明 -->
    <!-- 只透明背景：background:rgba(1,2,3,4); r==red g==green b==blue a==alpha 0-255 -->
    <div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
    </div>
</body>
</html>


十、小知识点

  1. div         默认有换行的功能
  2. dr标签   也是换行
  3. 工作中很少用&nbsp；空格的实体符号，到时候会用距离调整
  4. 有的网站刷新页面后单选框默认有一个选中的选项，因为根据数据处理，用户群体默认一选项占比大，节省大部分用户的时间成本。
  5. 浏览器会默认给盒子一些值，我们需要将这些值取消，这些代码百度上都有，开源的。
  6. 下面这些标签都被废弃了，兼容性不好。blockquote缩进标签一个块的大小；fieldset线中有个缺口写文字；hr做水平分割线用；pre格式化输出（代码里面文字原样输出到网页位置）；
  7. div没加宽度，那么会默认和父级的宽度一样；
文章标签：
前端开发
JavaScript
编解码
搜索推荐
BI
关键词：
HTML CSS
CSS html
CSS进阶
HTML进阶
全栈技术精选
目录
相关文章
二二*一一
|
15天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
40 1
进步`于辰
|
18天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
40 1
[HTML、CSS]细节与使用经验
进步`于辰
|
19天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
30 1
[HTML、CSS]知识点
aliyun8599273441-30642
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
263 65
游客g5tp3lgf24cqc
|
14天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
游客g5tp3lgf24cqc
45 12
温轻舟
|
11天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
51 1
蓝易云
|
16天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
28 3
疯狂的猿
|
26天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
78 6
游客44yag4ft7nckq
|
25天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式，通过&lt;head&gt;部分的&lt;style&gt;标签定义；外部样式表适用于多个页面，通过&lt;link&gt;标签引用外部CSS文件；&lt;style&gt;定义样式，&lt;link&gt;引用资源；已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;，属性有color和bgcolor。
游客44yag4ft7nckq
24 0
游客44yag4ft7nckq
|
25天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式，以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
游客44yag4ft7nckq
14 0