纯HTML做出几个实用网页效果_web世界之窗的博客-程序员ITS301_纯html网页

技术标签: web前端  css  前端  html  javascript  

在我们以往看到的页面效果中,很多效果是需要JS搭配使用的,而今天在本文中,我将介绍如何使用纯HTML打造属于自己的实用效果。

1. 折叠手风琴

使用Details和Summary标签可以创建没有JavaScript代码的可折叠手风琴。

效果:

HTML

<details>
<summary>Languages Used</summary>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p>
</details>

<details>
<summary>How it Works</summary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p>
</details>

CSS

* { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
} details { border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0;
} summary { font-weight: bold; margin: -.5em -.5em 0; padding: .5em;
} details[open] { padding: .5em;
} details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em;
}
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

浏览器支持:

**2. **进度条

该Meter和Progress的元素标签的基础上,你可以调整属性呈现在屏幕上的进度条。进步有两个属性:maxvalue校准进度条,而Meter标签提供了更多的定制属性。

效果:

HTML:

<label for="upload">Upload progress:</label>

<meter id="upload" name="upload"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

<hr/>

<label for="file">File progress:</label>

<progress id="file" max="100" value="70"> 70% </progress>

CSS:

body {
  margin: 50px;
}

label {
    padding-right: 10px;
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

浏览器支持:

3. 更多输入类型

在定义输入元素时,您要知道现代浏览器已经允许您指定足够多的输入类型了。除了你应该已经知道text,email,password,number这些类型外,还有下面的这些。

  • date 将显示本机日期选择器
  • datetime-local 更丰富的日期和时间选择器
  • month 友好的月份选择器
  • tel会让你输入一个电话号码。在移动浏览器上打开它,弹出的键盘将发生变化,同样的email也是如此。
  • search 将输入文本框设置为友好的搜索样式。

效果:

HTML:

<label for="date">Enter date:</label>
<input type="date" id="date"/>

<label for="datetime">Enter date & time:</label>
<input type="datetime-local" id="datetime"/>

<label for="month">Enter month:</label>
<input type="month" id="month"/>

<label for="search">Search for:</label>
<input type="search" id="search"/>

<label for="tel">Enter Phone:</label>
<input type="tel" id="tel">

CSS:

input, label {display:block; margin: 5px;}
input {margin-bottom:18px;}

各种新输入类型的MDN文档非常广泛且信息量很大。此外,检查移动输入类型以了解用户在移动浏览器上时这些输入元素的键盘行为。

4. 视频和音频

videoaudio元素虽然现在已经成为HTML规范的一部分,但是你一样会惊讶于你可以使用video标签在屏幕上渲染出一个体面的视频播放器。

<video controls>

    <source src="https://addpipe.com/sample_vid/short.mp4" 
            poster="https://addpipe.com/sample_vid/poster.png">

    Sorry, your browser doesn't support embedded videos.
</video
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

视频标记中值得注意的一些属性包括:

  • poster 下载视频时要显示封面的URL
  • preload 是否在页面加载时预加载整个视频
  • autoplay 视频是否应该在页面加载后自动播放

浏览器支持:

**5. **校对文本

当你想显示历史编辑及校对的情况时,blockquotedelins元素标签可以派上用场了。

示例:

HTML:

<blockquote>
    There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>

CSS:

del {
    text-decoration: line-through;
    background-color: #fbb;
    color: #555;
}

ins {
    text-decoration: none;
    background-color: #d4fcbc;
}

blockquote {
    padding-left: 15px;
    line-height: 30px;
    border-left: 3px solid #d7d7db;
    font-size: 1rem;
    background: #eee;
    width: 200px;
}

6.更统一的引号

由于中英文引号的不同,使用<q>标记可以让您很好的解决这个问题,它可使你的内容在大多数浏览器上更一致地呈现引号。

HTML:

Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p>


<hr/>

Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>

CSS:

body {
  margin: 50px;
}

q {
    font-style: italic;
    color: #000000bf;
}

7. 键盘标签

<kbd>标签应该是一个少为人知的冷门标签,但这个能使用更好的方式来说明组合键的样式。

HTML:

<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>

CSS:

body {
  margin: 50px;
}

kbd {
    display: inline-block;
    margin: 0 .1em;
    padding: .1em .6em;
    font-size: 11px;
    line-height: 1.4;
    color: #242729;
    text-shadow: 0 1px 0 #FFF;
    background-color: #e1e3e5;
    border: 1px solid #adb3b9;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
    white-space: nowrap;
}

8.使用HTML共享代码

使用figcaption pre code``标签,您可以使用纯``HTML``和``CSS``呈现出不错的代码片段。

HTML:

<figure>
  <figcaption>
      Defining a css <code>color</code> property for a class called 'golden'
  </figcaption>
  
  <pre>
    <code>
      .golden {
        color: golden;
      }
    </code>
  </pre>
</figure>
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

CSS:


pre {
  background-color: #ffbdbd;
}

这篇文章也只是抛砖引玉,还有更多技巧,大家可以关注一下。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45974707/article/details/103737002

智能推荐

php icuuc57.dll,icuuc57.dll_Jeffrey Zhuang的博客-程序员ITS301

icuuc57.dll是一款在使用Windows操作系统时经常会出现文件丢失的重要dll文件如果您的电脑系统提示这款icuuc57.dll文件丢失请马上下载原文件进行程序修复工程。。相关软件软件大小版本说明下载地址icuuc57.dll是一款在使用Windows操作系统时经常会出现文件丢失的重要dll文件,如果您的电脑系统提示这款icuuc57.dll文件丢失,请马上下载原文件进行程序修复工程。文...

Java面向对象高级部分——Pattern类(二十一)_毛栗子201105的博客-程序员ITS301

Pattern类:此类包含了所有正则的内容这是正则操作中最重要的一个类,所有的正则规范都需要在这类当中进行定义,要使用到这个类,就需要获得此类的对象,观察一下(API),发现此类没有构造方法,那么该如何实例化呢。package obc13;import java.util.regex.Pattern;public class OopDemo03 { public static void main(String[] args) { String str = "sdf...

编译安装0bda 8179无线网卡_weixin_30553065的博客-程序员ITS301

CentOS下安装USB无线网卡(Obda:8179) 参考:http://blog.163.com/thinki_cao/blog/static/83944875201311593529913/ cd /root/Downloads/rtl8188eu make make install #完成后会出现模块/lib/modules/`name -r`/drivers/net/wi...

python 正在运行的程序,通过另一程序杀死该程序_心--瘾的博客-程序员ITS301

python 正在运行的程序,通过另一程序杀死该程序# 获取当前程序的idprint(os.getpid())# 进行杀死import signalos.kill(58372, signal.SIGKILL)```操作(第二个参数)的常用取值为:SIGINT 终止进程 中断进程SIGTERM 终止进程 软件终止信号SIGKILL 终止进程 杀死进程SIGALRM 闹钟信号...

STM32 GPIO 配置之ODR, BSRR, BRR 详解_Naunyang的博客-程序员ITS301

Author:DriverMonkeyMail:[email protected]:196568501Phone:18575593141欢迎交流!&nbsp;用stm32 的配置GPIO 来控制LED 显示状态,可用ODR,BSRR,BRR 直接来控制引脚输出状态.ODR寄存器可读可写:既能控制管脚为高电...

.NET Framework 4.5新特性_weixin_33696822的博客-程序员ITS301

.NET Framework 4.5新特性开发者预览版.net 4.5.NET for Metro style appsMetro风格的应用程序是利用Windows操作系统的强大功能设计的特殊表单元素。一个称之为.NET APIs for Metro style apps的.Net的一个子集用来支持Metro风格的应用程序,可以使用C#或Vis...

随便推点

nodemanager无法启动--Linux container executor not configured properly (error=24)_戴梦得的博客-程序员ITS301

nodemanager无法启动--Linux container executor not configured properly (error=24)2014-12-10 09:10:07,204 WARN org.apache.hadoop.yarn.server.nodemanager.LinuxContainerExecutor: Exit code from container executor initialization is : 24ExitCodeException exitCode=

玩转Android10源码开发定制(六)修改内核源码绕过反调试检测_xiaomaNo01的博客-程序员ITS301

一、Android反调试反调试在代码保护中扮演着非常重要的角色,虽然不能完全阻止攻击者,但是能加大攻击者的分析时间成本。目前绝大多数Android app都加固了,为了防止App被调试分析,加固功能中添加了各种反调试功能,比如:自己ptrace自己、检查函数执行时间、读取/proc/$pid/wchan或者/proc/$pid/task/$pid/wchan文件信息判断调试状态、读取/proc/$pid/stat或者/proc/$pid/task/$pid/stat文件信息判断调试状态、读取/...

国密SM2素域椭圆曲线快速约减算法x64编程研究(下)_weixin_33711647的博客-程序员ITS301

2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

HTML5和CSS3_qq_43479942的博客-程序员ITS301

HTML5HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。HTML5新特性HTML5 中的一些有趣的新特性:(1)用于绘画的 canvas 元素(2)用于媒介回放的 video 和 audio 元素(3)对本地离线存储的更好的支持。localStorage长期存储数据,浏览器关闭后数据不丢失,数据一直保留到通过javascript删除或者用户清除...

java se课后题答案_Javase课后题答案(1-6)_weixin_39953578的博客-程序员ITS301

Javase课后题答案(1-6) 第 1 章 Java 概述1. 编译 java application 源程序文件将产生相应的字节码文件,这些字节码文件别的扩展名为.class2. 执行一个 java 程序 fristapp 的方法是运行 java fristapp3. main()方法的返回类型是 void4. 在 java 代码中,public static void main 方法的参数描...

推荐文章

热门文章

相关标签