前端练手项目

最新推荐文章于 2024-05-02 13:46:30 发布

lmd666

最新推荐文章于 2024-05-02 13:46:30 发布

阅读量3.4k

点赞数 15

文章标签： html5 css

本文链接：https://blog.csdn.net/lmd666/article/details/106738532

版权

9月份就要秋招了，赶紧抓紧时间写几个小项目，练练手。话不多说，先上效果图。

第一部分

第二部分

第三部分

效果图演示完毕，下面上代码

html代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>学成在线</title>
       <link rel="stylesheet" href="css/1.css" />
   </head>
   <body>
       <div class="header main">
           <div class="log">
               <img src="img/log.png"/ alt="我是一个logo">
           </div>
           <div class="nav">
               <ul>
                   <li><a href="#">首页</a></li>
                   <li><a href="#">课程</a></li>
                   <li><a href="#">职业规划</a></li>
               </ul>
           </div>
           <div class="research">
               <input type="text" value="请输入关键词" />
               <button>搜索</button>
           </div>

       </div>
       
<div class="banner ">
   <div class="main">
       <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="#">UI设计<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>
                           <a href="#" class="more">全部课程</a>
                       </ul>
                   </div>
               </div>
   </div>


</div>
<div class="goods main">
   <h3>精品推荐</h3>
   <ul>
       <li><a href="#">Jquery</a></li>
       <li><a href="#">Jquery</a></li>
       <li><a href="#">Jquery</a></li>
       <li><a href="#">Jquery</a></li>
       <li><a href="#">Jquery</a></li>
       <li><a href="#">Jquery</a></li>
       <li><a href="#">Jquery</a></li>

   </ul>
   <a class="mod">修改爱好</a>
</div>
<div class="box">
   <div class="box-hd main">
       <h3>精品推荐</h3>
       <a href="#">查看更多</a>
   </div>
   <div class="box-bd main">
       <ul>
           <li>
               <img src="img/pic.jpg" />
               <h4>ThinkPHP5.0博客系统实战</h4>
               <div class="info">
               <span>高级.</span>1122正在学习
               </div>
           </li>
           <li>
               <img src="img/pic.jpg" />
               <h4>ThinkPHP5.0博客系统实战</h4>
               <div class="info">
               <span>高级.</span>1122正在学习
               </div>
           </li>
           <li>
               <img src="img/pic.jpg" />
               <h4>ThinkPHP5.0博客系统实战</h4>
               <div class="info">
               <span>高级.</span>1122正在学习
               </div>
           </li>
           <li>
               <img src="img/pic.jpg" />
               <h4>ThinkPHP5.0博客系统实战</h4>
               <div class="info">
               <span>高级.</span>1122正在学习
               </div>
           </li>
           <li>
               <img src="img/pic.jpg" />
               <h4>ThinkPHP5.0博客系统实战</h4>
               <div class="info">
               <span>高级.</span>1122正在学习
               </div>
           </li>
           <li>
               <img src="img/pic.jpg" />
               <h4>ThinkPHP5.0博客系统实战</h4>
               <div class="info">
               <span>高级.</span>1122正在学习
               </div>
           </li>
           <li>
               <img src="img/pic.jpg" />
               <h4>ThinkPHP5.0博客系统实战</h4>
               <div class="info">
               <span>高级.</span>1122正在学习
               </div>
           </li>
           <li>
               <img src="img/pic.jpg" />
               <h4>ThinkPHP5.0博客系统实战</h4>
               <div class="info">
               <span>高级.</span>1122正在学习
               </div>
           </li>
           <li>
               <img src="img/pic.jpg" />
               <h4>ThinkPHP5.0博客系统实战</h4>
               <div class="info">
               <span>高级.</span>1122正在学习
               </div>
           </li>
           <li>
               <img src="img/pic.jpg" />
               <h4>ThinkPHP5.0博客系统实战</h4>
               <div class="info">
               <span>高级.</span>1122正在学习
               </div>
           </li>
       </ul>
   </div>
</div>
<div class="footer">
   <div class="main">
       <div class="left">
           <img src="img/log.png" />
           <p>终于要做完了<br>hhh</p>
           <a href="#" class="app">下载app</a>
       </div>
       <div class="right">
           <dl>
               <dt>关于学成网</dt>
               <dd><a href="#">1</a></dd>
               <dd><a href="#">2</a></dd>
               <dd><a href="#">3</a></dd>
               <dd><a href="#">4</a></dd>
           </dl>
           <dl>
               <dt>关于学成网</dt>
               <dd><a href="#">1</a></dd>
               <dd><a href="#">2</a></dd>
               <dd><a href="#">3</a></dd>
               <dd><a href="#">4</a></dd>
           </dl>
           <dl>
               <dt>关于学成网</dt>
               <dd><a href="#">1</a></dd>
               <dd><a href="#">2</a></dd>
               <dd><a href="#">3</a></dd>
               <dd><a href="#">4</a></dd>
           </dl>
       </div>
   </div>
</div>
   </body>
</html>

css代码

*{
   padding:0;
   margin: 0;
}
li{
   list-style: none;
}
a{
   text-decoration: none;
}
.main{
   width: 1200px;
   margin: 30px auto;

}
body{
   background-color: #f3f5f7;
}
.header{
   height: 42px;
   margin 30px auto;
}
.log{
   float: left;
   width: 198px;
   height:42px;

}
.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: #050505;
}
.nav li a:hover{
   border-bottom: 2px solid #00a4ff;
   color: #00a4ff;
}
.research{
   float: left;
   width: 412px;
   height: 42px;
margin-left: 50px;
background-color: #00a4ff;
}
.research input{
   float: left;
   width: 345px;
   height: 40px;
   border: 1px solid #00A4FF;
   border-right: none;
   font-size: 14px;
   color: #bfbfbf;
   padding-left: 15px;
}
.research button{
   float: left;
   width: 50px;
   height: 42px;
   background-image: ;
   border: none;
   background-color: #00A4FF;
}
/*banner的样式开始了*/
.banner{
   height: 421px;
   background-color:#1c036c ;
}
.banner .main{
   height: 421px;
   background:url(../img/banner2.png) no-repeat top center;
}
.subnav{
   float: left;
   height: 421px;
   width: 190px;
   background-color: rgb(0,0,0,0.3);
}
.subnav ul li a{
   font-size: 14px;
   color: white;
}
.subnav ul li {
   height: 45px;
   line-height: 45px;
   padding: 0 20px;
}
.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: white;
}
.bd{
   padding: 0 20px;
}
.bd ul li h4{
   font-size: 16px;
   color: #4e4e4e;

}
.bd ul li p{
   font-size: 12px;
   color: #a5a5a5;
}
.bd ul li{
   padding: 14px 0;
   border-bottom: 1px solid #ccc;
}
.bd .more{
   display: block;
   height: 38px;
   border: 1px solid #00A4FF;
   text-align: center;
   line-height: 38px;
   color: #00A4FF;
   font-size: 16px;
   font-weight: 700;
}
.goods{
   height: 60px;
   width: 1140px;
   background-color: #FFF;
   margin-top: 10px;
   padding: 0 30px;
   box-shadow: 0 2px 3px 3px rgb(0,0,0,0.1);
   line-height: 60px;
}
.goods h3{
   float: left;
   font-size: 16px;
   color: #00A4FF;

}

.goods ul li{
   float: left;




}
.goods ul li a{
   padding: 0 30px;
   font-size: 16px;
   color: #050505;
   border-left: 1px solid #CCCCCC;

}
.mod{
   float: right;
   font-size: 14px;
   color: #00A4FF;
}
.box{
   margin-top: 30px;

}
.box-hd{
   height: 45px;
}
.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 ;
   overflow: hidden;
}
.box-bd ul li{
   float: left;
   width: 228px;
   height: 270px;
   background-color: #FFFFFF;
   margin-right: 15px;
   margin-bottom: 15px;

}
.box-bd ul li h4{
   margin: 20px 20px 20px 25px;
   font-size: 16px;
   color: #050505;
   font-weight: 400;
}
.box-bd .info{
   margin: 0 20px 0 25px;
   font-size: 12px;
   color: #999;
}
.box-bd .info span{
   color:#ff7c2d ;
}
.footer{
   height: 410px;
   background-color: #FFFFFF;
   }
.footer .main{
   padding-top: 35px;
}
.left{
   float: left;
}
.left p{
   font-size: 12px;
   color: #666;
   margin: 20px 0 15px 0;

}
.left .app{
   display: block;
   width: 118px;
   height: 33px;
   border: 1px solid #00A4FF;
   text-align: center;
   line-height: 33px;
   color: #00A4FF;
   font-size: 16px;
}
.right{
   float: right;
}
.right dl dt{
   font-size: 16px;
   color:#333 ;
   margin-bottom: 5px;
}
.right dl{
   float: left;
   margin-right: 100px;
}
.right dl dd a{
   color: #333;
   font-size: 12px;
}