Tag Archives: css

Hello World

css-display-flex各种居中对齐，强迫症的福音

2024 年 07 月 23 日 – 上午 6:33

先看页面效果

html+css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

...
    <style>
        div.main{
            margin-left: 2%; width :96%;
            .title{
                width: 100%;display: flex;justify-content: space-between;
                align-items: center;padding: 10px 0;line-height: 16px;
                span{
                    font-size: 16px;color: #333;width: 200px; text-align: left;
                }
                >div{/*右侧单号、箭头*/
                    display: inline-flex;justify-content: right;align-items: center;width: 100px;
                    span{
                        font-size: 14px;color: #999;
                    }
                    img{
                        width: 14px; height: 14px; margin-right: -2px;/*修正png图的框框*/
                    }
                }
            }
            .content{
                width: 100%;
                .order{
                    background-color: #fff;border-radius: 5px;display: flex;
                    justify-content: space-between;align-items: center; margin: 10px 0;    
                    >img{/*商品图*/
                        width: 80px;height: 80px; border: 1px solid blue;
                        border-radius: 5px; margin: 10px;
                    }
                    >div{/*商品图右侧详情*/
                        display: inline-flex;flex-direction: column;
                        justify-content: space-between;align-items: center;
                        height: 80px;margin-right: 10px;
                        >div{/*单号、时间*/
                            display: flex; font-size: 16px;line-height: 16px;
                            span{
                                display:block;font-size: 16px;
                                color: #333;width: 200px;
                                text-align: left;width: 100%;
                            }
                            >span:last-child{/*时间*/
                                font-size: 11px;color: #999;text-align: right;
                            }
                        }
                        >span{/*商品名*/
                            display:inline-block;font-size: 18px;
                            color: #333;font-weight: 900;
                            text-align: left;width: 100%;
                        }
                        >span:last-child{/*规格*/
                            font-size: 11px;color: #999;
                            line-height: 12px;margin-top: -20px;/*拉进商品名与规格*/
                        }
 
                    }
                }
            }
        }
    </style>
    <div class="main">
        <div class="title">
            <span>近期订单</span>
            <div>
                <span>查看全部订单</span>
                <img src="arrow_right_small.png">
            </div>
        </div>
        <div class="content">
            <div class="order">
                <img src="IMG_1101.JPG">
                <div>
                    <div>        
                        <span>订单号: 123456789</span>
                        <span>2024-07-23 10:01:31</span>
                    </div>
                    <span>5090系列散热格窗............</span>
                    <span>红色、水冷款</span>
                </div>
 
            </div>
...

——-
over~~
后记：
记得上小学时，某日，学校请来村里老木匠，做桌椅。木匠逐个做好各种课桌的部件：桌子腿、桌面、桌洞底板，然后一个个部件拼接起来，再在接口处敲几个木削进去，一张桌子完工。老师盯着这一切，跟我们说：看到了吧，老师傅做东西就是有谱，每个部件都刚刚好，一个人轻松组装；这要是不靠谱的小年轻木匠，三五个人辅助也也不见的能拼到一起，而且拼出来桌子可能还桌腿不平摇摇晃晃
每次写页面、css，脑子里想的都是几个人辅助一起拼桌子的画面…虽然前有firebug、后有chrome的开发工具，各种页面布局，也是要反复测试才能勉强完成设计图的目标。当然，大部分时候都不能完全实现效果图，最后就彻底改成position: absolute，各种算坐标，绝对定位~~给人感觉就是：虽然呈现在眼前的貌似是一张桌子，但后面其实是各种钉子、角铁钉住、甚至胶带粘在一起的 O(∩_∩)O哈哈~
近期写小程序，再次开始搞css，发现display:flex“弹性盒模型”真的很好用，这里记个布局范式，便于以后查阅

Tags | Permalink | Comment (0)
Hello World 业界杂谈 他山石

[转]来自浏览器创造者的web优化技巧

2012 年 12 月 06 日 – 上午 3:09

Jatinder Mann是微软Internet Explorer产品的一名项目经理，在BUILD 2012大会上，他做了题为“提高HTML5应用和网站性能的50条秘技（50 performance tricks to make your HTML5 apps and sites faster）”的演讲，介绍了很多为Web应用提速的技巧。

Mann的建议是按照下面六个原则组织的。

1. 快速响应网络请求

  • 避免重定向。排名前1000的网站中，63%使用了重定向。如果不执行重定向的话，页面速度可以提高10%。
  • 避免Meta-refresh。世界上14%的URL使用了Meta-refresh。
  • 尽可能通过CDN定位用户，使服务器响应时间最小化。
  • 从不同的域下载资源，使并发连接的应用最大化。
  • 复用连接。不要在响应请求时关闭连接。
  • 确保页面加载不会因合作伙伴网站提供的数据而延迟。
  • 了解耗时的网络组件，如重定向、缓存、DNS、请求和响应等。在IE 9和10中可以使用Navigation Timing API来测量浏览器花在每个操作上的时间。

2. 最小化下载的字节数

  • 加载页面时，要尽量减少下载的数据量。平均而言，每个页面要下载的数据量达777KB，其中有474KB的图片、128KB的脚本和84KB的Flash。
  • 请求gzip压缩的内容。
  • 将资源保存在本地的包中，比如为Windows商店应用生成的包资源索引（Package Resource Index）文件。这样当需要这些资源时就可以很容易地获取到。
  • 使用HTML5 App Cache缓存动态资源。App Cache会只下载一次资源，从而避免多次网络行程。当应用的版本号发生变化时，它会自动重新下载相应资源。
  • 尽量在响应中使用“Expires”字段来提供可缓存的内容。
  • 通过设定请求的If-Modified-Since字段来使用条件请求。
  • 缓存数据请求，如HTTP、XML和JSON等，因为大约95-96%的请求不会整天变化。虽然这个想法很合理，但实际缓存接收到的请求的网站所占比重还不到1%。
  • 用大写将文件命名标准化。虽然服务器可能把Icon.jpg当作 icon.jpg，但是对于Web平台而言，它们是不同的资源，对应不同的网络请求。

3. 高效地组织标记

  • 对于IE而言，请使用最新的标记标准，因为它速度最快。IE 10也能识别早期的IE6-IE9标记风格，但是其速度不如新的标记风格。
  • 特定的业务Web应用可能需要强制IE运行于传统模式，请使用HTTP头字段“X-UA-Compatible: IE=EmulateIE7”来代替HTML标签 ，这样速度会快一些。
  • 为了平滑地渲染，样式表应该链接在页面顶部的<head>之中的<title>后面。
  • 绝对不要在页面底部链接样式表。否则加载页面时可能会出现闪烁。
  • 对于分层样式，不要使用“@import”，因为它是同步的，会阻塞CSS数据结构的创建和屏幕绘制。
  • 避免样式的嵌入和内联，因为它会强制浏览器在HTML和CSS解析器之间进行上下文切换。
  • 仅包含必要的样式。不要下载和解析用不到的样式。
  • 仅在页面底部链接JavaScript。这可以确保脚本执行时图片和CSS等资源已经加载，无需等待，也避免了上下文切换。
  • 不要在页面开头链接JavaScript。如果某些脚本必须在开始处加载的话，请使用“defer”属性。
  • 不要内联JavaScript，这样可以避免上下文切换。
  • 使用“async”属性加载JavaScript，这样整个脚本就可以异步加载和执行。
  • 避免冗余代码。世界上52%的网页包含100行甚至更多的冗余代码，比如一个JavaScript文件被链接了两次。
  • 将一个JS框架标准化，无论是jQuery，Dojo，Prototype.js还是其他框架。浏览器没有必要加载多个功能基本相同的框架。
  • 不要加载FB和Twitter等网站的脚本，只是看起来很酷而已，它们会争用资源。

4. 优化多媒体资源的使用

  • 图片是最常用的资源，每个页面平均会下载58张图片。
  • 尽量避免下载太多图片，根据页面加载时间将图片最大数量控制在20-30之间。
  • 使用Image Sprites将多个图片组合成一个。该技术可以减少网络连接数，也会减少下载的字节数并节省GPU处理周期。
  • 手动创建Image Sprites，因为工具创建的可能会留下较大的空洞，这会加大需要下载的数据量，也需要更多的GPU 处理周期。
  • 使用PNG格式的图片，该格式在下载大小、解码时间、兼容性和压缩率之间实现了完美的折中。JPEG格式可以用于照片。
  • 使用原始的图像分辨率，这样可以避免下载不必要的数据以及缩放所需的CPU 处理。
  • 尽可能使用CSS3 Gradient替代图片。
  • 尽可能使用CSS3 border radius替代图片。
  • 使用CSS3 Transform来创建移动、旋转和倾斜效果。
  • 对于小型的单个图片，可以使用Data URI。这样可以节省一张图片的下载量。
  • 避免复杂的SVG，因为它们会延长下载和处理时间。
  • 当包含HTML5时，指定一个预览图片。这样浏览器就不必下载整个视频文件来确定预览图片了。
  • 使用HTML5来代替Flash、Silverlight或QuickTime。HTML5速度更快，而且其他几种形式的运行时插件会消耗系统资源。
  • 主动地以异步方式下载富媒体资源并将其保存在App Cache中。

5. 编写快速的JavaScript

  • 在JavaScript中进行数学运算时尽量使用整型。JavaScript的浮点运算比相应的整型运算耗费的时间要多得多。在进行数学运算，特别是计算密集型运算时，请使用Math.floor和Math.ceil将浮点数转换为整型数。
  • 降低JavaScript代码量，这样不但可以减少下载的数据量，而且能够提供更好的运行时性能。
  • 按需初始化JS。当需要时动态加载JS。
  • 通过缓存变量（如document和body等）使DOM交互减到最少。
  • 使用内置的DOM代码，如element.firstChild或node.nextSibling等。这些代码都是高度优化的，相对于第三方库能提供更好的性能。
  • 访问大量DOM元素时，使用querySelectorAll。
  • 使用.innerHTML来构建动态页面。
  • 批量标记更改。
  • 维护小巧而健壮的DOM——将其元素数目控制在1000以内。.
  • JSON快于XML。
  • 使用浏览器的JSON原生方法。
  • 不要滥用正则表达式。

6. 知道你的应用在做什么

  • 理解JavaScript定时器，了解setTimeout和clearInterval。除非确定要使用定时器完成一些功能，否则不要启动定时器。组合定时器也是如此。
  • 如果监视器的刷新率是60Hz，请将显式帧的定时器调整为16.7 ms。
  • 在IE 10、Chrome和Firefox中，图形处理请使用requestAnimationFrame动画函数。其绘制通过回调实现，因此不需要定时器。
  • 使用可见性API（document.hidden和 Visibilityhange）来确定应用程序的可见状态，如果页面是隐藏的，就关闭该活动。这样可以节省CPU和电池寿命。
  • Mann建议在IE中使用Windows Performance Tools来测试Web页面的性能， 并以减少CPU时间和增加并发性为目标进行优化

—————-
转自：http://www.searchsoa.com.cn/showcontent_68434.htm

Tags , , , | Permalink | Comment (1)
Hello World 他山石

[转]CSS的position:fixed的使用

2012 年 11 月 21 日 – 上午 3:32

接触CSS已有相当长一段时间，我们竟然没有留意position:fixed的用法。

我们都知道CSS中定位属性position的值，除了默认的值外，还有absolute,relative和fixed。我平时比较常用absolute和relative，而position:fixed却没多关注。或许是因为当初在CSS中文手册中看到position:fixed旁边有说明“IE5.5及NS6尚不支持此属性”吧。

前段时间，在做一个项目时需要使一个层相对于浏览器边框固定，那时用position:absolute试了下，发觉absolute是对网页边框而言的。后来，上网查了一些根据滚动条的移动，动态地改变left和top的值的JavaScript语句，虽然能实现了类似的效果，但滚动条移动时，那个层晃来晃去的，感觉不好看，想要一种能使层固定不动的做法。

且看下面的代码：

#help{
    width:30px;
    height:20px;
    background-color:green;
    position:fixed;
    left:60px;
    top:100px;
}

我们用上面这段代码来定义页面上的一个层“help”（id=“help”）。这样就能实现我们想要的效果了。

在IE8、Firefox、Opera、Google等浏览器中测试，都没有问题，唯独低版本的IE中，这个属性无效。

转自：http://www.blogjava.net/rongxh7/archive/2009/11/22/303225.html

——————-
ps：置顶菜单的定位：

div.top_nav{
    width:100%;
    position:fixed;
    left:0;
    top:0;
    ......
}

Tags | Permalink | Comment (0)
Hello World 他山石

[转] div模拟textarea

2012 年 02 月 08 日 – 上午 8:59

使用很简单，一个普通的block元素上加个contenteditable=”true”就ok了，如下：

<div contenteditable="true"></div>

true外面的引号甚至去掉都没关系。

contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。所以，兼容性方面还是不用太担心的。

ok，最麻烦的模拟textarea的可编辑效果已经解决了，现在想要使用div实现高度自适应那就像是给花花草草松松土一样容易的。使用min- height属性基本上就一步到位了，考虑到IE6浏览器对min/max家族不屑一顾，结合其内部元素溢出会撑开父标签高宽的特性，IE6浏览器直接定 高就可以了。

CSS代码：

.test_box {
    width: 400px; 
    min-height: 120px; 
    max-height: 300px;
    _height: 120px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 3px; 
    outline: 0; 
    border: 1px solid #a0b3d6; 
    font-size: 12px; 
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
}

HTML代码：

<div class="test_box" contenteditable="true"><br /></div>

——-
转自：http://blog.163.com/xiangfei209@126/blog/static/9869567420113154453944/

Tags | Permalink | Comment (0)
Hello World

锁定textarea

2011 年 10 月 09 日 – 上午 7:33

html的textarea标签，在火狐、safari等现代浏览器里，右下角会出现一个可拖动的标示，让用户可以修改编辑区域的大小，用起来很方便。但有些时候，我们并不希望用户可以改变这个textarea的大小，比如下图，textarea变大后，整个个页面布局都乱了：

这种时候，我们希望可以锁住这个textarea，如何锁住哪？

很简单，只需要一个css属性：resize:none;

——————–

查了一下文档，resize可以设置如下的属性：

none：UserAgent没提供尺寸调整机制，用户不能操纵机制调节元素的尺寸。
both：UserAgent提供双向尺寸调整机制，让用户可以调节元素的宽度和高度。
horizontal：UserAgent提供单向水平尺寸调整机制，让用户可以调节元素的宽度。
vertical：UserAgent提供单向垂直尺寸调整机制，让用户可以调节元素的高度。
inherit：默认继承。
Tags | Permalink | Comments (2)