看程序学css-3

于 2019-06-08 18:38:54 发布
阅读量96 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tujiahao1/article/details/91346717
版权 
1、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  .p1{
    color:red;
  }

  .span1{
    color:blue;
  }
</style>

<p class="p1">红色</p>

<span class="span1">蓝色</span>

<link rel="stylesheet" type="text/css" href="http://how2j.cn/study/style.css" />

<p class="p1">红色</p>

<span class="span1">蓝色</span>

<link rel="stylesheet" type="text/css" href="http://how2j.cn/study/style.css" />

<style>
  .p1{
    color:green;
  }
</style>

<p class="p1">p1 颜色是绿色，优先使用靠的最后出现的</p>

<style>
  .p1{
    color:green;
  }
</style>

<p class="p1" style="color:red">p1 颜色是红色，优先使用style属性</p>

<style>
  .p1{
    color:green !important;
  }

</style>

<p class="p1" style="color:red">p1 颜色是绿色，优先使用!important样式</p>
</body>
</html>
2、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  p.abs{
    position: absolute;
    left: 150px;
    top: 50px;
  }

</style>

<p >正常文字1</p>
<p >正常文字2</p>
<p class="abs" >绝对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>

<style>
  p.abs{
    position: absolute;
    left: 100px;
    top: 50px;
  }
  .absdiv{
    position: absolute;
    left: 150px;
    top: 50px;
    width:215px;
    border: 1px solid blue;
  }
</style>

<div>
  <p >正常文字a</p>
  <p >正常文字b</p>
  <p >正常文字c</p>
  <p >正常文字d</p>
  <p >正常文字e</p>
  <p >正常文字f</p>
  <p >正常文字g</p>
</div>

<div class="absdiv">
  这是一个定位了的div
  <p class="abs" >绝对定位的文字</p>
</div>

<style>
  p.abs{
    position: absolute;
    left: 100px;
    top: 50px;
  }

</style>

<div>
  <p >正常文字a</p>
  <p >正常文字b</p>
  <p >正常文字c</p>
  <p >正常文字d</p>
  <p >正常文字e</p>
  <p >正常文字f</p>
  <p >正常文字g</p>
</div>

<div>
  这个div没有定位
  <p class="abs" >绝对定位的文字</p>
</div>

<style>
  img#i1{
    position: absolute;
    left: 60px;
    top: 20px;
    z-index:1;
  }

  img#i2{
    position: absolute;
    left: 60px;
    top: 120px;
    z-index:-1;
  }

</style>

<div>
  <p >正常文字a</p>
  <p >正常文字b</p>
  <p >正常文字c</p>
  <p >正常文字d</p>
  <p >正常文字e</p>
  <p >正常文字f</p>
  <p >正常文字g</p>
</div>

<img id="i1" src="http://how2j.cn/example.gif" />
<img id="i2" src="http://how2j.cn/example.gif" />

</body>
</html>
3、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  p.r{
    position: relative;
    left: 150px;
    top: 50px;
  }

</style>

<p >正常文字1</p>
<p >正常文字2</p>
<p class="r" >相对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>


</body>
</html>
4、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  .f{
    float:right;
  }

</style>

<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮动的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>

<style>
  .f{
    float:left;
  }

</style>

<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮动的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>

<style>
  .f{
    float:left;
  }

  div{
    width:320px;
  }
</style>

<div >
  <img src="http://how2j.cn/example.gif"/>

  <p>  当图片不浮动时，文字就会换行出现在下面
    当图片不浮动时，文字就会换行出现在下面
    当图片不浮动时，文字就会换行出现在下面
    当图片不浮动时，文字就会换行出现在下面
    当图片不浮动时，文字就会换行出现在下面
    当图片不浮动时，文字就会换行出现在下面
  </p>
</div>

<div >
  <img  class="f" src="http://how2j.cn/example.gif"/>

  <p>  当图片浮动时，文字围绕着图片
    当图片浮动时，文字围绕着图片
    当图片浮动时，文字围绕着图片
    当图片浮动时，文字围绕着图片
    当图片浮动时，文字围绕着图片
  </p>
</div>

<style>
  .f{
    float:left;
  }

  div{
    width:320px;
  }

  .clearp{
    clear:left;
  }

</style>

<div >
  <img  class="f" src="http://how2j.cn/example.gif"/>

  <p>  当图片浮动时，文字围绕着图片
    当图片浮动时，文字围绕着图片
    当图片浮动时，文字围绕着图片
    当图片浮动时，文字围绕着图片
    当图片浮动时，文字围绕着图片
  </p>
</div>

<div >
  <img  class="f" src="http://how2j.cn/example.gif"/>

  <p class="clearp">  当图片浮动时，文字却不想围绕图片
    当图片浮动时，文字却不想围绕图片
    当图片浮动时，文字却不想围绕图片
    当图片浮动时，文字却不想围绕图片

  </p>
</div>

<style>
  div#floatingDiv{
    width:200px;
  }
  div#floatingDiv div{
    float:left;
  }
</style>
默认的div排列是会换行的

<div>
  菜单1
</div>
<div>
  菜单2
</div>
<div>
  菜单3
</div>

如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方

如果超出了父容器，还会有自动换行的效果

<div id="floatingDiv">
  <div>
    菜单1
  </div>
  <div>
    菜单2
  </div>
  <div>
    菜单3
  </div>
  <div>
    菜单4
  </div>
  <div>
    菜单5
  </div>
  <div>
    菜单6
  </div>
</div>
</body>
</html>
5、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  div.d{
    display:none;
  }

</style>

<div>可见的div1</div>
<div class="d">隐藏的div2,使用display:none隐藏</div>
<div>可见的div3</div>

<style>
  div,span{
    border: 1px solid lightgray;
    margin:10px;
    width:200px;
    height:100px;
  }

  .d{
    display:block;
  }
</style>

<div>普通的div块</div>
<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>
<span class="d">这是span,被改造成了块级元素</span>

<style>
  div,span{
    border: 1px solid lightgray;
    margin:10px;
    width:200px;
    height:100px;
  }

  .s{
    display:inline;
  }
</style>

<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>

<div class="s">这是div，被改造成了内联元素</div>

<style>
  span{
    display:inline-block;
    border: 1px solid lightgray;
    margin:10px;
    width:100px;
  }
</style>
像这样 ，每个都能设置宽度 ，同时还能在同一行。
<br>

<span>盖伦</span>
<span>蒙多医生</span>
<span>奈德丽</span>
<span>蒸汽机器人</span>

<style>
  div{
    border:1px solid lightgray;
    margin:10px;
  }
</style>
<div align="center">
  通过设置属性align="center" 居中的内容
</div>

<div  style="text-align:center">
  通过样式style="text-align:center" 居中的内容
</div>

<style>
  div{
    border: solid 1px lightgray;
    margin: 10px;
  }
  span{
    border: solid 1px lightskyblue;
  }
</style>
<div> 默认情况下div会占用100%的宽度,所以无法观察元素是否居中</div>

<div style="width:300px;margin:0 auto">
  设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中</div>

<span style="width:300px;margin:0 auto">
  span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中</span>

<div style="text-align:center">
  <span>span的居中可以通过放置在div中，然后让div text-align实现居中</span>
</div>

<style>
  .left{
    width:200px;
    float:left;
    background-color:pink
  }
  .right{
    overflow:hidden;
    background-color:lightskyblue;
  }
</style>

<div class="left">左边固定宽度</div>

<div class="right">右边自动填满</div>

<style>
  #d {
    line-height: 100px;
  }
  div{
    border:solid 1px lightskyblue;
  }
</style>

<div id="d">line-height 适合单独一行垂直居中</div>

<style>
  #d {
    padding: 30 0;
  }
  div{
    border:solid 1px lightskyblue;
  }
</style>

<div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容  </div>

<style>
  #d {
    display: table-cell;
    vertical-align: middle;
    height:200px;
  }

  div{
    border:solid 1px lightskyblue;
  }
</style>

<div id="d">
  <img src="http://how2j.cn/example.gif">
</div>


</body>
</html>
6、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  .left{
    width:200px;
    float:left;
    background-color:pink
  }
  .right{
    width:200px;
    float:right;
    background-color:pink
  }
  .center {margin:0 200px;   background-color:lightblue}
</style>

<div class="left">左边固定宽度</div>
<div class="right">左边固定宽度</div>
<div class="center">中间自适应</div>

<style>
  #div1
  {
    position: relative;
    height: 300px;
    width: 90%;
    background-color: skyblue;
  }
  #div2
  {
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
    background-color: lightgreen;
  }
</style>

<div id="div1">
  <div id="div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面
  </div>
</div>

<style>
  span{
    border-bottom:2px solid lightgray;
  }
</style>

<div class="continue">
  <span>连续的span</span><span>连续的span</span><span>连续的span</span><span>连续的span</span>
</div>
<div class="nocontinue">
  <span>有换行的span</span>
  <span>有换行的span</span>
  <span>有换行的span</span>
</div>

<style>
  div.nocontinue span{
    border-bottom:2px solid lightgray;
    float:left;
  }
</style>

<div class="nocontinue">
  <span>有换行的span</span>
  <span>有换行的span</span>
  <span>有换行的span</span>
</div>

<div style="clear:both"></div>

<div>后续的内容</div>
</body>
</html>
7、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="http://how2j.cn/study/wangwang.gif"><br/>

<style>
  div{
    width:25;
    height:25;
    background:transparent url(http://how2j.cn/study/wangwang.gif) no-repeat scroll -83px -0px ;
  }

</style>

<div></div><br/>

<style>
  img{
    position:absolute;
    left:-83px;
    clip:rect(0px 108px 25px 83px);
  }
</style>

<img src="http://how2j.cn/study/wangwang.gif"><br/>
</body>
</html>
涂家豪
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值