从零开始学_JavaScript_系列(13)——CSS<2>(新窗口打开,背景图片填充,底文字,小提示,CSS选择器整理)

简介: 前注:图片和部分内容引用的网易云课堂的,所以,侵,私信,删。 这篇也算上周的 (10)打开一个网页时,以新窗口形式打开 将 <a href="www.baidu.com"></a> 新增属性: <a href="www.baidu.com" target="_blank"></a> 即可。       (11)关

前注:图片和部分内容引用的网易云课堂的,所以,侵,私信,删。

这篇也算上周的


(10)打开一个网页时,以新窗口形式打开

<a href="www.baidu.com"></a>

新增属性:

<a href="www.baidu.com" target="_blank"></a>

即可。

 

 

 

(11)关于块间的莫名空隙

假设有html代码:

<div id="a">

       <div id="mm">

              aa

       </div>

</div>

<div id="b">

       <div id="mm">

              bb

       </div>

</div>

 

其有css属性:

#mm{

margin:20px;

}

问题:

若给a块和b块染色,会发现,a块和b块之间将会有一定空隙(透明的)。

 

解决办法:

①给mm的父块a和b,增加一条属性:

       padding:1px;

即可(不能是0)。(背景色将自动填充空隙区域)

②如果想避免在其他方向出现的空隙,那么在只在需要的方向(例如只对padding-top和padding-buttom设置属性)

 

 

 

 

(12)背景图片(完全填充)

HTML代码:

       <!--背景图片-->

       <divid="Layer1">

              <imgsrc="image/index_bg2.jpg" height="100%"width="100%"/>   

       </div>

 

CSS代码:

#Layer1

{      /*由于背景图片不能缩放,故如此设置*/

              position:absolute;

               width:100%;

               height:100%;

               z-index:-1;

               opacity:0.7;

}

 

 

即可

 

 

(13)输入框在空的时候有文字,输入内容后消失

<input id="keyword" type="text"placeholder="过滤" value=""/>

这里的placeholder="过滤",就是底文字

 

 

(14)鼠标移动到上面的时候,显示提示

如代码:

<input id="baoji" type="text" placeholder="请输入数字"style="text-align:right;width:75px"title="可以输入小数">

 

效果:

 

 

 

(15)HTML标签图


注:这个图片是从网易云课堂截取的。



(16)设置文本垂直居中

简单办法是:在CSS属性里,设置

line-height: xx px;

其中的xx,值和这个div块的height的一样。

 

 

(17)选择器整理

选择器

方法

HTML

示例

id

#id名

<p id="a">

#a{xxxx}

class

.class名

<p class="a">

.a{xxx}

 

 

 

 

通配符

通配符名

<div>

div{xxxx}

如果是*,表示所有元素

属性

disabled

<input disabled>

<xx type="button>

[disabled]{xxxx}

[type=button]{xxx}

选择所有 有class="a"的

[class~=class名]

<x class="a b">

<x class="a">

两个被同时选中

[class~=a]{xxx}

选择所有某属性的值里有pp

[属性|=pp]

<p lang="pp">

<p lang="bpp">

都要被选中

[lang|=pp]{xxx}

 


选中href里面,有#的(第2、3个),这个符号是英文状态下,shift + 6

 


选中href里面,格式是pdf的(即第二个)

 


选择href里面,值有lady.163.com的所有标签(即1和2)

 

 

④伪类选择器



a:link表示,所有链接的样式;

a:visited表示,访问过的链接的样式;

a:hover表示,鼠标移动上去之后的样式;

a:active表示,用户鼠标点击上去之后的样式

其中hover和active还可以对其他的生效。

如果四个都用,要按顺序来写。

 

 

⑤不同状态下的样式


enabled表示,可用时的样式;

disabled表示,不可用时的样式;

checked表示,选中时的样式。(比如单选框)

 

 

⑥和列表相关的


li:first-child{xxxx}表示第一个的样式

li:last-child{xxx}表示最后一个的样式

li:nth-child(even){xxx}表示奇偶相间的,偶数项的样式,odd表示奇数项。注意,如果有其他<p>或者<li>标签或其他,虽然标签名不同,但依然会影响起效果的顺序(比如奇数变偶数)。

even可以修改,比如使用2n+2(n从0开始),表示选择2、4、6项个子元素。

也可以改为:li:nth-last-child(2n+2){xxx}表示倒着数第2、4、6个,这里是5、3、1项

 

⑦只选中只有一个子元素的项


html代码如:

<html>
	<body>
		<ol>
			<li>aa</li>
		</ol>
		<ul>
			<li>bb</li>
			<li>cc</li>
		</ul>
		<p>qq</p>
	</body>
	<style>
		:only-child{color:red;}
	</style>
</html>

只影响aa


⑧对于自定义列表,选择第一个<dd>



dd:first-of-type{color:red}

效果是Dave Shea那项变红色(但人民邮电出版社不变)

first-of-type表示第一个这个类型(dd)的元素。

可以更改为last-of-type(最后一个)

nth-of-type(even) 表示偶数个

nth-last-of-type(2n)倒数的偶数项的元素

 

⑨选择在A标签范围内,只有一个B标签的B标签



如第一行有2个<span>,而第二行只有一个<span>

若对第二行CSS染色,使用

span:only-of-type{xxxx}

 

⑩不常用的

:empty 选中页面中没有子元素的元素

:root 选中根标签

:not()  不包含某个选择器的元素,参数是简单选择器

:target 选中被锚点选中的目标元素

:lang()  language为某些特殊值的元素

 

简单选择器组合起来之后,表示两个条件都符合的元素。


目录
相关文章
|
3月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
3月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
3月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
3月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
3月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
3月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
3月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
3月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
3月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示