效果图： js文件 Page({ data:{ li:['默认排序','离我最近','价格最低','价格最高'], shownavindex:0 }, // 下拉事件 listmenu: function(e) { if (this.data.openif) { this.setData({
CSS Cascading Style Sheet：层叠级联样式表 CSS：表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动... 发展史： CSS1.0 CSS2.0 DIV(块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO CSS2.1 浮动，定位 CSS3.0 圆角，阴影，动画... 浏览器兼容性~ 快速入门 <!DOCTYPE html>
1.绝对居中： .box { display: flex; width: 100%; height: 500px; background: #cccccc; justify-content: center;//主轴居中 align-items: center; //交叉轴居中 } .box div { width: 50px;
效果展示: 主要三个文件:html+css+js html文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
Web前端-HTML&CSS笔记之07 0907 布局（layout） 文档流（normal flow） 网页是一个多层的结构，一层叠一层。 通过css可以分别为每一层来设置样式 作为用户来讲只能看到最顶上一层 这些层中，最底下的一层成为文档流，文档流是网页的基础。 我们所创建的元素默认都是在文档流中进行排列
反转九九乘法表和正序乘法表 for(var i = 9; i>0; i--){ for(var j=1; j<=i; j++){ num = i*j; document.write(i+"*"+j+"="+num+"  "); } document.write("<br/>"); } for(var i=1;i<=9;i++)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
1 、B/S 软件的结构 JavaSE C/S Client Server B/S Browser Server 2、前端的开发流程 3、网页的组成部分 页面由三部分内容组成！ 分别是内容（结构）、表现、行为。 内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用 HTML 技术来展示。 表现，指的是这些内
说明 css可以绘制各种图形，基本图形包括三角形、圆形、梯形、椭圆形、矩形等，但还有一些复杂图形是由这些基本图形组合而成 基本形状 三角形 .triangle { width: 0; height: 0; border: 50px solid blue; /* 通过改变边框颜色，可以改变三角形的方向 */ bor
css 样式 为了工作和平时项目的需要，在自己工作空余时间自己写的一个 css 样式 同时也是为了巩固 css 和 sass 的知识 目的是为了：适应每一个项目自己重置样式,创造属于自己的 style 虽然目前已有很多流行和成熟的 css 框架，如 bootstrap,Semantic UI,Pure…都有各的优点 但还是
reset.css @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}body,input,textarea,button,select,
一、题目 编写一个关于Java Bean类url，包括：name（名称）、site（官网）和property（性质）等属性。在控制器方法中生成一组Url，并在页面中返回。 要求： 1、奇偶行的背景颜色不同； 2、背景色定义在一个css文件中，并通过link标签引入。 示例： 二、实体类 public class Url { private String
效果图 CSS代码 * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; background-color: #111; min-height: 100vh; } .loader { position: relative; width: 200px; height
.hcp-table { width: 100%; margin-top: 30px; border-spacing: 0; text-align: center; border-top: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; } .hcp-table th { padding: 10px; background: #63a2e8; border-right: 1px solid #e8e8e8; border-bott
1. 正则表达以及失去焦点验证的JS书写 <script> function leave(a) { var reg = /^[ \u4e00-\u9fa5a-zA-Z0-9_-]{5,16}$/;//[ title: [/^[a-zA-Z0-9_-]{5,16}$/, '用户名是5-16不含空的字母'], if (reg.test(a.value) != true) { var use
HTML <body> <div class="box"> <img src="./3.jpg" alt=""> <div class="box2"></div> </div> </body> css 下侧滑入 <style> .box{
使用边框和背景 应用边框样式 先从控制边框样式的属性开始。这些属性使用相当普遍，有了它们，要学习margin和padding属性就在视觉上方便多了。简单边框有三个关键属性：border-width、border-style和border-color。下表描述了这三个属性。 基本边框属性 属 性 说 明 值 border
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
有时候我们使用了display: flex属性后，子元素横向排列，你可能会发现如下图现象： 父级元素不设置宽度，背景宽度默认100%，如果这时想让父级元素随着子元素宽度自适应，怎么处理？ 接下来，上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .wrap {
CSS: body { margin:0; padding:0; overflow-y:auto; } #leftDiv { width:300px; height:500px; border:1px red solid; border-right:none; float:left; } #splitDiv { float:left; width:1px; height:500px; border-left:1px blue solid; } #rightDiv { margi
网上查了一些资料，提到的很少，应该是苹果手机 ios系统升级到 13.0版本后 -webkit-overflow-scrolling: touch; 会导致滚动条自定义样式无效 -webkit-overflow-scrolling: auto; 或者不写这个，如果还是无效，添加下面的红色样式部分，添加一处就可以，如果有其他的解决方式欢迎留言
上gif 简单分析一下 1.旋转的线，我们设置他的旋转位置从他的左下开始转动就ok了，再把最中的的圆层级设置高一点，就可以遮挡住线的一部分，看起来就是旋转的线在绕着中心的圆旋转。 2.闪现的点，控制百分比来实现展示顺序，比如我设置的3s要执行完一次闪烁。 上代码 html结构如下 <div
设计思路很简单，首先先定义在标准浏览器下的固定宽度（假如标准浏览器的分辨率为1024px，那么我们设置宽为980px），然后用Media Query来监测浏览器的尺寸变化，当浏览器的分辨率小于1024px的时候，则通过Media Query预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏
<template> <div style="background:#ff0ff0"> <div class="cicle1" :style="{'border' : c1_color + ' 1px solid ', 'background-color' : bg }"> <div class="cicle2
PC端管理后台页面制作，代码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta n
