CSS基础-盒子

54 阅读 0 评论 36 点赞

我是靠谱客的博主老实钥匙，最近开发中收集的这篇文章主要介绍CSS基础-盒子，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

index01.html

<!DOCTYPE html>
<html>
<head lang="en">

<meta charset="UTF-8">

<title>CSS基础</title>

<link href="mystyle.css" type="text/css" rel="stylesheet">
</head>
<body>
<h3>派生选择器：（li标签中strong样式需要加一个效果，而p标签中strong样式不需要）</h3>

<p><strong>p标签</strong></p>

<ul>

<li><strong>li标签</strong></li>

</ul>
<br/>
<h3>id选择器</h3>

<p id="pid">this is a id</p>

<div id="divid">

This div <p>This is a div<p/> <!-- 派生选择器与id选择器同时使用-->

</div>
<br/>
<h3>类选择器</h3>
<p class="pclass">This is a class effect
</p>
<div class="divclass">

Hello DIV<p>P标签</p>
<!-- 派生选择器与class选择器同时使用-->
</div>
<br/>
<h2>CSS盒子模型</h2>
<h3>css盒子内边距</h3>

<table border="1">

<tr>

<td >内边距未设置</td>

</tr>

</table>
<br/>
<table border="1">

<tr>

<td id="tdid">设置内边距</td>

</tr>
</table>
<br/>
<h3>css盒子边框</h3>
<p id="bkid">CSS边框样式</p>
<p id="radiusid">圆角边框</p>
<div class="cssid">CSS阴影效果</div>
<br/>
<h3>CSS外边距</h3>
<div class="mg">外边距</div>
<h4>盒子模型实例</h4>
<div class="container">

<div class="bd">

<div class="pd">

<div class="content"> 这是具体内容区域</div>

</div>

</div>
</div>
<img src="1.png">
<h3>盒子模型应用</h3>
<div class="top1">

<div class="top1_container" style="text-align: center">中间</div>
</div>
<div class="body1">

<div class="body1_img" style="text-align: center">内容</div>

<div class="body1_content">

<div class="body1_inform"></div>

</div>
</div>
<div class="footing" >

<div class="footing_content"></div>

<div class="footing_menu"></div>
</div>
</body>
</html>

mystyle.css

/*派生选择器*/
li strong{

color: blue;
}
strong{

color: darkred;
}
/*id选择器*/

#pid{

color:firebrick;
}
#divid p{

color: #98bf21;
}

/*class选择器*/
.pclass{

color: chartreuse;
}
.divclass p{

color:sandybrown;

font-size: 20px;
}
/*css盒子模型——内边距*/
#tdid{

padding-left: 100px;

padding-right: 50px;

padding-top: 30px;

padding-bottom: 70px;
}
/*CSS盒子模型——边框*/
#bkid{

border-style: double;

border-top-style: dashed;

border-left-style: groove;

border-bottom-width: 20px;

border-color: purple;
}
/*圆角边框*/
#radiusid{

border-radius: 10px;

width: 200px;

background-color: deepskyblue;

text-align: center;
border: 2px solid blue;
}
/*css阴影效果*/
.cssid {

background-color: #A7C942;

width: 100px;

height: 100px;

text-align: center;

box-shadow: 10px 10px 1px #ffccff ;
}
 /*css外边距*/
 .mg{

background-color: aquamarine;

width: 100px;

height:100px;

margin-top: 20px;
 }
 /*盒子模型实例*/
body{

margin: 0; /* 此处是将盒子距离页面最左最右距离变为0*/
}
.container{

margin: 100px;
}
.bd{

border-style: double;
}
.pd{

padding: 100px;
}
.content{

background-color: maroon;
}
/*盒子模型应用*/
.top1{

width: 100%;

height: 50px;

background-color: aqua;
}
.top1_container{

width: 75%;

height: 50px;

margin: 0px auto;

background-color: maroon;

line-height: 50px;
}
.body1{

margin: 20px auto;

width: 75%;

height: 1500px;

background-color: #ffccff;
}
.body1_img{

width: 100%;

height: 400px;

background-color: burlywood;

line-height: 400px;
}
.body1_content{

width: 100%;

height: 1100px;

background-color: crimson;
 }
.body1_inform{

width: 100%;

height: 50px;

background-color: darkviolet;
}
.footing{

width: 75%;

height: 440px;

background-color: hotpink;

margin: 0px auto;
}
.footing_content{

width: 100%;

height: 370px;

background-color: deeppink;
}
.footing_menu{

width: 100%;

height: 70px;

background-color: black;
}