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）：基于髓磷脂染色标本的神经解剖图谱）…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...
【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
linux 错误码总结
1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而，传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案，能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
宇树科技，改名了！
提到国内具身智能和机器人领域的代表企业，那宇树科技（Unitree）必须名列其榜。 最近，宇树科技的一项新变动消息在业界引发了不少关注和讨论，即： 宇树向其合作伙伴发布了一封公司名称变更函称，因…...
AI语音助手的Python实现
引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...
HTML前端开发：JavaScript 获取元素方法详解
作为前端开发者，高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法，分为两大系列： 一、getElementBy... 系列 传统方法，直接通过 DOM 接口访问，返回动态集合（元素变化会实时更新）。…...