margin-left | 易学教程

CSS 创建

阅读更多关于 CSS 创建

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。如何插入样式表插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部： < head > < link rel = " stylesheet " type = " text/css " href = " mystyle.css " > </ head > 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子： hr { color: sienna ; } p { margin-left: 20 px ; } body { background-image: url ("/ images / back40 . gif ") ; } 不要在属性值与单位之间留有空格（如："margin-left: 20 px" ）

Css 浏览器兼容性及其其他常见问题

阅读更多关于 Css 浏览器兼容性及其其他常见问题

CSS IE10~11 透明滚动条透明滚动条不占空间，显示时会覆盖内容 //--如下样式使滚动条变为普通样式 body { /* ... */ -ms-overflow-style: scrollbar; } IE10~11 输入框多个叉号点击叉号会清空输入框内容，会覆盖自己定制样式，可能不会富客户端框架的一些事件 input::-ms-clear { display: none; } IE8 背景透明时无法响应事件 IE8以下的浏览器bug，背景透明的元素无法点击(实际点击的是其底层的元素) 对需要透明的div添加背景图片，图片为透明的png IE8 png图片有黑色边框 PNG的支持问题在于IE7及以上版本使用了filter来支持PNG的Alpha通道，所以对于PNG来说其实已经偷偷被应用了一个 filter了。虽然解决了主要的PNG透明问题，不过也伴随着另一个副作用，就是不能再应用其他filter。或者准确地说是应用其他filter会破坏IE对PNG的支持。这就是为什么PNG在渐隐和渐现的时候会有难看的黑边。 IE8 不支持background-size属性如果必须做背景拉伸，可以添加一个100%的div，并添加一个img图片，设置div的z-index为负数 IE8下A标签的文字无法响应拖动事件 IE8不支持A标签意外的标签的:hover伪类如果使用了

2019.10.29 笔记

阅读更多关于 2019.10.29 笔记

一、网页分层效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="2019.10.29.css"/> </style> </head> <body> <div id="big"> <div id="left"> <div id="l1">穷游体验馆</div> <div id="l2"> <div id="wenzi">免费体验名额20个</div> <div id="tiyan"></div> <div id="yincang">申请已结束</div> <img src="../image/111.png" > </div> <div id="l3">穿越时空的旅行者猫王旅行体验官招募（开奖啦）</div> <div id="l4"> <div id="sz">499</div> <div id="jz"> 价值元 </div> <div id="ckxq">查看详情</div> </div> <div id="l5"> <div id="ll1">近期参与</div> <div class="ll2"><img src="../image/头像1.jpg" ></div

js-点击tab按钮，同一页面显示不同的内容

阅读更多关于 js-点击tab按钮，同一页面显示不同的内容

效果： html: JS: css: .tabs-two{ .two{ display: inline-block; font-size:14px; height: 17px; font-weight:300; color:#444444; margin-top:10px; height:26px; text-align: center; line-height: 26px; border-radius:2px; cursor: pointer; } .two:hover{ background:rgba(252,69,48,1); color:#fff; } .newreply{ margin-left:17px; width:76px; } .waitreply{ margin-left:6px; width:62px; } .overreply{ margin-left:8px; width:62px; } .checked{ background:rgba(252,69,48,1); color:#fff; } } 来源： https://www.cnblogs.com/snowbxb/p/11770439.html

自适应布局的三种方式

阅读更多关于自适应布局的三种方式

高度自适应：利用position定位 <div class="top">200px</div> <div class="main">自适应</div> <div class="bottom">200px</div> html,body{ padding:0; margin:0 } .top{ width: 100%; height: 120px; position: absolute; top:0; background-color: greenyellow; } .main{ position: absolute; width: 100%; top: 120px; bottom: 120px; background-color: pink; height: auto; } .bottom{ width: 100%; position: absolute; bottom: 0; height: 120px; background-color:greenyellow ; } 宽度自适应： <div class="left">200px</div> <div class="main">自适应</div> <div class="right">200px</div> html,body{ padding:0; margin:0 } .left{ width: 120px; height

大项目之网上书城（二）――主页（上）

阅读更多关于大项目之网上书城（二）――主页（上）

Ŀ¼ 1.涓婚〉 2.head2.jsp WebContentͼ 实在是太复杂啦，弄了半天才调出来一个壳子。明天再继续吧。。。 1.涓婚〉值得一提的是，我把所以的路径都改成用${pageContext}来获取的了，这样就可以方便我在不同的地方复制粘贴同样的代码，能有同样的功效了。（甚至字体的url都改了23333） <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <title>主页</title> </head> <body style="background-color:#bbb">  <div style="width:100%;height:100px;float:left"> <jsp:include page="/client/head.jsp"></jsp:include> </div>  <div style="width:70%;height:886px;float:left;margin-left:15%;">  <jsp:include page="/client/head2.jsp"><

CSS甯冨眬(鍥? 宸﹀彸甯冨眬

阅读更多关于 CSS甯冨眬(鍥? 宸﹀彸甯冨眬

鏈枃鏄牴鎹綉涓婅祫鏂欐€荤粨鍑烘潵鐨勬枃绔燑/p> 宸﹁竟鍥哄畾锛屽彸杈硅嚜閫傚簲鐨勪袱鏍忓竷灞€銆侟/p> 鍩烘湰鏍峰紡宸﹁竟鍥哄畾瀹藉害锛岄珮搴︿笉鍥哄畾楂樺害鏈夊彲鑳戒細寰堝皬锛屼篃鍙兘寰堝ぇ銆杩欓噷鐨勫唴瀹瑰彲鑳芥瘮宸︿晶楂橈紝涔熷彲鑳芥瘮宸︿晶浣庛€傚搴﹂渶瑕佽嚜閫傚簲銆?lt;/br> 鍩烘湰鐨勬牱寮忔槸锛屼袱涓猟iv鐩歌窛20px, 宸︿晶div瀹 120px .wrapper { padding: 15px 20px; border: 1px dashed #ff6c60; } .left { width: 120px; border: 5px solid #ddd; } .right { margin-left: 20px; border: 5px solid #ddd; } 閫氳繃width: calc(100% - 140px)鏉ュ姩鎬佽绠楀彸渚х洅瀛愮殑瀹藉害銆傞渶瑕佺煡閬撳彸渚х洅瀛愯窛绂诲乏杈圭殑璺濈锛屼互鍙婂乏渚х洅瀛愬叿浣撶殑瀹藉害(content+padding+border)锛屼互姝よ绠楃埗瀹瑰櫒瀹藉害鐨?00%闇€瑕佸噺鍘荤殑鏁板€笺€傚悓鏃讹紝杩橀渶瑕佺煡閬撳彸渚х洅瀛愮殑瀹藉害鏄惁鍖呭惈border鐨勫搴︺€侟/p> .wrapper-inline-block { box-sizing: content-box;

微信小程序之物流状态时间轴

阅读更多关于微信小程序之物流状态时间轴

刚好写了一个物流状态的时间轴，简单分享一下哈。（一）实现效果真机测试的结果（图片忘记缩小了） github下载源码（二）实现分析页面布局拆分：简单的说：就是父级容器下，左边的子级容器是设置绝对定位（记得父级要设置相对定位哈），然后自己调位置，中间子级容器下放三个子容器（设置时间轴线、点的样式），右边的子级容器设置； wxml代码有备注信息。（三）实现代码 1、wxml代码： < view class = ' g_con ' > < view class = ' topExpress ' > < view class = ' topExpress-left ' > < image src = ' /images/Exchange_goods_map_1.png ' style =' width : 60rpx ; height : 60rpx ; border-radius : 50% ; ' > </ image > </ view > < view class = ' topExpress-right ' > < view class = ' topExpress-right-top ' > 圆通速递 </ view > < view class = ' topExpress-right-middle ' > 运单号：813291235464788594 </

bootstrap网格布局原理解析

阅读更多关于 bootstrap网格布局原理解析

简介 bootstrap 根据媒体查询设置不同的 container 容器宽度，在容器内用百分比设置其列 col 的宽度以自适应不同大小的屏幕，一行 row 共有 12 个 col ,只需添加相关的类名，且对应类名后面的数字之和为 12 即可。 /* 超小设备（手机，小于 768px） xs*/ /* Bootstrap 中默认情况下没有媒体查询 */ /* 小型设备（平板电脑，768px 起）sm */ @media (min-width: @screen-sm-min) { ... } /* 中型设备（台式电脑，992px 起） md */ @media (min-width: @screen-md-min) { ... } /* 大型设备（大台式电脑，1200px 起） lg */ @media (min-width: @screen-lg-min) { ... } 基本网格结构： < div class = "container" > < div class = "row" > < div class = "col-*-*" ></ div > < div class = "col-*-*" ></ div > </ div > < div class = "row" >...</ div > </ div > < div class = "container" >....

【CSS】margin负值 – 一个秘密武器

阅读更多关于【CSS】margin负值 – 一个秘密武器

CSS盒模型中，margin是我们老熟悉的一个属性了，它的负值你用过吗？你知道margin负值的秘密武器吗？我们一起看看吧！ 1、带竖线分隔的横向列表（例如：网站底部栏目）传统的分隔符是使用 “|” 来实现的，弊端显而易见，不利于表现与结构的分离，同时增加了后台输出时的判断工作。所以我们采用border-left 左边框来模拟分割线，然后通过margin-left：-1px隐藏掉第一个列表项的边框，父元素设置 overflow：hidden 来隐藏溢出部分，这样完美达到首尾无分割线的要求。 2012-5-4 更新实际测试中发现 iphone safari 设置margin负值=border-widht 并不能很好的隐藏，还有约0.5px的细线，iPad没测不知道如何？修复方法如下： /* 修复iphone safari 不能完全隐藏边框的bug */ @media screen and (max-device-width: 480px){ .nav-list-item { margin-left:-2px; } .ui-tab-trigger-item { margin-bottom:-2px; } } 2、带底部分割线的竖向列表（例如：新闻列表）原理同横向列表相同，需要注意的是 margin 负值在 IE 中的层级bug，详细参见： IE6 IE7 IE8(Q) 负边距

订阅 margin-left