CSS介绍
form表单
<!--br标签--> 用于换行
<!--action: 表单要提交的服务器接口
method: 表单提交方式 默认是GET 一般用post(加密后传过去)
-->
<!--输入框
placeholder 占位符,给用户提示
value 最终要发送给服务器的值
name 给服务器值的时候提示这个值是什么值(身高\体重\姓名等)
-->
<!--multiple 可以上传多个文件-->
<!--隐藏信息 如果想要收集一些不需要用户填的信息,可以使用hidden类型,如注册时候的设备类型-->
<!--提交信息的按钮submit--><!DOCTYPE html>
<html lang="ne">
<head>
<meta charset="utf-8" />
<title>form表单</title>
<style type="test/css"></style>
</head>
<body>
<form action="" method="" id="first">
<input type="text" placeholder="请输入用户名" name="userName" value="baidu"/>
<label for="sg">身高</label>
<input id="sg" type="text" name="shengao" placeholder="请输入身高" />
<br />
<input type="password" placeholder="请输入密码" />
<br />
<input type="radio" name="gender" value="男"/>
<input type="radio" name="gender" value="女"/>
<input type="radio" name="gender" value="人妖"/>
<br/>
<input type="checkbox" name="hobby" value="篮球"/>
<input type="checkbox" name="hobby" value="足球"/>
<input type="checkbox" name="hobby" value="台球"/>
<br/>
<input type="file" multiple/>
<br/>
<input type="hidden" name="type" value="Mac"/>
<br />
<input type="submit" value="注册"/>
<br />
</form>
<!--如果重置/提交按钮在form外,点击这个按钮的话,是没有效果的.可以通过form属性关联
到form表单的ID来绑定到一起-->
<input form="first" type="reset" value="清空"/>
<textarea></textarea>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>截图
table表格
合并边框 -- collapse(边框合并) separate(边框不合并)
empty-cells:hide 隐藏空的单元格,在边框没有合并的情况下<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table表单</title>
<style type="text/css">
table{
border-collapse:collapse;
border:1px red solid;
/*隐藏空的单元格 在边框没有合并的情况下*/
empty-cells:hide;
text-align:center;
}
tbody{
/*改变表格垂直居中方式
top middle bottom
*/
vertical-align: top;
}
</style>
</head>
<body>
<!--
border:边框,和css的border不一样
cellspacing: 单元格之间的距离
cellpadding: 单元格内边距
-->
<table border="1" width="200" height="100" cellspacing="0" cellpadding="10">
<!--<capyion></caption>-->
<!--<thread></thread>-->
<!--<tbody>-->
<tr>
<th height="200">1</th>
<th width="600">2</th>
</tr>
<tr>
<th height="200">11</th>
<th width="600">22</th>
</tr>
<!--</tbody>-->
<!--<tfoot></tfoot>-->
</table>
</body>
</html>截图
图形设计
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> clip-path</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
}
.circle{
/*circle: (半径 at x y) */
clip-path: circle(50% at 50% 50%);
}
.circle1{
/*circle: (半径 at x y) */
clip-path: circle(50% at 50% 60%);
}
.ellipse{
/*椭圆ellipse(x y at 圆心)*/
clip-path: ellipse(50% 30% at 50%);
}
.polygon{
clip-path: polygon(50% 0% ,100% 100% ,0% 100% );
}
.class1{
clip-path: polygon(0% 40% ,40% 40% , 40% 0% , 60% 0% , 60% 40% ,100% 40%, 100% 60%,60% 60%, 60% 100%,40% 100%, 40% 60%,0% 60%);
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="circle1"></div>
<div class="ellipse"></div>
<div class="polygon"></div>
<div class="class1"></div>
</body>
</html>结果截图
行块对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
<style type="text/css">
.div1{
width: 100px;
height: 50px;
background-color: red;
font-size:20px;
}
.div2{
width: 60px;
height: 200px;
background-color: yellow;
}
.div3{
width: 80px;
height: 140px;
background-color: blue;
}
div{
/*行块*/
display: inline-block;
/*
baseline 基线对齐
bottom
top
middle
*/
vertical-align: text-bottom;
}
@font-face{
src:url(STXINGKA.ttf);
font-family:"STXingkai";
}
p{
font-size:50px;
/*设置字体*/
font-family:"STXingkai";
}
</style>
</head>
<body>
<!--div.div$*3-->
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">5</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, reiciendis.n你好</p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
