您的位置:首页 > Web前端 > CSS

css常用样式

2016-03-10 17:55 549 查看
@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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: