<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/index.css"> <title>首页登陆-常用选择器-客服-登陆窗口设置</title> </head> <body> <div class="header_top"> <!--顶部--> <div class="header_top_left"> <!--顶部左边--> <a style="color: blue;" class="header_top_left_a" href="/">首页</a> <a class="header_top_left_a" href="/">HTML</a> <a class="header_top_left_a" href="/">CSS</a> <a class="header_top_left_a" href="/">JS</a> <a class="header_top_left_a" href="/">PHP</a> <a class="header_top_left_a" href="/">MYSQL</a> <a class="header_top_left_a" href="/">ThinkPHP</a> </div> <div class="header_top_right"> <img style="vertical-align: middle;" src="images/touxiang.png " alt=""> <!--没有设置ICO文件,以图片的方式设置的头像--><a id="login_a" href="login.php">登陆</a> </div> </div> <div class="banner_all"> <div class="login_windows"> <form action="login.php"> <label for="username">姓名:</label><input class="login_input" type="username" name="username"> </br> <label for="password">密码:</label><input class="login_input" type="password" name="password"> </br> <button type="submit" class="login_button">确认</button> <button type="reset" class="login_button">重置</button> </form> </div> </div> <div class="ad"> <img src="images/timg.jpg" width="200" height="160" alt="客服" title="点我咨询!"> </div> </body> </html>
====================css 文件==============
*{
margin: 0px; /*外部清除一下让界面顶部左边为0显示!*/
}
.header_top{ /*设置顶端背景颜色*/
height: 70px;
background-color: lightgray;
}
a {
text-decoration: none; /*去处超级链接的下划线*/
}
a:hover{
background-color: red; /*鼠标移动链接显示底色*/
}
.header_top_left{ /*顶部左边*/
height: 30px;
width: 85%;
float: left; /*让DIV 位于header_top左边*/
margin:20px 0; /*链接居中在左侧框内*/
}
.header_top_right{
height: 40px;
width: 15%;
float: right; /*让DIV 位于header_top右边*/
margin:20px 0; /*链接居中在左侧框内*/
}
.header_top_left_a{
background-color: yellow;
width: 12%;
height: 30px;
display: inline-block; /*行元素转快元素在这里转换.*/
text-align: center; /*文字左右居中*/
font-size: 15px; /*字体大小*/
color: black; /*控制超级链接的颜色*/
vertical-align:middle;
}
#login_a{
color: #000;
}
.banner_all{
border: 5px solid lightgray;
height:500px;
margin: 10px 10px;
position: relative; /*定一个定位父级,使用相对定位兼容性好*/
}
.ad{
position: fixed; /*客服使用固定定位直接定位到父元素body中*/
height: 160px;
width: 200px;
top: 50%;
right: 0;
margin-top: -80px; /*调整位置*/
}
.login_windows
{
height: 490px;
width: 400px;
margin:5px;
float: right;
position:absolute;left:1500px;top:0; /*使用绝对定位定位登陆窗口位置*/
}
.login_input {
font-size: 30px;
width: 250px;
height: 50px;
margin: 10px;
}
.login_button{
width:150px;
height: 50px;
color: red;
margin: 10px
}如果有那里写的不对的地方请老师指点!辛苦了~!
