margin | 易学教程

bootstrap实现首页轮播加缩放

阅读更多关于 bootstrap实现首页轮播加缩放

需要用到一些组件 BootStrap组件给个官网网址（自己想要的再找）：https://v2.bootcss.com/index.html 需要一些其他的相关文件，这里都有：链接: https://pan.baidu.com/s/16O9eZm3KphXCS7tFW8asFg 提取码: 7md4 复制这段内容后打开百度网盘手机App，操作更方便哦 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8  9 <title>商城首页</title> 10 11  12 <link href="../css/bootstrap.css" rel="stylesheet"> 13 14

Typora自动编号设置

阅读更多关于 Typora自动编号设置

找到C:\Users\用户名\AppData\Roaming\Typora\themes\路径下的base.user.css，用文本编辑器打开（若不存在，则自己创建一个），将一下内容复制进去，然后重启Typora即可。以下是我的Typora自动编号配置: /* 正文标题区: #write */ /* [TOC]目录树区: .md-toc-content */ /* 侧边栏的目录大纲区: .sidebar-content */ /** initialize css counter */ #write, .sidebar-content,.md-toc-content{ counter-reset: h2 } #write h1, .outline-h1, .md-toc-item.md-toc-h1 { counter-reset: h2 } #write h2, .outline-h2, .md-toc-item.md-toc-h2 { counter-reset: h3 } #write h3, .outline-h3, .md-toc-item.md-toc-h3 { counter-reset: h4 } #write h4, .outline-h4, .md-toc-item.md-toc-h4 { counter-reset: h5 } #write h5,

Polo360页面制作练习

阅读更多关于 Polo360页面制作练习

㈠Polo360index.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>polo 360</title>  <link rel="stylesheet" href="reset.css">  <link rel="stylesheet" href="page-index.css"> </head> <body>   <div class="header w">  <ul class="nav"> <li> <a href="#">HOME</a> <p>Back to home</p> </li> <li> <a href="#">PRODUCTS</a> <p>What we have for you</p> </li> <li> <a href="#">SERVICES</a> <p>Things we do</p> </li> <li> <a href="#">BLOG</a> <p>Follow our updates</p> </li> <li> <a href="#"

宣传页项目开发（三）

阅读更多关于宣传页项目开发（三）

网页交互效果的实现滚动条高度的获取以及设置：document.body.scrollTop || document.documentElement.scrollTop .split() 把字符串分割成数组 .join() 把数组转为字符串 .replace( /\s+/g, " ") 正则全局替换，把多个空格符替换为一个空格符综合效果 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="animate.css"> </head> <body>  <header> <div class="header-wrap"> <div class="header-logo">微课手机</div> <nav class="header-nav"> <a href=

宣传页项目开发（二）

阅读更多关于宣传页项目开发（二）

之前已经完成了静态页面的开发，接下来是网页动态效果制作 css实现动画的两种方式： 1、transition: all 1s; 2、animation: move 1s infinite ease-in-out .5s; @keyframes move{ 0%{ transform: rotate(0deg); } 40%{ transform: rotate(45deg); } 100%{ transform: rotate(0deg); } } 两种遍历的方式，遍历对象 { } 遍历数组 [ ] for(k in obj){ do (k); } for(var i=0; i<obj.length; i++){ do( obj[i] ); } css动画测试首先新建一个animate.css专门用于存放动画效果 .screen-1-heading{ transition:all 1s; } .screen-1-heading-init{ opacity: 0;transform:translate(0,100%); } .screen-1-heading-done{ opacity: 1;transform:translate(0,0); } /*# sourceMappingURL=animate.css.map */ 新建一个动画测试脚本 test.js //

web基础(6): CSS综合实例-咖啡网页设计

阅读更多关于 web基础(6): CSS综合实例-咖啡网页设计

咖啡店案例效果图（一）页面的布局 1. 最上方的header：右下角是四个小图标，像图层一样附加在当前的header部分上。 2. 超链接构成的导航栏，鼠标悬浮的时候字体颜色发生变化。 3. 主体分为左右两栏：边栏和右侧的主要内容。边栏有一个table ,table下方是图片（圆角阴影），还有倾斜的效果。右侧主体分为四个子区域，每个区域都有左侧的图片和右侧的文字构成，右侧的文字又有标题和正文内容。 4. footer部分。 5. 左侧有一个“广告”部分，fixed定位。 ---------------------------- 先创建一个站点文件夹，里面创建images, css文件夹。我们采用link来引用css样式。 HTML基本结构为 <div id="container"> <div id="header"></div> <div id="nav"></div> <div id="main"> <div id="aside"></div> <div id="content"></div> </div> <div id="footer"></div> </div> 先简单定义上述几个元素的样式 *{ margin: 0; padding: 0; } body { font-family:"微软雅黑"; font-size:16px; color: #673929; /

宣传页项目实战

阅读更多关于宣传页项目实战

编辑器：sublime text3 标注工具：PxCook 切图工具：PS 开发前准备：设计图标注 PxCook 空格键可以上下拖动大致标注图纸：（可惜不能文字标注和拉参考线）开发前准备：PS切图在指定图层上新建一个图层，使用ctrl+e 合并图层，可以将任意图层转为普通图层（如果图层是下面图层的剪贴图层，可以把该图层移动到新建图层的上面再合并）（如果图层羽化较多，ctrl+enter无法选中，则直接ctrl+c） ctrl+enter 框选需要的图层内容 ctrl+c 复制图层 ctrl+n 新建画布 ctrl+v 黏贴，隐藏掉背景图层存储为web所用格式，jpg或者png24 开发前准备（雪碧图）我用的软件是：CssGaga 将phone1-phone4四张小图生成一张雪碧图提供图片以及css位置静态页面开发文字距离容器左边一定位置： padding-left 或者 text-indent padding-left 设置的宽度，需要在width 中减去；而text-indent 不用 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale

Django--多对多表操作/通过母版渲染页面

阅读更多关于 Django--多对多表操作/通过母版渲染页面

目录 Django--多对多表操作+母版需求步骤添加路由映射关系老师表的增删改查 ajax操作老师表 Django--多对多表操作+母版今天还以一个学生管理系统为例，先通过pymysql这个模块，进行多对多表操作，以下两种方式新url的方式：直接新开一个页面进行操作 ajax模态框的方式：在本页面通过模态框的方式进行操作需求对老师表进行增删改查，此时老师表和班级表是多对多关系步骤开始写功能添加路由设计模板写对应的接口函数添加路由映射关系 urlpatterns = [ # 新url方式 url(r'^teachers/', teachers), url(r'^add_teacher/', add_teacher), url(r'^del_teacher/', del_teacher), url(r'^update_teacher/', update_teacher), # ajax方式 url(r'^ajax_add_teacher/', ajax_add_teacher), url(r'^ajax_update_teacher/', ajax_update_teacher), ] 老师表的增删改查 # students.html -- 通过继承layout.html页面 {% extends 'layout.html' %} {% block

Extjs4快速上手三——实现主界面

阅读更多关于 Extjs4快速上手三——实现主界面

　　晕啊，今天不顺啊，白天毕设因为一个小问题耽误了很长时间，刚写了一半了突然浏览器又卡死，打开后又待重新写。。。。。。 1 创建项目　　这个不多说，新建个Web project都会吧。 2 导入Extjs文件　　在WebRoot下新建ext文件夹，将下载的ext包中如下文件拷入： 3 创建所需文件夹及文件　　按照如下结构创建文件夹及文件：　　绿色框住的为本次必须文件。 4 编写代码　　首先编写index.jsp,这是Extjs的入口页面（其实准确地说Extjs在运行过程中只存在这一个页面，其他的都是其用js生成的组件而已，其本质是div+css），在其内部引入Extjs库文件和样式文件： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>ExtTest</title> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text

CSS里的BFC和IFC的用法

阅读更多关于 CSS里的BFC和IFC的用法

**一、BFC** --------------------- Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则（可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素）。 **1、BFC的布局规则例如以下：** ①.内部的盒子会在垂直方向，一个个地放置。 ②.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。 ③.每一个元素的左边，与包括的盒子的左边相接触，即使存在浮动也是如此。 ④.BFC的区域不会与float重叠。 ⑤.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 ⑥.计算BFC的高度时，浮动元素也參与计算。 **2、介绍过了BFC的布局规范，再来说说哪些元素会触发BFC。** **只要元素满足下面任一条件即可触发 BFC 特性** ①.根元素。 ②.float的属性不为none。 ③.position为absolute或fixed。 ④.display为inline-block；table-cell；table-caption；flex。 ⑤.overflow不为visible。 **3、接下来说说BFC的作用和原理** **①、解决margin重叠问题** **②、解决浮动高度塌陷问题**

订阅 margin