@charset “utf-8”;
body的设置
body {
margin: 0;
padding: 0;
background-color: #EBEBEB;
}
ul li的设置
ul , li {
list-style-type: none;
margin:0;
padding :0;
}
padding不让div挤出
padding-left: 15px;
padding-right: 15px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
导航头
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<link rel="stylesheet" type="text/css" href="./css/friends.css">
<title>编辑详情</title>
</head>
<body>
<header class="top_msg">
<div class="black"><</div>
<div class="app_title">编辑详情</div>
</header>
</body>
</html>
@charset "utf-8";
/*编辑详情css*/
body {
margin: 0;
padding: 0;
background-color: #EBEBEB;
font-family: "黑体";
padding-bottom: 40px;
}
.top_msg {
display: block;
width: 100%;
height: 46px;
background-color: #1183F0;
}
.black {
position: absolute;
font-size: 2em;
height: 46px;
line-height: 46px;
color: #fff;
left: 15px;
}
.app_title {
text-align: center;
color: #fff;
height: 46px;
width: 100%;
line-height: 46px;
font-size: 1.3em;
}
after 做分割线
.bot_info::after {
background-color: #EBEBEB;
bottom: 0;
content: “”;
display: block;
left: 100%;
position: absolute;
top: 0;
width: 2px;
}
.bot_info 设置 postion：relative
