html制作练习

最新推荐文章于 2023-03-07 11:22:03 发布

@玉面小蛟龙

最新推荐文章于 2023-03-07 11:22:03 发布

阅读量227

点赞数

分类专栏： html 文章标签： css html

本文链接：https://blog.csdn.net/qq_43610614/article/details/111603768

版权

html 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

这是一个关于保尔科技的网站设计示例。页面包括头部导航、课程介绍、学员作品、优势介绍、混合开发高薪就业信息、合作企业展示以及报名入口。设计采用了响应式布局，展示了Android、H5和UI等专业课程，并详细列举了9大优势。整体风格简洁，色彩鲜明，旨在吸引潜在学员并提供清晰的课程信息。

摘要由CSDN通过智能技术生成

文章目录

效果图

还存在一些错误
在这里插入图片描述

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保尔科技</title>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <header id="head">
            <div>
                <img src="images/1顶部head/line.png" alt="">
                <img src="images/1顶部head/logo.png" alt=""> 
            </div>
            <div>
                <div>
                 <p>HTNL5+PHP、Android+JAVA、UID+HTML5<br>
                <混合式开发培训大牛级团队，专注教育品质</p>   
                </div>
                <div>
                    <img src="images/1顶部head/line.png" alt="">
                    <p>我要报名</p>
                </div>
            </div>
            <div>
                <img src="images/1顶部head/icon_phone.png" alt="">
                <p>0311-8886-7618</p>
            </div>
        </header>
        <nav id="nav">
            <li>首页</li>
            <li>产品介绍</li>
            <li>免费视频</li>
            <li>作品展示</li>
            <li>关于保尔</li>
        </nav>
        <div id="banner">
            <img src="images/2banner/banner.png" alt="" width="1000px">
        </div>
        <div id="article1">
           <p>量身打造<span>专业课程</span></p>
           <p>以基础开始&nbsp;&nbsp;培训兴趣&nbsp;&nbsp;发扬学生个性</p>
           <p></p>
           <div class="article1_div">
               <div>
                   <img src="images/3.3大课程/Android.png" alt="">
               </div>
               <div>
                   <img src="images/3.3大课程/H5.png" alt="">
               </div>
               <div>
                   <img src="images/3.3大课程/UI.png" alt="">
               </div>
           </div>
        </div>
        <div id="article2">
            <p>学员作品<span>精美案例</span></p>
            <p>真实企业项目&nbsp;让学员不再没有哦工作经验</p>
            <p></p>
            <img src="images/4精美案例/1.png" alt="" width="250px">
            <img src="images/4精美案例/2.png" alt="" width="250px">
            <img src="images/4精美案例/3.png" alt="" width="250px">
        </div>
        <div id="article3">
            <!-- <p><span></span></p> -->
            <div>
                <p><span>九大优势</span>保驾护航</p>
                <p>就业无忧&nbsp;技术为王</p>
            </div>
            <div>
                <div>
                    <img src="images/5.9大优势/shizi.png" alt="" width="50px"> 
                </div>
                 <div>
                        <p>最豪华的师资阵容</p>
                        <hr>
                        <p>1111111111111111
                            1111111111111111
                            1111111111111111
                            1111111111111111
                        </p>
                </div> 
            </div>
            <div>
                <div>
                    <img src="images/5.9大优势/shizi.png" alt="" width="50px"> 
                </div>
                 <div>
                        <p>最豪华的师资阵容</p>
                        <hr>
                        <p>1111111111111111
                            1111111111111111
                            1111111111111111
                            1111111111111111
                        </p>
                </div> 
            </div>
            <div>
                <div>
                    <img src="images/5.9大优势/shizi.png" alt="" width="50px"> 
                </div>
                 <div>
                        <p>最豪华的师资阵容</p>
                        <hr>
                        <p>1111111111111111
                            1111111111111111
                            1111111111111111
                            1111111111111111
                        </p>
                </div> 
            </div>
            <div>
                <div>
                    <img src="images/5.9大优势/shizi.png" alt="" width="50px"> 
                </div>
                 <div>
                        <p>最豪华的师资阵容</p>
                        <hr>
                        <p>1111111111111111
                            1111111111111111
                            1111111111111111
                            1111111111111111
                        </p>
                </div> 
            </div>
            <div>
                <div>
                    <img src="images/5.9大优势/shizi.png" alt="" width="50px"> 
                </div>
                 <div>
                        <p>最豪华的师资阵容</p>
                        <hr>
                        <p>1111111111111111
                            1111111111111111
                            1111111111111111
                            1111111111111111
                        </p>
                </div> 
            </div>
            <div>
                <div>
                    <img src="images/5.9大优势/shizi.png" alt="" width="50px"> 
                </div>
                 <div>
                        <p>最豪华的师资阵容</p>
                        <hr>
                        <p>1111111111111111
                            1111111111111111
                            1111111111111111
                            1111111111111111
                        </p>
                </div> 
            </div>
            <div>
                <div>
                    <img src="images/5.9大优势/shizi.png" alt="" width="50px"> 
                </div>
                 <div>
                        <p>最豪华的师资阵容</p>
                        <hr>
                        <p>1111111111111111
                            1111111111111111
                            1111111111111111
                            1111111111111111
                        </p>
                </div> 
            </div>
            <div>
                <div>
                    <img src="images/5.9大优势/shizi.png" alt="" width="50px"> 
                </div>
                 <div>
                        <p>最豪华的师资阵容</p>
                        <hr>
                        <p>1111111111111111
                            1111111111111111
                            1111111111111111
                            1111111111111111
                        </p>
                </div> 
            </div>
            <div>
                <div>
                    <img src="images/5.9大优势/shizi.png" alt="" width="50px"> 
                </div>
                 <div>
                        <p>最豪华的师资阵容</p>
                        <hr>
                        <p>1111111111111111
                            1111111111111111
                            1111111111111111
                            1111111111111111
                        </p>
                </div> 
            </div>
        </div>
        <div id="article4">
            <div>
                <p><span>混合开发</span>高薪就业</p>
                <p>4个月的作品完胜工作三年的设计师、工程师</p>
                <p>点击咨询</p>
            </div>
            <div>
                <img src="images/6混合开发高薪就业/27'-iMac-(from-left).png" alt="" width="250px">
                <img src="images/6混合开发高薪就业/iMac.png" alt="" width="250px">
                <img src="images/6混合开发高薪就业/27'-iMac-(from-right).png" alt="" width="250px">
            </div>
        </div>
        <div id="article5">
           <p>合作名企</p>
           <p>保尔毕业学员遍布全国各大城市的软件公司、设计公司</p>
           <img src="images/7合作企业/hezuoqiye.png" alt="" width="800px">
        </div>
        <div id="article6">
          <p>想加入设计师，工程师高薪行业吗？</p>
            <p>梦想经不起等待，现在就<span>行动&nbsp;!</span></p>
            <p>我要报名</p>
        </div>
        <footer id="footer">
            <div>
                <p>咨询电话</p>
                <p>0311-8886-7618</p>
            </div>
            <div>
                <p>首页&nbsp;&nbsp;|&nbsp;&nbsp;课程体系&nbsp;&nbsp;|&nbsp;&nbsp;免费视频&nbsp;&nbsp;|&nbsp;&nbsp;学员作品&nbsp;&nbsp;|&nbsp;&nbsp;关于保尔</p>
                <p>11111111111111111111111111</p>
                <p>11111111111111111111</p>
                <p>11111111111111111111111111</p>
            </div>
            <div>
                <img src="images/8二维码/QQ.png" alt="" width="80px">
                <img src="images/8二维码/weibo.png" alt="" width="80px">
            </div>
        </footer>
    </div>
</body>
</html>

css代码

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
#container{
    width:100opx;
    margin:0 auto;
}
#head{
    width: 1000px;
    height: 90px;
    background-image:url("images/1顶部head/background.png");
    margin: 0 auto;
}
#head div:nth-child(1){
    height: 100%;
    width: 250px;
    float: left;
 /* background-color:brown;  */
}

#head div:nth-child(1) img{
    float: right;
}
#head div:nth-child(1) img:nth-child(1){
     margin-top: 30px; 
}
#head div:nth-child(1) img:nth-child(2){
    margin-right:10px;
    margin-top: 15px;
}
#head div:nth-child(2){
    width: 500px;
    height: 100%;
    /* background-color:yellow; */
    float: left;
}
#head div:nth-child(2) div:first-child{
    width: 350px;
    height: 100%;
    /* background-color: teal; */
    font-size: 10px;
}
#head div:nth-child(2) div:first-child p{
    margin-left: 10px;
    margin-top: 25px;
    color: white;
}
#head div:nth-child(2) div:last-child{
    width: 150px;
    height: 100%;
    /* background-color: teal;  */
    font-size: 15px;
    float:right
}
#head div:nth-child(2) div:last-child p{
    color: white;
    float: right;
    margin-top: 35px;
    margin-right: 20px;
}
#head div:nth-child(2) div:last-child img{
    margin-right: 0px;
    float: right;
    margin-top: 30px;
}
#head div:nth-child(3){
    width: 250px;
    height: 100%;
    /* background-color: rgb(89, 42, 165); */
    float: left;
    font-size: 20px;
}
#head div:nth-child(3) img{
    margin-top: 30px;
    margin-left: 10px;
    float: left;
}
#head div:nth-child(3) p{
    margin-top: 30px;
    margin-left: 50px;
    color: white;
}
#nav{
    width: 1000px;
    height: 50px;
    margin:0 auto;
    /* background:#ccc; */
}
#nav li{
    list-style: none;
    text-align: center;
    width: 150px;
    height: 100%;
    float: left;
    background-color:white;
    text-align: center;
    /* margin-left: 50px; */
    font-size: 20px;
    font-weight: 200;
    line-height:50px;
}
#nav li:hover{
    cursor: pointer;
    background:#106BB2;
}
#nav li:first-child{
    background-color:#106BB2;
    margin-left: 12%;
}
#nav li:last-child{
    margin-right: 12%;
}
#banner{
    width: 1000px;
    height: 300px;
    /* background-color: thistle; */
    margin: 0 auto;
    /* background-image: url("images/2banner/banner.png"); */
}
#article1{
    width: 1000px;
    height: 450px;
    background-color: #FFFFFF;
    margin: 0 auto;
}
#article1 p:first-child{
    margin-top: 50px;
    font-size: 30px;
    text-align: center;
}
#article1 p:nth-child(2){
    margin-top: 10px;
    font-size: 10px;
    margin-bottom: 10px;
    text-align: center;
}
#article1 p:first-child span{
    color: #0D68B0;
}
.article1_div{
    float: left;
    width: 1000px;
    height: 300px;
    /* background-color:yellow; */
    margin: 0 auto; 
    margin-top: 20px;
}
.article1_div div:nth-child(1){
    float: left;
    width: 200px;
    height: 200px;
    background-color:#EFF4F8;
    margin: 0 auto; 
    margin-top: 50px;
    margin-left: 100px;
    border: 2px solid #ccc;
    border-radius: 5%;
}
.article1_div div:nth-child(1) img{
    margin: 0 auto;
    position: relative;
    margin-left: 70px;
    margin-top: -35px;
}
.article1_div div:nth-child(2){
    float: left;
    width: 200px;
    height: 200px;
    margin-left: 30px;
    background-color:#EFF4F8;
    margin: 0 auto; 
    margin-top: 50px;
    margin-left: 100px;
    border: 2px solid #ccc;
    border-radius: 5%;
}
.article1_div div:nth-child(2) img{
    margin: 0 auto;
    position: relative;
    margin-left: 70px;
    margin-top: -35px;
}
.article1_div div:nth-child(3){
    float: left;
    width: 200px;
    height: 200px;
    margin-left: 20px;
    background-color:#EFF4F8;
    margin: 0 auto; 
    margin-top: 50px;
    margin-left: 100px;
    border: 2px solid #ccc;
    border-radius: 5%;
}
.article1_div div:nth-child(3) img{
    margin: 0 auto;
    position: relative;
    margin-left: 70px;
    margin-top: -35px;
}
#article2{
    width: 1000px;
    height: 400px;
    background-color: #EFF4F8;
    margin: 0 auto;
}
#article2 p:first-child{
    margin-top: 50px;
    font-size: 30px;
    text-align: center;
}
#article2 p:nth-child(2){
    margin-top: 10px;
    font-size: 10px;
    margin-bottom: 10px;
    text-align: center;
}
#article2 p:first-child span{
    color: #0D68B0;
}
#article2 img{
    margin-top: 20px;
    margin-left: 60px;
}
#article3{
    width:1000px;
    height:800px;
    /* border:1px solid #ccc; */
    display:flex;
    justify-content:flex-start ;
    /* flex-direction:row;
    flex-wrap:wrap; */
     flex-flow:row wrap;
/* 	align-items:baseline; */
    align-content:space-between;
    margin: 0 auto;
}
#article3 div{
    width:250px;
    margin-top: 10px;
    height: 200px;
} 
#article3 div:nth-child(3n){
    margin-left: 10px;
    margin-right: 10px;
} 
#article3 div:first-child{
    width: 1000px;
    height: 130px;
    /* background-color: aqua; */
    margin-top: 0px;
}
#article3 div:first-child p:first-child{
    margin-top: 50px;
    font-size: 30px;
    text-align: center;
}
#article3 div:first-child p:nth-child(2){
    margin-top: 10px;
    font-size: 10px;
    margin-bottom: 10px;
    text-align: center;
}
#article3 div:first-child p:first-child span{
    color: #0D68B0;
}
#article3 div:nth-child(2){
    margin-top: 30px;
    /* background:yellow; */
    margin-left: 100px;
}
#article3 div:nth-child(2) div:first-child{
    width: 80px;
    height: 100%;
    /* background-color: red; */
    float: left;
}
#article3 div:nth-child(2) div:first-child img{ 
    margin-left: 20px;
    margin-top: 10px;
}
#article3 div:nth-child(2) div:last-child{
    width: 170px;
    height: 100%;
    /* background-color: green; */
    margin-left: 0px;
    margin-top: 0px;
    float: left;
}
#article3 div:nth-child(3){
    margin-top: 30px;
    /* background:blue; */
    /* margin-top:20px; */
    /* margin-left: 100px; */
}
#article3 div:nth-child(3) div:first-child{
    width: 80px;
    height: 100%;
    /* background-color: red; */
    float: left;
}
#article3 div:nth-child(3) div:first-child img{ 
    margin-left: 20px;
    margin-top: 10px;
}
#article3 div:nth-child(3) div:last-child{
    width: 170px;
    height: 100%;
    /* background-color: green; */
    margin-left: 0px;
    margin-top: 0px;
    float: left;
}
#article3 div:nth-child(4){
    margin-top: 30px;
    /* padding-top:40px; */
    /* background:green; */
    /* margin-left: 100px; */
}
#article3 div:nth-child(4) div:first-child{
    width: 80px;
    height: 100%;
    /* background-color: red; */
    float: left;
}
#article3 div:nth-child(4) div:first-child img{ 
    margin-left: 20px;
    margin-top: 10px;
}
#article3 div:nth-child(4) div:last-child{
    width: 170px;
    height: 100%;
    /* background-color: green; */
    margin-left: 0px;
    margin-top: 0px;
    float: left;
}
#article3 div:nth-child(5){
    /* background:orange; */
    margin-left: 100px;
}
#article3 div:nth-child(5) div:first-child{
    width: 80px;
    height: 100%;
    /* background-color: red; */
    float: left;
}
#article3 div:nth-child(5) div:first-child img{ 
    margin-left: 20px;
    margin-top: 10px;
}
#article3 div:nth-child(5) div:last-child{
    width: 170px;
    height: 100%;
    /* background-color: green; */
    margin-left: 0px;
    margin-top: 0px;
    float: left;
}
#article3 div:nth-child(6){
    /* background:orange; */
}
#article3 div:nth-child(6) div:first-child{
    width: 80px;
    height: 100%;
    /* background-color: red; */
    float: left;
}
#article3 div:nth-child(6) div:first-child img{ 
    margin-left: 20px;
    margin-top: 10px;
}
#article3 div:nth-child(6) div:last-child{
    width: 170px;
    height: 100%;
    /* background-color: green; */
    margin-left: 0px;
    margin-top: 0px;
    float: left;
}
#article3 div:nth-child(7){
    /* background:orange; */
}
#article3 div:nth-child(7) div:first-child{
    width: 80px;
    height: 100%;
    /* background-color: red; */
    float: left;
}
#article3 div:nth-child(7) div:first-child img{ 
    margin-left: 20px;
    margin-top: 10px;
}
#article3 div:nth-child(7) div:last-child{
    width: 170px;
    height: 100%;
    /* background-color: green; */
    margin-left: 0px;
    margin-top: 0px;
    float: left;
}
#article3 div:nth-child(8){
    /* background:orange; */
    margin-left: 100px;
    margin-bottom: 10px;
    
}
#article3 div:nth-child(8) div:first-child{
    width: 80px;
    height: 100%;
    /* background-color: red; */
    float: left;
}
#article3 div:nth-child(8) div:first-child img{ 
    margin-left: 20px;
    margin-top: 10px;
}
#article3 div:nth-child(8) div:last-child{
    width: 170px;
    height: 100%;
    /* background-color: green; */
    margin-left: 0px;
    margin-top: 0px;
    float: left;
}
#article3 div:nth-child(9){
    /* background:orange; */
    margin-bottom: 10px;
}
#article3 div:nth-child(9) div:first-child{
    width: 80px;
    height: 100%;
    /* background-color: red; */
    float: left;
}
#article3 div:nth-child(9) div:first-child img{ 
    margin-left: 20px;
    margin-top: 10px;
}
#article3 div:nth-child(9) div:last-child{
    width: 170px;
    height: 100%;
    /* background-color: green; */
    margin-left: 0px;
    margin-top: 0px;
    float: left;
}
#article3 div:nth-child(10){
    /* background:orange; */
    margin-bottom: 10px;
}
#article3 div:nth-child(10) div:first-child{
    width: 80px;
    height: 100%;
    /* background-color: red; */
    float: left;
}
#article3 div:nth-child(10) div:first-child img{ 
    margin-left: 20px;
    margin-top: 10px;
}
#article3 div:nth-child(10) div:last-child{
    width: 170px;
    height: 100%;
    /* background-color: green; */
    margin-left: 0px;
    margin-top: 0px;
    float: left;
}
#article4{
    width: 1000px;
    height: 500px;
    background-color:#79ABE8;
    margin: 0 auto;
    background-image: url("images/6混合开发高薪就业/background.png"); 
    background-size:100% 100%;
}
#article4 div:first-child{
    width: 1000px;
    height: 150px;
    float: left;
    /* background-color: blue;  */
}
#article4 div:last-child{
    width: 1000px;
    height: 350px;
     /* background-color:red;  */
     float: left;
}

#article4 div:first-child p:first-child{
    margin-top: 20px; 
    font-size: 30px;
    text-align: center;
    color: white;
}
#article4 div:first-child p:nth-child(2){
    /* margin-top: 10px; */
    font-size: 10px;
    /* margin-bottom: 10px; */
    text-align: center;
    color: white;
}
#article4 div:first-child p:last-child{
    margin-top: 40px; 
    margin-left: 430px;
    /* margin-bottom: 10px; */
    text-align: center;
    color: white;
    background-color: #20C1F7;
    width: 150px;
    height: 50px;
    line-height: 50px;
    /* background-image: url("images/7我要报名/btn_selected.png"); */
    border-radius: 5%;
}
#article4 div:first-child p:first-child span{
    color: #0D68B0;
}
#article4 div:last-child img{
    margin-top: 50px;
}
#article4 div:last-child img:first-child{
    margin-left: 120px;
}
#article5{
    width: 1000px;
    height: 300px;
    /* background-color: rgb(109, 75, 96); */
    margin: 0 auto;
}
#article5 p:first-child{
    margin-top: 50px;
    font-size: 30px;
    text-align: center;
    color: #0D68B0;
}
#article5 p:nth-child(2){
    margin-top: 10px;
    font-size: 10px;
    margin-bottom: 10px;
    text-align: center;
}
#article5 img{
    margin-top: 30px;
    margin-left: 100px;
}
#article6{
    width: 1000px;
    height: 250px;
    background-color: rgb(22, 66, 77);
    margin: 0 auto;
    background-image: url("images/7我要报名/backgroundaaa.png");
    padding-top: 30px; 
}
#article6 p:first-child{
    font-size: 30px;
    text-align: center;
    color: white;
}
#article6 p:nth-child(2){
    margin-top: 30px;
    font-size: 30px;
    margin-bottom: 10px;
    text-align: center;
    color: white;
}
#article6 p:last-child{
    width: 150px;
    height: 50px;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    color:white;
    background-color:#21C1F8; 
    margin-left: 430px;
    margin-top: 50px;
    /* background-image: url("images/7我要报名/btn_selected.png"); */
    border-radius: 5%;
}
#article6 p:last-child:hover{
    cursor: pointer;
    background:#FDCB2C;
}
#article6 span{
    color: #1BBFF1;
    font-size: 35px;
}
#footer{
    width: 1000px;
    height: 250px;
    background-color: #2F383D;
    margin: 0 auto;
}
#footer div{
    float: left;
}
#footer div:first-child{
    width: 300px;
    height: 250px;
    /* background-color: yellow;  */
    color: white;

}
#footer div:first-child p{
    float: left;
    margin-left: 50px;
    margin-top: 80px;
}
#footer div:first-child p:last-child{
    font-size: 30px;
    margin-top: 0px;
}
#footer div:nth-child(2){
    width:400px;
    height: 250px;
    /* background-color: red; */
    float: left;
    color: white;
    text-align: center;
}
#footer div:nth-child(2) p:first-child{
    margin-top: 80px;
    margin-bottom: 40px;
}
#footer div:last-child{
    width: 300px;
    height: 250px;
    /* background-color: blue; */
    float: left;
    color: white;
}
#footer div:last-child img{
    margin-top: 80px;
    float: left;
    margin-left: 30px;
}

图片

无

整个文件

链接：link

@玉面小蛟龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html制作练习

文章目录效果图html代码css代码图片整个文件效果图还存在一些错误html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>保尔科技</title>
复制链接

扫一扫