The summary of the October

*划重点:

position:absolute 和float 会将元素的display变成block, 所以没必要同时使用,

position:relative 就没有将元素的display变成block;

position:absolut 和float:left/right 会让元素脱离流文档;

最近做阅文招聘官网,遇到一些有关浏览器兼容性的问题。

1)opacity(ie8开始就不支持)。当有这种背景遮罩的时候,我们就可以用一个小的透明的图片来平铺这个遮罩层,即是用图片而不是透明背景色来实现遮罩。同样字体颜色最好取实际的颜色,不要用透明度来调整字体颜色。

1 .ywzp-search{
2     background: url(./images/grey.png);
3     background: rgba(0,0,0,.4);
4     height: 92px;
5     width: 100%;
6     background-size: cover;
7     position: absolute; left: 0;
8     bottom: 0;
9 }

2)一些小icon 使用svg图像的好处是高清,但是ie8以下同样不支持svg,所以ie8以下还是用图片。具体实现办法如下:

 1 .inhere-playbtn{
 2     background: url(./images/inhere.png) no-repeat;
 3 }
 4 .inhere-playbtn{
 5     width: 36px;
 6     height: 36px;
 7     display: block;
 8     background-position: 0px 0px;
 9     margin: 14px auto;
10     cursor: pointer;
11     background: url(‘data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+R3JvdXAgNTwvdGl0bGU+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxOCIgY3k9IjE4IiByPSIxOCIvPjxwYXRoIGZpbGw9IiM0NTVDN0UiIGQ9Ik0xNSAyNS41NTZWMTBsMTAgNy43Nzh6Ii8+PC9nPjwvc3ZnPg==‘),none;
12 }

关于svg代码压缩和使用方法:先将icon导出成svg格式,得到一串冗长的代码,next安装压缩工具(https://github.com/svg/svgo),

命令行:svgo -f  ‘原文件夹名字‘  -o  ‘ 压缩到的文件夹‘,

last把压缩好的文件(将要导出的svg代码文件拖到:http://www.zhangxinxu.com/sp/base64.html),就可以得到一串如上面11行代码那样的占位符,就可以直接用了。

3)关于自适应列表的实现方法:

当容器宽度变化时候,每一个li 的宽度也会随之改变。

实例:http://output.jsbin.com/muhoyeyuzi

4)用css3画一些图形的办法和遇到的问题:

 

repeating-linear-gradient(45deg, blue, red);           /* A repeating gradient on 45deg axe starting blue and finishing red */
repeating-linear-gradient(to left top, blue, red);      /* A repeating gradient going from the bottom right to the top left
                                                            starting blue and finishing red */
repeating-linear-gradient(0deg, blue, green 40%, red); /* A repeating gradient going from the bottom to top, starting blue,
                                                            being green after 40% and finishing red */
<div id="grad2"></div>
1 #grad2 {
2   width:200px;
3   height:200px;
4   border-radius:200px;
5   background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
6 }

当画复杂的图形的时候,里面所有的元素都必须使用绝对定位,并且以一个基线为中线来定位,实例:http://output.jsbin.com/kutoliwomu

5)没事不要将position 和z-index 一起用,就利用元素本身的先后布局来实现。

6)关于icon和字体对其:

<div class="job-chat-x">
       <i class="job-chat-icon"></i>
       <h3 class="job-chatname">阅文招聘公众号</h3>
</div>    
 1 .job-chat-x {
 2     height: 20px;
 3     padding: 25px 0;
 4 }
 5 .job-chat-icon{
 6     display: inline-block;
 7     width: 19px; height: 19px;
 8     margin-right: 10px;
 9     background: url(./images/recruit.png) no-repeat;
10     vertical-align: -3px;
11     *vertical-align: 0;
12 }
13 .job-chatname{
14     display: inline;
15     font-size: 16px;
16     font-weight: 300;
17     color: #465C7E;
18 }

通过display:inline-block;属性让元素在一行显示,如果用vertical-align:middle 实现则在ie7 下位置会有几像素的偏移,

vertical-align 是可以设置数值的。所以可以通过具体的数字来调整icon的位置,再给ie7打个补丁就可以了。

7)font-weight 可以改变字重,即字体的粗细,默认是normal。粗细为font-weight:200, 300,400 只能是正数。

未完待续....

 
时间: 2024-11-03 09:35:03

The summary of the October的相关文章

The summary of the October(part 02)

--接上回分析 8)text-indent 属性本身是用来缩进文字的,也可以利用它的属性来隐藏文字,因为它可以赋负值,当使用负值时文字会被向左缩进. 9)搜索表单要用form标签.当点击 input 框时可能会出行边框,  搜索框里面的选择是通过select里面的值来输出的. 通过给元素本身加active属性来变化而不是给元素另外再加一个classname: 实例:http://output.jsbin.com/tovikedave 10)当屏幕过大的时候有些图会模糊,所以我们要使用两倍图或者换

Leetcode problems classified by company 题目按公司分类(Last updated: October 2, 2017)

Sorted by frequency of problems that appear in real interviews.Last updated: October 2, 2017Google (214)534 Design TinyURL388 Longest Absolute File Path683 K Empty Slots340 Longest Substring with At Most K Distinct Characters681 Next Closest Time482

【HTML5】summary交互元素

1.源码 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <title>交互元素summary的使用</title> <style type="text/css"> body{ padding:5px; font-size:14px; } summary{ font-weight:bold; } </style>

HDU 4989 Summary(数学题暴力)

题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4989 Problem Description Small W is playing a summary game. Firstly, He takes N numbers. Secondly he takes out every pair of them and add this two numbers, thus he can get N*(N - 1)/2 new numbers. Thirdl

228. Summary Ranges

Given a sorted integer array without duplicates, return the summary of its ranges. For example, given [0,1,2,4,5,7], return ["0->2","4->5","7"]. 这个题目不难,首先对原序列进行排序,然后要注意对特殊情况的处理.同时,要掌握string类的几个重要成员函数: to_string():将数字转换为

Learning to Compare Image Patches via Convolutional Neural Networks --- Reading Summary

Learning to Compare Image Patches via Convolutional Neural Networks ---  Reading Summary 2017.03.08 Target: this paper attempt to learn a geneal similarity function for comparing image patches from image data directly. There are several ways in which

三个不常用的HTML元素:&lt;details&gt;、&lt;summary&gt;、&lt;dialog&gt;

前面的话 HTML5不仅新增了语义型区块级元素及表单类元素,也新增了一些其他的功能性元素,这些元素由于浏览器支持等各种原因,并没有被广泛使用 文档描述 <details>主要用于描述文档或文档某个部分的细节,与<summary>配合使用可以为<details>定义标题.标题是可见的,用户点击标题时,显示出details [注意]这两个标签只有chrome和opera支持 <details> 该标签仅有一个open属性,用来定义details是否可见(默认为不

[LeetCode]228.Summary Ranges

题目 Given a sorted integer array without duplicates, return the summary of its ranges. For example, given [0,1,2,4,5,7], return ["0->2","4->5","7"]. 代码 /*--------------------------------------- * 日期:2015-08-04 * 作者:SJF01

Java for LeetCode 228 Summary Ranges

Given a sorted integer array without duplicates, return the summary of its ranges. For example, given [0,1,2,4,5,7], return ["0->2","4->5","7"]. 解题思路: JAVA实现如下: public List<String> summaryRanges(int[] nums) { List