CSS基础-盒子

来源：互联网发布：黑马java培训课程目录编辑：程序博客网时间：2024/05/17 09:32

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

阅读全文

0 0