margin

移动端页面

由 家住魔仙堡 提交于 2019-12-08 00:37:36
1.引入jquery.js和adaptive.js adaptive.js (function (win, lib) { var doc = win.document; var docEl = doc.documentElement; // 设备像素比 var devicePixelRatio = win.devicePixelRatio; // 我们设置的布局视口与理想视口的像素比 var dpr = 1; // viewport缩放值 var scale = 1; // 设置viewport function setViewport() { // 判断IOS var isIPhone = /iphone/gi.test(win.navigator.appVersion); // 布局视口与理想视口的值与设备像素比相等 只针对iphone if (isIPhone) { // if (devicePixelRatio >= 3) { // dpr = 3; // } // else if (devicePixelRatio === 2) { // dpr = 2; // } // else { // dpr = 1; // } // } // else { dpr = 1; } // window对象上增加一个属性，提供对外的布局视口与理想视口的值 win

1204课后随笔

由 痞子三分冷 提交于 2019-12-07 22:40:32
1.盒模型 margin:外边距 ；margin-top/margin-left ; margin-bottom/margin-right 外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距； 可以使用padding或border分开两个外边距； padding:内边距 ；padding-top/padding-left ；padding-bottom/padding-right border:边框 ；border-width:宽度 ；border-style:solid(实线)dotted(点线)dashed(虚线)double(双线) ； border-color:颜色 ；一般body是默认有margin ；margin:0 auto;设置左右居中 ；四个值的顺序 ： 上 右 下 左 ；CSS时继承的关系 .c4 { /*边框*/ margin: 10px; padding: 60px 80px ; border: 5px solid red; font-size: 60px; background-color: aqua; /*内边距，单数值为四面通用*/ /*padding: 10px;*/ /*双数值为，上下，左右*/ /*padding: 10px 80px;*/ /*四数值顺序为，上，右，下，左*/ /*padding: 10px 5px 80px 150px;

<编写高质量代码--web前端开发修炼之道>之css总结

由 假如想象 提交于 2019-12-07 19:44:11
(一)标准模式和怪异模式的一些不同 (1)IE对盒模型的解析 在标准模式下,页面的宽度为:width+border+padding 在怪异模式下,width就包括了padding 和border (2)在怪异模式下,如下的样式不能正常表现 width:200px;margin-left:auto;margin-right:auto; 在一些高级浏览器中,如果没有声明DTD类型,页面将会以标准模式进行解析,而在IE(IE6,IE7,IE8)中则会触发怪异模式 (二)关于*{margin:0;padding:0} 在不同浏览器中,一些默认样式也会有所不同,例如:ul默认带有缩进的样式,在IE中,其缩进是按照margin实现的,但是在firefox中,其缩进是按照padding实现的 为了去掉浏览器的默认样式,一些人会设置*{margin:0;padding:0},但是这并不是最好的写法,一般推荐如下写法: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0} (三)解决一些hack (1)设置浮动时出现的bug:一旦为某个元素设置了浮动,然后有设置了margin属性,如下: .fl{float;left;

jquery点击弹出登陆窗口

由 。_饼干妹妹 提交于 2019-12-07 09:52:04
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery点击弹出登陆窗口</title> <style> body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, del, dfn, em, img, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, button, input, table, caption, tbody, tfoot, thead, tr, th, td, menu { margin:0; padding:0; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display

Angularjs List Item Margin Issue Combining ng-repeat elements with static ones

由 这一生的挚爱 提交于 2019-12-07 09:33:59
问题 I want to create a horizontal list by grouping some elements stored in an array along with some static elements that will be directly inserted in the html. Something like this: <div class="list-container push-down" ng-controller="ListController"> <ul> <li>Home</li> <li ng-repeat="i in items">{{i.label}}</li> <li>Blog</li> </ul> </div> I declared my items variable in my controller: myApp.controller("ListController", function ($scope) { $scope.items = [{ id: 1, label: "News" }, { id: 2, label:

Padding vs children with margins

由 走远了吗. 提交于 2019-12-07 06:12:16
问题 Let's just start with saying I understand the box model. Throughout my short time as a developer, I've tried to stick very closely to semantic html and use responsive design practices. I recently got a job at a new company as Jr. Developer, and my Sr. is religiously against padding. Like he doesn't want it used in any case whatsoever. He wants me to use set heights and widths on everything, and if I need to simulate padding, I have to add a child div using margins. For example: <div class=

Change Margin of a Layout using XML in Layer-List

由 独自空忆成欢 提交于 2019-12-07 04:49:52
问题 I tried several options but I can't find the best way to do this: I want to change the margin of a Linear Layout when button is clicked using XML. Here's my code for the selected button: <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:bottom="-1dp"> <shape android:shape="rectangle" > <corners android:topLeftRadius="5dp" android:topRightRadius="5dp" /> <solid android:color="#424346" /> <stroke android:width="1dp"

Android 全屏显示

由 守給你的承諾、 提交于 2019-12-07 02:24:24
隐藏标题栏： supportRequestWindowFeature(Window.FEATURE_NO_TITLE); //继承AppCompatActivity中使用 requestWindowFeature(Window.FEATURE_NO_TITLE); //继承Activity 中使用 setContentView(R.layout.activity_main); 全屏显示的一种方法：去掉自动生成的RelativeLayout中的各种margin android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" 或在Manifest中设置theme（通常要结合上一个方法界面效果比较好） 整个APP全屏 <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string

JQuery特殊属性操作、事件机制 （3）

由 会有一股神秘感。 提交于 2019-12-07 01:53:23
1. jQuery特殊属性操作 1.1. val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $("#name").val(“张三”); //获取值 $("#name").val(); 1.2. html方法与text方法 html方法相当于innerHTML text方法相当于innerText //设置内容 $(“div”).html(“<span>这是一段内容</span>”); //获取内容 $(“div”).html() //设置内容 $(“div”).text(“<span>这是一段内容</span>”); //获取内容 $(“div”).text() 区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。 1.3. width方法与height方法 设置或者获取高度 //带参数表示设置高度 $(“img”).height(200); //不带参数获取高度 $(“img”).height(); 获取网页的可视区宽高 //获取可视区宽度 $(window).width(); //获取可视区高度 $(window).height(); 1.4. scrollTop与scrollLeft 设置或者获取垂直滚动条的位置 //获取页面被卷曲的高度 $(window).scrollTop()

jquery动画

由 China☆狼群 提交于 2019-12-07 00:10:47
英雄难过棍子关小游戏可以带大家熟悉jquery动画 看源码 index.js: $(function(){ var newNode=$("<div class='shadow'></div><div class='dialog'><p>游戏说明：<br /> 1、该游戏为一款好玩的闯关挑战类游戏，可以锻炼玩家的判断力，提高玩家的敏捷思维能力。<br /> 2、可以选择闯关模式或者挑战模式开始游戏。进入闯关模式后点击上方按钮可选择已解锁的关卡。<br /> 3、闯关模式总共有十个关卡，每通过一个关卡，游戏难度会逐渐增大。如果玩家玩通关闯关模式，会获得W币奖励。 <br /> 4、挑战模式会计算积分，玩家可以在线存档，也可以提交自己的积分来查看自己的排行。<br /> 5、本游戏引入了金币机制，即W币，初始金币为3个，玩家可以通过每日签到(+1 W币，连续签到从第二天起+2 W币)和完成每日的挑战任务(随机+7或8或9W币)或玩通关闯关模式(随机+10或11或12 W币)来获得W币，W币可以用来购买道具。本游戏目前含有四种道具，分别是原地复活道具、水波特效道具、蝴蝶跟随鼠标特效道具和下雪特效道具。原地复活道具只可以在挑战模式使用，其它三种道具均为特效道具，每次购买后有七天使用期限，七天后需再次购买才可继续使用。</p><button class='back1'>返回</button><
订阅 margin