自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(21)
  • 收藏
  • 关注

原创 网页热卖商品模块(栅格系统)

技术要点:Bootstrap栅格系统页面结构:实现步骤:实现代码展示:<!DOCTYPE html><html><head><title>网页热卖商品模块</title><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=de

2020-05-17 17:56:46 672

原创 网页搜索模块

技术要点:Bootstrap表单、Bootstrap按钮结构布局:主要步骤:代码展示:<!DOCTYPE html><html><head><title>网页搜索模块</title><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="wid

2020-05-17 12:49:24 795

原创 利用Bootstrap制作汉堡按钮(header部分)

页面展示:本次网页header部分的页面效果。技术要求:Bootstrap布局容器、Bootstrap导航栏制作汉堡按钮的固定写法:同时需要安装Bootstrap下载安装,下载地址:https://www.bootcss.com/解压之后会有css、js、fonts,但是js中没有jQuery文件。这时复制此地址在网页打开:https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js,看到了版本信息后,在页面右击另存为之后会弹出

2020-05-15 13:26:45 2107 1

原创 爱奇艺banner制作

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/css;charset=UTF-8"> <meta name="viewport" con...

2020-05-02 12:00:11 491

原创 弹性盒子布局知识总结

栅格系统咋网页制作中,用固定的格子进行网页布局。弹性盒子布局可以轻松创建响应式网页布局,为盒状模型增加灵活性三个部分:容器、子元素、轴display用于指定弹性盒子的容器,其值可以为flex;行元素inline-flex。flex-flow:用于排列弹性子元素。(1).flex-direction: - row:子元素按轴方向顺序排列。 - row-rever...

2020-04-25 10:39:11 1694

原创 点击一个div显示或者隐藏一个div(视频video)

首先看到两个div之间的关系,选择合适的方式:控制div:hover关系 被控制div{css样式修饰}1. 空格分隔——控制子元素 2. +分隔——同级元素(兄弟元素)3. ~分隔——控制就近元素下面的列子是一个div里面放了video和一个div,当鼠标经过父div显示子div。<html> <head> <meta...

2020-04-24 11:00:19 840

原创 vue.js零基础(二)

一.vue的基础知识组件的定义与使用vue文件的组成- 模板页面<template>- js模块对象<script>- 样式<style>基本使用- 引入组件- 映射成标签- 使用组件标签模块语法(1)类似于node中的EJS,可以让HTML页面动态化:大括号表达式、指令是以v开头的自定义标签属性(2)双大括号表达式 - ...

2020-04-04 12:34:59 88

原创 HTML表单提交方式post和get的区别

form标签<form action="提交路径" method="提交方式" name="表单名称"></form>name:表单名字action:提交的路径地址method:提交方式(get、post、delete、put),其中get和post使用的多,如果不明确指出,则默认的方式是getget和post的区别:(1)get提交数据加在地址栏的后面...

2020-04-03 11:13:04 2327

原创 vue.js零基础(一)

vue概念:vue.js是目前最火的一个前端框架,React是最流行的一个框架结构,与ANGular.js,React.js并称前端三大主流框架,同时是一套用户界面的框架,只关注图层,还便于与第三方库或已有的项目整合。重点:vue在于构建用户界面特点:vue.js是基于MVVM架构。编码简洁、体积小、运行效率、适合移动端pc端开发,同时可以轻松引入vue插件vue生态 ...

2020-03-28 16:00:55 135

原创 HTML5的表单——登录界面

表单:负责采集用户输入的信息,由相当多的表单元素组成。基本语法:method:get和post,默认为get。用这种方式提交数据用于设置表单数据的提交方式,保密性差且有数据量限制。post不但保密性好,还可以提交大量的数据。<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件</form>表单...

2020-03-27 12:50:13 10789

原创 CSS3动画

一.css animations两部分组成:动画关键帧和描述动画帧的css声明。@keyframes规则:可以设置多个关键帧,每一个帧表示动画过程中的一个状态。@keyframes规则的基本语法: @keyframes animationname{ keyframes-selector{css-styles;} }animation属性:用于描述动画的...

2020-03-27 11:10:46 184

原创 过渡与变形的综合应用

transition属性、2D变形的使用,transform属性实现过渡及变形效果。当鼠标移上第一张图像时,产生直角边框过渡为圆角边框的效果。当鼠标移上第二张图像时,产生图片逐渐放大的过渡效果。当鼠标移上第三张图像时,产生图片旋转的过渡效果当鼠标移上第四张图像时,产生图片透明逐渐变暗的过渡效果,并且伴随盒子阴影效果过渡。<!DOCTYPE<!DOCTYPE html&gt...

2020-03-24 11:29:43 260

原创 css3样式——圆角边框和过渡应用

border-radius属css3的圆角边框实际是在矩形的是个角分别做内切圆,然后通过设置内切圆的半径来控制圆角的弧度。css3的圆角边框使用border-radius实现。基本语法是:border-radius:1-4 length|%/1-4 length | %length 的值不可为负值,/的前面的值是水平半径,后面的值但是垂直半径,无/则水平和垂直一样。顺序是top-left、...

2020-03-23 09:31:37 827

原创 脚手架搭建vue-cli、浅析配置文档、组件

脚手架的搭建-首先应该安装node.js,直接进入node.js官网即可。最好是安装在默认的地址不然会出现很多未知的问题。安装cnpm是node.js的包管理器,用于node插件管理。安装npm插件:npm install安装yarn插件:npm install yarn安装cnpm插件:cnpm install -g @vue/cli查看:cnpm -v,可以查看当前的版本...

2020-03-21 22:21:07 100

原创 HTML5的文本标签和css3文本外观属性

html5中常用的文本标签:标题标签:定义了六级标题,字号越大,六号越小段落标签:<.p>br与wbr标签:br换行符,wbr软回车和断字符一般应用在英文上面。bdi标签:设置一段文本,使其脱离父标签的文本方向设置。details与summary:描述文档和文档的某一个标题,目前只有Chrome支持。ruby标签、<rp>标签:用于给汉字注音。mark标签:...

2020-03-21 21:43:43 408

原创 HTML5语义标签——全局属性、css选择器

1.全局属性draggable属性定义元素是否可以拖动,该属性有两个值:true和false ,默认false。hidden属性hidden取值true时,元素将会被隐藏,反之显示 。元素中的内容是通过浏览器创建的,页面装载后允许使用Javascript脚本将该属性取消,取消后该元素可见状态,同时元素中的内容也即是显示出来。spellcheck属性主要针对input元素和textar...

2020-03-08 17:32:37 1170

原创 HTML5前端设计——课表制作

HTML5的功能对于前段的设计应用比较广泛。在里面中利用table标签作为主要的布局,通过合并单元格,设置单元格的背景颜色,字体颜色以及div大小,同时利用HTML5的css选择器,使修饰代码少了很多,只要麻烦在于合并单元格和th标签的大小。同时利用css样式表和代码分离,采用外链式link链接。下面是利用HTML5和css样式进行的课表制作代码及效果图。<!DOCTYPE html&gt...

2020-03-08 13:07:28 4840

原创 HTML5-logo设计

制作html5的logo是由div块元素拼接而成,css样式控制每一块的样式和位置,为了体现代码的重要性采用style的内嵌式,页面拼接的步骤如下:定位出整个页面的背景区域“bg”,并实现背景光束。定义logo样式,并画出盾牌得分左半边画出盾牌的右半边画出浅橘色区域画出5的左半边画出5的右半边用白色的区块遮挡多余的部分***下面就是最后显示效果:***代码如下:<!D...

2020-03-03 13:25:14 822

原创 HTML5语义化结构标签

HTML和HTML5又有点区别,在于HTML5更具有结构化,编写代码的识别度更高,同时属性应用也比较的快。具体在于结构化标签的变化。1.结构元素header元素nav元素article元素aside元素section元素footer元素header元素:具有引导和导航作用的结构元素,包含通常放在页面头部的内容。<header> 网页主题 ...

2020-03-02 18:15:11 610

原创 HTML简单网页——员工信息登录表

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{border: aqua 5px solid;background-color: pink;widt...

2020-03-01 16:23:42 2471

原创 HTML简单网页——传智播客学院设计

<!DOCTYPE HTML><!DOCTYPE html PUBLIC "" ""><HTML><HEAD><META content="IE=11.0000" http-equiv="X-UA-Compatible"> <META charset="utf-8"> <TITLE>传智播客&l...

2020-03-01 14:48:29 4801

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除