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）：基于髓磷脂染色标本的神经解剖图谱）…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...
从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路
进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。 以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式 静态ip设置： 我用的ubuntu24桌…...
MySQL 知识小结（一）
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。 目录 …...