当前位置：首页 > news >正文

【网页设计】学成在线案例

news 文章来源：https://blog.csdn.net/m0_74105426/article/details/143169514 2025/1/16 6:44:15

Demo

典型的企业级网站，目的是为了整体感知企业级网站的布局流程，复习以前知识。

集合代码见文章最后。

5.1 准备素材和工具

学成在线 PSD 源文件。
开发工具 = PS（切图） + sublime（代码） + chrome（测试）。

5.2 案例准备工作

这一部分是建立整个 project 的结构的

我们本次采取结构与样式相分离思想：
创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。
study 目录内新建 images 文件夹，用于保存图片。
新建首页文件 index.html（ 以后网站首页统一规定为 index.html )。
新建 style.css 样式文件。我们本次采用外链样式表。
将样式引入到我们的 HTML 页面文件中。
样式表写入清除内外边距的样式，来检测样式表是否引入成功。

<!-- 引入样式表 --> 
<head><link rel="stylesheet" href="style.css">
</head>

5.3 CSS 属性书写顺序

个人代码能力的专业性，体现在代码的规范标准，优雅，高质量等中。

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {<!-- 布局定位属性 --> display: block;position: relative;float: left;<!-- 盒子自身属性 --> width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;<!-- 文本属性 --> font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;<!-- 其他属性 --> <!-- 这里的 background 属性使用了 rgba，是 CSS3 的一种使用方法 --> background: rgba(0,0,0,.5);border-radius: 10px;
}

5.4 页面布局分析

为了提高网页制作的效率，布局时通常有以下的布局流程：

必须确定页面的版心（可视区），我们测量可得知。
分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成的。（第一准则）
一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。（第二准则）
制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
所以，先理清楚布局结构，再写代码尤为重要。这需要我们多写多积累。
开始运用盒子模型的原理，通过 DIV+CSS 布局来控制网页的各个模块。

5.5 确定版心

这个页面的版心是 1200 像素，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {width: 1200px;margin: auto;
}

5.6 头部制作

1 号是版心盒子 header 1200 * 42 的盒子水平居中对齐，上下给一个 margin 值就可以
版心盒子里面包含 2 号盒子 logo
版心盒子里面包含 3 号盒子 nav 导航栏
版心盒子里面包含 4 号盒子 search 搜索框
版心盒子里面包含 5 号盒子 user 个人信息
注意：要求里面的 4 个盒子必须都是浮动

注：这里文字在中间可以有两种思路（这里采用第一种）
1. 盒子大小与内部盒子最大高度相同，再给上 8 个像素，下 8 个像素隔开
2. 也可以把盒子高度设置成占满，通过调整内部的行高来隔开

内部制作部分分 logo，navy，search，user 部分。

logo
这部分只需要设置好盒子的大小，嵌入图片即可

navy
导航栏注意点：实际开发中，我们不会直接用链接 a 而是用 li 包含链接 (li+a) 的做法。

li+a 语义更清晰，一看这就是有条理的列表型内容
如果直接用 a，搜索殷勤容易辨别为有堆砌关键字的嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。

注意：

让导航栏一行显示，给 li 加浮动，因为 li 是块级元素，需要一行显示
这个 nav 导航栏可以不给宽度，将来可以继续添加其余文字
因为导航栏里面文字不一样多，所以最好给链接 a 左右 padding 撑开盒子，而不是设置宽度

其中，观察到 “首页” 下面有条横线，这是典型的鼠标经过的标签，所以添加关于 hover 的声明。

search
search 搜索框：一个 search 大盒子里面包含 2 个表单

这里有个小主意，input 文本框右侧的边框可以去掉，和 button 按钮连接在一起。
同时在设置 “输入关键词” 的 padding 值的时候，会撑大盒子，此时大盒子的宽度要减去这部分。
button 有个默认的边框，这部分需要删除。同时在初步写的时候，会发现 bottom 掉下来了。这是因为 input 文本框和 button 按钮都是行内块元素，之间有个默认的间隙。解决方法是，对两者都声明浮动。
button 的图片声明成背景（因为占满了整个盒子）。

user
内容直接将图片嵌入，加上文字即可。
格式需要设置文字大小，颜色，右边距。关于如何将文字和图片对齐居中，后面会具体单开一篇讲。

<!-- 1.头部区域开始啦 --><div class="header w"><!-- logo部分 --><div class="logo"><img src="images/logo.png" alt=""></div><!-- 导航栏部分 nav --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 搜索模块 --><div class="search"><input type="text" value="输入关键词"><button></button></div><!-- 用户模块 --><div class="user"><img src="images/user.png" alt="">qq-lilei</div></div>
<!-- 头部区域结束啦 -->

body {background-color: #f3f5f7;
}
<!-- li 太多了，去掉前面的原点可以统一声明 --> 
li {list-style: none;
}
a {text-decoration: none;
}
.header {height: 42px;/* background-color: pink; *//* 注意此地方会层叠 w 里面的margin */margin: 30px auto;
}
.logo {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 ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff;
}
/* search搜索模块 */
.search {float: left;width: 412px;height: 42px;margin-left: 70px;
}
.search input {float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: 0;color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
.search button {float: left;width: 50px;height: 42px;/* 按钮button默认有个边框需要我们手动去掉 */border: 0;background: url(images/btn.png);
}
.user {float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666;
}

5.7 banner 制作

1 号盒子是通栏的大盒子 banner，不给宽度，给高度，给一个蓝色背景
2 号盒子是版心，要水平居中对齐
3 号盒子版心内，左对齐 subnav 侧导航栏
4 号盒子版心内，右对齐 course 课程

版心
这里注意，对中间版心盒子背景图片的声明需要添加对应声明，使背景图片不需要重复，且居中。

subnavy
很典型的列表，注意盒子大小、背景颜色（半透明黑色）、文字大小颜色等样式即可。
需要注意，这里给 padding 值没有撑开盒子的原因，是因为没有给盒子宽度。
比较有意思的是右侧的小三角，写法可以如下：再给个小盒子，里面装着这个小三角，让他居右即可。
对于鼠标经过的标签不要漏掉。

course
对盒子要声明右浮动，再声明一个 margin-top 值即可。
此时有个问题，按照上一章的讲解，我复合盒子中多个 margin-top 值的声明会导致塌陷，但这里并没有？这是因为浮动的盒子不会有外边距合并问题。
对于上下两个模块，则可以如下：上模块用 h2 声明；下面的 bd 模块再分两个部分，继续学习用常见的 ur li 即可，全部课程则是用链接 a 来做。
对下模块，课程名字可以采用 h4，正在学习则使用正常文字。中间的分隔线当做 li 的下边框即可。
全部课程盒子的大小要考虑边框（1px），与上面 li 的下边框边距用 margin-top 隔开。

<!-- 2. banner部分start --><div class="banner"><!-- 版心 --><div class="w"><div class="subnav"><ul><li><a href="#">前端开发 <span> &gt; </span></a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li></ul></div><!-- course 课程表模块 --><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></ul><a href="#" class="more">全部课程</a></div></div></div></div>
<!-- banner部分end -->

/* banner区域 */
.banner {height: 421px;background-color: #1c036c;
}
.banner .w {height: 421px;background: url(images/banner2.png) no-repeat top center;
}
.subnav {float: left;width: 190px;height: 421px;background: rgba(0,0,0, 0.3);
}
.subnav ul li {height: 45px;line-height: 45px;padding: 0 20px;
}
.subnav ul li a {font-size: 14px;color: #fff;
}
.subnav ul li a span {float: right;
}
.subnav ul li a:hover {color: #00a4ff;
}
.course {float: right;width: 230px;height: 300px;background-color: #fff;/* 浮动的盒子不会有外边距合并的问题 */margin-top: 50px;
}
.course h2 {height: 48px;background-color: #9bceea;text-align: center;line-height: 48px;font-size: 18px;color: #fff;
}
.bd {padding: 0 20px;
}
.bd ul li {padding: 14px 0;border-bottom: 1px solid #ccc;
}
.bd ul li h4 {font-size: 16px;color: #4e4e4e;
}
.bd ul li p {font-size: 12px;color: #a5a5a5;
}
.bd .more {display: block;height: 38px;border: 1px solid #00a4ff;margin-top: 5px;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;
}

5.8 精品推荐小模块

大盒子水平居中 goods 精品，注意此处有个盒子阴影
1 号盒子是标题 H3 左侧浮动
2 号盒子里面放链接左侧浮动， goods-item 距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）
3 号盒子右浮动 mod 修改

good 的宽度继承整体，但是高度要单独声明。同时不要忘记与上面模块的间隙 margin-top 参数的设置。
“精品推荐” 可用 h3 标签，后面部分则继续采用 ur li 的格式，“修改兴趣” 则是正常文字。注意都要声明浮动。
垂直居中的声明建议对整体声明行高，通过继承使内部文字垂直居中。左边距对 h3 声明，右边距对 mod 声明即可。
内部文字左右间距声明 padding 即可。小竖线当做每个小 li 的左边框是很聪明的做法。

<!-- 3.精品推荐模块开始 --><div class="goods w"><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></ul><a href="#" class="mod">修改兴趣</a></div>
<!-- 精品推荐模块结束 -->

/* 精品推荐模块 */
.goods {height: 60px;background-color: #fff;margin-top: 10px;box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);/* 行高会继承， 会继承给3个孩子 */line-height: 60px;
}
.goods h3 {float: left;margin-left: 30px;font-size: 16px;color: #00a4ff;
}
.goods ul {float: left;margin-left: 30px;
}
.goods ul li {float: left;
}
.goods ul li a {padding: 0 30px;font-size: 16px;color: #050505;border-left: 1px solid #ccc;
}
.mod {float: right;margin-right: 30px;font-size: 14px;color: #00a4ff;
}

5.9 精品推荐大模块

这部分和讲解浮动时举得例子很相似，即上下布局。由于已经做过很相似的，这里说明简要点。

1 号盒子为最大的盒子， box 版心水平居中对齐
2 号盒子为上面部分，box-hd -- 里面左侧标题 H3 左浮动，右侧链接 a 右浮动
3 号盒子为底下部分，box-bd -- 里面是无序列表，有 10 个小 li 组成
小 li 外边距的问题，这里有个小技巧：给 box-hd 宽度为 1215 就可以一行装开 5 个 li

复习点：我们用到清除浮动，因为 box-hd 里面的盒子个数不一定是多少，所以我们就不给高度了，但是里面的盒子浮动会影响下面的布局，因此需要清除浮动。

最上边的 box 中，“精品推荐” 声明左浮动，“查看全部” 声明有浮动。头部边距，文字大小及颜色参照示意图声明即可。
核心部分采用 10 个 li 即可，要记得对每个 li 的浮动，右边距声明即可。此时发现每一行都只能装 4 个，第 5 个会掉出来，原因是父亲装不下了，每一行最后一个 li 的右边距要取消。此时我们发现，如果有 n 行，就要对第 5*n 个单独声明右边距，随着行数增多，这是越来越麻烦的，所以这里有另外一个策略：把 li 的父亲 ul 修改足够宽到一行能装开 5 个盒子即可（不要过大，防止能装下第 6 个），这里是大于 5*(228+15) 小于 6*(228+15) 即可。
对于每个 li 中的图片，要保证与 li 相同大小。直接嵌入会发现图片要多出一截，解决方法是：对 li 中的图片宽度进行单独的声明。
li 中的文字用标签 h4，下面的定义为 info，用标签 span 声明相关样式。

关于每个 li 右上角的 hot，new，需要学习完定位才能做，详细见下一篇文章。

后续的一些布局就和这个核心模块大同小异了，可以自行尝试解决。

<!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li></ul></div></div>
<!-- 4. box核心内容区域结束 -->

.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;
}
/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
.box-bd ul {width: 1225px;
}
.box-bd ul li {float: left;width: 228px;height: 270px;background-color: #fff;margin-right: 15px;margin-bottom: 15px;}
.box-bd ul li img {width: 100%;
}
.box-bd ul li h4 {margin: 20px 20px 20px 25px;font-size: 14px;color: #050505;font-weight: 400;
}
.box-bd .info {margin: 0 20px 0 25px;font-size: 12px;color: #999;
}
.box-bd .info span {color: #ff7c2d;
}

5.10 底部模块

1 号盒子是通栏大盒子，底部 footer 给高度，底色是白色
2 号盒子版心水平居中
3 号盒子版权 copyright 左对齐
4 号盒子链接组 links 右对齐

如果直接建立一个 footer 盒子，刷新后会发现直接与上面的核心模块重叠了，这是因为 li 没有声明高度，这个父盒子的高度就变成了 0（详细参考上一篇 “浮动” 文章中的讲解）。不给高度的原因是方便继续添加更多的 li。这里需要对父盒子清除浮动，即对父盒子添加 clearfix 的 class 属性。

.clearfix:before,.clearfix:after {content:"";display:table; }.clearfix:after {clear:both;}.clearfix {*zoom:1;}

footer 整体分作两个部分，一个左浮动，一个右浮动。同时注意到与上面有一定间隔，若声明一个 margin-top，此时刷新会发现整个 footer 盒子下去了，这就是因为外边距合并。所以这里建议使用 padding-top。
对于左侧盒子，又分作三部分，一张图片，一段文字和一个链接。注意形式声明。不要忘记对 a 声明行内块元素。
对于右侧模块，是三个一模一样的盒子，根据前面讲过，这里采用 dl 来制作。由于本身属于块元素，所以都要声明右浮动，同时再补充一个左边距。

<!-- 5. footer 模块制作 --><div class="footer"><div class="w"><div class="copyright"><img src="images/logo.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#" class="app">下载APP</a></div><div class="links"><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><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl></div></div></div>

/* footer 模块 */
.footer {height: 415px;background-color: #fff;
}
.footer .w {padding-top: 35px;
}
.copyright {float: left;
}
.copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0;
}
.copyright .app {display: block;width: 118px;height: 33px;border: 1px solid #00a4ff;text-align: center;line-height: 33px;color: #00a4ff;font-size: 16px;
}
.links {float: right;
}
.links dl {float: left;margin-left: 100px;
}
.links dl dt {font-size: 16px;color: #333;margin-bottom: 5px;
}
.links dl dd a {color: #333;font-size: 12px;
}

Code

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>学车在线首页</title><link rel="stylesheet" href="style.css">
</head><body><!-- 1.头部区域开始啦 --><div class="header w"><!-- logo部分 --><div class="logo"><img src="images/logo.png" alt=""></div><!-- 导航栏部分 nav --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 搜索模块 --><div class="search"><input type="text" value="输入关键词"><button></button></div><!-- 用户模块 --><div class="user"><img src="images/user.png" alt="">qq-lilei</div></div><!-- 头部区域结束啦 --><!-- 2. banner部分start --><div class="banner"><!-- 版心 --><div class="w"><div class="subnav"><ul><li><a href="#">前端开发 <span> &gt; </span></a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li><li><a href="#">前端开发 <span> &gt; </span> </a></li></ul></div><!-- course 课程表模块 --><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></ul><a href="#" class="more">全部课程</a></div></div></div></div><!-- banner部分end --><!-- 3.精品推荐模块开始 --><div class="goods w"><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></ul><a href="#" class="mod">修改兴趣</a></div><!-- 精品推荐模块结束 --><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li></ul></div></div><!-- 4. box核心内容区域结束 --><!-- 5. footer 模块制作 --><div class="footer"><div class="w"><div class="copyright"><img src="images/logo.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#" class="app">下载APP</a></div><div class="links"><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><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl></div></div></div>
</body></html>

style.css

* {margin: 0;padding: 0;
}
.w {width: 1200px;margin: auto;
}
body {background-color: #f3f5f7;
}
li {list-style: none;
}
a {text-decoration: none;
}
.clearfix:before,.clearfix:after {content:"";display:table; }.clearfix:after {clear:both;}.clearfix {*zoom:1;}   .header {height: 42px;/* background-color: pink; *//* 注意此地方会层叠 w 里面的margin */margin: 30px auto;
}
.logo {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 ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff;
}
/* search搜索模块 */
.search {float: left;width: 412px;height: 42px;margin-left: 70px;
}
.search input {float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: 0;color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
.search button {float: left;width: 50px;height: 42px;/* 按钮button默认有个边框需要我们手动去掉 */border: 0;background: url(images/btn.png);
}
.user {float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666;
}
/* banner区域 */
.banner {height: 421px;background-color: #1c036c;
}
.banner .w {height: 421px;background: url(images/banner2.png) no-repeat top center;
}
.subnav {float: left;width: 190px;height: 421px;background: rgba(0,0,0, 0.3);
}
.subnav ul li {height: 45px;line-height: 45px;padding: 0 20px;
}
.subnav ul li a {font-size: 14px;color: #fff;
}
.subnav ul li a span {float: right;
}
.subnav ul li a:hover {color: #00a4ff;
}
.course {float: right;width: 230px;height: 300px;background-color: #fff;/* 浮动的盒子不会有外边距合并的问题 */margin-top: 50px;
}
.course h2 {height: 48px;background-color: #9bceea;text-align: center;line-height: 48px;font-size: 18px;color: #fff;
}
.bd {padding: 0 20px;
}
.bd ul li {padding: 14px 0;border-bottom: 1px solid #ccc;
}
.bd ul li h4 {font-size: 16px;color: #4e4e4e;
}
.bd ul li p {font-size: 12px;color: #a5a5a5;
}
.bd .more {display: block;height: 38px;border: 1px solid #00a4ff;margin-top: 5px;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;
}
/* 精品推荐模块 */
.goods {height: 60px;background-color: #fff;margin-top: 10px;box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);/* 行高会继承， 会继承给3个孩子 */line-height: 60px;
}
.goods h3 {float: left;margin-left: 30px;font-size: 16px;color: #00a4ff;
}
.goods ul {float: left;margin-left: 30px;
}
.goods ul li {float: left;
}
.goods ul li a {padding: 0 30px;font-size: 16px;color: #050505;border-left: 1px solid #ccc;
}
.mod {float: right;margin-right: 30px;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;
}
/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
.box-bd ul {width: 1225px;
}
.box-bd ul li {float: left;width: 228px;height: 270px;background-color: #fff;margin-right: 15px;margin-bottom: 15px;}
.box-bd ul li img {width: 100%;
}
.box-bd ul li h4 {margin: 20px 20px 20px 25px;font-size: 14px;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 模块 */
.footer {height: 415px;background-color: #fff;
}
.footer .w {padding-top: 35px;
}
.copyright {float: left;
}
.copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0;
}
.copyright .app {display: block;width: 118px;height: 33px;border: 1px solid #00a4ff;text-align: center;line-height: 33px;color: #00a4ff;font-size: 16px;
}
.links {float: right;
}
.links dl {float: left;margin-left: 100px;
}
.links dl dt {font-size: 16px;color: #333;margin-bottom: 5px;
}
.links dl dd a {color: #333;font-size: 12px;
}

image

用于存储相关图片

建议有空制作完剩下的部分。

【网页设计】学成在线案例

Demo 典型的企业级网站，目的是为了整体感知企业级网站的布局流程，复习以前知识。集合代码见文章最后。 5.1 准备素材和工具学成在线 PSD 源文件。开发工具 PS（切图） sublime（代码） chrome&#xff0…...

编程日记 2024/10/29 21:32:42

一篇文章总结 SQL 基础知识点

1. 官方文档 MySQL：https://dev.mysql.com/doc/refman/8.4/en/ SQL Server：What is SQL Server? - SQL Server | Microsoft Learn Oracle：https://docs.oracle.com/en/database/oracle/oracle-database/23/lnpls/loe.html 2. 术语 SQL S…...

编程日记 2024/10/29 21:31:41

vue Element U 解决表格数据不更新问题

最近在使用 Vue 和 Element UI 开发后台管理系统时，操作表单数据重新请求表格接口后遇到表格数据不更新的问题。后面查阅了些资料，这通常是由于 Vue 的响应式系统没有检测到数据的变化，或者数据更新后没有正确地触发视图的重新渲染。以下是一…...

编程日记 2024/10/29 21:30:39

PeView 命令行PE文件解析工具

PeView 是一款基于C/C开发的命令行版PE文件解析工具，专门用于解析Windows可执行文件并提供详尽的文件结构和交互式查询功能，帮助用户理解和分析目标程序的内部构成，是逆向分析和软件调试中的重要工具，本次分享工具源代码及使用方法…...

编程日记 2024/10/29 21:29:33

微信小程序25__实现卡片变换

先看效果图实现代码如下： <view class"page" style"filter:hue-rotate({{rotation}}deg)"><view class"prev" catchtap"toPrev">《《《</view><view class"next" catchtap"toNext&q…...

编程日记 2024/10/29 21:26:29

使用Git进行团队协作开发

使用Git进行团队协作开发 Git简介安装Git 在Windows上安装Git 在macOS上安装Git 在Linux上安装Git 设置Git用户信息创建Git仓库基本Git命令添加文件提交更改查看状态克隆仓库推送更改获取更改分支管理创建分支切换分支合并分支删除分支解决合并冲突检查冲突…...

编程日记 2024/10/29 21:24:26

期货跟单、量化交易模拟演示系统

一、跟单下单在“排行榜”中选择要跟单的用户，合约可以跟全部，也可以指定跟该用户的某一合约操作，选定跟单的倍数（操作手数的倍数）/手数（指定手数，可以不是对方的倍数），…...

编程日记 2024/10/29 21:23:23

Python小白学习教程从入门到入坑------第十八课异常模块与包【下】（语法基础）

一、内置全局变量__name__ 在Python中，有一些内置的全局变量和特殊变量，它们是由Python解释器预定义的，可以在代码的任何地方直接使用。这些变量通常用于提供关于当前解释器状态的信息，或者用于控制解释器的行为在Python中&a…...

编程日记 2024/10/29 21:22:21

arcgis pro 3.3.1安装教程

一、获取方式： http://dt4.8tupian.net/2/29913a61b1500.pg3二、软件目录： 三、安装步骤： （1）安装软件运行环境windowsdesktop-runtime 8.0.4; （2）选中安装文件arcgispro_33zh_cn_190127.exe&…...

编程日记 2024/10/29 21:20:19

Spring 获取Cookie/Session

获取Cookie/Session Cookie & Session获取Cookie传统方法获取使用 Spring 获取 Cookie 获取Session传统方法使用 SpringBoot 获取 Session简洁获取 Session HTTP协议自身是属于无状态协议(默认情况下 HTTP 协议的客户端与服务端的这次通信，和下次的通信之间没…...

编程日记 2024/10/29 21:19:18

小红书接口数据查询优化指南

小红书，作为分享生活、购物心得与美妆护肤经验的热门社交媒体平台，对开发者而言，其数据接口具有极高的实用价值。本指南将聚焦于如何通过接口高效查询小红书数据，并提供清晰的步骤与示例代码。一、前置准备在深入查询之前&…...

编程日记 2024/10/29 21:17:11

数据结构 - 图

文章目录一、图的基本概念二、图的储存结构1、邻接矩阵2、邻接表三、图的遍历1、广度优先遍历2、深度优先遍历四、最小生成树1、概念2、Kruskal算法3、Prim算法五、最短路径问题1、单源最短路径--Dijkstra算法2、单源最短路径--Bellman-Ford算法3、多源最短路径--Floyd-War…...

编程日记 2024/10/29 21:15:08

如何在Linux系统中管理和优化Swap空间

如何在Linux系统中管理和优化Swap空间 Swap空间简介检查Swap空间创建Swap空间创建Swap文件创建Swap分区配置Swap空间编辑fstab文件设置vm.swappiness Swap使用策略调整vm.vfs_cache_pressure 设置vm.min_free_kbytes Swap空间的监控使用top命令使用free命令 Swap…...

编程日记 2024/10/29 21:14:06

瑞格智慧心理服务平台 NPreenSMSList.asmx sql注入漏洞复现

0x01 产品描述： ‌ 瑞格智慧心理服务平台‌是一个集心理测评、心理咨询、心理危机干预、心理放松训练等功能于一体的综合性心理健康服务平台。该平台由北京瑞格心灵科技有限公司开发，旨在为用户提供全方位的心理健康服务。0x02 漏洞描述：…...

编程日记 2024/10/29 21:11:03

大模型是否具备推理能力？解读苹果新论文：GSM-Symbolic和GSM8K

在人工智能领域，大模型的推理能力一直备受关注。OpenAI的GPT-4和其他大模型的表现令人惊叹，但究竟是否具备真正的数学推理和抽象逻辑能力？最近，苹果的研究人员发表了一篇题为“GSM-Symbolic：理解大语言模型中数学推理的…...

编程日记 2024/10/29 21:10:02

自动化部署-02-jenkins部署微服务

文章目录前言一、配置SSH-KEY1.1 操作jenkins所在服务器1.2 操作github1.3 验证二、服务器安装git三、jenkins页面安装maven四、页面配置自动化任务4.1 新建任务4.2 选择4.3 配置参数4.4 配置脚本五、执行任务5.1 点击执行按钮5.2 填写参数5.3 查看日志六、查看服务器文件七…...

编程日记 2024/10/29 21:09:01

HTB：Analytics[WriteUP]

目录连接至HTB服务器并启动靶机 1.How many open TCP ports are listening on Analytics? 2.What subdomain is configured to provide a different application on the target web server? 3.What application is running on data.analytical.htb? 4.What version of…...

编程日记 2024/10/29 21:04:56

【每日题解】3211. 生成不含相邻零的二进制字符串

给你一个正整数 n。如果一个二进制字符串 x 的所有长度为 2 的子字符串中包含至少一个 "1"，则称 x 是一个有效字符串。返回所有长度为 n 的有效字符串，可以以任意顺序排列。示例 1： 输入： n 3 输出&a…...

编程日记 2024/10/29 21:03:56

Nginx、Tomcat等项目部署问题及解决方案详解

目录前言1. Nginx部署后未按预期显示结果1.1 查看Nginx的启动情况1.2 解决启动失败的常见原因 2. 端口开启问题2.1 Windows环境下的端口开放2.2 Linux环境下的端口开放 3. 重视日志分析3.1 Nginx日志分析3.2 Tomcat日志分析 4. 开发环境与部署后运行结果不同4.1 开发环境与生产…...

编程日记 2024/10/29 21:02:54

【PythonWeb开发】Flask-RESTful参数解析

flask-restful中的reqparse.RequestParser是一个用于解析和验证参数的工具。它可以帮助开发者从请求中提取参数，并确保这些参数符合预期的格式和类型。参数解析的意思就是规范化传入的参数并获取到这些参数。一、什么是 reqparse.RequestParser？ reqpa…...

编程日记 2024/10/29 20:59:52

gcc与mingw64版本介绍

三类编译器 GCC，全称为GNU Compiler Collection，是一个强大的编译器集合，它不仅支持C和C语言，还支持Fortran、Ada、Java等多种编程语言的编译。在GCC工具链中，gcc和g是两个核心的编译器工具。gcc是专门用于编译C语言程…...

编程日记 2024/10/29 20:56:39

CSS3新增长度单位

CSS3新增长度单位 rem：根元素字体的倍数，只与根元素字体大小有关；vw：占视口宽度的百分比；vh：占视口高度的百分比；vmax：占视口中宽和高最大的百分比；vmin：占视…...

编程日记 2024/10/29 20:52:32

【Spring】创建Spring项目前的配置工作

🥊作者：一只爱打拳的程序猿，Java领域新星创作者，CSDN、阿里云社区优质创作者。 🤼文章收录于：Spring 目录 1.下载Spring Initializr 2.配置Spring国内源 3.添加Spring框架的支持(pom.xml) 4.刷新Maven仓…...

编程日记 2024/10/29 20:51:31

docker 安装部署 nginx

命令 docker run \ -p 15008:80 \ --name nginx1.21.6 \ -v /iepms/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \ -v /iepms/nginx/conf/conf.d:/etc/nginx/conf.d \ -v /iepms/nginx/log:/var/log/nginx \ -v /iepms/nginx/html:/usr/share/nginx/html \ -d 192.168.1.103…...

编程日记 2024/10/29 20:49:29