网页制作过程-从0到1（详细过程）

鱼晚. 已于 2023-11-27 20:50:36 修改
阅读量89 收藏 1
点赞数
文章标签： 前端
于 2023-11-26 00:47:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/m0_62146534/article/details/134608339
版权

网页制作思路

布局思路

先整体再局部，从外到内，从上到下，从左到右

css实现思路

  1. 画盒子，调整盒子范围->宽高背景色
  2. 调整盒子位置->flex布局、内外边距
  3. 控制图片、文字内容样式

 

 header区域——布局

通栏：盒子宽度于浏览器窗口相同

标签结构：通栏>版心>logo+导航+搜索+用户

226bc87f06744de78dd9b41bc5aa295a.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--link标签引入css文件，顺序不能改变，首先使用清除默认样式的css-->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部区域 -->
    <div class="header">
        <div class="wrapper">
            <!-- 该区域应有四个盒子 -->
            <!-- 1、logo -->
            <div class="logo">logo</div>
            <!-- 2、导航 -->
            <div class="nav">nav</div>
            <!-- 3、搜索 -->
            <div class="search">search</div>
            <!-- 4、用户 -->
            <div class="user">user</div>

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

css

/* 实现首页的版心居中，定义一个wrapper类 */
.wrapper{
    margin:0 auto;
    width:1200px;
}

body{
    background-color: #f3f5f7;
}
.header{  /*通栏*/
    height:100px;
    background-color: white;
}
.header .wrapper{    /*版心里四个盒子的排列方式*/
    display: flex;
    padding:29px;
}

header区域——logo

 logo功能·：

  • 单击跳转到首页
  • 搜索引擎优化：提示网站百度搜索排名

实现方法

  • 标签结构：h1>a>网站名称（搜索关键字）
  • css样式： 
    .logo a{
    display: block;
    width:195px;
    height:40px;
    /*把图片作为a标签的链接模式*/
    background-image: url(../images/logo.png);  
    /* 隐藏文字，只要图片作为链接 */
    font-size: 0;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--link标签引入css文件，顺序不能改变，首先使用清除默认样式的css-->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部区域 -->
    <div class="header">
        <div class="wrapper">
            <!-- 该区域应有四个盒子 -->
            <!-- 1、logo -->
            <div class="logo">
                <h1><a href="#">学成在线</a></h1>
            </div>
            <!-- 2、导航 -->
            <div class="nav">nav</div>
            <!-- 3、搜索 -->
            <div class="search">search</div>
            <!-- 4、用户 -->
            <div class="user">user</div>

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

导航制技巧

导航功能 ：实现单击跳页面

实现方法：

  • 标签结构：ul>li*3>a
  • 优势：避免堆砌a标签，网站搜索排名降级
  • 布局思路

        li设置右侧margin

        a设置左右padding（因为点击这个链接的时候，底下有一条线）

6bc90dc181fb4ea3814fa13191eba874.png

 <!-- 2、导航 -->
            <div class="nav">
                <ul><!--首页默认有蓝色底框，在这里给他一个类名以设置样式-->
                    <li><a href="#" class="active">首页</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">职业规划</a></li>
                </ul>
            </div>
/*导航盒子的样式设置*/
.nav{
    padding-left: 102px;

}
.nav ul{
    display: flex;
}
.nav li{
    margin-right: 24px;
}
.nav li a{
    display: block;
    padding:6px 8px;
    line-height: 27px;
    font-size:19px;

}
/* active类选择器，表示默认选择的链接a
这里设置的样式为默认首页和鼠标悬停时的样式 */
.nav li .active,
.nav ul a:hover{
    border-bottom: 2px solid skyblue;
}

search搜索区域

实现方法：

  • 标签结构：.search>input+a/botton 

362f30c04bd84487a42b425bf9e05a73.png

 <!-- 3、搜索 -->
            <div class="search">
                <input type="text" placeholder="请输入关键词">
                <a href="#"></a>
            </div>

/* 搜索区域的css样式 */
.search{
    /* search区域里有输入和搜索两个盒子 */
    display: flex;
    width:412px;
    height: 40px;
    background-color: #f3f5f7;
    border-radius:20px;
    margin-left: 64px;
    padding-left:19px;
    padding-right:12px;
}
.search input{
    flex:1;
    /* 消除输入框的边框 */
    border:0;  
    /* 设置背景颜色为透明 */
    background-color: transparent;
    /* 取消表单控件的焦点框,否则点击输入时还是会出现边框 */
    outline: none;
}
    /* ::placeholder选中就是placeholder属性文字样式 */
.search input::placeholder{
    font-size:14px;
    color:#999;
}
/* 父级是flex布局，故子级变成了弹性盒子，可以设置宽高了 */
.search a{
    width:16px;
    height: 16px;
    background-image: url(../images/search.png);
    /* 放大镜侧轴居中,只控制一个弹性盒子 */
    align-self: center;
    
}

用户区域

 实现方法：

  • 标签结构：.user>a>img（用户头像）+span（与用户名在同一行）
  <!-- 4、用户 -->
            <div class="user">
                <a href="#">
                    <img src="./uploads/user.png" alt="">
                    <span>小白学前端</span>
                </a>
            </div>
.user{
    margin-left:32px;
    margin-top: 4px;
    
}
.user img{
    /* 设置图片与文字的右边距 */
    margin-right: 7px;
    /* vertical-align用于调整行内块和行内垂直方向对齐方式 */
    vertical-align: middle;
}
.user span{
    font-size: 16px;
    color:#666;
}

4af9874c341643f99dd885870170f17d.png

banner区域——布局

结构：通栏->版心->左盒子+右盒子

2c016f47c0414d828004a62a861cdf6c.png

    <!-- banner区域 -->
    <div class="banner">
        <div class="wrapper">
            <div class="left">1</div>
            <div class="right">2</div>
        </div>
    </div>
/* banner区域 */
.banner{
    height: 420px;
    background-color: #0092cb;
}

/*banner版心区域*/
.banner .wrapper{
    /*左右盒子的排列方式*/
    display: flex;
    justify-content: space-between;
    height: 420px;
    /*版心背景图片*/
    background-image: url(../uploads/banner.png);
}

左侧盒子导航栏

实现方法

  • 标签结构：.left>ul>li*9>a
  • 布局思路：a默认状态（背景图为白色右箭头）

<!-- banner区域 -->
    <div class="banner">
        <div class="wrapper">
            <div class="left">
                <ul>
                    <li><a href="#">前端开发</a></li>
                    <li><a href="#">后端开发</a></li>
                    <li><a href="#">移动开发</a></li>
                    <li><a href="#">人工智能</a></li>
                    <li><a href="#">商业预测</a></li>
                    <li><a href="#">云计算&大数据</a></li>
                    <li><a href="#">运维&测试</a></li>
                    <li><a href="#">UI设计</a></li>
                    <li><a href="#">产品</a></li>
                   
                </ul>
            </div>

/* banner区域 */
.banner{
    height: 420px;
    background-color: #0092cb;
}
/*banner的版心区域*/
.banner .wrapper{
    display: flex;
    justify-content: space-between;
    height: 420px;
    background-image: url(../uploads/banner.png);
}
/* 左盒子 */
.banner .left{
    /* 内边距 */
    padding: 3px 20px;
    width: 191px;
    height: 420px;
    background-color: rgba(0,0,0,0.42);
}
.banner .left a{
    /* 块级的宽度会默认是父级的百分百 */
    display: block;
    height: 46px;
 /* 这里不用background-image: url()是因为要设置repeat属性，去掉平铺 */
 /* 鼠标没有悬停时右边灰色箭头图片 */
    background: url(../images/right.png) no-repeat right center;
    line-height: 46px;
    font-size:16px;
    color:#fff;
}
.banner .left a:hover{
    /* 鼠标悬停时右边蓝色箭头图片 */
    /* 设置单个背景图片标签可以不设置平铺 */
    background-image: url(../images/right-hover.png);
    color:#00a4ff;
}

右盒子

实现方法：

  • 标签结构：.right>h3+.content

dl>dt+dd为标题加内容的格式

 <!-- 右盒子区域 -->
            <div class="right">
                <h3>我的课程表</h3>
                <div class="content">
                    <dl>
                        <dt>数据可视化课程</dt>  <!--标题内容-->
                        <dd><span>正在学习</span>-<strong>-echarts使用步骤</strong></dd>       <!--正文内容-->
                    </dl>
                    <dl>
                        <dt>Vue3医疗项目课程</dt>  <!--标题内容-->
                        <dd><span>正在学习</span>-<strong>认识组合式API</strong></dd>       <!--正文内容-->
                    </dl>
                    <dl>
                        <dt>React核心技术课程</dt>  <!--标题内容-->
                        <dd><span>正在学习</span>-<strong>rudex配合js使用</strong></dd>       <!--正文内容-->
                    </dl>
                    <!-- a标签链接 -->
                    <a href="#">全部课程</a>
                </div>
            </div>
/* 右盒子区域 */
.banner .right{
    width: 218px;
    height: 305px;
    background-color: #209dd5;
    margin-top: 60px;
    border-radius: 10px;
}
.banner .right h3{
    margin-left: 14px;
    height: 48px;
    line-height: 48px;
    font-size: 15px;
    color:#fff;
    /* 设置400是去除加粗 */
    font-weight: 400;
}
.banner .right .content{
    height: 257px;
    background-color: #fff;
    border-radius: 10px;
    padding: 14px;
}
.banner .right dl{
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}
.banner .right  dt{
    color:#333333;
    margin-bottom:8px;
    font-size: 14px;    
    line-height: 20px;
    font-weight: 700;
}
.banner .right dd{
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 16px;
}
.banner .right dd span{
    color:#00a4ff;
}
.banner .right dd strong{
    color:#7d7d7d;
    font-weight: 400;
}
.banner .right a{
    display: block;
    height: 32px;
    background-color: #00a4ff;
    line-height: 32px;
    text-align: center;
    border-radius: 15px;
    font-size:14px;
    color: #fff;
}

精品推荐区域

 实现方法：

  • 标签结构：.recommand>h3+ul+a.modify
  • 布局思路：flex布局

2841cecb10904742bc7aa71c3a1bf95b.png

<!-- 精品推荐区域 -->
<!-- 同时使用wrapper类是因为该区域和版心宽度一样 -->
    <div class="recommand wrapper">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">HTML</a></li>
        </ul>
        <a href="#" class="modify">修改兴趣</a>
    </div>

/* 精品推荐区域 */
.recommand{
    /* 设置该区域里的标题和ul和a链接排列方式为flex模式 */
    display: flex;
    height: 60px;
    background-color: #fff;
    margin-top: 11px;
    padding:0 20px;
    line-height: 60px;
    box-shadow: 0px 1px 2px 0px rgba(211,211,211,0,5);
}
.recommand h3{
    font-size: 18px;
    color:#00a4ff;
    font-weight: 400;
}
.recommand ul{
 /* 除去标题和修改兴趣的部分，剩余尺寸全给ul，把修改兴趣挤到最右 */
    flex:1;
    display: flex;

}
/* 右边线的高度和a标签中的文字一样，所以在a标签里设置样式 */
.recommand ul li a{
    padding:0 24px;
    border-right: 1px solid #e0e0e0;
    font-size: 18px;
}
/* 把最后一个li里面的a标签的右边框去掉 */
.recommand ul li:last-child a{
    border-right: none;
}

.recommand .modify{
    font-size: 16px;
    color:#00a4ff;
    
}

精品课程区域

实现方法： 

  • 标签结构：.hd（标题）+.bd（内容）
  • 布局思路：盒子模型

总体效果

7cfaa1aac2cd43f9b9829991eca641b2.png

 df6ed63cfce0417c97327ce1bd4d8957.png

<!-- 精品推荐课程 -->
    <div class="course wrapper">
        <!-- 标题 -->
        <div class="hd">
            <h3>精品推荐</h3>
            <a class="more">查看更多</a>
        </div>
        <!-- 内容 -->
        <div class="bd">23423</div>
    </div>


/* 推荐课程区域 */
.course{
    margin-top:15px;
}
/* 标题区域有文字和a链接，分别在一左一右 */
/* 标题公共类，与其他区域共同使用 */
.hd{
    display: flex;
    justify-content: space-between;
    height:60px;
    line-height: 60px;    
}
/* 设置标题样式 */
.hd h3{
    font-size: 21px;
    font-weight: 400;
}
/* 设置a链接即查看更多的样式 */
.hd .more{
    font-size: 14px;
    color:#999;
/* 设置padding-right使背景图片能露出来 */
    padding-right:20px;
    background: url(../images/more.png) no-repeat right center;
}

 b2a7e0411a1f42a18ce672b31aa5b024.png

<!-- 内容:图片+文本 -->
        <div class="bd">
            <ul>
    <!-- 每一个li里面有两个盒子，一个放图片，一个放文本内容 -->
                <li><a href="#">
                    <div class="pic">
                        <img src="./uploads/course01.png">
                    </div>
                    <div class="text">
                        <h4>JavaScript数据看板项目实战</h4>
                        <p>
                            <span>高级</span>·<i>115</i>人在学习
                        </p>
                    </div>
                </a></li>

  

十个盒子如下 ：(上面示意的是一个盒子的写法，剩下九个也是如此

 <!-- 内容 -->
        <div class="bd">
            <ul>
    <!-- 每一个li里面有两个盒子，一个放图片，一个放文本内容 -->
                <li><a href="#">
                    <div class="pic">
                        <img src="./uploads/course01.png">
                    </div>
                    <div class="text">
                        <h4>JavaScript数据看板项目实战</h4>
                        <p>
                            <span>高级</span>·<i>345</i>人在学习
                        </p>
                    </div>
                </a></li>
                <li><a href="#">
                    <div class="pic">
                        <img src="./uploads/course02.png">
                    </div>
                    <div class="text">
                        <h4>Vue.js实战——面经全端项目</h4>
                        <p>
                            <span>高级</span>·<i>9726</i>人在学习
                        </p>
                    </div>
                </a></li>
                <li><a href="#">
                    <div class="pic">
                        <img src="./uploads/ai03.png">
                    </div>
                    <div class="text">
                        <h4>玩转Vue全家桶，iHRM人力资源项目</h4>
                        <p>
                            <span>高级</span>·<i>5678</i>人在学习
                        </p>
                    </div>
                </a></li>
                <li><a href="#">
                    <div class="pic">
                        <img src="./uploads/course04.png">
                    </div>
                    <div class="text">
                        <h4>Vue.js实战医疗项目——优医问诊</h4>
                        <p>
                            <span>高级</span>·<i>7192</i>人在学习
                        </p>
                    </div>
                </a></li>
                <li><a href="#">
                    <div class="pic">
                        <img src="./uploads/course05.png">
                    </div>
                    <div class="text">
                        <h4>小程序实战：小兔子乖乖电商小程序项目</h4>
                        <p>
                            <span>高级</span>·<i>3455</i>人在学习
                        </p>
                    </div>
                </a></li>
                <li><a href="#">
                    <div class="pic">
                        <img src="./uploads/course06.png">
                    </div>
                    <div class="text">
                        <h4>前端框架Fluter开发实战</h4>
                        <p>
                            <span>高级</span>·<i>4724</i>人在学习
                        </p>
                    </div>
                </a></li>
                <li><a href="#">
                    <div class="pic">
                        <img src="./uploads/course07.png">
                    </div>
                    <div class="text">
                        <h4>熟练使用React.js——极客园H5项目</h4>
                        <p>
                            <span>高级</span>·<i>9345</i>人在学习
                        </p>
                    </div>
                </a></li>
                <li><a href="#">
                    <div class="pic">
                        <img src="./uploads/course08.png">
                    </div>
                    <div class="text">
                        <h4>熟练使用React.js——极客园PC端项目</h4>
                        <p>
                            <span>高级</span>·<i>1315</i>人在学习
                        </p>
                    </div>
                </a></li>
                <li><a href="#">
                    <div class="pic">
                        <img src="./uploads/course09.png">
                    </div>
                    <div class="text">
                        <h4>前端实用技术，Fatch API实战</h4>
                        <p>
                            <span>高级</span>·<i>9115</i>人在学习
                        </p>
                    </div>
                </a></li>
                <li><a href="#">
                    <div class="pic">
                        <img src="./uploads/course10.png">
                    </div>
                    <div class="text">
                        <h4>前端高级Node.js零基础入门教程</h4>
                        <p>
                            <span>高级</span>·<i>4415</i>人在学习
                        </p>
                    </div>
                </a></li>
              
            </ul>
        </div>
    </div>

 css样式


/* 推荐课程区域 */
.course{
    margin-top:15px;
}
/* 标题区域有文字和a链接，分别在一左一右 */
/* 标题公共类，与其他区域共同使用 */
.hd{
    display: flex;
    justify-content: space-between;
    height:60px;
    line-height: 60px;    
}
/* 设置标题样式 */
.hd h3{
    font-size: 21px;
    font-weight: 400;
}
/* 设置a链接即查看更多的样式 */
.hd .more{
    font-size: 14px;
    color:#999;
/* 设置padding-right使背景图片能露出来 */
    padding-right:20px;
    background: url(../images/more.png) no-repeat right center;
}
/* 设置所有盒子的排列方式为flex和换行 */
.bd ul{
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-between;
    
}
/* 设置盒子的样式 */
.bd li{
    width: 228px;
    height: 271px;
    margin-bottom: 14px;
    background-color: #d16161;
}
/* 盒子图片部分的样式 */
.bd li .pic{
    height:156px;
}
/* 盒子文本部分的样式 */
.bd li .text{
    padding:20px;
    height: 115px;
    background-color: #fff;
}
/* 盒子文本部分标题的样式 */
.bd li .text h4{
    height: 40px;
    margin-bottom: 13px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}
/* 盒子文本部分内容的样式 */
.bd li .text p{
    font-size: 14px;
    line-height: 20px;
    color:#999;
}
/* 设置内容部分高级两个字的颜色 */
.bd li .text p span{
    color:orange;
}
/* 设置不倾斜 */
.bd li .text p i{
    font-style: normal;
}

 前端开发工程师区域

与精品课程区域差不多，只是一个大盒子更加细化了，分为左盒子和右盒子，右盒子的小盒子也是用ul>li实现。该板块也是在版心

8655caad6cff4c6d8f7177367823966c.png

 相关的html代码

<!-- 前端工程师区域 -->
<!-- 该区域分3个部分：h3、ul、a -->
<div class="wrapper">
    <div class="hd">
        <h3>前端开发工程师</h3>
        <ul>
            <li><a href="#" class="active">热门</a></li>
            <li><a href="#">初级</a></li>
            <li><a href="#">中级</a></li>
            <li><a href="#">高级</a></li>            
        </ul>
        <a href="#" class="more">查看更多</a>
    </div>
<!-- 内容 -->
    <div class="bd">
        <!-- 两个盒子，一左一右 -->
        <div class="left">
            <img src="./uploads/web_left.png">
        </div>
        <!-- 右盒子区域 -->
        <div class="right">
            <!-- 上区域 -->
            <div class="top"><img src="./uploads/web_top.png"></div>
            <!-- 下区域：5个li盒子，li盒子分图片和内容两部分 -->
            <div class="bottom">
                <ul>
                    <li>
                <div class="pic"><img src="./uploads/course02.png"></div>
                <div class="text">
                    <h4>js高级JavaScript</h4>
                    <p><span>高级</span>·<i>3424</i>人在学习</p>
                </div>
            </li>
            <li>
                <div class="pic"><img src="./uploads/course03.png"></div>
                <div class="text">
                    <h4>js高级JavaScript</h4>
                    <p><span>高级</span>·<i>3424</i>人在学习</p>
                </div>
            </li>
            <li>
                <div class="pic"><img src="./uploads/course04.png"></div>
                <div class="text">
                    <h4>js高级JavaScript</h4>
                    <p><span>高级</span>·<i>3424</i>人在学习</p>
                </div>
            </li>
            <li>
                <div class="pic"><img src="./uploads/course05.png"></div>
                <div class="text">
                    <h4>js高级JavaScript</h4>
                    <p><span>高级</span>·<i>3424</i>人在学习</p>
                </div>
            </li>
                </ul>
            </div>
        </div>
    </div>
</div>

css代码

/* 前端工程师部分的标题区域 */
.hd ul{
    display: flex;

}
.hd ul li{
    margin-right: 60px;
    font-size: 16px;
}
/* 设置第一个li字体默认为蓝色 */
.hd li .active{
    color:#00a4ff;
}

/* 内容区域 */
.bd{
    display: flex;
    justify-content: space-between;
}
/* 左盒子 */
.bd .left{
    width:228px;    
}
/* 右盒子 */
.bd .right{
    width:957px;    
}
/* 右盒子上部 */
.bd .right .top{
    margin-bottom: 15px;
    height:100px;
}
/* 右盒子下部照片部分 */
.bd .right .bottom .pic{
    height: 156px;
}
/* 右盒子下部内容部分 */
.bd .right .bottom .text {
    padding:20px;
    height: 115px;
    background-color: #fff;
}
/* 右盒子下部内容标题部分 */
.bd .right .bottom .text h4{
    height: 40px;
    margin-bottom: 13px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}
/* 右盒子下部内容正文部分 */
.bd .right .bottom .text p{
    font-size: 14px;
    line-height: 20px;
    color:#999;
}
/* 正文部分的前部 */
.bd .right .bottom .text p span{
    color:orange;
}
/* 正文部分的后部 */
.bd .right .bottom .text p i{
    font-style: normal;
}

Python大数据开发区域

再写一个和上面上面格式一样的就不用再添加css样式了


<!-- Python大数据开发区域 -->
<div class="wrapper">
    <div class="hd">
        <h3>Python大数据开发</h3>
        <ul>
            <li><a href="#" class="active">热门</a></li>
            <li><a href="#">初级</a></li>
            <li><a href="#">中级</a></li>
            <li><a href="#">高级</a></li>            
        </ul>
        <a href="#" class="more">查看更多</a>
    </div>
<!-- 内容 -->
    <div class="bd">
        <!-- 两个盒子，一左一右 -->
        <div class="left">
            <img src="./uploads/python_left.png">
        </div>
        <!-- 右盒子区域 -->
        <div class="right">
            <!-- 上区域 -->
            <div class="top"><img src="./uploads/python_top.png"></div>
            <!-- 下区域：5个li盒子，li盒子分图片和内容两部分 -->
            <div class="bottom">
                <ul>
                    <li><a href="#">
                <div class="pic"><img src="./uploads/python01.png"></div>
                <div class="text">
                    <h4>js高级JavaScript</h4>
                    <p><span>高级</span>·<i>3424</i>人在学习</p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"><img src="./uploads/python02.png"></div>
                <div class="text">
                    <h4>js高级JavaScript</h4>
                    <p><span>高级</span>·<i>3424</i>人在学习</p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"><img src="./uploads/python03.png"></div>
                <div class="text">
                    <h4>js高级JavaScript</h4>
                    <p><span>高级</span>·<i>3424</i>人在学习</p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"><img src="./uploads/python04.png"></div>
                <div class="text">
                    <h4>js高级JavaScript</h4>
                    <p><span>高级</span>·<i>3424</i>人在学习</p>
                </div>
            </a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

人工智能板块 

 这个区域和精品课程课程区域相似，可参考精品课程区域的模版，但是由于我在做的时候，五个盒子排列没有间隔，十个才有，所以我把bd标签改为cd，再把盒子的格式写一遍（也可以复制前面写好的，把bd改为cd即可）

<!-- JavaEE板块 -->
<div class="wrapper">
    <div class="hd">
        <h3>JavaEE</h3>
        <ul>
            <li><a href="#" class="active">热门</a></li>           
            <li><a href="#" >初级</a></li>           
            <li><a href="#" >中级</a></li>           
            <li><a href="#" >高级</a></li>           
        </ul>
        <a class="more">查看更多</a>
    </div>
    <div class="cd">
        <ul>
            <li><a href="#">
                <div class="pic"><img src="./uploads/java02.png"></div>
                <div class="text">
                    <h4>4天快速入门Python数据挖掘</h4>
                    <p><span>高级</span>·<i>7453</i>人在学习</p>
                </div>
            </a></li>  
            <li><a href="#">
                <div class="pic"><img src="./uploads/java02.png"></div>
                <div class="text">
                    <h4>4天快速入门Python数据挖掘</h4>
                    <p><span>高级</span>·<i>7453</i>人在学习</p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"><img src="./uploads/java02.png"></div>
                <div class="text">
                    <h4>4天快速入门Python数据挖掘</h4>
                    <p><span>高级</span>·<i>7453</i>人在学习</p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"><img src="./uploads/java02.png"></div>
                <div class="text">
                    <h4>4天快速入门Python数据挖掘</h4>
                    <p><span>高级</span>·<i>7453</i>人在学习</p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"><img src="./uploads/java02.png"></div>
                <div class="text">
                    <h4>4天快速入门Python数据挖掘</h4>
                    <p><span>高级</span>·<i>7453</i>人在学习</p>
                </div>
            </a></li>                           
        </ul>
    </div>
</div>

版权区域

实现方法：通栏>版心>左盒子（a img：logo+p+a）>右盒子（dl>dt(标题）+dd（内容））

 

<!-- 版权区域 -->
<div class="footer">
    <div class="wrapper">
        <div class="left">
            <a href="#" class="logo"><img src="./images/logo.png"></a>
            <p>学成在线教育致力于普及中国最好的教育，它于中国一流大学和机构合作提供在线课程
                ©2017年XTCG Inc.保留所有权利
            </p>
            <a class="download">下载APP</a>
        </div>
        <div class="right">
            <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>
                
            </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>
            </dl>
            <dl>
                <dt>合作伙伴</dt>
                <dd><a href="#">合作机构</a></dd>
                <dd><a href="#">合作导师</a></dd>
            </dl>
        </div>
    </div>
</div>

 

/* 版权区域 */
.footer{
    height: 273px;
    background-color: #fff;
    margin-top: 60px;
    padding-top: 60px;
}
.footer .wrapper{
    display: flex;
    justify-content: space-between;
}

.footer .left{
    width:440px;
}
.footer .left p{
    margin-top: 24px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 17px;
    color:#666;
}
.footer .left .download{
    display: block;
    width:120px;
    height: 36px;
    text-align: center;
    /* 上下边距各为1px，36-1-1=34 */
    line-height: 34px;
    color:00a4ff;
    border:1px solid #00a4ff;

}
.footer .right{
    display: flex;
}
.footer .right dl{
    margin-left:130px;
}
.footer .right dl dt{
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 23px;
}
.footer .right dd{
    font-size: 14px;
    line-height: 24px;
    color: #666666;
}

 

 至此，一个完整的网页已完成

 

鱼晚.
关注 关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML页面制作中出现的问题,网页制作过程中的普遍问题分析
weixin_34703307的博客
06-04 6093
网页制作过程中的普遍问题分析网页制作是一个需要下苦功夫进行学习与钻研的过程，同时在学习中会积累到很多的经验，下面是小编搜集整理的一篇关于网页制作常见问题探讨的论文范文，欢迎阅读查看。一、引言如今，国家大力提倡素质教育和终身教育，人们在自身发展过程中对于信息的需求会提出更高的要求。网页自身所具有的特点是信息量十分庞大，且传递速度较快，没有特别的时空限制等，这就使得其能够满足人们的需求而成为一种十分高...
html5留言板网页设计,网页设计制作-留言板
weixin_30543595的博客
06-08 9867
制作留言板1、留言板分为填加留言、保存留言、显示留言、管理留言等模块。显示留言页面应为系统默认页面或首页，管理页面由站长进行回复与删除管理。2、文件说明：default.asp(留言显示页面)显示留言按时间的降序排列。add.asp(添加留言页面)将留言信息存入数据库。admin.asp(管理页面)显示留言并提供站长回复和删除功能。del.asp(删除页面)reply.asp(站长回复页面)log...
html网页主页制作,网页主页制作过程
weixin_42632434的博客
06-17 4242
网页主页制作过程发布时间:2008-10-29 发布者:新锐传媒 查阅 [3749] 评论 [0]一、准备材料你首先做一个小计划,准备在主页上告诉人家什么？比如介绍三个方面：自我介绍,我的爱好,我的工作,那你就先起一个总目录(文件夹,比如d:\html),来放你的所有文件，然后再在这个目录建立三个子目录：myself,interest，job。文件名你可以任意，但最好全部小写，因为有的主机要认大小...
前端小白实战过程----制作在线购物类网页
weixin_45817780的博客
03-06 7690
前言 在线购物网站是当下比较流行的一类网站，越来越多的公司企业着手架设在线购物类网站平台。我在网上搜了很多，发现了易于新人着手的网页项目。那么本篇文章，将展示我对一个网页的编写过程。 整体布局 找了个“优尚”的网站，体现的组件比较多，主要包括产品搜索，账户登录，广告推荐，产品推荐，产品分类等内容。最终的网页效果如图。 设计分析 购物网站的一个特点就是突出产品，突出购物流程，优惠活动，促销活动等信...
小米商城网页制作大全-完结篇
tomorrownan的博客
10-17 1万+
时隔多日，小米商城网页基本完成。跳转的第二页面没有做。在这过程中遇到了很多小而细的问题，例如浏览器兼容性、字符图标不显示、动画效果不起作用等。抽时间整理一下，再继续完善。效果图如下： 实际右侧固定栏只有个人中心、购物车、联系客服、回到顶部四项，固定在哪里不动，由于截图是连续的，所以显示出来是连续的。 动态图如下： 完整的工程详见小米网页完整版 https://github.com/wnn08...
html布局源代码实例,网页实际案例-从设计到代码实现全过程（一）
weixin_28935433的博客
06-17 3961
ps好了，咱们介绍一下网页设计。网页设计又叫WEB设计、WUI设计。名称很多实际工作就是设计出网页把它放到互联网上让收有人都可以浏览，这个过程是一个很长的流程，从设计到最终上线，要经过设计师，前端工程师，后台程序员等人的手(针对新人，其他的产品经理什么的略过.....)，我这里要说的就是从设计到前端代码实现。咱们一步一步开始制作吧！---1---网页界面制作制作网页首先你得有一个目标吧，就是你要做...
一个简单购物网页的制作过程
qq_47575615的博客
12-25 6818
一、网页效果 1、登录(vip用户和普通会员) 选择vip和普通会员，最终的付款折扣会不同。 2、购物页面 文本框中输入要购买的数量 3、结账页面（购物操作的数量以1、2、3为例） 名字前面显示vip或者普通会员，后面显示名字。 商品后面显示购买的物品以及数量。 应付款以及打折后的金额。 二、下面是代码的制作过程： 1、登录页面：主要架构为一个表单。（需要一个javabean附在之后） 创建一个jsp文件，取名为denglu.jsp。 <%@ page language="jav
制作个人网页过程（附源码）
Protinx的博客
11-20 5052
主标题： 制作个人网页 背景： <body background="Krazy.png"style="background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;"> ...
php制作登录页面的过程_PHP实现简单登录界面
weixin_31597759的博客
03-08 4960
PHP学习路上的第一个完整的极小极小的项目，特意做个记录登录界面：html代码(login.html)：用户登录用户名:密 码:7天内自动登录login.php:(登陆处理页)header('Content-type:text/html; charset=utf-8');// 开启Sessionsession_start();// 处理用户登录信息if (isset($_POST['login'...
Java Web-1 制作简单的网页
热门推荐
梦琪96的博客
01-21 4万+
制作简单的网页一、网页主要功能二、涉及到的知识点三、搭建步骤1. 首先打开mysql数据库，新建一个数据库test，然后生成对应的表结构2. 打开Eclipse新建一个web项目3. 在webroot下的WEB-INF下的lib中导入mysql和tomcat的驱动jar包4. 建立对应的包结构5. 在filter下新建一个EncodingFilter用来解决中文字符集乱码，它需要实现Filter接...
网页制作过程中代码注释书写规范
09-22
总结了一下自己工作中使用到的注释书写规范，没有什么技术含量，只是用于统一制作方式，方便维护。包含了“区域注释”、“单行注释”、“注释层级”和“协助注释”四个部分。大部分同学使用的区域注释的方法，会以...
web期末作业设计网页制作过程及案例展示
12-22
web期末作业设计网页制作过程及案例展示 web期末作业设计网页制作过程及案例展示 web期末作业设计网页制作过程及案例展示 web期末作业设计网页制作过程及案例展示 web期末作业设计网页制作过程及案例展示 web...
网页制作过程1.txt
10-07
网页制作过程1.txt
网页制作过程1.pdf
10-07
网页制作过程1.pdf
前端小白实战过程—-制作在线购物类网页
01-20
前言 ...那么本篇文章，将展示我对一个网页的编写过程。 整体布局 找了个“优尚”的网站，体现的组件比较多，主要包括产品搜索，账户登录，广告推荐，产品推荐，产品分类等内容。最终的网页效果如图。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 516
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 352
在vue.config.js中配置关闭Uncaught runtime errors显示。
Web前端网站设计案例：深入剖析创意与技术的完美融合
最新发布
liyrbtqe_66w的博客
06-12 237
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
vue3如何定义一个组件
Java程序员专栏
06-09 540
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
html网页制作过程
09-13
制作一个HTML网页的过程如下： 1. 首先，启动一个HTML编辑器，比如Dreamweaver。确保你已经用站点管理器建立好了一个网站，即一个根目录。 2. 在编辑器中创建一个新的HTML文件，命名为index.html，这将是网站的首页。 3. 使用编辑器的功能来设计你的网页布局并添加内容。你可以使用HTML标签来创建标题、段落、图像等元素，以及CSS样式来美化页面。你还可以使用JavaScript、jQuery、Ajax、Flash等技术来使页面更具交互性和动态效果。 4. 在编辑器中预览你的网页效果，按下F12即可。 5. 如果需要修改页面的细节，你可以使用其他编辑软件，比如Homesite或Hotdog来进行编辑。你还可以使用Photoshop来处理图片，使用Fireworks、Adobe ImageReady或Flash来创建动画效果。 6. 当你完成了网页的设计和编辑后，你需要申请一个空间和域名来存放你的网站。大多数空间和域名是需要付费的。 7. 最后，使用合适的软件将你的网页上传到你的空间中，你的网站就可以正常访问了。 总结起来，制作一个HTML网页的过程包括选择编辑器，创建网站根目录，设计页面布局和内容，预览效果，进行细节修改，申请空间和域名，最后上传网页文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • 小兔鲜儿网的制作过程 1671
  • JavaScript学习笔记4——对象 1567
  • Dom元素修改常见属性及案例 1023
  • JavaScript学习笔记1 853
  • JavaScript学习笔记2 468

最新评论

  • HTML与CSS学习总结基础3

    鱼晚.: 内边距是内容与边框的距离，边框也有宽度，(内边距加边宽)×2+(内容的宽度)=总宽度

  • HTML与CSS学习总结基础3

    鱼晚.: box-sizing:border-box的作用是告诉浏览器，元素的宽度和高度应该包括内边距和边框的尺寸，而不仅仅包括内容，也就是说，如果你设置了一个元素的宽度为100px，并且将box-sizing属性设置为border-box,那么内边距和边框的尺寸会被包含在这个100px的宽度内，这样无论你怎么调整内边距和边框的尺寸,元素的总宽度都会保持为100px。

  • Web APIs的学习笔记

    鱼晚.: 表情包表情包

  • Web APIs的学习笔记

    DarrenPig: 变量好可爱表情包

  • JavaScript学习笔记3

    CSDN-Ada助手: 恭喜你写了第13篇博客！看来你对JavaScript的学习和理解已经有了相当的深入。不过，我觉得你可以考虑在下一篇博客中分享一些实际的项目经验，或者是一些实用的技巧和工具，这样能让读者更加受益。期待你的下一篇作品！加油！

您愿意向朋友推荐“博客详情页”吗？

  • 强烈不推荐
  • 不推荐
  • 一般般
  • 推荐
  • 强烈推荐
提交

最新文章

  • Dom元素修改常见属性及案例
  • Web APIs的学习笔记
  • JavaScript学习笔记4——对象
2024年6篇
2023年10篇

目录

目录

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值

PHP网站源码惠州网站开发公司那曲网站推广系统推荐木棉湾SEO按效果付费公司中山百度竞价推荐永新seo排名报价昌都网站优化排名推荐西宁营销型网站建设公司合肥关键词按天扣费临猗网站建设设计报价北京外贸网站建设多少钱镇江关键词按天计费价格海口百搜标王多少钱驻马店网站优化按天计费公司和田关键词按天扣费推荐遂宁网站建设设计新余建设网站陇南企业网站改版哪家好临夏网站推广系统推荐防城港网站关键词优化巢湖网站推广工具价格吉林营销型网站建设价格甘孜设计公司网站推荐十堰关键词按天收费多少钱飞来峡阿里店铺托管哪家好大运网站关键词优化公司萍乡外贸网站建设价格扬州seo宁德英文网站建设哪家好松岗网站seo优化多少钱泉州网站推广工具报价歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅：唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人？开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

PHP网站源码 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化