跟着黑马学CSS打卡第一天

米库打油

已于 2023-10-13 13:42:54 修改

阅读量48

点赞数

分类专栏： css学习打卡文章标签： css 前端

于 2023-10-13 13:14:53 首次发布

本文链接：https://blog.csdn.net/m0_74385740/article/details/133808272

版权

css学习打卡专栏收录该内容

8 篇文章 0 订阅

订阅专栏

提示：个人记录学习使用

前言

（不是学CSS第一天，只是第一天打卡(*/ω＼*)）

（铃酱可爱捏）

一、准备文件

1、新建study文件夹存放所有文件

1、study文件夹里面新建三个文件，分别为：

1、css；2、images（存放固定的图片）；3、uploads（存放可以改动的图片）

2、study文件夹里面新建index.html文件，编写代码。

3、css文件夹里面存放两个css文件，分别为：

1、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;
}

2、index.css （设置主页样式）

/* 首页CSS样式 */

/* 版心居中 */
.wrapper {
    margin: 0 auto;
    width: 1200px;
}

2、网页制作思路

1、布局思路：先整体再局部，从外到内，从上到下，从左到右。

2、CSS实现思路：

1、画盒子，调整盒子范围 → 宽高背景色

2、调整盒子位置 → flex布局、内外边距

3、控制图片、文字内容样式

二、写代码

1、编写index.html

<!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="./study/css/base.css">
    <link rel="stylesheet" href="./study/css/index.css">
</head>
<body>
    <div class="wrapper">1</div>
</body>
</html>