HTML学习——简单的图书管理界面
2021-10-08 本文已影响0人
夏沫雪殇
HTML简单的图书管理界面
-主要实现上下左右的布局
-label标签的居中显示
-超链接hover的css实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bookAdd</title>
<style>
/* 标题布局 */
#top{
background-color:rgb(231, 240, 250);
color:black;
text-align:center;
height:20%;
border:1px solid gray;
}
/* 导航栏布局 */
#left{
width:19.5%;
height:1000px;
background-color:rgb(240, 242, 251);
float:left;
border-left:1px solid gray;
border-right:1px solid gray;
}
a{
text-decoration:none;
}
/* 鼠标移上超链接时，显示下划线且字体变为蓝色 */
a:hover{
text-decoration:underline;
color:blue;
}
/* 内容布局 */
#right{
height:1000px;
width:80%;
float:left;
background-color:rgb(240, 242, 251);
border-right:1px solid gray;
}
/* ‘基本信息’样式设置 */
#baiscinfo{
font-size:20px;
font-weight:bold;
margin-left:10px;
}
/* 设置label标签的宽度，以实现表单的对齐显示 */
label{
diaplay:block;
float:left;
width:100px;
height:20px;
margin-left:10px;
}
#contain{
width:100px;
height:140px;
line-height:140px; /* 设置行间距 */
vertical-align:middle; /* 实现文本的上下居中，注意在设置时一定要保持line-height与height相等 */
}
</style>
</head>
<body>
<div id="top">
<h1>网上书店后台管理系统</h1>
</div>
<div id="left">
<ul>
<li>
<a href="">书籍信息管理</a>
</li>
<li>
<a href="">其他模块管理</a>
</li>
<li>
<a href="">书籍信息管理</a>
</li>
<li>
<a href="">书籍信息管理</a>
</li>
<li>
<a href="">书籍信息管理</a>
</li>
</ul>
</div>
<div id="right">
<p id="baiscinfo">基本信息</p>
<form action="" >
<label>书号：</label>
<input type="text" name="booknumber" value=""><br>
<label>书名：</label>
<input type="text" name="bookname" value=""><br>
<label>作者：</label>
<input type="text" name="author" value=""><br>
<label>出版社：</label>
<select name="出版社">
<option value="清华大学出版社">清华大学出版社</option>
<option value="上海外语出版社">上海外语出版社</option>
<option value="同济大学出版社">同济大学出版社</option>
<option value="电子工业出版社">电子工业出版社</option>
</select>
<br>
<label>出版日期：</label>
<input type="text" name="pulishdate" value=""><br>
<label>价格：</label>
<input type="text" name="price" value=""><br>
<label>库存位置：</label>
<input type="text" name="saveposition" value=""><br>
<label>类别：</label>
<input type="radio" name="type" value="普通">普通
<input type="radio" name="type" value="新书">新书
<input type="radio" name="type" value="精品">精品
<br>
<label id="contain">内容介绍：</label>
<textarea rows="10" cols="50"></textarea>
</form>
</div>
</body>
</html>
效果图：
效果图
