网页布局与样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/chenjianandiyi/article/details/50836515

@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;
}