首页 > 其他分享> > CSS学习笔记之学成在线项目 3.1

CSS学习笔记之学成在线项目 3.1

2022-03-01 18:32:48 作者：互联网

1.1 工具及重点

开发工具 = PS（切图） + vscode（代码） + chrome（测试）。

CSS 属性书写顺序(重点)

建议遵循以下顺序： 1. 布局定位属性：display / position / float / clear / visibility / overflow 2. 自身属性：width / height / margin / padding / border / background 3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word 4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

1.2 确定版心

页面的版心是 1200 像素，水平居中对齐，可以定义版心为公共类：

.w {
    width: 1200px;
    margin: auto;
}

1.3 头部制作

版心盒子 header 1200 * 42 的盒子水平居中对齐，里面包含logo、nav 导航栏、search 搜索框、user 个人信息四个盒子，结构代码如下所示：


   <div class="header w">
       <!-- logo -->
       <div class="logo">
           <img src="images/logo.png" alt="">
       </div>
<!-- 导航栏 -->
       <div class="nav">
           <ul>
               <li><a href="#">首页</a></li>
               <li><a href="#">课程</a></li>
               <li><a href="#">职业规划</a></li>
           </ul>
       </div>
       <!-- 搜索模块 -->
       <div class="search">
           <input type="text" value="输入关键词">
           <button></button>
       </div>
       <!-- 用户模块 -->
       <div class="user">
           <img src="images/user.png" alt="">
           qq-yzl
       </div>
   </div>

1.3.1 logo

主要是设置大小位置再添加图片

.logo{
    float: left;
    width:198px;
    height: 42px;
    
}

1.3.2 nav

要点：

1、实际开发中，不会直接用链接a 而是用 li 包含链接(li+a)的做法

2、让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示 3、这个nav导航栏可以不给宽度,将来可以继续添加其余文字 4、因为导航栏里面文字不一样多,所以最好给链接 a 左右padding 撑开盒子,而不是指定宽度

.nav{
    float: left;
    margin-left: 60px;

}
.nav ul li{
    float: left;
    margin: 0 15px;

}
.nav ul li a{
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: black;
  
}
.nav ul li a:hover{
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff;
}

1.3.3 search

主要设置大小位置和样式，按钮图片在style中插入

.search {
    float: left;
    width: 412px;
    height: 42px;
    background-color: skyblue;
    margin-left: 70px;

}
.search input{
    float: left;
    width: 345px;
    height: 40px;
    border:1px solid #00a4ff ;
    border-right: 0;
    color:#bfbfbf ;
    font-size: 14px;
    padding-left: 15px;

}
.search button{
    float: left;
    width: 50px;
    height: 42px;
    background-color: blue;
    border: 0;
    background:url(images/btn.png) ;

}

1.3.4 user

主要设置大小位置和样式

.user{
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}

1.4 banner

banner大盒子包含一个版心盒子，版心盒子包含subnav和course两个盒子盒子内容主要设置大小位置和样式，结构代码如下：

 <!-- banner start -->
   <div class="banner">
       <!-- 版心 -->
       <div class="w">
           <div class="subnav">
               <ul>
                   <li><a href="#">前端开发<span>></span></a></li>
                   <li><a href="#">前端开发<span>></span></a></li>
                   <li><a href="#">前端开发<span>></span></a></li>
                   <li><a href="#">前端开发<span>></span></a></li>
                   <li><a href="#">前端开发<span>></span></a></li>
                   <li><a href="#">前端开发<span>></span></a></li>
                   <li><a href="#">前端开发<span>></span></a></li>
                   <li><a href="#">前端开发<span>></span></a></li>
               </ul>
           </div>
           <!-- 课程表 -->
           <div class="course">
               <h2>我的课程表</h2>
               <div class="bd">
                   <ul>
                       <li>
                           <h4>继续学习 程序语言设计</h4>
                           <p>正在学习-使用对象</p>
                       </li>
                       <li>
                        <h4>继续学习 程序语言设计</h4>
                        <p>正在学习-使用对象</p>
                    </li>
                    <li>
                        <h4>继续学习 程序语言设计</h4>
                        <p>正在学习-使用对象</p>
                    </li>
                   </ul>
                   <a href="#" class="more">全部课程</a>
               </div>
           </div>
       </div>
   </div>
   <!-- banner end -->

style代码如下：

.banner{
    height: 421px;
    background-color: #1c036c;
}
.banner .w{
    height: 421px;
    background:url(images/banner2_20190819_210028.png)
}
.subnav{
    float: left;
    width: 190px;
    height: 421px;
    background-color:rgba(0, 0, 0,0.3)
}
.subnav ul li{
    height: 45px;
    line-height: 45px;
    padding: 0 20px;

}
.subnav ul li a{
    font-size: 14px;
    color: white;
}
.subnav ul li a span{
    float: right;
}
.subnav ul li a:hover{
    color: #00a4ff;
}
.course{
    float: right;
    width: 230px;
    height: 300px;
    background-color:white;
    /* 浮动盒子不会有外边距问题 */
    margin-top: 50px;

}
.course h2{
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;

}
.bd{
    padding: 0 20px;

}
.bd ul li{
    padding: 15px 0;
}
.bd ul li h4{
    font-size: 16px;
    color: #4e4e4e;

}
.bd ul li p{
    font-size: 12px;
    color: #a5a5a5;
}
.bd .more{
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-size:16px ;
    font-weight: 700;
    margin-top: 5px;

}

1.5 精品模块

大盒子水平居中 goods 精品，里面包含会h3、item、mod三个小盒子

盒子内容主要设置大小位置和样式，结构代码如下：

<!-- 精品start -->
   <div class="goods w ">
       <h3>精品推荐</h3>
       <ul>
           <li><a href="#">JQuery</a></li>
           <li><a href="#">Spark</a></li>
           <li><a href="#">MySQL</a></li>
           <li><a href="#">JavaWeb</a></li>
           <li><a href="#">MySQL</a></li>
           <li><a href="#">JavaWeb</a></li>

       </ul>
       <a href="#" class="mod">修改兴趣</a>
   </div>
<!-- 精品end -->

style代码如下：

.goods {
    height: 60px;
    background-color: #fff;
    box-shadow: 0 4px 3px 3px rgba(0, 0, 0,0.1);
    margin-top: 10px;
    line-height: 60px;

}
.goods h3{
     float: left;
     margin-left: 30px;
    font-size: 16px;
    color: #00a4ff;
}
.goods ul{
    float: left;
    margin-left: 30px;
}
.goods ul li{
    float: left;
}
.goods ul li a{
    padding: 0 30px;
    font-size:16px ;
    color: #050505;
    border-left: 1px solid #ccc;
}
.mod{
    float:right;
    margin-right: 30px;
    font-size: 14px;
    color: #00a4ff;
}

1.6 主要内容模块

box大盒子里包含box-hd和box-bd两个小盒子小 li 外边距的问题小技巧：给 box-hd 宽度为 1225 就可以一行装开 5 个 li 盒子内容主要设置大小位置和样式，以及插入图片，结构代码如下：

<!-- box start -->
   <div class="box w ">
       <div class="box-hd">
           <h3>精品推荐</h3>
           <a href="#">查看全部</a>
       </div>
       <div class="box-bd">
           <ul>
               <li>
                   <img src="images/pic.png" alt="">
                   <h4>
                        Think PHP 5.0 博客系统实战项目演练  
                   </h4>
                   <div class="info">
                       <span>高级</span>
                        · 1125人在学习
                   </div>
               </li>
               <li>
                <img src="images/pic.png" alt="">
                <h4>
                     Think PHP 5.0 博客系统实战项目演练  
                </h4>
                <div class="info">
                    <span>高级</span>
                     · 1125人在学习
                </div>
            </li>
            <li>
                <img src="images/pic.png" alt="">
                <h4>
                     Think PHP 5.0 博客系统实战项目演练  
                </h4>
                <div class="info">
                    <span>高级</span>
                     · 1125人在学习
                </div>
            </li>
            <li>
                <img src="images/pic.png" alt="">
                <h4>
                     Think PHP 5.0 博客系统实战项目演练  
                </h4>
                <div class="info">
                    <span>高级</span>
                     · 1125人在学习
                </div>
            </li>
            <li>
                <img src="images/pic.png" alt="">
                <h4>
                     Think PHP 5.0 博客系统实战项目演练  
                </h4>
                <div class="info">
                    <span>高级</span>
                     · 1125人在学习
                </div>
            </li>
            <li>
                <img src="images/pic.png" alt="">
                <h4>
                     Think PHP 5.0 博客系统实战项目演练  
                </h4>
                <div class="info">
                    <span>高级</span>
                     · 1125人在学习
                </div>
            </li>
            <li>
                <img src="images/pic.png" alt="">
                <h4>
                     Think PHP 5.0 博客系统实战项目演练  
                </h4>
                <div class="info">
                    <span>高级</span>
                     · 1125人在学习
                </div>
            </li>
            <li>
                <img src="images/pic.png" alt="">
                <h4>
                     Think PHP 5.0 博客系统实战项目演练  
                </h4>
                <div class="info">
                    <span>高级</span>
                     · 1125人在学习
                </div>
            </li>
            <li>
                <img src="images/pic.png" alt="">
                <h4>
                     Think PHP 5.0 博客系统实战项目演练  
                </h4>
                <div class="info">
                    <span>高级</span>
                     · 1125人在学习
                </div>
            </li>
            <li>
                <img src="images/pic.png" alt="">
                <h4>
                     Think PHP 5.0 博客系统实战项目演练  
                </h4>
                <div class="info">
                    <span>高级</span>
                     · 1125人在学习
                </div>
            </li>
           </ul>
       </div>
   </div>
<!-- box end -->

style代码如下：

.box{
    margin-top:30px ;
}
.box-hd{
    height: 40px;

}
.box-hd h3{
    float: left;
    font-size: 20px;
    color: #494949;
}
.box-hd a{
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;

}
.box-bd ul{
    width: 1225px;
}
.box-bd ul li{
    float: left;
    width: 228px;
    height: 270px;
    background-color: white;
    margin-left: 15px;
    margin-bottom: 15px;

}
.box-bd ul li img{
    width: 100%;
}
.box-bd ul li h4{
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color:#050505 ;
    font-weight: 400;

}
.box-bd .info{
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;

}
.box-bd .info span{
    color: #ff7c2d;
}

标签：学成,font,color,height,3.1,li,margin,CSS,left
来源： https://blog.csdn.net/qq_36450483/article/details/123207948