新学习的CSS实用知识

最新推荐文章于 2022-08-13 10:55:35 发布

cecilia_rabbit

最新推荐文章于 2022-08-13 10:55:35 发布

阅读量262

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/cecilia_rabbit/article/details/51886215

版权

h5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

min-height属性设置块的最小高度，往块里添加内容随着内容的增加，块的高度也会增加

max-height属性设置块的最大高度，内容不能超过该块可以运用在框定图片大小上

想把图片和文字排在一个div块的左右两边，例如左图右文字，图片的css要求 position: absolute;，如果还不行就把他们所在的块的css position: relative;

一个块里可能有多种字体，因此可以把字体css单写出来 eg: .font14{font-size:14px;} 然后调用需要改变颜色的话就再写一个颜色的css .color{color:#FF0000;} 调用的时候就直接写class="color font14"

想在一句话中有不同颜色的字体

<div class="alter1">提醒：未注册过爱车小屋账号的手机号，登录时将自动注册，且表示您同意<span class="fblue">《爱车小屋用户服务协议》</span> </div> fblue里写上颜色

做一个图上文字下的这种效果，先写图片的代码

.iconplace{
	margin: 31px 36px 49.3px 36px;
	width: 22px;
	height: 22px;
}

位置不错，再放文字的代码

.chplace2{
	position: absolute;
	margin:65px 33px 24.3px 35px;
	color: #333333;
	font-size: 13px;
	font-family: "PingFangSC-Light";
	text-align: center;
}

结果因为两边的padding碰撞，文字被推到下边的块里，解决的办法是，在HTML页面中，先写出文字的div块，再写图片的div块，而且文字的position要是absolute才可以。

子块设置padding-top时影响父块高度的解决办法：在父块css加overflow:hidden;

自适应居中div 首先，先让div居中 margin: 0 auto;

自适应的css是 width: auto; 但如果直接这么写所有的div都编程一个大长条

解决方法是，在灰色div块外面再套一个div块，并写入text-align: center; 灰色div块里写入display: inline-block !important; 就可以了

8.写js方法的时候用if if else 不行非得用好几个if才能出现效果！什么鬼。。

9.一个用Js点击不同按钮切换页面内容的例子

<html>
<head>
<title>My HTML starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style>
.c1{
width:200px;
height:200px;
border:red solid 1px
}
</style>
<script type="text/javascript">
function f1(param){
for(var i =1;i<=4;i++){
var id =document.getElementById("d"+i);
id.style.display="none";
if(i==param)
{
id.style.display="block";
}
}
}

</script>
</head>

<body>
<input type="button" value="按钮1" οnclick="f1(1);">
<input type="button" value="按钮2" οnclick="f1(2);">
<input type="button" value="按钮3" οnclick="f1(3);">
<input type="button" value="按钮4" οnclick="f1(4);">

<div id="d1" class="c1">111111111</div>
<div id="d2" class="c1" style="display:none">22222222</div>
<div id="d3" class="c1" style="display:none">33333333</div>
<div id="d4" class="c1" style="display:none">44444444</div>
</body>
</html>

10.利用h5最新的oninput事件动态获取输入框的内容

11. cursor:pointer; css属性，鼠标放在上面变成小手

12.比如说没完成某个条件不能按按钮时，按钮就可以设置成disable

eg:<button type="button" disabled>登录</button>

13.CSS3选择器伪类选择器 root 根选择器，

not 除谁之外的选择器

div:not([id="footer"]){}

empty 内容为空的选择器

	div:empty{}

target 触发器的选择器

<span style="white-space:pre">	</span>#id :target{}

first-child last-child nth-child(n) nth-last-child(n) 选择第某子元素的选择器（例如第二个的话就是不管什么类型就是子元素的第二个）

<span style="white-space:pre">	</span>ul > li : first-child{}

first-of-type nth-of-type last-of-type nth-last-of-type(n) only-child only-of-type 指定某个元素类型的第某个元素的选择器（确定是某一个元素类型的第二个子元素）

<span style="white-space:pre">	</span>.wrapper > div:nth-last-of-type(5){}

:enabled :disabled选择器

<span style="white-space:pre">	</span>input:disabled{}

<span style="white-space:pre">	</span>若有多个input的话就
<span style="white-space:pre">	</span>input[type="text"]:disabled{}

:checked选择器配合其他标签实现自定义选中样式在span里面设置样式，checked表示选中状态

<span style="white-space:pre">	</span>input[type="radio"]:checked + span {
  <span style="white-space:pre">	</span>opacity: 1;
<span style="white-space:pre">	</span>}

::selection 改变鼠标选中文本样式的选择器

::selection{
  background: orange;
  color: white;
}
::-moz-selection{
  background: orange;
  color: white;
}

read-only选择器相对的就是 read-write选择器

设置只读

  <input type="text" name="address" id="address" placeholder="中国上海" readonly />

用选择器设置只读样式

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}

cecilia_rabbit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新学习的CSS实用知识

min-height属性设置块的最小高度，往块里添加内容随着内容的增加，块的高度也会增加max-height属性设置块的最大高度，内容不能超过该块
复制链接

扫一扫

专栏目录

新学习的CSS实用知识

“相关推荐”对你有帮助么？