CSS样式更改——裁剪、Z-Index、清除、改变元素的特性

前言

上篇文章主要介绍了CSS样式更改篇中的框模型、定位、浮动、溢出基础知识,这篇文章主要分享CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识,一起来看看吧。

1.裁剪Clip

对元素某块区域就行剪切

img{
   clip:rect(23px,14px,45px,54px)
}
rect (top, right, bottom, left)  设置元素的形状
auto 不应用任何剪裁

2.Z-Index

设置元素的堆叠顺序

div{
z-index:1
}
p{
z-index:10
}
a{
z-index:-1
}
z-index 值越大,所在的元素越靠前显示

3.清除Clear

专门用来清除浮动

div{
  clear:both
}
left   清除左侧浮动
right  清除右侧浮动
both   清除左右两侧浮动
none   允许浮动

4.改变元素的特性Display

互相调换元素之间的特性

div{
    display:inline
}
none                元素不会被显示。
block                元素将显示为块级元素,此元素前后会带有换行符。
inline               元素将被显示为内联元素,元素前后没有换行符。
inline-block         行内块元素
list-item            元素会作为列表显示。
run-in               元素会根据上下文作为块级元素或内联元素显示。
table                元素会作为块级表格来显示,表格前后带有换行符。
inline-table         元素会作为内联表格来显示,表格前后没有换行符。
table-row-group       元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group    元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group    元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row             元素会作为一个表格行显示(类似 <tr>)。
table-column-group    元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column          元素会作为一个单元格列显示(类似 <col>)
table-cell            元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption         元素会作为一个表格标题显示(类似 <caption>)

此时的块级元素div就有了内联元素的特性了。
参考文档:W3C官方文档(CSS篇)

总结

这篇文章主要介绍了CSS样式更改篇中的裁剪、Z-Index、清除、改变元素的特性,希望让大家对CSS样式有个简单的认识和了解。
想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你用jquery mobile设计颜色拾取器

【一、项目背景】

现实生活中,我们经常会遇到配色的问题,这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。

我们可以通过 jquery mobile去设计颜色的拾取器,得到我们想要的颜色值。同时可以验证RGB表的颜色值。

 

【二、项目准备】

框架:jquery mobile

软件:Dreamweaver

1、去官网 jQuerymobile.com 下载jquery mobile。

2、在你的网页中添加 jQuery Mobile

你可以通过以下几种方式将jQuery Mobile添加到你的网页中:

  • 从 CDN 中加载 jQuery Mobile (推荐)。
  • 从jQuerymobile.com 下载 jQuery Mobile库。

3、导入jQuery Mobile

<link href="jquery.mobile/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.4.5.js"></script>

 

【三、项目目标】

1、滑动滑块将对应的颜色显示在页面。

2、实现输入框,输入对应的RBG值,将结果显示在页面上。

 

【四、项目实现】

1、创建三层div块。(头部,中部,尾部)。

<body>
<div data-role="page" ">
    <div data-role="header">
        <h1>拾色器</h1>
    </div>
    <div data-role="content" class="color"> </div>
    <div data-role="footer" data-position="fixed">
       
    </div>
</div>
</body>

头部显示文字,中部颜色显示区域,尾部显示滑动条。

2、创建一个表单(用三个input来分别存放RGB这三种颜色)。

<form>
     <input name="red" id="red" min="0" max="255" value="0" type="range" " />
     <input name="green" id="green" min="0" max="255" value="0" type="range"" />
     <input name="blue" id="blue" min="0" max="255" value="0" type="range"  />
</form>

3、添加CSS样式

<style type="text/css">
.color {
    height: 100%;
    min-height: 400px;
}
</style>

4、添加 JS

1) 定义(set_color()方法)获取相对于颜色的id属性。

<script>
function set_color(){
    var red = $("#red").val();        //获取红色数值
    var green = $("#green").val();        //获取绿色数值
    var blue =$("#blue").val();        //获取蓝色数值
}
</script>

2)生成rgb表示的颜色字符串。

var color = "RGB("+red+","+green+","+blue+")";  //生成rgb表示的颜色字符串

3)设计内容框背景色。

$(".color").css("background-color",color);       //设计内容框背景色

5、调用set_color()。

<input name="red" id="red" min="0" max="255" value="0" type="range" onchange="set_color();" />
<input name="green" id="green" min="0" max="255" value="0" type="range" onchange="set_color();" />
<input name="blue" id="blue" min="0" max="255" value="0" type="range" onchange="set_color();" />

 

【五、效果展示】

1、点击运行。

2、点击f12进入开发者模式,点击蓝色框框切换手机模式运行。

3、滑动任意一条滑动条。得到想要的颜色。

4、手动输入RGB(0-255)值,得到相对应的颜色,如下图所示。

 

【六、总结】

1、使更多的人去了解jQuery Mobile, jQuery可以快速找到文档中的html元素,并对其进行操作,如隐藏、显示、改变样式…”。

2、本项目主要学习了input标签(类型:滑动条)如何与js绑定,获取事件响应。

3、颜色拾取器项目中,随机产生颜色这个难点进行了有效的分析,并提供解决方案。

4、按照操作步骤,自己尝试去做。自己实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

5、需要本文源码的小伙伴,后台回复“颜色拾取”四个字,即可获取。

****看完本文有收获?请转发分享给更多的人****

IT共享之家

入群请在微信后台回复【入群】

—————— End ——————

往期精彩文章推荐:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

/1 前言/

selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样,是爬复杂动态网页的必备工具。支持的浏览器包括IE,Mozilla Firefox,Safari,Google Chrome,Opera等。

这里分两个场景,给大家介绍Selenium爬动态网页小技巧。

/2 场景一:替换日期控件值/

以12306网站为例,如下图所示,按照正常的方法,我们首先要定位到时间元素,然后调用selenium的click()方法进行点击。

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

这种操作也是可行的。但是,过了一段时间,我们再次运行自动化代码的时候,就会发现功能运行不正常。因为日期更改后,日历控件布局发生了变化,而且操作起来很麻烦。

我们先看一下日期框的元素,如下图所示:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

重点看一下value=‘text’,这种属性值可以通过JavaScript来改变,三行代码就能解决这个问题,如下图所示:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

第一行是要输入的日期,第二行是JavaScript代码,“documen.getElementById”是通过HTML的“id”定位元素,通过改变该元素的“value”实现值的变化。

/3 场景二:动态网页自动下拉/

一些复杂的动态网页需要下拉才能把元素显示完全,例如腾讯视频主页,如下图所示:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

如果需要自动爬取这类动态网页,我们同样可以执行JavasScript的方法来实现,用5行代码就可以连续滑动网页,将动态网页元素全部展示出来,代码如下图所示:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

小编这里采取的分步下拉的方法,每次滚动1/10,“window.scrollTo”为向下滑动的命令,“document.body.clientHeight”为整个窗口的高度,“h=(i/10)”为每次滑动的高度。

效果演示如下:

/4 结语/

将JavaScript应用到selenium中可以帮我们解决很多问题,这里举两个小例子只是抛砖引玉,希望大家以后遇到selenium不好解决的问题时可以考虑在JavaScript身上寻找突破。

欢迎大家积极尝试,消耗在家的无聊时间。本文涉及的代码都上传到了github地址上,后台回复“selenium”这个单词即可获取代码。

——————— End ———————

往期精彩文章推荐:

看完本文有收获?请转发分享给更多的人

Python爬虫与数据挖掘

入群请在微信后台回复【入群】

在公众号后台回复下列关键词可以免费获取相应的学习资料:

Python、网络爬虫 、书籍、数据分析、机器学习、数据结构、

大数据、服务器、Spark、Redis、C++、C、php、

mysql、java、Android、面试题、课堂、其他