margin-left | 易学教程

订单页面布局

阅读更多关于订单页面布局

html <view class="consignee"> <view class="consignee-title"> 收件信息 </view> <view class="consignee-address"> <image class="right-arrow" src="/images/order/sub/you.png" /> <image class="bottom-stripe" src="/images/order/sub/xiushi.png" /> <view class="line-one"> <view class="name"> 动感超人 </view> <view class="tel"> 185****9875 </view> </view> <view class="line-two"> 北京朝阳区四环到五环之间878东区12层 </view> </view> </view> <!-- <view class="consignee"> <view class="consignee-title"> 收件信息 </view> <view class="consignee-address"> <image class="right-arrow" src="/images/order/sub/you.png" /> <image class="bottom

JS—全屏或退出全屏

阅读更多关于 JS—全屏或退出全屏

根据屏幕浏览器高度进行判断，进入全屏或退出全屏 <style> .icon-fullscreen { margin-left : 72.5% ; } .icon-exitFullscreen { margin-left : 71% ; } </style> $ ( '#fullscreen' ) . css ( 'margin-left' , '71%' ) ; $ ( function ( ) { changeClass ( ) ; } ) ; //浏览器的窗口大小发生改变时执行 $ ( window ) . resize ( function ( ) { //执行代码块 changeClass ( ) ; } ) ; //当屏幕小于891时添加一个属性，大于的时候删除属性 function changeClass ( ) { var hh = $ ( window ) . height ( ) ; if ( hh > 891 ) { $ ( '#fullscreen' ) . css ( 'margin-left' , '' ) ; $ ( '#fullscreen' ) . removeClass ( 'icon-exitFullscreen' ) . addClass ( 'icon-fullscreen' ) ; } else { $ ( '#fullscreen' )

圣杯布局和双飞翼布局

阅读更多关于圣杯布局和双飞翼布局

圣杯布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent { overflow: hidden; padding: 0 100px; } .middle { float: left; height: 100px; width: 100%; background-color: green; } .left { /* 以便申明 left 属性 */ position: relative; /* 移出当前界面，注意和 parent 中的 padding-left 配合正好 */ left: -100px; float: left; height: 100px; width: 100px; background-color: red; /* 上移一行 */ margin-left: -100%; } .right { position: relative; right: -100px;

BootStrap学习(3)_导航菜单

阅读更多关于 BootStrap学习(3)_导航菜单

一、导航元素 1.表格导航或标签以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs 。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body style="margin-top:20px;margin-left:20px;"> <p>标签式的导航菜单</p> <ul class="nav nav-tabs"> <li class="active"><a

三栏布局——圣杯布局和双飞翼布局

阅读更多关于三栏布局——圣杯布局和双飞翼布局

圣杯布局和双飞翼布局的共同点： 1.都是实现左右宽度固定，中间自适应 2.在dom中主内容必须第一个加载（所以要把content放在left和right前面） 3.其父元素的高度始终是由三栏中高度最高的元素它们的实现都是在以上三个的基础上的。 1.圣杯布局 html部分： <div class="demo"> <div class="content">我是自适应的,要写在前面优先渲染</div> <div class="left">左边：我是固定的</div> <div class="right">右边：我是固定的</div> </div> css部分实现思路： 1.三列布局都左浮动 2.设置content宽度为100% 3.给left元素设置margin-left:-100%;right元素设置margin-left:-200px,让left，right元素和content元素能并排显示 4.容器设置padding给左右两列预留位置，padding大小分别为左右两列的宽度 5.给left和right设置position:relative，设置left元素left:-100px(-自身宽度)，right元素right:-200px(-自身宽度) css代码如下： .demo{ padding: 0 200px 0 100px; background-color: gray;

css细节复习笔记——基本视觉格式化

阅读更多关于 css细节复习笔记——基本视觉格式化

css包含如此开放、如此强大的一个模型，对于这样一个模型，可以有无数种方法结合应用各种属性，可以得到的效果数不胜数。基本框 css假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素中心有一个内容区，这个内容区周围包含可选的内外边距和边框（之所以认为是可选，是因为可以设置为0）。对不同类型的元素格式化时存在着差别。块级元素的处理就不同于行内元素，而浮动元素和定位元素也分别有各自不同的表现。包含块每个元素都相当于包含块摆放；可以这么说，包含块就是一个元素的”布局上下文“，css2.1定义了一系列规则来确定元素的包含块。常用名词：正常流，文本从左向右，从上向下显示。要让一个元素不在正常流中，唯一的办法是使之成为浮动或定位元素。非替换元素，如果元素的内容包含在文档中，则称之为非替换元素。替换元素，指用作为其他内容占位符的一个元素。替换元素的一个经典例子就是img元素。它只是指向一个图像文件，这个文件将插入到文档流中该img元素本身的位置。块级元素，这是指段落、标题或div之类的元素。这个元素在正常流中，会在其框之前和之后生成”换行“，所以处于正常流中的块级元素会垂直摆放。通过声明display:block，可以让元素生成块级框。行内元素，这是指strong或span之类的元素。这个元素不会在之前或之后生成”行分割符“，它们是块级元素的后代

小程序选中和未选中的实现

阅读更多关于小程序选中和未选中的实现

效果图： wxml:  <view class="size">选择版本</view> <scroll-view scroll-x > <view class="con"> <view wx:for="{{banben}}" wx:key="" data-index="{{index}}" bindtap='goSize'> <view class="{{index==idxSize?'_item-size':'item-size'}}" >{{item.size}}</view> </view> </view> </scroll-view>  <view class="color">选择颜色</view> <scroll-view scroll-x > <view class="con"> <view wx:for="{{banben}}" wx:key="" data-index="{{index}}" bindtap='goColor'> <view class="{{index==idxColor?'_item-color':'item-color'}}" >{{item.color}}

css常见布局方式

阅读更多关于 css常见布局方式

　　布局是CSS中一个重要部分，下面总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现）。　　一、居中方式　　水平居中水平居中对于子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案是不同。行内元素：对父元素设置text-align:center; 定宽块状元素: 设置左右margin值为auto; 不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center; 通用方案: flex布局，对父元素设置display:flex;justify-content:center; 垂直居中垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案也是不同的。父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height 父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle; 块状元素:设置子元素position:absolute并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto; 通用方案: flex布局，给父元素设置

3个简单CSS实现的动态效果

阅读更多关于 3个简单CSS实现的动态效果

这里只是鼠标移入的时候出现的动态效果，并没有使用CSS的动画属性animation和变形属性transform。后面再补。。。 HTML代码如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" type="text/css" href="font_edpqa2m2qpp3c8fr/iconfont.css"> <link rel="stylesheet" href="index.css"> <body> <div id="main"> // 每个li为一个框 <ul class="u1-items"> <li> <div class="first"><img class="first-img" src="images/480_yugao.jpg" alt=""/> <div class="items-icon"> <span><i class="iconfont icon-favorite"></i> </span> <span><i class="iconfont icon-caigou"></i></span> </div> <div class="items-txt"> <h2><span class=

CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

阅读更多关于 CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局虽然两者的实现方法略有差异，不过都遵循了以下要点： 1.两侧宽度固定，中间宽度自适应 2.中间部分在DOM结构上优先，以便先行渲染 3.允许三列中的任意一列成为最高列 4.只需要使用一个额外的<div>标签圣杯布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圣杯布局</title> <style type="text/css"> .header{ height:50px; background: #666; text-align: center; } .main{ /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/ padding:0 200px 0 180px; height:100px; } .middle{ float:left; width:100%;/*左栏上去到第一行*/ height:100px; background:blue; } .left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0c9; /

订阅 margin-left