首页 > 其他分享 >0基础学前端 day2

0基础学前端 day2

时间:2024-09-24 19:23:58浏览次数:10  
标签:color day2 前端 基础 padding 样式 HTML 选择器 CSS

大家好,欢迎来到无限大的频道。

今天继续带领大家开始0基础学前端。

一、CSS简介与基础

层叠样式表(CSS,Cascading Style Sheets)是用来进行网页样式和布局设计的语言。通过CSS,开发者可以控制网页中元素的颜色、字体、大小、间距以及布局等视觉效果。CSS让页面不仅仅是信息的载体,还能提升用户的视觉体验和交互感受。

1. CSS的基本语法

CSS由选择器和声明块组成。选择器用于指定要设置样式的HTML元素。声明块包含一个或多个声明,各声明用分号分隔。每个声明包括一个属性和一个值,属性和值用冒号分隔。

选择器 {
    属性: 值;
    属性: 值;
}

例如:

h1 {
    color: blue;
    font-size: 24px;
}

上面的代码将所有的一级标题(`<h1>`)文本颜色设置为蓝色,字体大小设置为24像素。

2. 常见的选择器

- 元素选择器:选中所有该类型的HTML元素,例如`div`、`p`。
- 类选择器:使用`  .   ` 加类名选中,例如`.my-class`,这需要HTML中相应元素有`class="my-class"`。
- ID选择器:使用`  #   `加ID名,例如`#my-id`,这需要HTML中相应元素有`id="my-id"`。
- 组合选择器:可以组合多个选择器,应用于需要灵活定义样式的场景。

(关于类选择器和ID选择器的区别,我会再发一篇文章来和大家说明)

3. CSS样式的继承与优先级

CSS样式表中的样式可以从父元素继承给子元素。

例如,设置在`<body>`上的字体颜色会继承给`<p>`等子元素。

的选择器优先级依次为:ID选择器 > 类选择器 > 元素选择器。

此外,在冲突时,后定义的样式会覆盖此前定义的样式。

二、基础CSS布局及样式

在这部分,我们将结合昨天的HTML代码,通过简要的内嵌CSS样式进行页面基础布局,同时展示如何使用外部CSS文件来实现更复杂的样式。

1. 内嵌CSS示例

先在HTML的`<head>`部分中,通过`<style>`标签添加CSS,展示页面布局:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        main {
            padding: 20px;
        }
        h2 {
            color: #555;
        }
        ul {
            list-style-type: none;
        }
        li {
            margin-bottom: 10px;
        }
        a {
            text-decoration: none;
            color: #0066cc;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的个人主页</h1>
    </header>

    <main>
        <section>
            <h2>关于我</h2>
            <p>你好!我是一个前端开发的初学者,正在学习如何创建美观且有用的网页。</p>
        </section>

        <section>
            <h2>爱好与兴趣</h2>
            <ul>
                <li>编程</li>
                <li>阅读</li>
                <li>旅行</li>
            </ul>
        </section>

        <section>
            <h2>查看我的作品</h2>
            <p>以下是一些我最近完成的项目:</p>
            <ul>
                <li><a href="https://我的项目链接.com">我的第一个项目</a></li>
                <li><a href="https://一个有趣的项目.com">一个有趣的项目</a></li>
            </ul>
        </section>

        <figure>
            <img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/4027b724a62b206a73ba495e732af2b.jpg" alt="我的个人写真">
            <figcaption>摄影:无限大</figcaption>
        </figure>
    </main>

    <footer>
        <p>联系我:<a href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p>
    </footer>
</body>
</html>

2. 外部CSS示例

在实际开发中,使用外部CSS文件管理样式更为常见。我们将上述内嵌样式移到一个外部文件中,比如styles.css,并在HTML中引入它:‘

我们创立一个名为styles.css的文件

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}
header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}
main {
    padding: 20px;
}
h2 {
    color: #555;
}
ul {
    list-style-type: none;
}
li {
    margin-bottom: 10px;
}
a {
    text-decoration: none;
    color: #0066cc;
}
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

HTML文件更新

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人主页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header></header>
        <h1>欢迎来到我的个人主页</h1>
    </header>

    <main>
        <section>
            <h2>关于我</h2>
            <p>你好!我是一个前端开发的初学者,正在学习如何创建美观且有用的网页。</p>
        </section>

        <section>
            <h2>爱好与兴趣</h2>
            <ul>
                <li>编程</li>
                <li>阅读</li>
                <li>旅行</li>
            </ul>
        </section>

        <section>
            <h2>查看我的作品</h2>
            <p>以下是一些我最近完成的项目:</p>
            <ul>
                <li><a href="https://我的项目链接.com">我的第一个项目</a></li>
                <li><a href="https://一个有趣的项目.com">一个有趣的项目</a></li>
            </ul>
        </section>

        <figure>
            <img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/4027b724a62b206a73ba495e732af2b.jpg" alt="我的个人写真">
            <figcaption>摄影:无限大</figcaption>
        </figure>
    </main>

    <footer>
        <p>联系我:<a href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p>
    </footer>
</body>
</html>

三、使用HTML和CSS创建精美的页面

接下来,我们创建一个更加精美的页面(还是有点简陋,后面的几天希望我们一起越做越好),介绍NBA球星凯文·杜兰特(Kevin Durant)。

ps:我个人最喜欢篮网杜,我的意难平“凯文杜兰特”,“他投出了一个最长的两分球”

Kevin Durant页面HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凯文·杜兰特</title>
    <link rel="stylesheet" href="kevin.css">
</head>
<body>
    <header>
        <h1>凯文·杜兰特</h1>
    </header>
    <main>
        <section class="image">
            <img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/6fa6ec013f49061e5c313827b6099f2.png" alt="凯文·杜兰特">
        </section>
        <section class="bio">
            <h2>简介</h2>
            <p>凯文·杜兰特是NBA著名篮球运动员,司职小前锋,曾多次获得NBA总冠军和MVP。</p>
        </section>
        <section class="achievements">
            <h2>成就</h2>
            <ul>
                <li>两届NBA总冠军</li>
                <li>四届NBA得分王</li>
                <li>两届总决赛MVP</li>
                <li>NBA常规赛MVP</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>© 2024 凯文·杜兰特粉丝页面</p>
    </footer>
</body>
</html>

Kevin Durant页面CSS

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}

header {
    background-color: #181e25;
    color: #fff;
    text-align: center;
    padding: 20px;
}

main {
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

.image img {
    max-width: 300px;
    border-radius: 10px;
}

.bio, .achievements {
    width: 40%;
}

h1, h2 {
    margin-top: 0;
}

ul {
    list-style-type: square;
}

footer {
    background-color: #181e25;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

标签:color,day2,前端,基础,padding,样式,HTML,选择器,CSS
From: https://blog.csdn.net/wxdzuishaui/article/details/142497155

相关文章

  • java基础篇之反射(简单详细,快速入门)
    @[TOC]希望本文能帮助你增加对反射的理解反射的简单叙述及相关性质反射的源头——Class类反射的主要应用反射的简单叙述及相关性质能够分析类能力的程序为反射,反射机制的功能极其强大,下面我们就来简单举个例子publicclassStudent{privateStringname;......
  • Vue router 4 基础知识讲解
    1.Vuerouter4基础在构建现代Web应用时,单页应用(SPA)因其流畅的用户体验和快速的页面切换能力,成为了众多项目的首选架构。然而,在SPA中,随着应用功能的日益复杂,权限控制成为了一个不可忽视的问题。如何确保不同用户只能访问其被授权的资源,是保障应用安全和数据一致性的......
  • 超详细的系列总结!大模型岗面试题(含答案)来了!(大语音模型基础篇二)
    前言大模型应该是目前当之无愧的最有影响力的AI技术,它正在革新各个行业,包括自然语言处理、机器翻译、内容创作和客户服务等,正成为未来商业环境的重要组成部分。截至目前大模型已超过200个,在大模型纵横的时代,不仅大模型技术越来越卷,就连大模型相关岗位和面试也开始越来越卷......
  • Js基础
    JS编写位置将代码编写在html网页script标签<script>//弹出alert("test")//控制台输出日志console.log("helloworld")//向网页输入内容,即往body中写内容document.write("writecontent")</script>将代码编写在外部的js文件中<!--js文件......
  • 【Day20240924】05git 两人协作 冲突
    git两人协作冲突命令行解决两个人修改同一文件时的冲突可视化解决两个人修改同一文件时的冲突参考命令行解决两个人修改同一文件时的冲突假设kerwin.js是项目的路由文件。tiechui文件夹是组员铁锤的工作目录;test2008文件夹是组长的工作目录。此时,两人都想要......
  • Java面试指南(基础篇)
    文章目录前言01Java语言的特点02JVM、JRE及JDK的关系03Java和C++的区别04基本数据类型05类型转换06自动装箱与拆箱07String的不可变性08字符常量和字符串常量的区别09字符串常量池10String类的常用方法11String和StringBuffer、StringBuilder的区别12switch......
  • 零基础学Axios
    Axios官网:Axios官网 想用Axios前需要在项目中安装axios,安装方式如下:下列是axios请去方式,本文主要讲解post和get请求,其他请求和这两种请求方法相同。1get请求1.1不带请求参数前端后端 1.2带请求参数 前端写法一(推荐)写法二:但是这种写法在遇到特殊字符,需要......
  • Docker-Swarm介绍及基础使用
    Docker-Swarm参考:Swarmmode|Docker从入门到实践Docker1.12Swarmmode(opensnewwindow)已经内嵌入Docker引擎,成为了docker子命令dockerswarm。请注意与旧的DockerSwarm区分开来。Swarmmode内置kv存储功能,提供了众多的新特性,比如:具有容错能力的去中......
  • 【全新课程】正点原子《ESP32基础及项目实战入门》培训课程上线!
    正点原子《ESP32物联网项目实战》全新培训课程上线啦!正点原子工程师手把手教你学!熟练掌握ESP-IDF开发,突破ESP32入门难题!一、课程介绍本课程针对ESP32的入门和基础外设进行系统教学,内容包括环境搭建、编程软件使用、外设基础知识、模块驱动及多个实战项目。课程旨在帮助学员掌握E......
  • 【linux中nginx怎么连接自己的前端项目】
    你的前端项目目录(我们用antdesign举例):此时我们没有dist文件(就是编译后的文件)所以需要编译之后你可以拿到dist文件夹了此时我们打开nginx.conf文件保存后启动nginx,你就可以看到你自己前端的页面了打开方法:......