输入框默认值设置
<!--单行与多行输入框默认值--> <input value="xxx" /> <textarea>123</textarea>
下拉框默认值设置
<!--select下拉框默认选择设置-->
<select>
<option>上海</option>
<option selected="selected">广州</option>
<option>台北</option>
</select>
单选框默认值设置
<!--单选框默认选择--> 男<input type="radio" name="g1" /> 女<input type="radio" name="g1" checked="checked" />
复选框默认值设置
<!--复选框默认选择--> <input type="checkbox" name="c1" checked="checked"/> <input type="checkbox" name="c1"/> <input type="checkbox" name="c1"/> <input type="checkbox" name="c1" checked="checked"/>
CSS 强制优先级为最高设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
/*使用!important 强制此样式优先级最高*/
background-color: red !important;
}
.c2 {
background-color: green;
}
</style>
</head>
<body>
<div class="c1 c2">testxxxxxxxxxxx</div>
</body>
</html>
CSS属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1[alex=‘a‘]{
color:red;
}
</style>
</head>
<body>
<!--属性选择器-->
<div class="c1" alex="a">1</div>
<div class="c1" alex="b">2</div>
<div class="c1">3</div>
<div class="c1" alex="a">4</div>
</body>
</html>
CSS实现用户名密码登录框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--登录输入input时，input框中的用户和密码图标-->
<style>
.icon-name{
background-image: url("i_name.jpg");
height: 16px;
width: 16px;
display: inline-block;
}
.icon-pwd{
background-image: url("i_pwd.jpg");
height: 19px;
width: 14px;
display: inline-block;
}
</style>
</head>
<body>
<!--定义一个标签，设置relative，并设置absolute的span-->
<div style="width: 200px;position: relative">
<input style="width: 180px;padding-right: 20px;" />
<span class="icon-name" style="position: absolute;top: 2px;right: 0;"></span>
</div>
<div style="width: 200px;position: relative">
<input type="password" style="width: 180px;padding-right: 20px;" />
<span class="icon-pwd" style="position: absolute;top: 2px;right: 0;"></span>
</div>
</body>
</html>
CSS利用伪类清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left{
float: left;
}
.clearer:after{
/*增加一个点，撑起一行*/
content: ‘.‘;
clear: both;
/*使用块级*/
display: block;
/*隐藏增加点*/
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<!--清除浮动-->
<div style="background-color: red" class="clearer">
<div class="left" style="height: 100px;background-color: green">
1
</div>
<div class="left">
1
</div>
</div>
</body>
</html>
CSS自制小三角符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*使用css做出小三角*/
.icon{
display: inline-block;
border-top: 15px solid aqua;
border-right: 15px solid red;
border-bottom: 15px solid blue;
border-left: 15px solid saddlebrown;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>
CSS超出标签范围后出现滚动条设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后台管理页面布局*/
/*实现内容超出标签后，出现滚动条*/
body{
margin: 0;
}
.pg-header{
height: 48px;
background-color: blue;
}
.pg-body .body-menu{
position: absolute;
top:48px;
left:0;
bottom: 0;
width: 200px;
background-color: red;
}
.pg-body .body-content{
position: absolute;
top: 48px;
left: 200px;
right: 0;
bottom: 0;
background-color: green;
/*overflow auto 当内容超过高度时，在右侧增加滚动条*/
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="body-menu"></div>
<div class="body-content">
testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>
testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>
testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>
testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>
</div>
</div>
</body>
</html>
demo
时间： 2024-08-24 23:53:40