<style type="text/css">
#mydiv1 {
width:1000px;
height:1000px
/* 背景颜色 */
background-color: #FF0000;
background-color: aqua;
/* 背景图片 */
background-image: url(../img/bd.png);
/* 是否重复 */
background-repeat: no-repeat;
}
#mydiv{
/* 字体颜色· */
color: #00FFFF;
/* 对齐方式 */
text-align: center;
/* 文本修饰 下滑线---中划线---上划线 */
text-decoration: line-through overline underline;
/* 设置文本首行缩进 */
text-indent: 2em;
}
a{
/* 去除----超链接-----的下划线 */
text-decoration: none;
}
#p1{
/* 对齐方式----left center justify两端对齐 */
text-align: justify;
}
h2{
/* display属性 none隐藏元素 block显示元素 */
display:block;
}
/* 浮动 */
#d1{
width: 1000px;
height: 100px;
background-color: #00FFFF;
/* 浮动 */
float: left;
}
#d2{
width: 100px;
height: 100px;
background-color: bisque;
float: left;
}
#d3{
width: 100px;
height: 100px;
background-color: bisque;
/* 设置边框 */
border: #FFE4C4 0.3125rem outset;
/* 设置内边距 */
padding: 0.9375rem;
padding-left: 1.25rem;
padding: 0.625rem 1.25rem;
/* 设置外边距 */
margin-top: 6.25rem;
}
<body>
<!--
背景
背景颜色
背景图片
是否重复
-->
<!-- 文本 -->
<div id="mydiv">
Hello
</div>
<!-- 取出文本属性 -->
<a href="百度">百度</a>
<hr >
<!-- 对齐方式 -->
<p id="p1">*****************************
***************************************
****************************
</p>
<hr >
<!-- display隐藏功能 -->
<h2 >Hello</h2>
<div id="d1">
</div>
<div id="d2">
</div>
<br>
<div id="d3"></div>
</body>
<!--
盒子模型
padding内边框
border边框
margin外边框
border边框
设置边框的颜色、样式、宽度
例:border:red solid_1px
单独设置边框的宽度、颜色、样式
border-width
border-style
border-color
padding 内边距
设置元素所有内边距的宽度,或者设置各边上内边距的宽度
单独设置各边的内边距:padding-top,padding-left,padding-bottom
padding-right
默认按照上右下左的顺序设定
设置一个值:上右下左都一致
margin外边距
-->