CSS基础也要进行模电实验
盒子阴影
圆角边框已经介绍过哩，现在先介绍一下盒子阴影的效果如何实现
CSS3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影
这是固定的语法：
text-shadow: h-shadow v-shadow blur color;它有这些可选的值：
哦。
简单的给537添加一下阴影：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}body{background-color: aliceblue;}a{color:#333;text-decoration: none;}.box{width: 298px;height: 415px;background-color: #fff;margin: 100px auto; /*块级元素居中 */box-shadow: 10px 10px 10px 10px;} .box img{width: 100%;}.review{height: 70px;font-size: 14px;padding: 0 28px;/* 段落没有width属性，所以padding不会撑开盒子的宽度 */margin-top: 30px;}.appraise{font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info{font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4{display: inline-block;font-weight: 400; /* 不加粗 */}.info span{color: #ff6700;}.info em{font-style: normal;color: #ebe4e0;margin: 0 6px 0 15px;}</style>
</head>
<body><div class="box"><img src="./pp.jpg" alt=""><p class="review">乌拉呀哈咿呀哈，呜呀伊哈,乌拉乌拉呀哈，呀哈呀哈乌拉</p><div class="appraise">来自114514条评价</div><div class="info"><h4><a href="#">软萌孙乌空...</a></h4> <em>|</em><span>49.0元</span></div></div>
</body>
</html>
第一个参数是控制在X轴上移动的，左为负，右为正，第二个参数是在Y轴移动
第三个参数是模糊距离，第四个参数是影子大小
默认的参数是设置影子在外面的，也可以通过inset使影子向内扩张，默认的效果是外阴影，但是不写这个单词，否则会导致阴影无效
盒子阴影不占用空间，不会影响其他盒子的排列
这是调整完之后：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}body{background-color: rgb(66, 66, 66);}a{color:#333;text-decoration: none;}.box{width: 298px;height: 415px;background-color: #fff;margin: 100px auto; /*块级元素居中 */border: 0px solid;border-radius: 3%;} .box:hover{box-shadow: 0px 0px 10px 3px yellow;}.box img{width: 100%;border: 0px solid;border-radius: 3%;}.review{height: 70px;font-size: 14px;padding: 0 28px;/* 段落没有width属性，所以padding不会撑开盒子的宽度 */margin-top: 30px;}.appraise{font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info{font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4{display: inline-block;font-weight: 400; /* 不加粗 */}.info span{color: #ff6700;}.info em{font-style: normal;color: #ebe4e0;margin: 0 6px 0 15px;}</style>
</head>
<body><div class="box"><img src="./pp.jpg" alt=""><p class="review">乌拉呀哈咿呀哈，呜呀伊哈,乌拉乌拉呀哈，呀哈呀哈乌拉</p><div class="appraise">来自114514条评价</div><div class="info"><h4><a href="#">软萌孙乌空...</a></h4> <em>|</em><span>49.0元</span></div></div>
</body>
</html>
文字阴影
在CSS3中，我们可以通过text-shadow属性将阴影应用于文本
语法：
text-shadow: h-shadow v-shadow blur color; 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.h{text-shadow: 0px 0px 7px blue;}</style>
</head>
<body><h1 class="h">齐夏呢，救一下啊</h1>
</body>
</html>
浮动
说浮动之前先来介绍一下网页布局的三种方式，传统网页布局的本质是用CSS来摆放盒子，把盒子摆放到相应的位置
三种传统的布局方式：普通流（标准流），浮动，定位
标准流就是标签按照规定好默认方式排列
块级元素会独占一行，从上向下顺序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span、a、i、em 等
以上的布局方式都是用来摆放盒子的，盒子拜访到合适的位置布局就完成了（实际开发中每个页面都包含了这三种布局方式）
为什么需要浮动呢？
标准流不是万能的，实现一些效果不太方便，所以要有浮动：
而且一些网页在翻动的时候有些块是定位住的
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
选择器 { float: 属性值; } <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{background-color: aquamarine;width: 200px;height: 300px;float: left;}</style>
</head>
<body><div>社畜鼠</div><div>加班狗</div>
</body>
</html>
加的是左浮动就在左边，是右浮动就在右边
浮动特性：
1. 浮动元素会脱离标准流(脱标)
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性
脱标的盒子就不再保留原先的位置了
如果给多个盒子都设置了浮动，则他们会按照属性值一行内显示并且在顶端对齐排列
tips：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理
为了约束浮动元素位置，网页布局一般采取的策略：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则：
拿我亲爱的小米举个例子，想要实现这个效果当如何？
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>a{display: block;width: 240px;height: 40px;background-color: rgb(124, 124, 124);font-size: 14px;color: aliceblue;text-decoration: none;text-indent: 2em;line-height: 40px;}a:hover{background-color: chocolate;}.box{width: 1200px;height: 460px;background-color: cornflowerblue;margin: 0 auto;}.left{width: 240px;height: 460px;background-color: aquamarine;float: left;}.right{width: 960px;height: 460px;background-color: cadetblue;float: right;}</style><title>Document</title>
</head>
<body><div class="box"><div class="left"><a href="#">爪机</a><a href="#">平板垫脑</a><a href="#">垫脑</a><a href="#">su7</a><a href="#">纸张垃圾桶</a><a href="#">凤梨月饼</a><a href="#">口袋照片打印机</a></div><div class="right"></div></div></body>
</html>外面有一个大盒子，大盒子里面是左盒子和右盒子
那如果是这样的页面应该如何去实现呢？
首先肯定还是以盒子的形式去实现，是浮动元素搭配标准流的父盒子
ul里面包含li就可以实现这个效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}li{list-style: none;}.box{width: 1226px;height: 285px;background-color: aquamarine;margin: 0 auto;}</style>
</head>
<body><ul class="box"><li></li><li></li><li></li><li></li></ul>
</body>
</html>先把前置工作做好捏：
然后一步登天：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}li{list-style: none;}.box{width: 1226px;height: 285px;background-color: aquamarine;margin: 0 auto;}.box li{width: 296px;height: 285px;background-color: darkcyan;float: left;margin-right: 14px;}.box .last{margin-right: 0;}</style>
</head>
<body><ul class="box"><li></li><li></li><li></li><li class="last"></li></ul>
</body>
</html>
设置last是因为必须清空最右的边距，因为权重的问题需要设置一些特殊的写法
若是想要实现这种效果当如何？
这是前两个案例的综合
网页布局的第二准则：先设置盒子大小，再设置盒子位置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>.box{width: 1226px;height: 615px;margin: 0 auto;background-color: aqua;}.left{float: left;width: 234px;height: 615px;background-color: rgb(138, 255, 127);}.right{float: right;width: 992px;height: 615px;background-color: brown;}.right>div{width: 234px;height: 300px;background-color: cornflowerblue;float: left;margin-left: 14px;margin-bottom: 14px;}
</style>
</head>
<body><div class="box"><div class="left"></div><div class="right"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
</body>
</html>
可以直接给每个小盒子设置margin-left，这样就不用去掉右边距了
有一些比较常见的网页布局：
实现一下上面的网页布局，很简单：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}li{list-style: none;}.top{height: 50px;background-color: darkgray;}.banner{width: 980px;height: 150px;background-color: gray;margin: 10px auto;}.box{width: 980px;margin: 0 auto;height: 300px;background-color: darkslategrey;}.box li{float: left;width: 237px;height: 300px;background-color: darkseagreen;margin-right: 10px;}.box .last{margin: 0;}.footer{height: 200px;background-color: lightslategrey;margin-top: 10px;}</style>
</head>
<body><div class="top"></div><div class="banner"></div><div class="box"><ul><li></li><li></li><li></li><li class="last"></li></ul></div><div class="footer"></div>
</body>
</html>
浮动的布局需要注意一些东西：
浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
浮动只会压住后面的标准流，不会影响前面的标准流
清除浮动
劳斯为什么需要清除浮动啊？
因为父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父盒子高度为0的时候就会影响下面的标准流盒子
最好是让子盒子撑开父盒子
清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，就不需要清除浮动
清除浮动之后，就会根据浮动的子盒子自动检测高度
父级有了高度就不会影响下面的标准流了
语法是这样的：
选择器{clear:属性值;} 
实际的时候几乎只用clear：both
清除浮动的策略是闭合浮动
清除浮动的方法：
额外标签法（隔墙法），是W3C推荐的做法父级添加overflow属性
父级添加after微元素
父级添加双伪元素
额外标签法
额外标签法会在浮动元素的末尾添加一个空标签
<div style=”clear:both”></div>优点是通俗易懂书写方便
缺点是添加许多无意义的标签结构化会比较差
新的空标签必须是块级元素
清除浮动的本质是清除浮动元素脱离标准流造成的影响
策略是闭合浮动，只让浮动在父盒子的内部影响，不影响父盒子外的其他盒子
额外表前阀就是在最后一个浮动的子元素后面加一个额外标签，添加清除浮动样式
实际工作可能会遇到但是不常用
父级添加overflow
可以给父级添加overflow 属性，将其属性值设置为 hidden、 auto 或 scroll
子不教父之过
优点是代码简介，缺点是无法显示溢出的部分
:after伪元素法
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; } 把这个代码复制就可以了
也是给父元素添加
优点是没有增加标签，缺点是照顾低版本的浏览器
大厂都用这个，还挺高端的
双伪元素清除浮动
这是给父元素添加：
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } 优点是代码更简洁，缺点还是照顾低版本浏览器
还有一些大厂用这个
为什么要清除浮动？
父级没高度
子盒子浮动了
影响下面的布局了，我们就应该清除浮动
学成在线案例
我们需要准备一些工具：
PSD源文件
开发工具=PS+sublime+chrome
结构样式相分离的思想：
CSS属性的书写顺序
1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（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(0,0,0,.5); border-radius: 10px; } 为了提高网页的制作效率，布局时通常有这样的流程：
1. 必须确定页面的版心（可视区），我们测量可得知
2. 分析页面中的行模块，以及每个行模块中的列模块。页面布局，就是一行行罗列而成的
3. 制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要
4. 开始运用盒子模型的原理，通过 DIV+CSS 布局来控制网页的各个模块
头部制作
首先需要确定这个页面的版心，它是1200px，且都要水平居中对齐，可以这样定义一个版心公共类：
.w { width: 1200px; margin: auto; } 然后我们制作logo部分：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="header w"><!-- logo部分 --><div class="logo"><img src="./logo.png"></div></div>
</body>*{margin: 0;padding: 0;
}
.w{width: 1200px;margin: auto;
}
.header{height: 42px;margin: 30px auto;background-color: aquamarine;
}
.logo{width: 198px;height: 42px;
}然后制作导航栏的部分
在实际开发的时候我们痐直接使用链接a，而是使用包含链接（li+a）的做法
li+a语意更加清晰，一看就是有条理的列表型内容
如果直接用a，搜索引擎容易辨别为有堆砌关键字的嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险）从而影响网站排名
于是我们进行一个导航栏的制作：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="header w"><!-- logo部分 --><div class="logo"><img src="./logo.png"></div><!-- 导航栏 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div></div>
</body>*{margin: 0;padding: 0;
}
.w{width: 1200px;margin: auto;
}
a{text-decoration: none;
}
.header{height: 42px;margin: 30px auto;background-color: aquamarine;
}
.logo{float: left;width: 198px;height: 42px;
}
li{list-style: none;
}
.nav{float: left;margin-left: 60px;
}
.nav li{float: left;margin: 0 15px;
}
.nav ul li a{float: left;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}
.nav ul li a:hover
{border-bottom: 2px solid rgb(66, 171, 250);color: rgb(66, 171, 250);
}接下来我们可以制作一下搜索模块，搜索模块要定义三个盒子
最外面的大盒子，搜索框，和button按钮
button按钮最外面有默认的边框，设置成0就没有了
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="header w"><!-- logo部分 --><div class="logo"><img src="./logo.png"></div><!-- 导航栏 --><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>
</body>*{margin: 0;padding: 0;
}
.w{width: 1200px;margin: auto;
}
a{text-decoration: none;
}
.header{height: 42px;margin: 30px auto;background-color: aquamarine;
}
.logo{float: left;width: 198px;height: 42px;
}
li{list-style: none;
}
.nav{float: left;margin-left: 60px;
}
.nav li{float: left;margin: 0 15px;
}
.nav ul li a{float: left;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}
.nav ul li a:hover
{border-bottom: 2px solid rgb(66, 171, 250);color: rgb(66, 171, 250);
}
.search{float: left;width: 414px;height: 42px;background-color: skyblue;margin-left: 50px;
}
.search input{float: left;width: 345px;height: 40px;border: 1.5px solid rgb(66, 171, 250);color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
.search button
{float: left;width: 50px;height: 42px;background: url(./btn.png);border: 0;
}这是搜索框的实现，，，
接下来实现头像模块，图片文字搞里头，加上炫酷浮动
我没完全按照课程的写：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="header w"><!-- logo部分 --><div class="logo"><img src="./logo.png"></div><!-- 导航栏 --><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"><div class="img"><img src="./微信图片_20240126204802.jpg"></div><div class="name">switch</div></div></div>
</body>*{margin: 0;padding: 0;
}
.w{width: 1200px;margin: auto;
}
a{text-decoration: none;
}
.header{height: 42px;margin: 30px auto;
}
.logo{float: left;width: 198px;height: 42px;
}
li{list-style: none;
}
.nav{float: left;margin-left: 60px;
}
.nav li{float: left;margin: 0 15px;
}
.nav ul li a{float: left;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}
.nav ul li a:hover
{border-bottom: 2px solid rgb(66, 171, 250);color: rgb(66, 171, 250);
}
.search{float: left;width: 414px;height: 42px;margin-left: 50px;
}
.search input{float: left;width: 345px;height: 40px;border: 1.5px solid rgb(66, 171, 250);color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
.search button
{float: left;width: 50px;height: 42px;background: url(./btn.png);border: 0;
}
.user .img img{float: left;width: 34px;border-radius: 17px;border-style: solid;border-width: 1px;border-color:rgb(213, 235, 255) ;margin-left: 70px;margin-top: 3px;
}
.user .name
{float: left;text-align: center;margin: 9px;color: #555555;
}这是目前头部的效果图：
banner制作
接下来要进行banner的制作
这是盒子们
1号盒子是通栏的大盒子banner，不给宽度，给高度，给一个蓝色背景
2号盒子是版心，要水平居中对齐
3号盒子版心内，左对齐subnav侧导航栏
4号盒子版心内，右对齐course课程
我们先把大盒子和版心做出来：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 这是头部区域 --><div class="header w"><!-- logo部分 --><div class="logo"><img src="./logo.png"></div><!-- 导航栏 --><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"><div class="img"><img src="./微信图片_20240126204802.jpg"></div><div class="name">switch</div></div></div><!-- 这是banner部分 --><div class="banner"><!-- 版心 --><div class="w"></div></div>
</body>*{margin: 0;padding: 0;
}
.w{width: 1200px;margin: auto;
}
a{text-decoration: none;
}
.header{height: 42px;margin: 30px auto;
}
.logo{float: left;width: 198px;height: 42px;
}
li{list-style: none;
}
.nav{float: left;margin-left: 60px;
}
.nav li{float: left;margin: 0 15px;
}
.nav ul li a{float: left;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}
.nav ul li a:hover
{border-bottom: 2px solid rgb(66, 171, 250);color: rgb(66, 171, 250);
}
.search{float: left;width: 414px;height: 42px;margin-left: 50px;
}
.search input{float: left;width: 345px;height: 40px;border: 1.5px solid rgb(66, 171, 250);color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
.search button
{float: left;width: 50px;height: 42px;background: url(./btn.png);border: 0;
}
.user .img img{float: left;width: 34px;border-radius: 17px;border-style: solid;border-width: 1px;border-color:rgb(213, 235, 255) ;margin-left: 70px;margin-top: 3px;
}
.user .name
{float: left;text-align: center;margin: 9px;color: #555555;
}
.banner{height: 421px;background-color: #1c036c;
}
.banner .w
{height: 421px;background:url(./banner2.png) no-repeat top center;margin: 0 auto;
}
有点意思
左侧边栏
先把左边的侧栏做出来，因为我们的目标样式是黑色的半透明效果，然后需要有一个浮动在盒子右端的小箭头，以及链接包含在li里面，hover效果进行实现
接下来我们努力实现一下这样的布局：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 这是头部区域 --><div class="header w"><!-- logo部分 --><div class="logo"><img src="./logo.png"></div><!-- 导航栏 --><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"><div class="img"><img src="./微信图片_20240126204802.jpg"></div><div class="name">switch</div></div></div><!-- 这是banner部分 --><div class="banner"><!-- 版心 --><div class="w"><div class="subnav"><ul><li><a href="#">前端开发<span>></span></a></li><li><a href="#">后端开发<span>></span></a></li><li><a href="#">人工智能<span>></span></a></li><li><a href="#">移动开发<span>></span></a></li><li><a href="#">商业预测<span>></span></a></li><li><a href="#">云计算&大数据<span>></span></a></li><li><a href="#">运维&测试<span>></span></a></li><li><a href="#">UI设计<span>></span></a></li><li><a href="#">产品<span>></span></a></li></ul> </div></div></div>
</body>*{margin: 0;padding: 0;
}
.w{width: 1200px;margin: auto;
}
a{text-decoration: none;
}
.header{height: 42px;margin: 30px auto;
}
.logo{float: left;width: 198px;height: 42px;
}
li{list-style: none;
}
.nav{float: left;margin-left: 60px;
}
.nav li{float: left;margin: 0 15px;
}
.nav ul li a{float: left;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}
.nav ul li a:hover
{border-bottom: 2px solid rgb(66, 171, 250);color: rgb(66, 171, 250);
}
.search{float: left;width: 414px;height: 42px;margin-left: 50px;
}
.search input{float: left;width: 345px;height: 40px;border: 1.5px solid rgb(66, 171, 250);color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
.search button
{float: left;width: 50px;height: 42px;background: url(./btn.png);border: 0;
}
.user .img img{float: left;width: 34px;border-radius: 17px;border-style: solid;border-width: 1px;border-color:rgb(213, 235, 255) ;margin-left: 70px;margin-top: 3px;
}
.user .name
{float: left;text-align: center;margin: 9px;color: #555555;
}
.banner{height: 421px;background-color: #1c036c;
}
.banner .w
{height: 421px;background:url(./banner2.png) no-repeat top center;margin: 0 auto;
}
.subnav{width: 190px;height: 421px;background-color: rgb(0,0,0,0.3);
}
.subnav ul li{height: 45px;line-height: 45px;padding: 0 20px;
}
.subnav ul li a{font-size: 14px;color: white;
}
.subnav ul li a span{float: right;
}
.subnav ul li a:hover{color: rgb(66, 171, 250);
}课程表模块
接下来做课程表模块
课程表模块就三个盒子，外面的大盒子，大盒子里面上下两部分
浮动的盒子不会存在外边距合并的问题
上ul下v，ul里面又有li，li里面可以放一个标题标签和一个段落标签：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 这是头部区域 --><div class="header w"><!-- logo部分 --><div class="logo"><img src="./logo.png"></div><!-- 导航栏 --><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"><div class="img"><img src="./微信图片_20240126204802.jpg"></div><div class="name">switch</div></div></div><!-- 这是banner部分 --><div class="banner"><!-- 版心 --><div class="w"><div class="subnav"><ul><li><a href="#">前端开发<span>></span></a></li><li><a href="#">后端开发<span>></span></a></li><li><a href="#">人工智能<span>></span></a></li><li><a href="#">移动开发<span>></span></a></li><li><a href="#">商业预测<span>></span></a></li><li><a href="#">云计算&大数据<span>></span></a></li><li><a href="#">运维&测试<span>></span></a></li><li><a href="#">UI设计<span>></span></a></li><li><a href="#">产品<span>></span></a></li></ul> </div><!-- 课程表模块 --><div class="course"><h2>工科生课程表</h2><div class="bd"><ul><li><h4>继续学习 类和对象</h4><p>正在学习 初识C++</p></li><li><h4>继续学习 UDP协议</h4><p>正在学习 socket套接字</p></li><li><h4>继续学习 InnoDB架构</h4><p>正在学习 MySQL存储引擎</p></li></ul><a class="more" href="#">全部课程</a></div></div></div></div>
</body>*{margin: 0;padding: 0;
}
.w{width: 1200px;margin: auto;
}
a{text-decoration: none;
}
.header{height: 42px;margin: 30px auto;
}
.logo{float: left;width: 198px;height: 42px;
}
li{list-style: none;
}
.nav{float: left;margin-left: 60px;
}
.nav li{float: left;margin: 0 15px;
}
.nav ul li a{float: left;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}
.nav ul li a:hover
{border-bottom: 2px solid rgb(66, 171, 250);color: rgb(66, 171, 250);
}
.search{float: left;width: 414px;height: 42px;margin-left: 50px;
}
.search input{float: left;width: 345px;height: 40px;border: 1.5px solid rgb(66, 171, 250);color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
.search button
{float: left;width: 50px;height: 42px;background: url(./btn.png);border: 0;
}
.user .img img{float: left;width: 36px;border-radius: 18px;border-style: solid;border-width: 1px;border-color:rgb(213, 235, 255) ;margin-left: 70px;margin-top: 3px;
}
.user .name
{float: left;text-align: center;margin: 9px;color: #555555;
}
.banner{height: 421px;background-color: #1c036c;
}
.banner .w
{height: 421px;background:url(./banner2.png) no-repeat top center;margin: 0 auto;
}
.subnav{float: left;width: 190px;height: 421px;background-color: rgb(0,0,0,0.3);
}
.subnav ul li{height: 45px;line-height: 45px;padding: 0 20px;
}
.subnav ul li a{font-size: 14px;color: white;
}
.subnav ul li a span{float: right;
}
.subnav ul li a:hover{color: rgb(66, 171, 250);
}
.course{float: right;width: 230px;height: 300px;margin-top: 50px;/* 浮动的盒子不存在外边距合并的问题 */background-color: white;
}
.course h2{height: 48px;background-color: #9bceea;text-align: center;font-size: 18px;line-height: 48px;color:white
}
.bd ul li{padding: 14px 0;border-bottom: 1px solid #ccc;
}
.bd{padding: 0 20px;
}
.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: 1.3px solid #00a4ff;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;margin-top: 5px;
}
精品推荐小模块
接下来要做精品推荐模块
这个模块比较简单，，
是外面一个大盒子里面包含三个小盒子
大盒子水平居中，有个盒子阴影
1号和数字是标题h3，左侧浮动
2号盒子里面放链接左侧浮动，goods-item距离可以控制链接的左右外边距（行内元素只给左右内外边距）
3号盒子右浮动
实现一下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 这是头部区域 --><div class="header w"><!-- logo部分 --><div class="logo"><img src="./logo.png"></div><!-- 导航栏 --><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"><div class="img"><img src="./微信图片_20240126204802.jpg"></div><div class="name">switch</div></div></div><!-- 这是banner部分 --><div class="banner"><!-- 版心 --><div class="w"><div class="subnav"><ul><li><a href="#">前端开发<span>></span></a></li><li><a href="#">后端开发<span>></span></a></li><li><a href="#">人工智能<span>></span></a></li><li><a href="#">移动开发<span>></span></a></li><li><a href="#">商业预测<span>></span></a></li><li><a href="#">云计算&大数据<span>></span></a></li><li><a href="#">运维&测试<span>></span></a></li><li><a href="#">UI设计<span>></span></a></li><li><a href="#">产品<span>></span></a></li></ul> </div><!-- 课程表模块 --><div class="course"><h2>工科生课程表</h2><div class="bd"><ul><li><h4>继续学习 类和对象</h4><p>正在学习 初识C++</p></li><li><h4>继续学习 UDP协议</h4><p>正在学习 socket套接字</p></li><li><h4>继续学习 InnoDB架构</h4><p>正在学习 MySQL存储引擎</p></li></ul><a class="more" href="#">全部课程</a></div></div></div></div><!-- 这是精品推荐模块 --><div class="goods w"><h3>精品推荐</h3><ul><li><a href="#">JavaScript</a></li><li><a href="#">MySQL</a></li><li><a href="#">Linux系统编程</a></li><li><a href="#">Linux网络编程</a></li><li><a href="#">C/C++</a></li><li><a href="#">分布式</a></li></ul><a class="mod" href="#">修改兴趣</a></div>
</body>*{margin: 0;padding: 0;
}
.w{width: 1200px;margin: auto;
}
a{text-decoration: none;
}
.header{height: 42px;margin: 30px auto;
}
.logo{float: left;width: 198px;height: 42px;
}
li{list-style: none;
}
.nav{float: left;margin-left: 60px;
}
.nav li{float: left;margin: 0 15px;
}
.nav ul li a{float: left;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}
.nav ul li a:hover
{border-bottom: 2px solid rgb(66, 171, 250);color: rgb(66, 171, 250);
}
.search{float: left;width: 414px;height: 42px;margin-left: 50px;
}
.search input{float: left;width: 345px;height: 40px;border: 1.5px solid rgb(66, 171, 250);color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
.search button
{float: left;width: 50px;height: 42px;background: url(./btn.png);border: 0;
}
.user .img img{float: left;width: 36px;border-radius: 18px;border-style: solid;border-width: 1px;border-color:rgb(213, 235, 255) ;margin-left: 70px;margin-top: 3px;
}
.user .name
{float: left;text-align: center;margin: 9px;color: #555555;
}
.banner{height: 421px;background-color: #1c036c;
}
.banner .w
{height: 421px;background:url(./banner2.png) no-repeat top center;margin: 0 auto;
}
.subnav{float: left;width: 190px;height: 421px;background-color: rgb(0,0,0,0.3);
}
.subnav ul li{height: 45px;line-height: 45px;padding: 0 20px;
}
.subnav ul li a{font-size: 14px;color: white;
}
.subnav ul li a span{float: right;
}
.subnav ul li a:hover{color: rgb(66, 171, 250);
}
.course{float: right;width: 230px;height: 300px;margin-top: 50px;/* 浮动的盒子不存在外边距合并的问题 */background-color: white;
}
.course h2{height: 48px;background-color: #9bceea;text-align: center;font-size: 18px;line-height: 48px;color:white
}
.bd ul li{padding: 14px 0;border-bottom: 1px solid #ccc;
}
.bd{padding: 0 20px;
}
.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: 1.3px solid #00a4ff;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;margin-top: 5px;
}
.goods{height: 60px;background-color: white;margin-top: 10px;box-shadow: 0 2px 3px 3px rgb(0,0,0,0.2);line-height: 60px;/* 行高会继承 */
}
.goods h3{float: left;margin-left: 30px;font-size: 16px;color: #00a4ff;
}
.goods ul{margin-left: 30px;float: left;
}
.mod{float:right;margin-right: 30px;font-size: 14px;color: #00a4ff;
}
.goods ul li{float: left;
}
.goods ul li a{padding: 0 30px;font-size: 16px;color: black;border-left: 1.5px solid #acacac;
}精品推荐大模块
精品推荐大模块的整体结构分上下两个盒子
1号盒子为最大的盒子，box版心水平居中对齐
2号盒子为上面的部分，box-hd -- 里面左侧标题H3左浮动，右侧链接a右浮动
3号盒子为底下部分，box-bd -- 里面是无序列表，有10个li组成
tips：li外边距：给box-hd宽度为1215就可以一行装开五个li
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 这是头部区域 --><div class="header w"><!-- logo部分 --><div class="logo"><img src="./logo.png"></div><!-- 导航栏 --><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"><div class="img"><img src="./微信图片_20240126204802.jpg"></div><div class="name">switch</div></div></div><!-- 这是banner部分 --><div class="banner"><!-- 版心 --><div class="w"><div class="subnav"><ul><li><a href="#">前端开发<span>></span></a></li><li><a href="#">后端开发<span>></span></a></li><li><a href="#">人工智能<span>></span></a></li><li><a href="#">移动开发<span>></span></a></li><li><a href="#">商业预测<span>></span></a></li><li><a href="#">云计算&大数据<span>></span></a></li><li><a href="#">运维&测试<span>></span></a></li><li><a href="#">UI设计<span>></span></a></li><li><a href="#">产品<span>></span></a></li></ul> </div><!-- 课程表模块 --><div class="course"><h2>工科生课程表</h2><div class="bd"><ul><li><h4>继续学习 类和对象</h4><p>正在学习 初识C++</p></li><li><h4>继续学习 UDP协议</h4><p>正在学习 socket套接字</p></li><li><h4>继续学习 InnoDB架构</h4><p>正在学习 MySQL存储引擎</p></li></ul><a class="more" href="#">全部课程</a></div></div></div></div><!-- 这是精品推荐模块 --><div class="goods w"><h3>精品推荐</h3><ul><li><a href="#">JavaScript</a></li><li><a href="#">MySQL</a></li><li><a href="#">Linux系统编程</a></li><li><a href="#">Linux网络编程</a></li><li><a href="#">C/C++</a></li><li><a href="#">分布式</a></li></ul><a class="mod" href="#">修改兴趣</a></div><!-- 核心内容区域 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li></ul></div></div>
</body>*{margin: 0;padding: 0;
}
.w{width: 1200px;margin: auto;
}
a{text-decoration: none;
}
.header{height: 42px;margin: 30px auto;
}
.logo{float: left;width: 198px;height: 42px;
}
li{list-style: none;
}
.nav{float: left;margin-left: 60px;
}
.nav li{float: left;margin: 0 15px;
}
.nav ul li a{float: left;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}
.nav ul li a:hover
{border-bottom: 2px solid rgb(66, 171, 250);color: rgb(66, 171, 250);
}
.search{float: left;width: 414px;height: 42px;margin-left: 50px;
}
.search input{float: left;width: 345px;height: 40px;border: 1.5px solid rgb(66, 171, 250);color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
.search button
{float: left;width: 50px;height: 42px;background: url(./btn.png);border: 0;
}
.user .img img{float: left;width: 36px;border-radius: 18px;border-style: solid;border-width: 1px;border-color:rgb(213, 235, 255) ;margin-left: 70px;margin-top: 3px;
}
.user .name
{float: left;text-align: center;margin: 9px;color: #555555;
}
.banner{height: 421px;background-color: #1c036c;
}
.banner .w
{height: 421px;background:url(./banner2.png) no-repeat top center;margin: 0 auto;
}
.subnav{float: left;width: 190px;height: 421px;background-color: rgb(0,0,0,0.3);
}
.subnav ul li{height: 45px;line-height: 45px;padding: 0 20px;
}
.subnav ul li a{font-size: 14px;color: white;
}
.subnav ul li a span{float: right;
}
.subnav ul li a:hover{color: rgb(66, 171, 250);
}
.course{float: right;width: 230px;height: 300px;margin-top: 50px;/* 浮动的盒子不存在外边距合并的问题 */background-color: white;
}
.course h2{height: 48px;background-color: #9bceea;text-align: center;font-size: 18px;line-height: 48px;color:white
}
.bd ul li{padding: 14px 0;border-bottom: 1px solid #ccc;
}
.bd{padding: 0 20px;
}
.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: 1.3px solid #00a4ff;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;margin-top: 5px;
}
.goods{height: 60px;background-color: rgb(241, 245, 247);margin-top: 10px;box-shadow: 0 2px 3px 3px rgb(0,0,0,0.2);line-height: 60px;/* 行高会继承 */
}
.goods h3{float: left;margin-left: 30px;font-size: 16px;color: #00a4ff;
}
.goods ul{margin-left: 30px;float: left;
}
.mod{float:right;margin-right: 30px;font-size: 14px;color: #00a4ff;
}
.goods ul li{float: left;
}
.goods ul li a{padding: 0 30px;font-size: 16px;color: black;border-left: 1.5px solid #acacac;
}
.box{margin: 30px auto;
}
.box-hd{height: 45px;
}
.box-hd h3{float: left;font-size: 20px;color: #494949;
}
.box-hd a{font-size: 12px;color: #a5a5a5;float: right;margin-top: 10px;margin-right: 30px;
}
.box-bd ul{/* 把li的父亲ul修改到足够宽直到能装开五个盒子就不会换行了 */width: 1225px;
}
.box-bd ul li{float: left;width: 228px;height: 270px;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;
}
底部模块
关于学成在线的底部模块，有着这样的设计结构：
1号是通栏的大盒子，底部的footer给高度，底色是白色
2号盒子版心水平居中
3号盒子版权copyright左对齐
4号盒子连接组links右对齐
我们给底部模块加上颜色会发现它显示在了不应该的位置，这是因为浮动的原因，我们想让子元素把父盒子撑开，因为不固定，所以并没有给父盒子设置高度
这个时候只需要清除父盒子的浮动就好了：
在进行底部右盒子的制作的时候，可以用dl标签来设计格式
以上就全部做完了，这是全部的代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 这是头部区域 --><div class="header w"><!-- logo部分 --><div class="logo"><img src="./logo.png"></div><!-- 导航栏 --><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"><div class="img"><img src="./微信图片_20240126204802.jpg"></div><div class="name">switch</div></div></div><!-- 这是banner部分 --><div class="banner"><!-- 版心 --><div class="w"><div class="subnav"><ul><li><a href="#">前端开发<span>></span></a></li><li><a href="#">后端开发<span>></span></a></li><li><a href="#">人工智能<span>></span></a></li><li><a href="#">移动开发<span>></span></a></li><li><a href="#">商业预测<span>></span></a></li><li><a href="#">云计算&大数据<span>></span></a></li><li><a href="#">运维&测试<span>></span></a></li><li><a href="#">UI设计<span>></span></a></li><li><a href="#">产品<span>></span></a></li></ul> </div><!-- 课程表模块 --><div class="course"><h2>工科生课程表</h2><div class="bd"><ul><li><h4>继续学习 类和对象</h4><p>正在学习 初识C++</p></li><li><h4>继续学习 UDP协议</h4><p>正在学习 socket套接字</p></li><li><h4>继续学习 InnoDB架构</h4><p>正在学习 MySQL存储引擎</p></li></ul><a class="more" href="#">全部课程</a></div></div></div></div><!-- 这是精品推荐模块 --><div class="goods w"><h3>精品推荐</h3><ul><li><a href="#">JavaScript</a></li><li><a href="#">MySQL</a></li><li><a href="#">Linux系统编程</a></li><li><a href="#">Linux网络编程</a></li><li><a href="#">C/C++</a></li><li><a href="#">分布式</a></li></ul><a class="mod" href="#">修改兴趣</a></div><!-- 核心内容区域 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li><li><img src="./pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> • 114514人正在看</div></li></ul></div></div><!-- 这是底部模块 --><div class="footer"><div class="w"><div class="copyright"><img src="./logo.png" alt=""><p>学成在线致力于普及中国最好的教育,它与中国一流大学和机构合作提供在线课程。<br>@ 2017年XTCG Inc.保留所有权利。 -沪ICP备15025219号</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></dl></div></div></div>
</body>body{background-color: rgb(241, 245, 247);
}
*{margin: 0;padding: 0;
}
.w{width: 1200px;margin: auto;
}
a{text-decoration: none;
}
.header{height: 42px;margin: 30px auto;
}
.logo{float: left;width: 198px;height: 42px;
}
li{list-style: none;
}
.nav{float: left;margin-left: 60px;
}
.nav li{float: left;margin: 0 15px;
}
.nav ul li a{float: left;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}
.nav ul li a:hover
{border-bottom: 2px solid rgb(66, 171, 250);color: rgb(66, 171, 250);
}
.search{float: left;width: 414px;height: 42px;margin-left: 50px;
}
.search input{float: left;width: 345px;height: 40px;border: 1.5px solid rgb(66, 171, 250);color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
.search button
{float: left;width: 50px;height: 42px;background: url(./btn.png);border: 0;
}
.user .img img{float: left;width: 36px;border-radius: 18px;border-style: solid;border-width: 1px;border-color:rgb(213, 235, 255) ;margin-left: 70px;margin-top: 3px;
}
.user .name
{float: left;text-align: center;margin: 9px;color: #555555;
}
.banner{height: 421px;background-color: #1c036c;
}
.banner .w
{height: 421px;background:url(./banner2.png) no-repeat top center;margin: 0 auto;
}
.subnav{float: left;width: 190px;height: 421px;background-color: rgb(0,0,0,0.3);
}
.subnav ul li{height: 45px;line-height: 45px;padding: 0 20px;
}
.subnav ul li a{font-size: 14px;color: white;
}
.subnav ul li a span{float: right;
}
.subnav ul li a:hover{color: rgb(66, 171, 250);
}
.course{float: right;width: 230px;height: 300px;margin-top: 50px;/* 浮动的盒子不存在外边距合并的问题 */background-color: white;
}
.course h2{height: 48px;background-color: #9bceea;text-align: center;font-size: 18px;line-height: 48px;color:white
}
.bd ul li{padding: 14px 0;border-bottom: 1px solid #ccc;
}
.bd{padding: 0 20px;
}
.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: 1.3px solid #00a4ff;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;margin-top: 5px;
}
.goods{height: 60px;background-color: white;/* background-color: rgb(241, 245, 247); */margin-top: 10px;box-shadow: 0 2px 3px 3px rgb(0,0,0,0.2);line-height: 60px;/* 行高会继承 */
}
.goods h3{float: left;margin-left: 30px;font-size: 16px;color: #00a4ff;
}
.goods ul{margin-left: 30px;float: left;
}
.mod{float:right;margin-right: 30px;font-size: 14px;color: #00a4ff;
}
.goods ul li{float: left;
}
.goods ul li a{padding: 0 30px;font-size: 16px;color: black;border-left: 1.5px solid #acacac;
}
.box{margin: 30px auto;
}
.box-hd{height: 45px;
}
.box-hd h3{float: left;font-size: 20px;color: #494949;
}
.box-hd a{font-size: 12px;color: #a5a5a5;float: right;margin-top: 10px;margin-right: 30px;
}
.box-bd ul{/* 把li的父亲ul修改到足够宽直到能装开五个盒子就不会换行了 */width: 1225px;
}
.box-bd ul li{float: left;width: 228px;height: 270px;margin-right: 15px;margin-bottom: 15px;background-color: white;
}
.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{height: 415px;width: 1537px;background-color: white;
}
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .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{font-size: 12px;color: #333;}再会~
相关文章：
CSS基础也要进行模电实验
盒子阴影 圆角边框已经介绍过哩，现在先介绍一下盒子阴影的效果如何实现 CSS3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影 这是固定的语法： text-shadow: h-shadow v-shadow blur color; 它有这些可选的值： 哦。 …...
贴代码框架PasteForm特性介绍之markdown和richtext
简介 PasteForm是贴代码推出的 “新一代CRUD” ，基于ABPvNext，目的是通过对Dto的特性的标注，从而实现管理端的统一UI，借助于配套的PasteBuilder代码生成器，你可以快速的为自己的项目构建后台管理端！目前管…...
3D Gaussian Splatting 代码层理解之Part3
最后，内容到达了高斯泼溅过程中最有趣的阶段：渲染！这一步可以说是最关键的，因为它决定了模型的真实性。然而，它也可能是最简单的。在本系列的Part 1和Part2，文章演示了如何将 Raw 3D椭球 转换为可渲染的格式，但现在我们实际上必须完成这项工作并渲染到一组固定的像素上。…...
Ceph 中PG与PGP的概述
在Ceph分布式存储系统中，PG（Placement Group）和PGP（Placement Group for Placement purpose）是两个至关重要的概念，它们共同决定了数据在集群中的分布和复制方式。以下是关于Ceph中PG和PGP关系的详细解释&a…...
已解决：spark代码中sqlContext.createDataframe空指针异常
这段代码是使用local模式运行spark代码。但是在获取了spark.sqlContext之后，用sqlContext将rdd算子转换为Dataframe的时候报错空指针异常 Exception in thread "main" org.apache.spark.sql.AnalysisException: java.lang.RuntimeException: java.lang.Nu…...
flutter字体大小切换案例 小字体，标准字体，大字体，超大字体案例
flutter字体大小切换案例 小字体，标准字体，大字体，超大字体案例 Android iOS设备带有选择记录 我的flutter项目版本 environment: sdk: ‘>3.4.4 <4.0.0’ 图片案例 pubspec.yaml 添加依赖 # 屏幕尺寸适配 https://github.com/OpenF…...
智慧建造-运用Trimble技术将梦幻水族馆变为现实【上海沪敖3D】
项目概述 西雅图水族馆耗资1.6亿美元对海洋馆进行扩建。该项目包括建造三个大型栖息地，每个建筑物几乎都没有直边，其中一个主栖息地由520立方米混凝土和355吨钢筋组成。特纳建筑公司的混凝土团队通过强大的贸易合作伙伴和创新的数字制造技术，…...
【NOIP提高组】计算系数
【NOIP提高组】计算系数 C语言实现C实现Java实现Python实现 💐The Begin💐点点关注，收藏不迷路💐 给定一个多项式 (ax by)^k ，请求出多项式展开后 x^n y^m 项的系数。 输入 共一行，包含 5 个整数&#x…...
IDEA部署AI代写插件
前言 Hello大家好，当下是AI盛行的时代，好多好多东西在AI大模型的趋势下都变得非常的简单。 比如之前想画一幅风景画得先去采风，然后写实什么的，现在你只需描述出你想要的效果AI就能够根据你的描述在几分钟之内画出一幅你想要的风景…...
【阅读记录-章节1】Build a Large Language Model (From Scratch)
目录 1. Understanding large language models1.1 What is an LLM?补充介绍人工智能、机器学习和深度学习的关系机器学习 vs 深度学习传统机器学习 vs 深度学习（以垃圾邮件分类为例） 1.2 Applications of LLMs1.3 Stages of building and using LLMs1.4…...
微服务day08
Elasticsearch 需要安装elasticsearch和Kibana，应为Kibana中有一套控制台可以方便的进行操作。 安装elasticsearch 使用docker命令安装： docker run -d \ --name es \-e "ES_JAVA_OPTS-Xms512m -Xmx512m" \ //设置他的运行内存空间&#x…...
JAVA接入WebScoket行情接口
Java脚好用的库很多，开发效率一点不输Python。如果是日内策略，需要更实时的行情数据，不然策略滑点太大，容易跑偏结果。 之前爬行情网站提供的level1行情接口，实测平均更新延迟达到了6秒，超过10只股票并发请…...
使用Axios函数库进行网络请求的使用指南
目录 前言1. 什么是Axios2. Axios的引入方式2.1 通过CDN直接引入2.2 在模块化项目中引入 3. 使用Axios发送请求3.1 GET请求3.2 POST请求 4. Axios请求方式别名5. 使用Axios创建实例5.1 创建Axios实例5.2 使用实例发送请求 6. 使用async/await简化异步请求6.1 获取所有文章数据6…...
Vue2+ElementUI：用计算属性实现搜索框功能
前言： 本文代码使用vue2element UI。 输入框搜索的功能，可以在前端通过计算属性过滤实现，也可以调用后端写好的接口。本文介绍的是通过计算属性对表格数据实时过滤，后附完整代码，代码中提供的是死数据，可…...
抖音热门素材去哪找？优质抖音视频素材网站推荐！
是不是和我一样，刷抖音刷到停不下来？越来越多的朋友希望在抖音上创作出爆款视频，但苦于没有好素材。今天就来推荐几个超级实用的抖音视频素材网站，让你的视频内容立刻变得高大上！这篇满是干货，直接上重点&a…...
spring-cache concurrentHashMap 自定义过期时间
1.自定义实现缓存构建工厂 import java.util.concurrent.ConcurrentHashMap; import java.util.concurrent.ConcurrentMap;import lombok.Getter; import lombok.Setter; import org.springframework.beans.factory.BeanNameAware; import org.springframework.beans.factory.…...
解析传统及深度学习目标检测方法的原理与具体应用之道
深度学习目标检测算法 常用的深度学习的目标检测算法及其原理和具体应用方法： R-CNN（Region-based Convolutional Neural Networks）系列1： 原理： 候选区域生成：R-CNN 首先使用传统的方法（如 Se…...
shell数组
文章目录 🍊自我介绍🍊shell数组概述🍊Shell数组使用方法数组的定义直接定义单元素定义 元素的获取获取单个元素获取全部元素 获取数组长度获取整个数组长度获取单个元素的长度 操作数组增加删除 关联数组 🍊 你的点赞评论就是对博…...
高斯混合模型回归（Gaussian Mixture Model Regression，GMM回归）
高斯混合模型（GMM）是一种概率模型，它假设数据是由多个高斯分布的混合组成的。在高斯混合回归中，聚类与回归被结合成一个联合模型： 聚类部分 — 使用高斯混合模型进行聚类，识别数据的不同簇。回归部分 — 对…...
【3D Slicer】的小白入门使用指南八
3D Slicer DMRI(Diffusion MRI)-扩散磁共振认识和使用 0、简介 大脑解剖 ● 白质约占大脑的 45% ● 有髓神经纤维（大约10微米轴突直径） 白质探索 朱尔斯约瑟夫德杰林（Jules Joseph Dejerine，《神经中心解剖学》（巴黎，1890-1901）：基于髓磷脂染色标本的神经解剖图谱）…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
【JVM】- 内存结构
引言 JVM：Java Virtual Machine 定义：Java虚拟机，Java二进制字节码的运行环境好处： 一次编写，到处运行自动内存管理，垃圾回收的功能数组下标越界检查（会抛异常，不会覆盖到其他代码…...
连锁超市冷库节能解决方案：如何实现超市降本增效
在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型（Vision-Language Models, VLMs），为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展，机器人仍难以胜任复杂的长时程任务（如家具装配），主要受限于人…...