web前端
Mayunling_
这个作者很懒,什么都没留下…
展开
-
导航栏
导航栏一、创建文件(index.html和style.css)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s原创 2021-04-13 09:24:08 · 118 阅读 · 0 评论 -
新闻网站
了解页面构造主要了解一下登录页面,新闻页面,二级页面的构造。首先我们在本地新建一个文件夹,然后我们选择应用的软件,打开这个文件夹,打开后创建“登录页面”为login.html和news.html。如图:1、编辑登录页面login.html效果图:1、设置内容标题:使用标题标签设置内容的标题 2、表单内容:用form标签创建一个表单,在form里创建input文本框和密码框,之后提交2、编辑新闻首页和二级页面效果图:在news.html嵌套表格,在标签中嵌套另一个表格。二级页面内容表原创 2021-04-09 08:59:09 · 322 阅读 · 0 评论 -
CSS设置背景透明度
CSS设置背景透明度实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法:1、css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.82、css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)3、IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)一、css3的opacity原创 2021-03-27 23:34:32 · 7219 阅读 · 0 评论 -
HTML(css+div)登录界面
HTML(css+div)登录界面1、建文件2、代码实现:3、效果图:4、总结:登录界面简单易懂,从零基础学习布局原创 2021-03-27 23:02:52 · 297 阅读 · 0 评论 -
圆形边框和圆角边框
圆形边框和圆角边框①画圆首先容器设置成正方形,然后border-radius等于一半的边框②圆角矩形边框将border-radius设置成height的一半,可以实现好看的圆角矩形边框1、建文件2、代码:3、效果图:...原创 2021-03-26 19:41:48 · 354 阅读 · 0 评论 -
html+css+JavaScript实现轮播图
目录轮播图分析:1、轮播图实现的功能2、图片叠加原理html页面布局:CSS修饰:JavaScript:一、轮播图实现的功能1、自动滚动图片。2、触碰圆点按钮,按钮亮起;点击圆点按钮显示对应图片,按钮亮起。3、触碰错左右按钮,按钮变色;点击左右按钮,图片左右轮播,并且图片对应的圆点按钮亮起。文件1、轮播图结构:2、轮播图样式:新建style文件夹 和里面的index.css文件 内容如下:3、 轮播图功能鼠标经过轮播图 左右箭头显示, 鼠标离开 左右箭头隐藏;原创 2021-03-26 09:55:20 · 458 阅读 · 0 评论 -
font-face使用自定义字体
@font-face使用自定义字体1、第一步先将制作好的自定义字体图标放入项目文件夹中2、从字体网站上下载字体,引入到css中3、实现代码4、图标显示5、图标:总结:以上就是自定义字体的方法。...原创 2021-03-07 20:44:15 · 208 阅读 · 0 评论 -
css居中样式
实现居中的方式原创 2021-02-07 21:42:35 · 1248 阅读 · 0 评论 -
清除浮动
清除浮动一、为什么清除浮动因为标准流是按顺序显示,不能横向显示,在一横中,所以必须清除浮动,脱离标准流才可以,以防高度塌陷。如下图清楚标准流代码:效果图:1、左浮动代码及效果图:当你选择这个左浮动时,原本有两个盒子,最终只显示一个,是因为另一个被覆盖住了以至于不能显示。2、右浮动代码以及效果图:这时就不会覆盖了,这个盒子就向右浮动了。3、居中代码及效果:4、伪元素清除浮动:...原创 2021-02-06 21:20:47 · 85 阅读 · 0 评论