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;
}再会~
原文地址：https://blog.csdn.net/chestnut_orenge/article/details/143695832
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！