解决网页设计中网页元素错乱的问题
以下是登录页面的HTML代码
在网页设计中在body标签加入clear：both属性清除浮动以免导致页面元素错乱
如果在header标签加入background-color或者其它属性有可能会发生浏览器不兼容问题以导致无法进行正常显示
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<title>Code熊餐厅</title>
<link rel="stylesheet" href="css/login.css" />
</head>
<body>
<!--如果在header标签加入background-color或者其它属性有可能会发生浏览器不兼容问题以导致无法进行正常显示-->
<header >
<div style="background-color: darkgoldenrod;">
<div class="logo">
<img src="img/headr_logo.png" />
</div>
<div class="title_text">
Code熊餐厅
</div>
</div>
</header>
<div>
<div class="body_left">
<img src="img/login_left.png" />
</div>
<div class="body_right">
<h1>Code熊登录系统</h1>
<br />
<div id="bd">
<form>
用户名:<input type="text" size="16" /><br/>
<br /> 密 码:
<input type="text" size="16" />
<br />
<br />
<button>注册</button>
<button>登录</button>
</form>
</div>
</div>
</div>
</body>
</html>
Css样式
body {
margin: 0;
padding: 0;
height: 768px;
width: 1349px;
//清除浮动
clear: both;
}
.logo {
margin: 10px;
height: 150px;
}
.title_text {
font-family: "楷体";
font-size: 48px;
margin-left: 600px;
margin-top: -110px;
float: left;
}
.logo img {
margin-left: 450px;
width: 140px;
height: 140px;
}
.body_left {
background-image: url(../img/body_left_bg.jpg);
}
.body_left img {
margin: 10px;
}
.body_right {
margin-right: 100px;
margin-top: -450px;
float: right;
}
#bd {
margin-left: 20px;
}
效果图
