cloud web 网站建设/旅游搜索量环比增188%

水平居中

 <div class="wrape"><div class="content"></div></div>.wrape{height: 30px;background: #060970;}.content{height: 30px;width: 800px;margin: 0 auto;background: #123;}

网络差加载不出图片时,仍能展示基本页面

 <a href="taobao.com">淘宝网</a>1.隐藏文字a{display: inline-block;text-decoration: none;height: 300px;width: 500px;background-image: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2121206715,2955288754&fm=26&gp=0.jpg");/*将文字挤到图片外面,并将文字隐藏*/text-indent: 500px;white-space: nowrap;/*防止文本换行*/overflow: hidden;}2.利用paddinga{display: inline-block;text-decoration: none;/*将图片高度设为0,padding的高度设置为图片高度*/height: 0px;overflow:hidden;padding-top: 300px;width: 500px;background-image: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2121206715,2955288754&fm=26&gp=0.jpg");}

单行文本垂直,水平居中

 {height : 200px;text-indent : 2em;//缩进2个文本单位text-align : center;//水平居中line-height : 200px//行高等于高度就可垂直居中}

画七巧板

        <div style = "height:0px;width:0px;border: 50px solid black;border-top-color:red ;border-left-color:yellow;border-right-color: green;"></div>

画三角形

      <div style = "height:0px;width:0px;border: 50px solid transparent;border-top-color:red ;border-left-color:transparent;border-right-color:transparent;"></div>  

单行文本过长显示…

  .singleCute{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

导航栏

 *{margin: 0px;padding: 0px;font-family: arial;}a{text-decoration-line: none;}.nav{height: 30px;list-style: none;}.nav .nav-item{float: left;margin: 0px 10px;height: 30px;background-color: #fff;}.nav .nav-item a{color: #f40;font-weight: bold;display: inline-block;border-radius: 15px;height: 30px;line-height: 30px;padding: 0 10px;}.nav .nav-item a:hover{background-color: #f40;color: #fff;}.nav::after{display: inline-block;content:"";clear: both;}<ul class="nav"><li class="nav-item"><a href="#">网站一</a></li><li class="nav-item"><a href="#">网站二网站二</a></li><li class="nav-item"><a href="#">网站</a></li></ul>

画五环

  .plant{position: absolute;height: 200px;width: 450px;top: 50%;left: 50%;margin-left: -210px;margin-top: -100px;}.circle1,.circle2,.circle3,.circle4,.circle5{width : 100px;height : 100px;border : 10px solid black;border-radius : 50%; position: absolute;}.circle2{left:140px;border-color : #060970;}.circle3{left:280px;border-color : #f3161c;}.circle4{left: 70px;top: 50px;border-color:#fbf33d;}.circle5{left: 210px;top: 50px;border-color : #23c031;}<div class = "plant"><div class="circle1" ></div><div class="circle2" ></div><div class="circle3" ></div><div class="circle4" ></div><div class="circle5" ></div>
</div>