第三十七天

Posted zhouhao123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第三十七天相关的知识，希望对你有一定的参考价值。

　　<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>border</title>  

<!-- 画梯形 -->  

<style type="text/css">   

.bd {    width: 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 {    width: 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 {    width: 100px;    height: 100px;    /*默认值*/    /*border: 3px none black;*/    /*清除边框*/    /*border: 0;*/    /*border: none;*/    /*最简单的设置*/    border: solid;   }   .sub {    width: 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 {    width: 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的宽度*/    width: auto;    /*默认0*/    height: 0px;   }    span {    /*内联*/    display: inline;    /*不支持宽高*/   }   img {    /*内联块*/    display: inline-block;    /*宽和高都可以是auto*/    width: auto;    height: auto;   }  </style>

 <style type="text/css">   /*验证宽高限制*/   .sup {    width: 100px;    height: 100px;    background-color: orange;   }   .sub {    width: 200px;    height: 200px;    background-color: blue;   }   .s1, .s2 {    width: 200px;    height: 200px;    background-color: brown;   }   img {    width: 300px;    height: 300px;       }  </style> </head> <body>  <div></div>  <span></span>  <!-- 路径前面加个. -->  <img src="./img/icon.jpg" >  <img src="./img/icon.jpg" >  <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 {    width: auto;    height: 200px;    background-color: red;   }   .sub {    width: 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 {    width: 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 {    width: 500px;    height: 500px;    background: url(图片位置) no-repeat center orange;   }  </style> </head> <body>  认识a标签的操作  需求：具有页面转跳功能的图片  <a href="">   <img src="图片位置" >  </a>  图片在sup水平垂直中央显示  part1  <div class="sup">   <img class="sub" src="" >  </div>  part2  <div class="box"></div> </body> </html>

层级结构 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>层级结构</title>  <style type="text/css">   .d5 {    width: 200px;    height: 100px;    background: red;   }   .d2, .d3, .d4 {    width: 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 {    width: 200px;    height: 100px;    background: red;   }   .html, .css, .js {    width: 80px;    height: 40px;    background: orange   }   .nav {    width: 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 {    width: 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 {  width: 1200px;  /*高度不设:由内容撑开*/ } h1 {  margin: 0; }

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

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

 /*统一颜色*/  background-color: #fdfcf8; } .title {  /*有明确显示宽度,自己设置*/  width: 500px;  height: 100px;  background: url(‘../img/w3c/bg.png‘) no-repeat 0 -150px; } .title:hover {  /*只修改精灵图定位*/  background-position: 0 -250px; } .search {  width: 300px;  /*height: 100px;*/  /*background-color: orange;*/  /*margin-left: auto;  margin-right: 0;  margin-top: -100px;*/  margin: -100px 0 0 auto; } .sc_position {  width: 280px;  height: 40px;  /*background-color: cyan;*/ } /*实现sc_position在search垂直居中*/ .search {  /*宽度不变*/  /*高度为子级同高,自己不做设置*/  /*通过padding实现居中*/  padding: calc((100px - 40px) / 2) 0; } .s_p_border {  width: calc(100% - 50px);  /*height: 40px;*/  height: 36px;  /*background-color: yellow;*/  border: 2px solid #333;  border-radius: 5px; } .s_p_btn {  width: 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; }

以上是关于第三十七天的主要内容，如果未能解决你的问题，请参考以下文章

2018.11.09python学习第三十七天

走入计算机的第三十七天（python的高级用法）

第三十七天 一乐在当中—Android的小游戏打飞机环境搭建

python第三十七天，GIL全局解释器锁*****，线程池与进程池 同步异步，阻塞与非阻塞，异步回调

第四百三十七天 how can I 坚持

失业第十七天