《学成在线》网站制作源码及总结html+css

最新推荐文章于 2025-02-05 14:45:34 发布

cuter、

最新推荐文章于 2025-02-05 14:45:34 发布

阅读量2.8k

点赞数 4

分类专栏： web前端 html+css 文章标签： html css web

本文链接：https://blog.csdn.net/weixin_45077672/article/details/115440894

版权

web前端 html+css 专栏收录该内容

34 篇文章

订阅专栏

界面：
在这里插入图片描述

整体布局思路：
先用一个大的盒子，我定义为total类，这个盒子可以装下页面所有盒子。然后根据标准流文档和浮动来布局。在此，要注意的是，中间php图片占用了整个父盒子的空间，所以再定义侧边栏的时候，侧边栏会掉在下边，此时我用的相对定位，使其保持在图片的侧边栏。后面以此类推，上下用标准流，左右用浮动。大盒子嵌套小盒子反复循环。
悬浮小点用的是a标签（其他标签也可以），然后hover属性改成椭圆即可。
注意
导航栏注意点：
实际开发中我们不会直接用链接a，而是用li包含链接a的做法。
（1）li+a语义更清晰，一看这就是有条理的内容
（2）如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。
1.盒子里面放图片：

  .imgconter{
           width:229px;
           height: 271px;
           background-color: white;
           margin-left: 13.75px;
           float: left;
    
       }
       .imgconter img{
           height: 155px;
           width: 100%;
       }

<div class="imgconter">
                <a href=""><img src="学成在线图片/图层135.png" alt=""></a>
                <p>Think PHP 5.0博客系统实战项目演练</p>
                <span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span>

            </div>

imgconter里面要放图片完全显示的话，需对图片的宽度设置为100%！
2.中间导航栏旁边的横线制作

 <div class="cdzuo">
                <a href="">精品推荐</a>
                <span>|</span>
                <a href="">JQuery</a>
                <span>|</span>
                <a href="">Spark</a>
                <span>|</span>
                <a href="">MySQl</a>
                <span>|</span>
                <a href="">JavaWe</a>
                <span>|</span>
                <a href="">MySQl</a>
                <span>|</span>
                <a href="">数据库</a>
            </div>

.centerdown{
             width: 1200px;
             height: 61px;
             background-color: #ffffff;
             margin: 0 100px;
             
         }
         .centerdown a{
             display: inline-block;
             height: 21px;
             color: black;
             padding:20px; 
             line-height: 21px;      
         }
         .centerdown span{
             color: #b0b0b0 ;
         }

源码html：

<!-- 
    1.典型的企业级网站
    2.目的是为了整体感知企业级网站布局流程，复习以前知识。
 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>学成在线</title>
     <style>
         *{
             text-decoration: none;
             padding: 0;
             margin: 0;
             list-style: none;
         }
         a:visited{
             color: black;
         }
         body{
             background-color: #f3f5f7;
         }
         .total{
             width:1402px;
             
             /* background-color: skyblue; */
             margin: 0 auto;
         }
         .nav{
             width: 1200px;
             height: 102px;
             margin: 0 100px;
             background-color: #eef3f6;
             overflow: hidden;
         }
         .xuechenglogo{
             height: 52px;
             width: 202px;
             /* background-color:yellow ; */
             float: left;
             margin-top:29px ;
         }
        .xuechenglogo img{
            height: 52px;
            width: 202px;
        }
         .nav li{
             height: 52px;
             /* background-color: violet; */
             float: left;
             padding-left:25px;
             margin-top: 29px;
             line-height: 82px;
             font-size: 18px;
         }
         .nav li a:hover{
             color: red;
         }
         .nav .sousuo{
             height: 50px;
             width: 363px;
             float: left;
             margin-top: 29px;
             margin-left: 70px;
             border-color: #00a4ff;
             
         }
         .nav .tijiao{
             height: 54px;
             width: 54px;
             background-color: bisque;
             float: left;
             margin-top: 29px;       
         }
          .touxiang{
             width: 61px;
             height: 61px;
             border-radius: 50%;
             float: left;
             background-color: black;
             margin-top: 25px; 
             margin-left: 32px;    
             /* background-size: 100% 100%;   */
         }
         .touxiang:hover{
             box-shadow: 10px 10px 10px 0.5px  rgba(0, 0, 0, .3) ;
         }
         .touxiang img{
             border-radius: 50%;
         }
         .nav p{
            width: 100px;
            height: 30px;
            /* background-color: blanchedalmond; */
            float: left;
            margin-top: 45px; 
             margin-left: 20px; 
         }
         .center{
             width: 100%;
             height: 420px;
             background-color: #033db2;
             margin-top: 12px;
             margin-bottom: 9px;
         }
         .img{
             display: inline-block;
             width: 1200px;
             height: 420px;
             margin: 0px 100px;
             /* background-color: bisque; */
             background-image: url("学成在线图片/banner2.png");
             
            
         }
         .cebian{
            
             width: 191px;
             height: 420px;
             /* position: relative;
             top: -424px;
             left: 0px; */
            
         }
         .cebian a{
             display: block;
             width: 100%;
             height: 46.7px;
             padding-left: 2em;
             background: rgba(0, 0, 0, .3);
             line-height: 46.7px;
             color: #ffffff;    
         }
         .cebian a:hover{
             
             color: #00b4ff;
         }
         .youkebiao{
           height: 300px;
           width: 230px;
           background-color: white;
           float:right;
           position: relative;
           top: -400px;
           right: 0;
       }
       .youkebiao li{
           margin:0 auto;
           width: 200px;
           height: 60px;
           line-height: 30px;
           border-bottom: 1px solid #b7b7b7;
          
       }
       .youkebiao .kebiao1{
           background-color: #9bceea;
           color: white;
           width: 230px;
           font-weight: 700;
           font-size: 20px;
          text-align: center;
          line-height: 60px;
        
       }
       .youkebiao li p{
           font-size: 8px;
           color: #b7b7b7;
       }
       .youkebiao li button{
           height: 40px;
           width: 200px;
           background-color: white;
           border: 3px solid #22b0ff;
           margin-top: 3px;
           color:#22b0ff ;
           font-weight: 700;
       }
        .youkebiao li:hover{
        box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, .3);
       }

/* 浮点 */
           .fudian a{
            display: inline-block;
            width: 15px;
            height: 15px;
            background:rgba(0, 0, 0, .3);
            border-radius: 50%;
            position: relative;
            margin-left: 10px;
            left: 450px;
            top: -60px;
        }
        .fudian a:hover{
            width: 23px;
            height: 15px;
        }

         .centerdown{
             width: 1200px;
             height: 61px;
             background-color: #ffffff;
             margin: 0 100px;
             
         }
         .centerdown a{
             display: inline-block;
             height: 21px;
             color: black;
             padding:20px; 
             line-height: 21px;      
         }
         .centerdown span{
             color: #b0b0b0 ;
         }
         .centerdown .cdyou{
            height: 61px;
            width: 150px;
            font-size: 14px;
            float: right;
            text-align: center;
         }
         .centerdown a:hover{
             color: red;
         }
         .cdyou a{
         color: #00b4ff;;
         }
         h4{
             margin:35px 0px 20px 100px ;
             /* background-color: blue; */
             font-size: 22px;
             font-weight: 400;
         }
         .fa{
           
           width: 1200px;
           height: 271px;
           /* background-color: #f3f5f7; */
           /* background-color: rosybrown; */
           margin: 0 auto;
       }
       .fa1{
           width: 1200px;
           height: 271px;
           /* background-color: #f3f5f7; */
           /* background-color: blue; */
           margin: 20px auto;
       }
        .imgconter{
           width:229px;
           height: 271px;
           background-color: white;
           margin-left: 13.75px;
           float: left;
    
       }
       .imgconter:hover{
           box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, .3);
       }
       .imgconter img{
           height: 155px;
           width: 100%;
       }
       .imgconter p{
          width: 179px;
          height: 50px;
          background-color: white;
          margin: 10px auto;
       }
       .gaoji a{
           color: orange;
           font-size: 14px;
           padding-left: 25px;
           margin-right: 50px;
       }
      
      
       
 

     </style>
 </head>
 <body>
     <div class="total">
         <div class="nav">
             <!-- logo -->
             <span class="xuechenglogo">
                 <img src="学成在线图片/学成在线.png" alt="">
             </span>
<!-- 导航 -->
             <ul>
                 <li style=" margin-left: 67px;"> <a href="">首页</a></li>
                 
                 <li><a href="">课程</a></li>
                 <li><a href="">职业规划</a></li> 
             </ul>
            <!-- 提交搜索 -->
             <span>
                 <form action="#">
                     <input class="sousuo" type="text" name="sousuo">
                     <input class="tijiao"  type="image" src="学成在线图片/fa-search.png" name="submit">
                 </form>
             </span>
             <!-- 头像 -->
             <span class="touxiang">
                 <img src="学成在线图片/Snipaste_2021-04-04_11-21-43.png" alt=""> 
             </span>
             <p>QQ：刘崽儿</p>
         </div>
         
         <div class="center">
             <div class="img">
                 <!-- <a href=""><img src="学成在线图片/banner2.png" alt=""></a> -->
                <div class="cebian">
                    <a href="">前端开发</a>
                    <a href="">后端开发</a>
                    <a href="">移动开发</a>
                    <a href="">人工智能</a>
                    <a href="">商业预测</a>
                    <a href="">云计算&大数据</a>
                    <a href="">运维&模式</a>
                    <a href="">UI设计</a>
                    <a href="">产品</a>
                </div>
                <div class="fudian">
                    <a href=""></a>
                    <a href=""></a>
                     <a href=""></a>
                     <a href=""></a>
                    <a href=""></a>
                     <a href=""></a>
                </div>

                <div class="youkebiao">
                    <ul>
                        <li class="kebiao1">我 的 课 程 表</li>
                        <li><a href="">继续学习 程序语言设计<p>正在学习-使用对象</p></a></li>
                        <li><a href="">继续学习 程序语言设计<p>正在学习-使用对象</p></a></li>
                        <li><a href="">继续学习 程序语言设计<p>正在学习-使用对象</p></a></li>
                        <li style="border-bottom: none; box-shadow: none;"><button>全部课程</button></li>
                    </ul>
                </div>
              
             </div>  
         </div>

         <div class="centerdown">
            <div class="cdyou">
                <a href="">修改兴趣</a>
            </div>

             <div class="cdzuo">
                <a href="">精品推荐</a>
                <span>|</span>
                <a href="">JQuery</a>
                <span>|</span>
                <a href="">Spark</a>
                <span>|</span>
                <a href="">MySQl</a>
                <span>|</span>
                <a href="">JavaWe</a>
                <span>|</span>
                <a href="">MySQl</a>
                <span>|</span>
                <a href="">数据库</a>
            </div>
         </div>

         <h4>精品推荐</h4>

         <div class="fa">
                 
            <div style="margin-left: 0;" class="imgconter">
                <a href="#"><img src="学成在线图片/图层133.png" alt=""></a>
                <p>Think PHP 5.0博客系统实战项目演练</p>
                <span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span>
                <!-- <span ><li style=" list-style: square;">1125人在学习</li></span> -->
            </div>

            <div class="imgconter">
                <a href=""><img src="学成在线图片/图层135.png" alt=""></a>
                <p>Think PHP 5.0博客系统实战项目演练</p>
                <span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span>

            </div>

            <div class="imgconter">
                <a href=""><img src="学成在线图片/图层136.png" alt=""></a>
                <p>Think PHP 5.0博客系统实战项目演练</p>
                <span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span>

            </div>

            <div class="imgconter">
                <a href=""><img src="学成在线图片/图层133.png" alt=""></a>
                <p>Think PHP 5.0博客系统实战项目演练</p>
                <span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span>

            </div>
            <div class="imgconter">
                <a href=""><img src="学成在线图片/图层137.png" alt=""></a>
                <p>Think PHP 5.0博客系统实战项目演练</p>
                <span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span>

            </div>
            </div>
            
<div class="fa1">
            <div style="margin-left: 0;" class="imgconter">
                <a href="#"><img src="学成在线图片/图层133.png" alt=""></a>
                <p>Think PHP 5.0博客系统实战项目演练</p>
                <span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span>
                <!-- <span ><li style=" list-style: square;">1125人在学习</li></span> -->
            </div>

            <div  class="imgconter">
                <a href=""><img src="学成在线图片/图层135.png" alt=""></a>
                <p>Think PHP 5.0博客系统实战项目演练</p>
                <span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span>

            </div>

            <div  class="imgconter">
                <a href=""><img src="学成在线图片/图层136.png" alt=""></a>
                <p>Think PHP 5.0博客系统实战项目演练</p>
                <span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span>

            </div>

            <div  class="imgconter">
                <a href=""><img src="学成在线图片/图层133.png" alt=""></a>
                <p>Think PHP 5.0博客系统实战项目演练</p>
                <span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span>

            </div>
            <div  class="imgconter">
                <a href=""><img src="学成在线图片/图层137.png" alt=""></a>
                <p>Think PHP 5.0博客系统实战项目演练</p>
                <span class="gaoji"><a href="">高级</a> <li style=" display: inline-block; list-style: square;">1125人在学习</li></span>

            </div>
     
        </div>

     </div>
     
 </body>
 </html>