css学习五

Posted 2021-12-12 zhangzongke

tags:

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

通过最近的练习

发现了好多不足和错误

1.在初步页面布局上，如果分的太细了，容易混淆。

2.个别标签运用的还是不熟练。

3.css个别属性运用的也不熟练。

做的东西感觉不是很美观，自己有时也会一头雾水看不懂。

逻辑思维不好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/fute.css">
</head>
<body>
<div class="waibian">
<div class="dingbu">
    <div class="logo"></div>
    <div class="daohang"></div>
    <div class="zhaomu"></div>
</div>
    <div class="neirong">
    <div class="lunbotu"></div>
    <div class="zongyou">
        <div class="zongyou1"></div>
        <div class="zongyou2"></div>
        <div class="zongyou3"></div>
    </div>
    <div class="sanche"></div>
    <div class="tebieyouhui">
        <div class="youhui1"></div>
        <div class="youhui2"></div>
    </div>
    <div class="sousuo">
        <div class="dingwei"></div>
        <div class="souxun"></div>
        <div class="bunengkong"></div>
        <div class="xuanze"></div>
        <div class="sx"></div>
    </div>
    <div class="jingcaichengxian">
        <div class="cx"></div>
        <div class="fukesi"></div>
        <div class="nei1">
            <div class="yema"></div>
            <div class="nei2">
                <div class="mdo"></div>
                <div class="qs"></div>
                <div class="txz"></div>
                <div class="hx"></div>
            </div>
        </div>
    </div>
    <div class="xinban">
        <div class="sp"></div>
        <div class="wa"></div>
    </div>
    </div>

    <div class="dibu">
        <div class="dihei"></div>
    <div class="dibudh">
        <div class="cxzs"></div>
        <div class="gczq"></div>
        <div class="khfw"></div>
        <div class="ftkj"></div>
        <div class="ftwh"></div>
    </div>
    <div class="dibulan"></div>
    <div class="banquan"></div>
    </div>
</div>

</body>

其中之前学过的弹性盒子还没运用当中但是感觉整体分的不够好
脑子里想的不够细致，以后做东西的时候要记住

*{
    margin: 0px;
    padding: 0px;
    margin: auto;
}
.waibian{
    width: 1519px;
    height: 3590px;
    background-color: white;
}
.dingbu{
    width: 1438px;
    height: 70px;
    background-color: slateblue;
}
.logo{
    width:200px;
    height: 70px;
    background-color: #9a9a9a;
    float: left;
}
.daohang{
    width: 200px;
    height: 70px;
    background-color: khaki;
    float: right;
}
.zhaomu{
    width: 600px;
    height: 70px;
    background-color: green;
    float: right;
}
.lunbotu{
    width: 1438px;
    height: 376px;
    background-color: #404040;
}
.zongyou{
     width: 1438px;
     height: 289px;
     background-color: darkcyan;
}
.zongyou1{
    width: 624px;
    height: 57.6px;
    background-color: red;
    margin: 0 auto;
    margin: 0px 418px;
}
.zongyou2{
    width: 208px;
    height: 19.2px;
    background-color: chartreuse;
    margin: 0 auto;
    margin: 40px 614px;
}
.zongyou3{
    width: 250px;
    height: 48.4px;
    background-color: black;
    margin: 40px 595px;
}
.sanche{
    width: 1438px;
    height: 449px;
    background-color: crimson;
}
.tebieyouhui{
    width: 1438px;
    height: 349px;
    background-color: coral;
}
.youhui1{
    width: 250px;
    height: 48.4px;
    background-color: darkslateblue;
    margin: 0px 595px;
}
.youhui2{
    width: 250px;
    height: 48.4px;
    background-color: #444444;
    margin: 40px 595px;
}
.sousuo{
    width: 1438px;
    height: 470px;
    background-color: yellow;
}
.dingwei{
    width: 1408px;
    height: 49.6px;
    background-color: black;
}
.souxun{
    width:1408px;
    height:49.6px;
    background-color: white;
}
.bunengkong{
    width: 1408px;
    height: 25.6px;
    background-color: green;
}
.xuanze{
    width: 1408px;
    height: 81.6px;
    background-color: aqua;
}
.sx{
    width: 1408px;
    height: 69.6px;
    background-color: coral;
}
.jingcaichengxian{
    width: 1438px;
    height: 900px;
    background-color: blueviolet;
}
.cx{
    width: 936px;
    height: 256.4px;
    background-color: #0395e1;
    float: left;
}
.fukesi{
    width: 363.6px;
    height: 323.2px;
    background-color: green;
    float: right;
}
.nei1{
    width: 1438px;
    height: 646.4px;
    background-color: darkorange;
    display:inline-block;
}
.yema{
    width: 727.2px;
    height: 646.4px;
    background-color: #f8ff00;
    float: left;
}
.mdo{
    width: 363.6px;
    height: 323.2px;
    background-color: #ff0089;
    float: right;
}
.qs{
    width: 363.6px;
    height: 323.2px;
    background-color: #55ff00;
    float: right;
}
.txz{
    width: 363.6px;
    height: 323.2px;
    background-color: #00ffce;
    position: relative;
    left: 174px;
}
.hx{
    width: 363.6px;
    height: 323.2px;
    background-color: #cb00ff;
    position: relative;
    left: 174px;
}
.xinban{
    width: 1438px;
    height: 387px;
    background-color: hotpink;
}
.sp{
    width: 689px;
    height: 387.56px;
    background-color: #00ff7e;
    float: left;
}
.wa{
    width: 719px;
    height: 387px;
    background-color: #d8ff00;
    float: right;
}
.dihei{
    width: 1438px;
    height: 70px;
    background-color: #404040;
}
.dibudh{
    width: 1438px;
    height: 336px;
    background-color: black;
}
.cxzs{
     width: 231.33px;
     height: 286.8px;
     background-color: #7eff54;
    float: left;
 }
.gczq{
    width: 231.33px;
    height: 286.8px;
    background-color: #7eff54;
    float: left;
}
.khfw{
     width: 231.33px;
     height: 286.8px;
     background-color: #7eff54;
    float: left;
 }
.ftkj{
      width: 231.33px;
      height: 286.8px;
      background-color: #7eff54;
    float: left;
  }
.ftwh{
       width: 231.33px;
       height: 286.8px;
       background-color: #7eff54;
    float: left;
   }
.cxzs{
        width: 231.33px;
        height: 286.8px;
        background-color: #7eff54;
    float: left;
    }
.dibulan{
    width: 1438px;
    height: 70px;
    background-color: darkslateblue;
}
.banquan{
    width: 1438px;
    height: 122px;
    background-color: red;
}

class取名的方式也不对让别人能简单易懂的

还要养成注释的好习惯。

不断练习不断纠正自己的坏习惯。

以上是关于css学习五的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器

css常用代码片段 (更新中)

CSS代码片段