zoukankan      html  css  js  c++  java
  • 第三十七天

      <!DOCTYPE html>

    <html>

    <head>

     <meta charset="UTF-8">

     <title>border</title>  

    <!-- 画梯形 -->  

    <style type="text/css">   

    .bd {     100px;    

      height: 100px;    

    background-color: transparent;   }   .bd {    /*border: 50px solid orange;*/    border-top: 50px solid orange;    border-right: 50px solid cyan;    border-bottom: 50px solid yellow;    border-left: 50px solid blue;    /*border-right: 50px solid transparent;    border-bottom: 50px solid transparent;    border-left: 50px solid transparent;*/   }  </style>  <!-- 画三角形 -->  <style type="text/css">   .bd {     0;    height: 0;   }   .bd {    border-top: 50px solid orange;    border-right: 50px solid cyan;    border-bottom: 50px solid yellow;    border-left: 50px solid blue;   }   /*吃球球的小球*/   /*.bd {    border-radius: 50%;    border-right: 50px solid transparent;   }*/  </style> </head> <body>  <div class="bd"></div> </body> </html> 盒模型overflow <<!DOCTYPE html> <html lang="zh-cn"> <head>  <meta charset="UTF-8">  <title>盒模型overflow</title>  <!-- 显示区域只能由父级大小决定 -->  <style type="text/css">   /*子集区域大于父级*/   .sup {     100px;    height: 100px;    /*默认值*/    /*border: 3px none black;*/    /*清除边框*/    /*border: 0;*/    /*border: none;*/    /*最简单的设置*/    border: solid;   }   .sub {     200px;    height: 200px;    background-color: red;

      }   对父级进行overf设置   .sup {    以滚动的方式允许子级所有的内容显示    overflow: auto;    overflow: scroll;    只允许子级在父级所在区域的部分显示,超出的部分隐藏    overflow: hidden;   }  </style> </head> <body>   <!-- displ:block大环境下 -->   <div class="sup">    <div class="sub"></div>   </div>   <div class="sup">    alk fja klj ffj af.....   </div> </body> </html>

    复习1 <<!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>复习</title>  <!-- head中css样式控制body中显示的标签 -->  <style type="text/css">   /*通过选择器控制对应标签*/   /*选择器的各种分类*/   /*选择器的组合与优先级*/   .d1 {     200px;    height: 200px;    background-color: red;   }   /*文本*/   .d1 {    font: 700 50px/200px "STsong","微软雅黑";    text-align: center;    color: #d0f;    letter-spacing: 10px;      }   /*边框*/   .d1 {    /*边框设置大小颜色*/    border: 7px solid orange;       }   /*边界元角*/   .d1 {    /*"/"符号是横向和纵向分开*/    border-radius: 10px 20px 30px/ 20px 10px;   }   /*背景*/   .d1 {    /*图片所放的文件夹加图片名字格式  平铺 居中 颜色*  /    background: url('img/alert.png') no-repeat center red;   }  </style> </head> <body>  <!-- 常用标签 -->  <!-- 功能性标签 -->  <!-- 标签架构 -->

     <div class="d1">文本</div> </body> </html>

    display

    <<!DOCTYPE html> <html lang="zh-cn"> <head>  <meta charset="UTF-8">  <title>盒模型display</title>  <!-- 默认值 -->  <style type="text/css">   /*块:1.独行显示 2、支持宽高,宽默认适应父级,高默认由子级或内容撑开 3、设置宽高后,一定采用设置的宽高*/   /*内联:1.同行显示 2、不支持宽高*/   /*内联块:1、同行显示,之间有间距 2、支持宽高,宽高由内容撑开 3、设置宽高后,一定采用设置的宽高但只设置其中一个,另一个会根据内容等比缩放*/   /*嵌套规则*/   /*块可以嵌套所有类型(p一般只允许嵌套内联)*/   /*内联一般只嵌套内联*/   /*内联块一般只作为最内层级*/   div {    /*块*/    display: block;    /*auto自适应父级可用content的宽度*/     auto;    /*默认0*/    height: 0px;   }    span {    /*内联*/    display: inline;    /*不支持宽高*/   }   img {    /*内联块*/    display: inline-block;    /*宽和高都可以是auto*/     auto;    height: auto;   }  </style>

     <style type="text/css">   /*验证宽高限制*/   .sup {     100px;    height: 100px;    background-color: orange;   }   .sub {     200px;    height: 200px;    background-color: blue;   }   .s1, .s2 {     200px;    height: 200px;    background-color: brown;   }   img {     300px;    height: 300px;       }  </style> </head> <body>  <div></div>  <span></span>  <!-- 路径前面加个. -->  <img src="./img/icon.jpg" alt="">  <img src="./img/icon.jpg" alt="">  <div class="sup">   <div class="sub"></div>  </div>  <div class="s1">123</div>  <div class="s2">456</div>

    </body> </html>

    margin

    <<!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>margin</title>  <style type="text/css">   前提:sup显示区域宽全屏,高200px,sub显示区域宽高各100px   需求1、sup左上右顶格显示   html, body {    body 默认具有margin:8px    margin: 0;   }   .sup {     auto;    height: 200px;    background-color: red;   }   .sub {     100px;    height: 100px;    background-color: orange;   }   需求2:sub在sup的水平中央显示   .sub {    上下0,左右auto    zuto,左右auto,自适应(平分)剩余可布局空间    margin: 0 auto;   }   需求3:sub在sup的垂直中央显示   垂直会遇到margin父子坑   .sup {    height: 100px;    padding: 50px 0;   }   .sup {    height: 100px;    border-top: 50px solid red;    border-bottom: 50px solid red;   }   需求4:sub在sup的水平居右显示   .sub {    margin-left: auto;    可以通过right调位置    margin-right: 0;   }     </style> </head> <body>  <div class="sup">   <div class="sub"></div>  </div> </body> </html>

    盒模型之样式支持 <!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <title>样式支持</title>  <style type="text/css">   a {    color: #333;    text-decoration: none;    display: block;   }  </style>  <style type="text/css">   .sup {     500px;    height: 500px;    background-color: red;   }   水平居中   display对margin的支持   block支持所有margin布局   inline与inline-block只支持margin上下布局   .sub {    display: block;    margin: 0 auto;   }   垂直居中   .sup {    去除高度设置    padding: 50px 0;   }  </style>  水平垂直居中这种方法比较实用  <style type="text/css">   .box {     500px;    height: 500px;    background: url(图片位置) no-repeat center orange;   }  </style> </head> <body>  认识a标签的操作  需求:具有页面转跳功能的图片  <a href="">   <img src="图片位置" alt="">  </a>  图片在sup水平垂直中央显示  part1  <div class="sup">   <img class="sub" src="" alt="">  </div>  part2  <div class="box"></div> </body> </html>

    层级结构 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>层级结构</title>  <style type="text/css">   .d5 {     200px;    height: 100px;    background: red;   }   .d2, .d3, .d4 {     80px;    height: 40px;    background: orange   }   /*.d4 {    margin-left: 160px;    margin-top: -80px;   }*/   .d3 {    margin-left: 80px;    margin-top: -40px;   }   .d4 {    margin-left: 160px;    margin-top: -40px;   }   /*没有层级结构情况下:*/   /*1.盒子布局间相互影响程度很大*/   /*2.要严格遵循从上至下布局顺序进行布局*/   /*问题点:牵一发动全身*/  </style>  <style type="text/css">   .menu {     200px;    height: 100px;    background: red;   }   .html, .css, .js {     80px;    height: 40px;    background: orange   }   .nav {     calc(80px * 3);    height: 40px;   }   .css {    margin-top: -40px;    margin-left: 80px;   }   .js {    margin-top: -40px;    margin-left: 160px;   }   /*menu的布局只与nav有连带关系,与实际显示内容的html,css,js不具有任何连带关系*/  </style> </head> <body>  <!-- 无层次结构 -->  <!-- <div class="d1">w3c</div>  <div class="d2">html</div>  <div class="d3">css</div>  <div class="d4">js</div>  <div class="d5">menu</div> -->    <!-- 有层次结构 -->  <div class="title">w3c</div>  <div class="nav">   <div class="html">html</div>   <div class="css">css</div>   <div class="js">js</div>  </div>  <div class="menu">menu</div> </body> </html>

    隐藏

    <<!DOCTYPE html> <html lang="zh-cn"> <head>  <meta charset="UTF-8">  <title>隐藏</title>  <style type="text/css">   盒子间会相互影响   div {     200px;    height: 200px;   }   .d1 {    background-color: red;    以背景颜色透明度隐藏,显示内容不需要掌握    盒子还在,内容或子级标签均会被显示    background-color: transparent;   }   .d2 {    background-color: orange;    以盒子透明度隐藏:0~1 0:完全透明,1:完全不透明;    盒子真正意义上透明,但盒子区域占位还在    opacity: 0   }   .d3 {    background-color: cyan;    将盒子从文档中移除,盒子的区域占位消失,当盒子重新获得显示方式,该盒子依旧在消失位置显示    display: none;   }   通过悬浮body让d3重新显示   1、明确控制的对象 2、确定对该对象的修饰 2、找出修饰与对象的关系 body:hover 与.d3是父子关系 用空格分开 .d1:hover .d3 兄弟关系用~分开   .di:hover ~ .d3 {

      }  </style> </head> <body>  <div class="d1">123</div>  <div class="d2">456</div>  <div class="d3"></div> </body> </html>

    w3c总结 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>w3c</title>  <link rel="stylesheet" type="text/css" href="css/reset.css">  <link rel="stylesheet" type="text/css" href="css/top.css"> </head> <body>  <div class="wrap">   <div class="top">    <div class="start">     <h1 class="title"></h1>     <div class="search">      <div class="sc_position">       <div class="s_p_border"></div>       <div class="s_p_btn">GO</div>      </div>     </div>    </div>    <div class="nav">     <div class="n_tt1"></div>     <div class="n_tt2"></div>     <div class="n_tt3"></div>     <div class="n_tt4"></div>     <div class="n_tt5"></div>     <div class="n_tt6"></div>     <div class="n_tt7"></div>    </div>   </div>   <div class="main"></div>   <div class="end"></div>  </div> </body> </html>

    reset.css html, body {  margin: 0;  padding: 0; } .wrap {   1200px;  /*高度不设:由内容撑开*/ } h1 {  margin: 0; }

    top.css .top {  /*宽度找父级:wrap*/  /*height: 148px;*/  /*子级都设置高度后,反过来可以省略父级的高度*/

     background: red } .start {  /*宽度找父级:wrap*/  /*height: 100px;*/  /*子级都设置高度后,反过来可以省略父级的高度*/

     /*统一颜色*/  background-color: #fdfcf8; } .title {  /*有明确显示宽度,自己设置*/   500px;  height: 100px;  background: url('../img/w3c/bg.png') no-repeat 0 -150px; } .title:hover {  /*只修改精灵图定位*/  background-position: 0 -250px; } .search {   300px;  /*height: 100px;*/  /*background-color: orange;*/  /*margin-left: auto;  margin-right: 0;  margin-top: -100px;*/  margin: -100px 0 0 auto; } .sc_position {   280px;  height: 40px;  /*background-color: cyan;*/ } /*实现sc_position在search垂直居中*/ .search {  /*宽度不变*/  /*高度为子级同高,自己不做设置*/  /*通过padding实现居中*/  padding: calc((100px - 40px) / 2) 0; } .s_p_border {   calc(100% - 50px);  /*height: 40px;*/  height: 36px;  /*background-color: yellow;*/  border: 2px solid #333;  border-radius: 5px; } .s_p_btn {   40px;  height: 40px;  background-color: brown;  margin: -40px 0 0 auto;  font: 700 18px/40px "微软雅黑";  text-align: center;  color: #fff;  cursor: pointer;  border-radius: 4px;  /*不允许选中文本*/  user-select: none; }

    .nav {  /*宽度找父级:wrap*/  height: 48px; }

  • 相关阅读:
    Python3之random模块常用方法
    Go语言学习笔记(九)之数组
    Go语言学习笔记之简单的几个排序
    Go语言学习笔记(八)
    Python3之logging模块
    Go语言学习笔记(六)
    123. Best Time to Buy and Sell Stock III(js)
    122. Best Time to Buy and Sell Stock II(js)
    121. Best Time to Buy and Sell Stock(js)
    120. Triangle(js)
  • 原文地址:https://www.cnblogs.com/zhouhao123/p/9789115.html
Copyright © 2011-2022 走看看