![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
开心肖肖乐-
这个作者很懒,什么都没留下…
展开
-
制作交互式导航栏
今天我们要做一个交互式的导航栏,当页面宽度变小时,但导航栏所显示的样式也不同。点击图标打开下拉菜单。先看一下效果把HTML部分:我们先把html代码给出来,这里用到的是最基本的一个布局。设置了两个div第一个是导航栏上方的绿条,第二个div里面通过若干个div来实现他的内容的输出。...原创 2020-04-30 22:13:09 · 949 阅读 · 0 评论 -
HTML实现banner图切换
首先呢,我们做出来的效果去下图,这里只是简单的写的文字,如果需要更好的话,可以自己添加或修改。(这里图片大小没有统一,有一丢丢影响效果)接下来我们来看看详细的代码HTML部分:这里主要设置了三个盒子并列。一个存放banner图、一个是左侧的黑色背景还有一个是左侧的文字。(因为这里是设置了黑色盒子的背景透明度,为了实现背景透明、文字不透明,所以这里用的是两个盒子通过设置位置来实现的。)存放...原创 2020-05-06 20:26:45 · 9163 阅读 · 3 评论 -
CSS3综合动画应用
这里我们主要是使用到的是css3的一部分动画效果。主要是用到了animation属性比较多。然后这里每个外层的盒子的背景颜色和宽高等基本属性就可以自己随意设置,所以在下面的代码中就不在讲到。(下面我们挑选其中的几个来讲解)第一个HTML:这里行内式就是设置的动画的延迟时间和第一个div距离外层框架的距离。<div id="box1"> <div style=...原创 2020-04-17 17:36:18 · 344 阅读 · 0 评论 -
HTML制作简单交互网页
今天我们要做的事一个简单的交互式网页,主要用的是设置百分比宽度以及媒体查询器。先看一下效果:原创 2020-04-14 17:48:54 · 8360 阅读 · 0 评论 -
html5+JS制作音乐播放器
今天我们要实现的这个播放页面主要是通过audio标来实现,然后上一首、暂停等按钮时通过字体图标来实现的。先看一下最终的效果:HTML部分:这里最外层用来两个盒子photo和words,分别用来存放图片和歌词。然后左边盒子里面放了两个div标记,分别用来存放图片和图标。这里图标是用的子图图标来实现的。然后歌词部分是直接放在div里面的。<body> <!-- 图片 ...原创 2020-04-13 16:32:03 · 2895 阅读 · 2 评论 -
HTML+CSS制作登录界面+H5表单特性
首先,给大家看一下效果图。不过这里用到了一些H5表单的新特性,下面在来讲解。HTML5新增的表单属性autocomplete属性autocomplete属性用于指定表单是否有自动完成功能。所谓“自动完成”是指将表单控件输入的内容记录下来,当再次输入时,会将输入的历史记录显示在一一个下拉列表里,以实现自动完成输入。autocomplete属性有2个值:on: 表单有自动完成功能。...原创 2020-03-29 11:10:10 · 1778 阅读 · 0 评论 -
JS实现简单选项卡的切换
我们要实现的是单击一个按钮然后显示对于的内容。所以我们先设置4个按钮、4个存放的内容的div标记。先来看一下效果图。然后设置div的宽高属性;使用float属性使其处于同一行,并且要把4个div标记的display设置为none,然后再通过行内式设置第一个div的display为block,这怎么做的目的是实现当前页面只显示了一个盒子;最后还要设置一个avtive类,这个类实现的功能是当点击时...原创 2020-03-27 20:06:52 · 852 阅读 · 0 评论 -
HTMLtransform属性制作立方体
今天这个立方体主要是通过transform属性实现的,首先,我们先来看一下效果图。这个立方体主要是通过设置了6个div标记,然后通过设置他们的rotate属性来实现三维的效果。整个框架HTML部分这里是整个页面的框架<!DOCTYPE html><html> <head> <meta charset="utf-8"> <...原创 2020-03-25 22:33:51 · 541 阅读 · 0 评论 -
transform、transition属性的部分应用
今天这篇主要是利用一些属性来实现下面图片中完成的效果。首先整个页面的布局是通过使用4个div然后设置他们的宽高以及浮动等属性。在每一个div里面分别存放两个盒子,分别用来装文字和图片。效果图:CSS代码:.one,.two,.three,.four{ width: 200px; height: 240px; float: left; margin-left: 150px; tex...原创 2020-03-24 23:17:45 · 283 阅读 · 0 评论 -
CSS+HTML制作基本形状图案和动画
今天讲解一下如何制作一些基本形状,先放一张最后的效果图,然后下面一一地讲解。圆环是通过两个正圆,然后设置它的border-radius属性、背景色以及外边距来实现中心对齐。具体的代码如下:HTML部分<!-- 圆环 --> <div class="one"> <div class="one1"></div> <div c...原创 2020-03-21 10:41:28 · 1376 阅读 · 0 评论 -
HTML制作手机邮箱界面
HTML部分这一个页面没有用到太多新的知识。主要是通过fontawesome字体图标来实现。整个有页面分为6个部分,每一部分定义一栏信息,其中包括字体图标,文字以及右边的消息数量。消息数量主要是通过设置span元素的圆角来实现的。<!DOCTYPE html><html> <head> <meta charset="utf-8"> &...原创 2020-03-15 23:24:04 · 3813 阅读 · 0 评论 -
HTML+CSS制作网页推广界面
今天这个网页,其实用以前的基本方法也可以做出来。在这里主要是用到了CSS3的新特性font-face以及fontawesome的应用。HTML部分这一部分的主要框架如下图:黑色的div里面存放的是英文。h3和p标记存放的相应的文字。紫色的div里面是存放的图标和文字,这里的图标不是插入的图片。是使用fontawesome完成的。通过设置边距来实现了四个图标的分布效果。下面是代码:<...原创 2020-03-15 18:39:53 · 3112 阅读 · 0 评论 -
HTML制作课程表界面
HTML部分由于我们做的是一个静态页面。所以在这里用到的只是简单的表格标记。然后通过设置其宽高,行列合并等属性实现课程表的排版。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="styleshe...原创 2020-03-12 15:27:29 · 2175 阅读 · 0 评论 -
CSS选择器
伪选择器属性选择器原创 2020-03-06 20:29:01 · 238 阅读 · 0 评论 -
HTML代码制作html5图标
HTML部分这个图标全部是由div标记来实现的,首先定义了一个大的框架,然后在里面并列存放光束、盾牌、数字和HTML字样图片。光束是通过把div设置成长条的形状,然后复制多个,使用transform的rotate属性来实现旋转,最后实现光束的制作然后通过设置宽高和它们的位置来制作盾牌和数字5以及右边橘色部分。最后插入图片。<!DOCTYPE html><html> ...原创 2020-03-01 17:56:22 · 2495 阅读 · 0 评论 -
HTML表单(正则表达式验证)
HTML部分定义了一个9行3列的表格,通过部分行列的合并,然后将表单的input部件嵌入到表格的单元格中,然后设置单元格的宽高来实现表格的对齐。表单部件中使用了H5新增的颜色选择器color、设置日期data、电子邮件email和required等部件,使得输入更规范有效。<html> <head> <meta charset="utf-8" /> ...原创 2020-02-29 22:54:13 · 3783 阅读 · 0 评论