css基础
<!DOCTYPE html>
<html style="border: 0px;">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d2{
padding: 20px;
/*50代表上下 60 左右*/
margin: 50px 60px;
}
.qq{
width: 100px;
height: 100px;
border: 1px solid red;
/*border——radius 倒角*/
/*border-radius: 20px 5px ;*/
}
*{
border: 1px solid red;
}
/*外边距*/
.qqq{
width: 100px;
height: 50px;
/*margin-left: 10px ;*/
/*margin: 0 auto; 水平居中 设置完宽高后定义属性为 0 auto*/
}
/*内边距*/
.www{
/*设置过padding边框会增大*/
width: 200px;
height: 100px;
padding-left: 10px;
}
#d3,#d4,#d5{
width: 200px;
height: 200px;
}
#txtPwd{
height: 22px;
background-image: url(img/pwd.png);
background-repeat: no-repeat;
/*使文字在图片背后展示，可以选择增加内边距*/
padding-left:25px ;
}
/*背景定位*/
body{
background-image: url(img/jd_show.png);
margin: 0;
background-repeat: no-repeat;
/*background-attachment：fixed 背景图像的固定*/
background-attachment: fixed;
/*图片定位*/
background-position: 10px 200px;
}
#d9{
/*定位某一图片*/
background-image:url(img/iconlist_1.png) ;
width: 34px;
height: 20px;
background-repeat: no-repeat;
background-position: -243px -112px;
margin: auto;
}
/*设置文字样式*/
#d10{
/*文字显示样式*/
font-family: "微软雅黑",arial;
/*文字加粗 normal为默认，不加粗*/
font-weight: 900;
/*斜体*/
font-style: italic;
/*字体形状 小型大写字母*/
font-variant: small-caps;
}
</style>
</head>
<body style="border: 0px;margin: 0px;">
<div id="d8">
</div>
<div class="qq"></div>
<!--html中所有的元素都为矩形-->
<h1 class="qqq">梦想</h1>
<p class="www">想法</p>
<div class="eee">这是一个div</div>
<img class="rrr" src="img/p_small_001.jpg"/>
<div class="qq"></div>
<div class="qq" style="padding-left:50px;border: 1px solid blue;width: 150px;height: 150px;">
<div class="qq" style="border: 1px solid green;"></div>
</div>
<!--内边距与外边距同时使用-->
<h1>k</h1>
<div id="d1">1</div>
<div id="d2">hello i'm d2</div>
<!--垂直外边距合并 -->
<div id="d3" style="border: 1px solid blue; margin-bottom:50px ;">
<div id="d4" style="border: 1px solid green;width: 150px;height: 150px;margin-top: 30px;"></div>
</div>
<div id="d5" style="margin-top: 100px;">d2</div>
<!--图片的引用-->
<input type="password" id="txtPwd" />
<div id="d6"></div>
<div id="d7"></div>
<!--加载照片-->
<div id="d9"></div>
<!--文字样式-->
<div id="d10">
GGGggg这是一段文字
</div>
</body>
</html>
