空间日志.html

小阴学习吧

已于 2024-08-28 20:11:18 修改

阅读量1.7k

点赞数 1

分类专栏： html 文章标签： html css css3

于 2022-05-27 10:21:17 首次发布

本文链接：https://blog.csdn.net/weixin_45354103/article/details/124998836

版权

html 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

这篇博客主要探讨了如何使用HTML和CSS技术来设计和创建一个空间日志页面，特别强调了CSS3在增强视觉效果和交互性的应用。

摘要由CSDN通过智能技术生成

空间日志.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>空间日志</title>
<style type="text/css">
	body{
		font-size: 12px;
		font-family: "微软雅黑";
	}
	body,form,input,select,textarea{
		margin: 0;
		padding: 0;
		list-style: none;
		border: none;
		background-color: transparent;
	}
	#list{
		width: 743px;
		margin: 50px auto;
	}
	.content{
		height: 418px;
		padding-top: 35px;
		background: url("images-第6章素材/images/bg2.jpg") no-repeat;
		
	}
	.title{
		width: 739px;
		height: 30px;
		border-bottom: 2px dotted #666;
		border-top:2px dotted #83775e;
		text-align: center;
		font-size: 18px;
	}
	.txt{
		width: 739px;
		height: 300px;
		border-top: 2px dotted #83775e;
		margin-top: 10px;
		font-size: 24px;
	}
	.choose{
		height: 30px;
		padding: 12px 0 0 5px;
		background-color: #999;
		font-weight: bold;
	}
	select{
		width: 80px;
		border:1px solid #666;
		background-color: #F5F5F5;
	}
	.choose1{
		width: 100px;
		margin-right: 20px;
	}
	.btn{
		margin-top: 10px;
	}
	.btn1,.btn2,.btn3{
		width: 100px;
		height: 24px;
		background-color: #eee;
		border:1px solid #ccc;
	}
	.btn1{
		background-color: #999;
	}
	.btn3{
		margin-left: 425px;
	}
</style>
</head>

<body>
<form action="#" method="post" id="list">
	<div class="content">
		<input class="title" type="text" value="请输入日志标题"/>
		<texterea class="txt" cols="30" rows="10"></texterea>
	</div>
	<div class="choose">
	<span>分类：</span>
	<select class="choose1">
		<option>文章转载</option>
		<option selected="selected">个人日志</option>
		<option>游戏人生</option>
	</select>
	<span>权限：</span>
	<select >
		<option>公开</option>
	    <option>进好友可见</option>
		<option>进个人可见</option>
	</select>
	</div>
	<div class="btn">
		<input class="btn1" type="submit" value="发表"/>
		<input class="btn2" type="reset" value="取消"/>
		<input class="btn3" type="button" value="保存草稿"/>
	</div>
</form>
</body>
</html>