写了一个的项目(附源码)

最新推荐文章于 2024-07-24 10:40:52 发布

斩杀zhansha

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量94

点赞数 1

分类专栏： html+css 编程文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_67742636/article/details/125018641

版权

html+css 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

编程

14 篇文章 0 订阅

订阅专栏

图片素材来自pink老师前端第七天https://gitee.com/xiaoqiang001/html_css_material/tree/master/%E7%AC%AC%E4%B8%83%E5%A4%A9

我写的代码

<!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>
    <link rel="stylesheet" href="xue.css">
</head>

<body>
    <!-- 导航栏制作 -->
    <div class="nav w">
        <!-- logo部分 -->
        <div class="logo">
            <img src="./images/学成在线.png" alt="">
        </div>
        <!-- 导航栏列表 -->
        <div class="nav2">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索模块 -->
        <div class="search">
            <form action="">
                <!-- type类型为文本框 -->
                <input type="text" name="search" value="输入关键字" class="search1">
                <!-- 设置一个搜索按钮，用button来做 -->
                <button class="serch2">
                    <img src="./images/bg3.png" alt="">
                </button>



            </form>
        </div>
        <!-- 用户名字 -->
        <div class="user">
            养只金毛
        </div>

    </div>
    <!-- 广告区域 -->
    <div class="banner">
        <!-- 广告主体部分 -->
        <div class="bn-body w">
            <div class="nav-list">
                <!-- 用无序列表做的导航栏 -->
                <ul>
                    <li><a href="">后端开发 <span>
                                &lt;
                            </span> </a></li>
                    <li><a href="">移动开发 <span>
                                &lt;
                            </span> </a></li>
                    <li><a href="">人工智能 <span>
                                &lt;
                            </span> </a></li>
                    <li><a href="">商业预测 <span>
                                &lt;
                            </span> </a></li>
                    <li><a href="">前端开发 <span>
                                &lt;
                            </span> </a></li>
                    <li><a href="">云计算&大数据 <span>
                                &lt;
                            </span> </a></li>
                    <li><a href="">运维&从测试 <span>
                                &lt;
                            </span> </a></li>
                    <li><a href="">UI设计 <span>
                                &lt;
                            </span> </a></li>
                    <li><a href="">产品 <span>
                                &lt;
                            </span> </a></li>
                </ul>
                </div>
                <!-- 课程表模块 -->
                <div class="course">
                    <div class="head">
                        <h2>我的课程表</h2>
                        </div>
                    <div class="cou-content">
                       <ul>
                           <li>
            
                               <h4>继续学习，程序语言设计</h4>
                               <p>正在学习-使用对象</p>
                           </li>
                           <li>
                               <h4>继续学习，程序语言设计</h4>
                               <p>正在学习-使用对象</p>
                           </li>
                           <li>
                               <h4>继续学习，程序语言设计</h4>
                               <p>正在学习-使用对象</p>
                           </li>
                           <li>
                               
                           </li>
                       </ul>
                     <a href="#">全部课程</a>
                    </div>
                
            </div>
            </div>
            
            
        </div>

        <!-- 精品推荐模块推荐 -->
        <div class="offer  w">
          
            
                <h3>精品推荐</h3>   
                <ul>
                    <li><a href="#">Jquery</a></li>
                    <li><a href="#">Python</a></li>
                    <li><a href="#">Java</a></li>
                    <li><a href="#">Mysql</a></li>
                    <li><a href="#">JAvascript</a></li>
                    <li><a href="#">PHP</a></li>
                    
                </ul>
                <div class="of-right">
                    修改兴趣
                </div>
        </div>

        <!-- box核心内容开始 -->
        <div class="box w">
            <div class="box-hd">
                <h3>精品推荐</h3>
                <a href="">全部课程</a>
            </div>
            <!-- 盒子内容区域 -->
            <div class="box-bd">
                <ul>
                    <li>
                        <img src="./images/bg8.jpg" alt="" style="width: 100%;">
                        <h4>think PHP 实战项目演练之prin“hellowod”</h4>
                        <div class="info"><span>高级</span>·0人正在学习</div>
                    </li>
                    <li>
                        <img src="./images/bg8.jpg" alt="" style="width: 100%;">
                        <h4>think PHP 实战项目演练之prin“hellowod”</h4>
                        <div class="info"><span>高级</span>·0人正在学习</div>
                    </li>
                    <li>
                        <img src="./images/bg8.jpg" alt="" style="width: 100%;">
                        <h4>think PHP 实战项目演练之prin“hellowod”</h4>
                        <div class="info"><span>高级</span>·0人正在学习</div>
                    </li>
                    <li>
                        <img src="./images/bg8.jpg" alt="" style="width: 100%;">
                        <h4>think PHP 实战项目演练之prin“hellowod”</h4>
                        <div class="info"><span>高级</span>·0人正在学习</div>
                    </li>
                    <li>
                        <img src="./images/bg8.jpg" alt="" style="width: 100%;">
                        <h4>think PHP 实战项目演练之prin“hellowod”</h4>
                        <div class="info"><span>高级</span>·0人正在学习</div>
                    </li>
                    <li>
                        <img src="./images/bg8.jpg" alt="" style="width: 100%;">
                        <h4>think PHP 实战项目演练之prin“hellowod”</h4>
                        <div class="info"><span>高级</span>·0人正在学习</div>
                    </li>
                    <li>
                        <img src="./images/bg8.jpg" alt="" style="width: 100%;">
                        <h4>think PHP 实战项目演练之prin“hellowod”</h4>
                        <div class="info"><span>高级</span>·0人正在学习</div>
                    </li>
                    <li>
                        <img src="./images/bg8.jpg" alt="" style="width: 100%;">
                        <h4>think PHP 实战项目演练之prin“hellowod”</h4>
                        <div class="info"><span>高级</span>·0人正在学习</div>
                    </li>
                    <li>
                        <img src="./images/bg8.jpg" alt="" style="width: 100%;">
                        <h4>think PHP 实战项目演练之prin“hellowod”</h4>
                        <div class="info"><span>高级</span>·0人正在学习</div>
                    </li>
                    <li>
                        <img src="./images/bg8.jpg" alt="" style="width: 100%;">
                        <h4>think PHP 实战项目演练之prin“hellowod”</h4>
                        <div class="info"><span>高级</span>·0人正在学习</div>
                    </li>
              <div style="clear: both;"></div>
                </ul>


                
            </div>
        </div>
        <!-- 网页底部 -->
        <div class="footer">
            <div class="w">
                <div class="no1">
                    <img src="./images/学成在线.png" alt="">
                    <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br> © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                    <a href="#">下载app</a>
                </div>
                <div class="no2">
                    <!-- 用dl自定义列表写的类似关于我们 -->
                    <dl>
                        <dt>合作伙伴</dt>
                        <dd><a href="">关于工作</a></dd>
                        <dd><a href="">关于合租</a></dd>
                        <dd><a href="">关于活着</a></dd>
                        <dd><a href="">关于我们来了就想走的企业</a></dd>
                        <dd><a href="">关于我们这个垃圾企业</a></dd>
                        <dd><a href="">关于个屁</a></dd>
                        <dd><a href="">关于个屁</a></dd>

                    </dl>
                    <dl>
                        <dt>合作伙伴</dt>
                        <dd><a href="">关于工作</a></dd>
                        <dd><a href="">关于合租</a></dd>
                        <dd><a href="">关于活着</a></dd>
                        <dd><a href="">关于我们来了就想走的企业</a></dd>
                        <dd><a href="">关于我们这个垃圾企业</a></dd>
                        <dd><a href="">关于个屁</a></dd>
                        <dd><a href="">关于个屁</a></dd>

                    </dl>

                    <dl>
                        <dt>合作伙伴</dt>
                        <dd><a href="">关于工作</a></dd>
                        <dd><a href="">关于合租</a></dd>
                        <dd><a href="">关于活着</a></dd>
                        <dd><a href="">关于我们来了就想走的企业</a></dd>
                        <dd><a href="">关于我们这个垃圾企业</a></dd>
                        <dd><a href="">关于个屁</a></dd>
                        <dd><a href="">关于个屁</a></dd>

                    </dl>
                </div>
            </div>
     
        </div>
</body>

</html>

下面是css代码

* {
    margin: 0px;
    padding: 0px;
}
body {
    background-color: #f5f3f7;
}
/* 先确定版心宽度，设置版心默认居中 */
.w {
    width: 1200px;
    margin: 0px auto;
}

.nav {
    height: 42px;
    
    margin: 30px auto;

}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
 .logo {
     float: left;
     width: 195px;
     height: 42px;
     
 }  
 .logo>img {
     
     width: 195px;
     height: 42px;
     
 }
 
 .nav2>ul {
     float: left;
     margin:0px 60px ;
    
 }

 .nav2>ul>li {
     float: left;
     

 }
/* 将a标签 */
 .nav2>ul>li>a {
    display: block;
    line-height: 42px;
    height: 42px;
    font-size: 18px;
    color: #050505;
    
    padding: 0px 10px;
   
 }
 .nav2>ul>li>a:hover {
     color: #18A3FF;
     border-bottom: 2px solid #18A3FF;
 }
 .search {
     float: left;
     background-color: skyblue;
     width: 412px;
     height: 42px;
     
     
 }

 .search1 {
     float: left;
     /* width: 360px; */
     /* 设置padding为15px，由于设置宽高会撑开盒子，将原来设置的360px减去15px */
     padding-left: 15px;
     width: 345px;
     height: 40px;
     border: 1px solid #18A3FF;
     color: #bfbfbf;
     font-size: 14px ;
     border-right: none;
     /* 注意盒子右边框设置什么属性都没有 */
     
 }

button {
    background-color: skyblue;
     width: 50px;
     height: 42px;
     border: 0;
     /* 按钮默认会有个边框，需要我们手动更改 */
     /* 行内块元素会有一个默认的空隙，所以这里要用浮动 */
     

 }

 button>img {
     width: 100%;
     height: 42px;
 }
 
 .user {
     float: left;
     width: 160px;
     height: 42px;
     
     background-image: url(./images/user.png);
     background-repeat: no-repeat;
     background-position: 0px center;
     margin-left: 30px;
     line-height: 42px;
     font-size: 14px;
     /* 给用户名字设置padding不和背景图片重合 */
     padding-left: 40px;
 }

 .banner {
     height: 421px;
     background-color: #1C036B ;
 }
 .bn-body {
     height: 421px;
     background-color: pink;
     background-image: url(./images/bg1.png);
     background-repeat: no-repeat;

 }
 .nav-list {
     float: left;
     width: 190px;
     height: 421px;
     background-color: rgba(0,0,0,0.3);
  
 }
 .nav-list>ul>li>a {
     display: block;
     color: #fff;
     font-size: 14px;
     height: 45px;
    
    
 }
.nav-list>ul>li {
    height: 45px;
    padding: 0px 20px;
    line-height: 45px;
}
.nav-list>ul {
    width: 100%;
    height: 421px;
    
}
/* 将span设置浮动就可以到a标签的右侧了 */
.nav-list>ul>li>a>span {
    float: right;
}

.nav-list>ul>li>a:hover {
    color: #18A3FF;
}

.course {
    float: right ;
    width: 230px;
    height: 300px;
    background-color: #F0F0F0;
    /* 浮动的盒子不会有外边距合并的问题 */
    margin-top: 30px;
}

.course .head h2{
    height: 48px;
    background-color: #9BCEEB;
    line-height: 48px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    
}
.cou-content {
    padding: 0px 20px;
    
}



.cou-content ul li h4 {
    font-size: 16px;
    color: #4e4e4e;
}
.cou-content ul li p {
    font-size: 12px;
    height: #a5a5a5;
}
.cou-content>ul>li {
    padding: 12px 0px;
}

.cou-content a {
    margin-top: 1px;
    display: block;
    height: 38px;
    border: 2px solid #18A3FF ;
    text-align: center;
    line-height: 38px;
    font-size: 16px;
    font-weight: 900;
    color: skyblue;
}

.offer {
    margin-top: 10px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0px 2px 4px 4px rgba(0,0,0,0.1);
    /* 行高会继承给他的子元素 */
    line-height: 60px;
}

.offer >h3,
.offer>ul,
.offer>ul>li
{
float: left;

}
.offer>h3 {
    margin:0px 30px;
    height: 60px;
    
   
    color: #9FDCF9;
    font-size: 16px;
   
}

.of-right {
    float: right;
    margin-right: 30px;
    font-size: 16px;
    color: #00a4ff;
}
.offer>ul>li>a {
    padding: 0px 30px;
    font-size: 16px;
    color: #050505;
    border-left: 1px solid #a5a5a5;
}

.offer>ul>li>a:hover {
    color: #18A3FF;
}
.box {
    margin-top: 30px;
   
}
.box-hd {
    height: 45px;
  
    line-height: 45px;
    
}
.box-hd>h3
{
    float: left;
    font-size: 20px;
    font-weight: 400;
    color: #050505;
}

.box-hd>a {
    font-size: 12px;
    float: right;
    color: #9E9FA1;
   
    margin-right: 30px;


}
/* 把li的父亲的宽度修改的足够宽，能装下
五个盒子就不会换行了 */
.box-bd {
margin-top: 10px;
}
.box-bd>ul>li {
    float: left;
    width: 228px;
    height: 270px;

    margin-right: 15px; 
     margin-bottom: 15px;
}
 .box-bd>ul {
     width: 1225px; 
    
}


.box-bd>ul>li>h4 {
    padding: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
}
.info {
    padding: 0px 20px 0px 25px;
    font-size: 12px;
    color: #999;
}
.info>span {
    color: #ff7c2d;
}

.footer  {
    margin-top: 60px;
    height: 415px;
    
    border: 1px solid transparent;
}

.footer .w {

    margin-top: 35px;
    
}
.no1 {
    float: left;
}
.no2 {
    float: right;
}
.no1>p {
    font-size: 12px;
    color: #666;
    margin: 20px 0px 15px 0px;
}
.no1>a {
    display: block;
    width: 118px;
    height: 33px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 33px;
    color: #00a4ff;
}

.no2>dl>dt {
    font-size: 16px;
    color:#333;
    margin-bottom: 5px;
}
.no2>dl>dd>a {
    color: #333;
    font-size: 12px;
}
.no2>dl {
   
    float: left;
   margin-left: 20px;
}

斩杀zhansha

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
写了一个的项目(附源码)

图片素材来自pink老师前端第七天https://gitee.com/xiaoqiang001/html_css_material/tree/master/%E7%AC%AC%E4%B8%83%E5%A4%A9我写的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"...
复制链接

扫一扫

专栏目录