【css】筆記

最近幫忙改了個css外觀，意外發現了一些細節，這裏記錄一下

css使用基礎

#是id，.是class

#content1 {
  padding: 10px;
}

.content2 {
  padding: 10px;
}

指明嵌套元素：

ul.li {
  padding: 0;
}

.ul>li .a {
  font-size: 0.9em;
}

css中固定距離用px，相對距離用em (推薦，適配手機端)，寬度控制用百分比適應

#content {
  margin: 30px 0 0 0;
  /* padding: 10px; */
  padding: .8em 1.2em .4em 1.2em;
  min-height: 500px; /* 最小距離 */
  width: 80%; /* 相對父容器 */
}

另一種寫法：外邊距margin，內邊距padding，left和right是常用。

margin-left: 10px;
margin-top: 10px;

top上邊距，bottom底邊距。

  top: 0;
  bottom: 0;

textarea去掉默認白色背景和擴展邊框

去掉白色背景：

background-color: transparent;

去掉擴展邊框：

resize: none;

最終效果：（很好的適應黑夜模式）

同時黑夜模式打字看不見的情況：

設置字體顏色：

color: #999;

button懸停效果和陰影

.button {
  background-color: #9BCD9B;/* Green */
  border: none;
  margin-left: 8px;
  color: white; /* text color */
  padding: 10px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-radius: 12px;  /* circle */
  outline: none;
  cursor: pointer; 
}

.button:hover {
  background-color: #ff7242;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.24), 0 8px 16px 0 rgba(0, 0, 0, 0.19); /* shadow */
}

css3手寫選擇按鈕

/* check  */
.checke{
  position: relative;
  -webkit-appearance: none;
  width:45px;
  height: 22px;
  line-height: 22px;
  background: #eee;
  border-radius: 15px;
  outline: none;
}
.checke:before{
  position: absolute;
  left: 0;
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eee;
  box-shadow: 0px 0px 5px #ddd;
  transition: all 0.2s linear;
}

.checke:checked{
 background: #18ff0a;
}
.checke:checked:before{
  left: 22px;
  transition: all 0.2s linear;
}

再記錄一下打開顯示和隱藏：(jq版本)

<input type="checkbox" class="1" value="1">
<script type="text/javascript">
   $(':checkbox').click(function () {
       if (this.checked && this.value == "1") {
          document.getElementById("2").style.display = "block";
       } else {
          document.getElementById("2").style.display = "none";
       }
    });
</script>
<div id = "2" style="display:none;">xxxxxxxxx<div>

一行元素等分

注意input必須單獨佔一個元素，不能包裹

		 <div class="row">
            <input class="child">
            <input class="child" >
            <div class="child">
              <button class="button">1</button>
              <button class="button">2</button>
            </div>
          </div>

.row{
  width: 100%;
  display: flex; /* 等分 */
}
.child{
  flex: 1;
}

一個版本的樣式

<div class="power">Powered By <a href="https://cungudafa.js.org/" target="_blank">cungudafa</a><br>v1.0</div>

/* version */
.power {
  text-align: right;
  float: right;
  color: #999;
  font-size: .75em;
  padding: .5em 0;
}

.power a {
  font-size: .75em;
  position: relative;
  cursor: pointer;
  color: #1abc9c;
  text-decoration: none;
  display: inline-block;
}

頭像旋轉

.avatar {
  border-radius: 100% !important;
  -moz-border-radius: 100% !important;
  box-shadow: inset 0 -1px 0 3333sf;
  -webkit-box-shadow: inset 0 -1px 0 3333sf;
  -webkit-transition: 0.4s;
  -webkit-transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;
  -moz-transition: -moz-transform 0.4s ease-out;
}

.avatar:hover {
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  -o-transform: rotateZ(360deg);
  -ms-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

篇幅到了，急忙收尾，去學習了~~~