百度前端学院学习-DAY03

学习目标

初步了解什么是CSS，掌握基本的CSS概念，语法，学习如何设置一些简单的样式

任务描述

首先简单动下手，打开昨天编辑的 Codepen，在中间CSS的窗口，加上下面的代码

h1 {
    font-size: 32px;
}
p {
    color: orange;
}

如果你之前的HTML没有用到这些标签，可以把h1或者p换成你使用到的标签

然后你应该发现下面的预览区域发生了一些变化，这就是你通过CSS代码，对你页面的样式进行了设置。接下来，我们边读边做。

阅读

我们先跳着阅读一下，关于使用CSS来设置字体，阅读MDN的文字样式，先看看字体颜色，种类几个基础的属性设置。或者阅读W3School中的文字样式部分和W3School字体部分

编码

把刚才学习到的文字样式的相关属性，在codepen中实践，我希望你至少实践以下几个样式：

color
font-weight
font-size

阅读

上面的阅读和练习主要是让你认真地体会一下写CSS的感觉，接下来，我们需要按部就班一些。希望你认真阅读以下几个内容：

然后可以暂时跳过伪类选择器，开始重新仔细看文本相关的样式

MDN-基本文本和字体样式

当然，你也可以选择阅读其它网站，比如W3School等上面相应的内容。

编码

现在，来用学到的样式来涂满你的简历吧，在你的codepen中实践以下CSS属性，将每个属性的每种值的效果都写出来看看。同时，确保你会使用到简单选择器和属性选择器。

color
font-family
font-style
font-weight
font-size
text-align
text-decoration
text-indent
line-height
text-shadow

提交

把你的 codepen 地址提交到作业里，因为是codepen，所以代码地址和预览地址一样即可。

扫描二维码关注公众号，回复： 1731751 查看本文章

验证

今天代码部分其实比较简单，主要是多尝试，学习之后，回顾以下自己是否已经掌握以下概念：

什么是CSS，CSS是如何工作的
CSS的基本语法是怎样的
CSS选择器是什么概念，简单选择器和属性选择器是什么
文本样式都有哪些相关属性，对应哪些值

总结

依然把今天的学习用时，收获，问题进行记录

扩展阅读

如果有同学觉得太简单，不妨花上3个小时来阅读 CSS 的标准文档，至于看标准规范有什么用，欢迎移步看CSS专家顾轶灵的知乎回答，以及貘吃馍香的回答。另外HTML也是，有时间可以读一下规范，这样你也可以像这样回答问题

个人任务完成情况

昨天阅读了羡辙的简历 HTML和CSS部分的源码，并修改源码，在同样的模板上填上了自己的信息。今天突然想到按照一份传统的纸质简历的样式，使用HTML和CSS来实现它，旨在更加熟悉CSS样式。事实证明，在做的过程中学习，比单独学印象更深，效果更好。以下是今天任务的源代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div>
    <div class="header">
        <h1>个人简历</h1>
    </div>
    <div class="basicInfo">
        <div class="left">
            <form method= "post" action="#">
                <label>姓名：<input calss=form-input type="text" placeholder="张三"></label>
                <label>姓别：<input type="text" placeholder="男"></label>
                <label>年龄：<input type="text" placeholder="18"></label>
                <label>籍贯：<input calss=form-input type="text" placeholder="北京市"></label>
                <label>整治面貌：<input type="text" placeholder="共产党员"></label><br>
                <label>联系方式：<input type="text" placeholder="139****0019"></label>
                <label>邮箱：<input type="text" placeholder="[email protected]"></label><br>
                <label>GitHub：<input type="text" placeholder="https://github.com/"></label>
                <label>CSDN：<input type="text" placeholder="https://www.csdn.net/"></label>
            </form>
        </div>
        <div class="right">
            <img src="timg.jpg" alt="证件照">
        </div>
    </div>
    <div class="eduBack">
        <p>教育经历</p>
        <textarea name="textarea" placeholder="2001-2007  xxxx学校  xxxx专业"></textarea>
    </div>
    <div class="projectBack">
        <p>项目经历</p>
        <textarea name="textarea" placeholder="项目名称  项目周期  担任角色"></textarea>
    </div>
    <div class="socialAct">
        <p>社会经历</p>
        <textarea name="textarea" placeholder="时间  活动名称  组织单位"></textarea>
    </div>
    <div class="person-skill">
        <p>个人技能</p>
        <textarea name="textarea" placeholder="1.精通HTML5、CSS、JavaScript"></textarea>
    </div>
    <div class="footer">
        <a href="#">下载简历</a>&Iota;<a href="https://github.com/infrontofme">GitHub</a>&Iota;<a href="https://blog.csdn.net/weixin_39611130">CSDN</a>
    </div>
    </div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei";
}
div {
    margin: 0 auto;
    max-width: 794px;
}
.header {
    height: 80px;
    width: 100%;
    line-height: 80px;
    text-align: center;
    border: 1px dashed #000;
    border-bottom: none;
}
.basicInfo {
    min-height: 240px;
    width: 100%;
    border: 1px solid #000;
}
.basicInfo .left {
    float: left;
    width: 630px;
    padding-left: 8px;
    text-align: left;
}
form input {
    display: inline-block;
    margin: 15px 4px;
    width: 150px;
    height: 25px;
    border: none;
    border-bottom: 1px solid #000;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
}
.basicInfo .right {
    float: right;
    width: 150px;
    padding-right: 6px;
    text-align: right;
}
.basicInfo .left:after,
.basicInfo .right:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
}
.basicInfo .left,
.basicInfo .right {
    zoom: 1;
}
.basicInfo .right img {
    margin-top: 20px;
    height: 200px;
    width: 150px;
}
p {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    padding-left: 10px;
}
.eduBack,.projectBack,.socialAct {
    min-height: 200px;
    width: 100%;
    border: 1px solid #000;
    border-top: none;
}
textarea {
    min-height: 180px;
    width: 100%;
    border: none;
    resize: none;
    font-size: 18px;
    color: #000;
}
::placeholder {
    padding-left: 10px;
    font-size: 14px;
}
.person-skill {
    min-height: 160px;
    width: 100%;
    border: 1px solid #000;
    border-top: none;
}
.footer {
    width: 100%;
    min-height: 23px;
    border: 1px solid #000;
    border-top: none;
    text-align: center;
    line-height: 23px;
    font-size: 18px;
    color: #abc;
}
.footer a {
    text-decoration: none;
    color: #abc;
}

demo预览地址：

https://codepen.io/infrontofme/full/MGjBgz/

以上。