CSS 第五章

发布于：2024-12-18 ⋅ 阅读:(13) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

B站《前端Web开发HTML5+CSS3+移动web视频教程》第七天的课程：学成在线静态网页的制作

一、准备工作-项目目录与版心

1.项目的目录

网站的根目录是指存放网站文件的第一层文件夹，内部包含当前网站的所有素材，包含HTML、CSS、JavaScript、图片等文件。

2.图片文件夹

①images文件夹：存放固定使用的图片素材，例如logo，样表修饰图等。
②upload文件夹：存放不固定使用的图片素材，可能需要上传更换图片，例如产品宣传图、商品图等等。

3.CSS文件夹

①base.css 文件写入基础公共样式，例如清除默认样式，设置网页基本样式等

/* 基础公共样式，清除默认样式+设置通用样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

body {
    font: 14px/1.5 "Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei", sans-serif;
    color: #333;
}

a {
    color: #333;
    text-decoration: none;
}

②index.css文件：写入的是网站首页CSS样式

4.index.html文件

网站的首页html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线</title>
    <!-- 顺序要求，先清除再设置 -->
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
    
</body>
</html>
5.版心居中

在这里插入图片描述

网页的头部、banner、内容等区域的宽度相等，都为1200px，且都位于浏览器的中间。故可以在index.css中单独设置一个类实居中效果，需要用到的时候就引用这个类。

.wrapper {
    margin: 0 auto;
    width: 1200px;
}

二、网页制作思路

1.布局思路

先整体再局部，从外到内，从上到下，从左到右

2.CSS实现思路

①画盒子—调整盒子的范围，宽度、高度、背景色、背景图片、边框
②调整盒子的位置—flex布局、内外边距
③调整内部细节—控制文字图片的样式（字号、字体颜色、字体加粗、行高）

三、header区域布局

1.整体分析

网页的头部、banner和内容区域的背景颜色都不一致，且内容区域较大。实现的时候，设置body背景颜色和内容区域颜色一致，再单独设置头部和banner背景颜色。

body {
    background-color: #f3f5f7;
}
2.头部区域

①宽度：和浏览器宽度相同（这种和浏览器宽度相同的盒子，叫做通栏）。实现方法：不写宽度，浏览器默认和父级宽度一致。
②标签结构：通栏 > 版心 > logo+导航+搜索+用户
一个通栏效果的盒子里面嵌套一个版心的盒子，版心里面有四部分的内容：logo+导航+搜索+用户，四个内容四个盒子，用flex实现。

<body>
    <!-- header头部区域 -->
    <div class="header">
        <div class="wrapper">
            <!-- logo区域 -->
            <div class="logo">logo</div>
            <!-- 导航区域 -->
            <div class="nav">首页</div>
            <!-- 搜索区域 -->
            <div class="search">搜索</div>
            <!-- 用户区域 -->
            <div class="user">用户</div>
        </div>
    </div>
</body>

.header {
    height: 100px;
    background-color: #fff;
}
.header .wrapper {
    display: flex;
    padding-top: 29px;
}
3. logo区域

在这里插入图片描述①logo功能：

  • 是一个超链接，点击可以跳转到首页。
  • 搜索引擎优化：提升网站百度搜索排名

②实现方式

  • 标签结构：h1>a>网站 名称（搜索关键字）
  • CSS样式：实现logo图片，就是把a转换成块元素，设置背景图片和宽高，同时隐藏文字—把文字尺寸设置成0。
<div class="logo">
                <h1><a href="#">学成在线</a></h1>
            </div>

.header .logo a {
    display: block;
    width: 195px;
	height: 41px;
    background-image: url("../images/logo.png");
    font-size: 0px;

}
4.header 导航区域

在这里插入图片描述左外边距
在这里插入图片描述

①功能：单击能实现跳转
②实现方法

  • 标签结构：ul>li>a
  • 优势：避免堆砌a标签，使网站排名搜索降级

③布局思路：
li标签左边设置margin
a标签设置左右padding

<div class="nav">
    <ul>
        <li><a href="#" class="active">首页</a></li>
        <li><a href="#">课程</a></li>
        <li><a href="#">职业规划</a></li>
    </ul>
</div>

.nav {
    margin-left: 102px;
}
.nav ul {
    display: flex;
}
.nav li {
    margin-right: 24px;
}
.nav li a {
    display: block;
    padding: 6px 8px;
    line-height: 27px;
    font-style: 19px;
}

/* .active类选择器，表示默认选中a时的状态 */
.nav li .active,
.nav li a:hover {
    border-bottom: 2px solid #00a4ff;
}
5.header 搜索

①实现方法：.search>.input+a/button
宽和高
在这里插入图片描述

左外边距：96px-导航的右内边距8px-导航右边外边距24px=64px
在这里插入图片描述
左内边距在这里插入图片描述
右内边距在这里插入图片描述

<div class="search">
     <input type="text" placeholder="请输入关键字">
     <a href="#"><img src="../study/images/search.png" alt=""></a>
</div>

/* 搜索区域 */
.search {
    display: flex;
    margin-left: 64px;
    padding-left: 19px;
    padding-right: 12px;
    width: 412px;
	height: 40px;
	background-color: #f3f5f7;
	border-radius: 20px;
}
.search input {
    flex: 1;
    border: 0;

    /* 背景颜色设置成透明色 */
    background-color: transparent;

    /* 去掉了表单控制的焦点框 */
    outline: none;
}
/* ::placeholder 选择器就是选中placeholder属性文字样式 */
.search input::placeholder {
    font-size: 14px;
    color: #999;
}

.search a {
    width: 16px;
	height: 16px;
    align-self: center;
}
6.header 用户

①标签结构：.user>a>img+span
②宽高
在这里插入图片描述

③左外边距
在这里插入图片描述

</div>
   <!-- 用户区域 -->
   <div class="user">
       <a href="">
           <img src="../study/uploads/user.png" alt="">
           <span>橘仔学前端</span>
       </a>
</div>

/* 用户 */
.user {
    margin-left: 32px;
    margin-top: 4px;
}
.user img {
 /* vertical-align  行内块和行内元素垂直方向对齐方式*/   
    vertical-align: middle;
    margin-right: 7px;
}
.user span {
    font-size: 16px;
    line-height: 23px;
    color: #666;
}

四banner区域

在这里插入图片描述

1. 结构

①主结构标签：通栏banner>版心>.left+.right
②左侧导航.left
实现方法

  • 标签结构：.left>ul>li*9>a
  • a默认状态：背景图为白色状态
    ③右侧导航.right
    标签结构：.right>h3>.content
.banner {
    height: 420px;
    background-color: #0092cb;
    
}
.banner .wrapper {
    display: flex;
    justify-content: space-between;
    height: 420px;
    background-image: url("../uploads/banner.png");
}
2.左边区域
<div class="left">
    <ul>
        <li><a href="#">前端开发</a></li>
        <li><a href="#">后端开发</a></li>
        <li><a href="#">移动开发</a></li>
        <li><a href="#">人工智能</a></li>
        <li><a href="#">商业预测</a></li>
        <li><a href="#">云计算&大数据</a></li>
        <li><a href="#">运维&测试</a></li>
        <li><a href="#">UI设计</a></li>
        <li><a href="#">产品</a></li>
    </ul>
</div>

.banner .left {
    padding: 3px 0;
    width: 191px;
	height: 420px;
    background-color: #005576;
}
.banner .left li {
    padding-left: 20px;
    padding-top: 13px;
    padding-bottom: 10px;
    padding-right: 37px;
    width: 191px;
    height: 46px;
}
.banner .left li a {
    display: block;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 0px;
	color: #ffffff;
    background: url("../images/right.png") no-repeat right center;

}
.banner .left li a:hover {
    background-image: url("../images/right-hover.png");
    color: #00a4ff;
}
3.右边区域
 <div class="right">
		<h3>我的课程表</h3>
		<div class="content">
		 <dl>
		     <dt>数据可视化课程</dt>
		     <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
		 </dl>
		 <dl>
		     <dt>Vue3医疗项目课程  </dt>
		     <dd><span>正在学习</span>-<strong>认识组合式API</strong></dd>
		 </dl>
		 <dl>
		     <dt>React核心技术课程</dt>
		     <dd><span>正在学习</span>-<strong>rudex配合TS使用</strong></dd>
		 </dl> 
		 <a href="#">全部课程</a>
		</div>
</div>

/* banner右边 */
.banner .right {
    margin-top: 60px;
    /* padding-left: 14px;
    padding-top: 18px; */
    width: 218px;
	height: 305px;
    background-color: #209dd5;
    border-radius: 10px;
    
}
.banner .right h3 {
    margin-left: 14px;
    height: 48px;
    line-height: 48px;
    font-size: 15px;
    color: #fff;
    font-weight: 400;
    
}
.banner .right .content {
    padding: 14px;
    width: 218px;
	height: 257px;
	background-color: #ffffff;
	border-radius: 10px;
}
.banner .right .content dl {
    margin-bottom: 12px;
    width: 190px;
	height: 53px;
    border-bottom: 1px solid #e0e0e0;
}
.banner .right .content dt {
    /* display: block; */
    margin-bottom: 8px;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
}
.banner .right dd {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 16px;
}
.banner .right .content span {
    font-size: 12px;
    color: #00a4ff;
}
.banner .right .content strong {
    font-size: 12px;
    font-weight: 400;
    color: #7d7d7d;
}
.banner .content a {
    display: block;
	height: 32px;
    text-align: center;
	background-color: #00a4ff;
	border-radius: 15px;
	font-size: 14px;
	font-weight: 400;
	line-height: 32px;
	color: #ffffff;
}

五精品推荐菜单

在这里插入图片描述

1.标签结构：

.recommend>h3+ul(>a)+a(.modify)
布局思路：flex

<div class="recommend wrapper">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">html</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Node.js</a></li>
            <li><a href="#">Ajax</a></li>
            <li><a href="#">Vue2.0</a></li>
            <li><a href="#">Vue3.0</a></li>
            <li><a href="#">TypeScript</a></li>
            <li><a href="#">React</a></li>
        </ul>
        <a href="#" class="modify">修改兴趣</a>
    </div>

/* 精品推荐 */
.recommend {
    display: flex;
    margin-top: 11px;
    padding: 0 20px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
    line-height: 60px;
}
.recommend h3 {
	font-size: 18px;
    font-weight: 400;
	color: #00a4ff;
}
.recommend ul {
    display: flex;
    flex: 1;
}
.recommend li a {
    padding: 0 24px;
    font-size: 18px;
    border-right: 1px solid #e0e0e0;
}
.recommend li:last-child a {
    border-right: 0px;  
}
.recommend li a {
	font-size: 18px;
	line-height: 25px;
	color: #333333;
}
.recommend .modify {
	font-size: 16px;
	color: #00a4ff;
    /* line-height: 22px;    */
    /* align-self: center; */
}

六精品课程推荐区域

1.实现思路

标签结构.course>.hd+.bd
布局思路：盒子模型

2.代码

六前端区域

1.结构

实现思路：.wrapper>.hd+.bd>.bd .left + .bd .right

遇到的问题

  1. 量不好padding和margin，有时候不知道垂直居中是用padding好，还是用line-hight好。
  2. 在写人工智能板块的时候，使用.bd类，结果下面的属性没有生效，暂时不知道为什么。
.bd ul {
		justify-content: space-between;
}

对上述问题有好的解决方法的网友欢迎评论区留言或者私。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布