网页热卖商品模块（栅格系统） 技术要点：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
网页搜索模块 技术要点：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
利用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，看到了版本信息后，在页面右击另存为之后会弹出
爱奇艺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...
弹性盒子布局知识总结 栅格系统咋网页制作中，用固定的格子进行网页布局。弹性盒子布局可以轻松创建响应式网页布局，为盒状模型增加灵活性三个部分：容器、子元素、轴display用于指定弹性盒子的容器，其值可以为flex；行元素inline-flex。flex-flow：用于排列弹性子元素。（1）.flex-direction： - row：子元素按轴方向顺序排列。 - row-rever...
点击一个div显示或者隐藏一个div（视频video） 首先看到两个div之间的关系，选择合适的方式：控制div：hover关系 被控制div{css样式修饰}1. 空格分隔——控制子元素 2. +分隔——同级元素（兄弟元素）3. ~分隔——控制就近元素下面的列子是一个div里面放了video和一个div，当鼠标经过父div显示子div。<html> <head> <meta...
vue.js零基础（二） 一.vue的基础知识组件的定义与使用vue文件的组成- 模板页面<template>- js模块对象<script>- 样式<style>基本使用- 引入组件- 映射成标签- 使用组件标签模块语法（1）类似于node中的EJS，可以让HTML页面动态化：大括号表达式、指令是以v开头的自定义标签属性（2）双大括号表达式 - ...
HTML表单提交方式post和get的区别 form标签<form action="提交路径" method="提交方式" name="表单名称"></form>name：表单名字action：提交的路径地址method：提交方式（get、post、delete、put），其中get和post使用的多，如果不明确指出，则默认的方式是getget和post的区别：（1）get提交数据加在地址栏的后面...
vue.js零基础(一) vue概念：vue.js是目前最火的一个前端框架，React是最流行的一个框架结构，与ANGular.js,React.js并称前端三大主流框架，同时是一套用户界面的框架，只关注图层，还便于与第三方库或已有的项目整合。重点：vue在于构建用户界面特点：vue.js是基于MVVM架构。编码简洁、体积小、运行效率、适合移动端pc端开发，同时可以轻松引入vue插件vue生态 ...
HTML5的表单——登录界面 表单：负责采集用户输入的信息，由相当多的表单元素组成。基本语法：method：get和post，默认为get。用这种方式提交数据用于设置表单数据的提交方式，保密性差且有数据量限制。post不但保密性好，还可以提交大量的数据。<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件</form>表单...
CSS3动画 一.css animations两部分组成：动画关键帧和描述动画帧的css声明。@keyframes规则：可以设置多个关键帧，每一个帧表示动画过程中的一个状态。@keyframes规则的基本语法： @keyframes animationname{ keyframes-selector{css-styles;} }animation属性：用于描述动画的...
过渡与变形的综合应用 transition属性、2D变形的使用，transform属性实现过渡及变形效果。当鼠标移上第一张图像时，产生直角边框过渡为圆角边框的效果。当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果。当鼠标移上第三张图像时，产生图片旋转的过渡效果当鼠标移上第四张图像时，产生图片透明逐渐变暗的过渡效果，并且伴随盒子阴影效果过渡。<!DOCTYPE<!DOCTYPE html>...
css3样式——圆角边框和过渡应用 border-radius属css3的圆角边框实际是在矩形的是个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。css3的圆角边框使用border-radius实现。基本语法是：border-radius：1-4 length|%/1-4 length | %length 的值不可为负值，/的前面的值是水平半径，后面的值但是垂直半径，无/则水平和垂直一样。顺序是top-left、...
脚手架搭建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,可以查看当前的版本...
HTML5的文本标签和css3文本外观属性 html5中常用的文本标签：标题标签：定义了六级标题，字号越大，六号越小段落标签：<.p>br与wbr标签:br换行符，wbr软回车和断字符一般应用在英文上面。bdi标签：设置一段文本，使其脱离父标签的文本方向设置。details与summary：描述文档和文档的某一个标题，目前只有Chrome支持。ruby标签、<rp>标签：用于给汉字注音。mark标签：...
HTML5语义标签——全局属性、css选择器 1.全局属性draggable属性定义元素是否可以拖动，该属性有两个值：true和false ，默认false。hidden属性hidden取值true时，元素将会被隐藏，反之显示 。元素中的内容是通过浏览器创建的，页面装载后允许使用Javascript脚本将该属性取消，取消后该元素可见状态，同时元素中的内容也即是显示出来。spellcheck属性主要针对input元素和textar...
HTML5前端设计——课表制作 HTML5的功能对于前段的设计应用比较广泛。在里面中利用table标签作为主要的布局，通过合并单元格，设置单元格的背景颜色，字体颜色以及div大小，同时利用HTML5的css选择器，使修饰代码少了很多，只要麻烦在于合并单元格和th标签的大小。同时利用css样式表和代码分离，采用外链式link链接。下面是利用HTML5和css样式进行的课表制作代码及效果图。<!DOCTYPE html>...
HTML5-logo设计 制作html5的logo是由div块元素拼接而成，css样式控制每一块的样式和位置，为了体现代码的重要性采用style的内嵌式，页面拼接的步骤如下：定位出整个页面的背景区域“bg”,并实现背景光束。定义logo样式，并画出盾牌得分左半边画出盾牌的右半边画出浅橘色区域画出5的左半边画出5的右半边用白色的区块遮挡多余的部分***下面就是最后显示效果：***代码如下：<!D...
HTML5语义化结构标签 HTML和HTML5又有点区别，在于HTML5更具有结构化，编写代码的识别度更高，同时属性应用也比较的快。具体在于结构化标签的变化。1.结构元素header元素nav元素article元素aside元素section元素footer元素header元素：具有引导和导航作用的结构元素，包含通常放在页面头部的内容。<header> 网页主题 ...
HTML简单网页——员工信息登录表 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{border: aqua 5px solid;background-color: pink;widt...
关注
