2022.7.6前端学习日记

设计网站

总体思路

1. 能根据项目需求创建根目录（网络的第一级文件夹），存所有该网站的素材
   
2. 布局：从外到内，从上到下，从左到右      CSS:浮动/display;盒子模型;文字样式
3. 先整体后细节，先把大盒子写好，再往里面添加标签

过程细节

• 所有网页都适用的代码  

  *{
      padding: 0;
      margin: 0;
      /* 内减 */
      box-sizing: border-box;
  }
  ul{
      text-decoration: none;
  }
  li {
      list-style: none;
  }
  a {
      text-decoration: none;
  }
  .clearfix:before,.clearfix:after {
      content:"";
      display:table; 
    }
    .clearfix:after {
      clear:both;
    }
  

• 首先看网页设计图有没有版心部分，可以设置版心选择器方便后续网页编写 例

  .wapper{
      width: 1200px;
      margin: 0 auto;
  }

  关于头部部分的编写                     
  • 首先整体给一个div，设置高度
    然后从左往右添加盒子里面的内容
            A.一个h1放学成在线的logo
            B.一个div里ul*3li放三个超链接标题 
            C.一个div放一个文本框和一个button
            D.一个div放一个image和span标签

    
        
    
            
    
    
            
            
            
    
                
     
                    
     首页
                    
     课程
                    
     职业规划
                
            
    
            
            
    
                
                
                
                
            
    
            
            
    
                
                hana
            
    
        

    h1和导航CSS设置
    
            A.最大的盒子,设置选择器header设置高度、内边距，选择器wapper设置版心居中
    ​​​​​​        ​B.h1放logo，大小和图片一致，设置左漂浮
            C.导航区域的div设置选择器nav设置高度、左漂浮、外边距
            D.导航区域里面有ul>li>a,可以在ul里面设置文字的属性，因为继承。在li里面设置左  漂浮、每个li之间的间距用外边距设置。在a里面设置文字属性，调整边距。*display: block;需要对a设置转换成块或者行内块，才可以进行宽高设置。
            E.设置悬浮模式

    /* 头部 */
    .header{
        margin-top: 30px;
        margin-bottom: 30px; 
        height: 42px;
        /* background-color: pink; */
    }
    h1{
        float: left;
    }
    
    /* 导航区域 */
    .nav{
        height: 42px;
        float: left;
        margin-left:70px; 
        /* text-align: center; */
        /* line-height: 42px; */
    }
    .nav ul li{
        float: left;
        margin-right: 26px;
        /* padding: 9px; */
    }
    .nav ul li a{
        padding: 0 9px;
        /* height: 42px; */
        line-height: 42px;
        display: block;
        text-decoration: none;
        font-family: MicrosoftYaHei;
    	font-size: 18px;
    	font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 2px;
    	color: #050505;
    }
    .nav li:hover{
        border-bottom: 2px solid #00a4ff;
    }

    搜索框和用户头像信息CSS设置
            A.搜索框整体div用选择器search来设置宽高、和左边导航的外间距、左漂浮、边框属性
            B.搜索框左边是一个文本框，设置宽高 、内边距、边框属性、背景色、左浮动. *placeholder里面的文字要设置样式.search input::placeholder
            C.搜索框右边是一个按钮，设置按钮宽高、背景图、边框属性和左浮动。
            D.用户图标，整体的div利用选择器.user设置宽高、文字属性、左浮动、
            E.用户图标左边的图片调整大小和图片对齐形式 ，如果要间距设置间距

    /*搜索框区域*/
    .search{
        float: left;
        margin-left: 59px;
        height: 40px;
        /* box-sizing: border-box; */
        width: 412px;
        /* background-color: blue; */
        border: 1px solid #00a4ff;
    }
    .search input{
        padding-left:20px;
        width: 360px;
        height: 38px;
        border: 0;
        background-color: #f3f5f7;
        float: left;
    }
    .search input::placeholder{
        font-size: 14px;
        color: #bfbfbf;
    }
    .search button{
        float: left;
        width: 50px;
        height: 38px;
        background-image: url(../images/btn.png);
        border: 0;
    }
    
    
    /* 用户图标 */
    .user{
        float: right;
        /* 不方便给宽，因为没有办法提供确切的字数长度 */
        margin-right: 35px;
        height: 42px;
        line-height: 42px;
    }
    .user img{
        /* 调节图片对齐方式 */
        vertical-align: middle;
    }

  收获与总结

1. 如果是纯文字区域可以不给宽

2. 可能行内块代码换行会产生换行导致行宽不够进行自动换行。最好的解决方法就是设置浮动

3. 行高是属于控制文字的属性，是可以继承的

4. 设置颜色可以用rdbc的写法

5. 文字有边，长度和谁一样高就给谁加边，如果li里面有超链接，如果给li加边框会和图片效果不一致

6. 要清除浮动的影响，li的父级因为li都浮动了，脱标，撑不开父级的高度

7. 注意dl>dt>dd的标签的使用