Day02-网页布局实战

网页布局实战

一贯穿项目-网页展示

演示地址:http://web.woniulab.com:8082/

二网页设计的三大核心技术

HTML：网页基础结构,通过HTML我们可以在网页上显示内容
CSS：网页样式，通过CSS我们可以实现网页样式的设计（宽高、颜色、位置、动画等等）
JavaScript：网页脚本代码，通过JavaScript我们可以实现网页动态交互

三初识网页

案例1

我们浏览器上显示出的界面都是由html文档被浏览器引擎渲染后产生

html文档的基础结构如下:

四 VSCode环境搭建

安装

安装过程一直下一步
1

vscode的插件

1.chinese 中文界面

2.live server 在实时本地服务器中打开网页

3.vscode-icons图标插件
1
2
3
4
5

案例1-网页的结构



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>
head>

<body>
    我的第一个网页
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

HTML语法特点

案例2-个人简介

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>Documenttitle>
head>
<body>
    
    <h1>个人简介h1>
    <h3>姓名:陈云h3>
    
    <b>国际:中国b>
    
    <br>
    
    <i>民族:汉族i>
    <br>
    出生日期:1989.10
    <br>
    出生地:随州
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

案例3-显示一首诗

五像素px

像素是显示器上单位

六网页核心布局-基础

CSS

1 CSS概念

CSS概念
- 层叠样式表 [Cascading Style Sheet ]
- 作用：控制HTML元素的样式【大小,颜色,位置…】

2 CSS三种引入方式

内联样式

<div style="width: 200px;height:200px;background-color:red">div>
1

每个标签都有一个style属性,样式写在标签的style属性上

优点：快，一边写标签，一边写样式。
缺点：结构与样式不分离，混合在一起，不可以复用，难以维护

内部样式

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>Documenttitle>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    style>
head>
<body>
    <div>div>
     <div>div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在head标签里面设计style标签,在style标签中写样式

优点：结构与样式分离，好维护，在一个网页中，也可以复用样式
缺点：如果一个网站有100个页面，内部样式就无法复用到其它的页面上

外部样式

把样式代码提出来,写在一个css文件里面,使用link标签引入到html网页中

优点：结构与样式分离，好维护，复用样式，统一管理样式
缺点：引入会麻烦一点

案例1-DIV+选择器

颜色的组成

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>Documenttitle>
    <style>
        div{
            /* div如果没有设置宽度,默认跟父容器等宽 */
            width: 100px;
            height: 100px;
            /* 
                十六进制颜色表示方式 0-9 A B C D E F
                红绿蓝
             */
            background-color: #c20000;
        }
    style>
head>
<body>
    <div>div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

元素选择器

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>Documenttitle>
    <style>
        /* 元素选择器 选择页面上的所有div元素 */
        div{
            width: 100px;
            height: 200px;
            background-color: aqua;
        }
        /* 元素选择器 选择页面上所有的h1标签 */
        h1{
           background-color: red; 
        }
        /* 元素选择器 选择页面上所有的b标签 */
        b{
            background-color: aqua;
        }

    style>
head>
<body>
    <div>div>
    <div>div>
    <h1>一级标题h1>
    <h1>一级标题h1>
    <b>加粗b>
    <b>加粗b>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

类选择器

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>Documenttitle>
    <style>
        /* 类选择器,选择类名为div1的元素 */
        .div1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /* 类选择器,选择类名为div2的元素 */
        .div2{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    style>
head>
<body>
    
    <div class="div1">div>
    <div class="div2">div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

知识点

CSS

颜色

选择器

元素选择器

类选择器

案例2-DIV+子元素选择器

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>Documenttitle>
    <style>
        .div1{
            width: 400px;
            height: 400px;
            background-color: aqua;
        }
        /* 子元素选择器   选择 div1里面的child1 */
        .div1 .child1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    style>
head>
<body>
    <div class="div1">
        <div class="child1">div>
    div>

    <div class="div2">
        <div class="child1">div>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

知识点

子元素选择器

案例3-DIV+边框

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>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* 边框的宽度 边框的颜色 边框的样式 */
            border: 1px red solid;
        }
    style>
head>
<body>
    <div>div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

知识点

边框

案例4-如何让两个DIV有间隔

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>Documenttitle>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* 给div加外边距 */
            /* margin-top: 10px;
            margin-bottom: 20px;
            margin-left: 30px;
            margin-right: 40px; */

            /* 上下左右都是50px */
            /* margin: 50px; */

            /* margin: 上 右 下 左; */
            /* margin: 10px 20px 30px 40px; */

            /* margin: 上下  左右*/
            margin: 20px 50px;

        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    style>
head>
<body>
    <div class="div1">div>
    <div class="div2">div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

知识点

外边距

案例5-如何让一个DIV水平居中

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>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 让div水平居中 */
            margin: 0 auto;
        }
    style>
head>
<body>
    <div>div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

知识点

外边距

特殊情况：
1.两个盒子的上下外边距会合并，不会重复去加上下外边界
2.当一个大盒子，套了多个小盒子，第一个小盒子设置外上边距时，浏览器会把这个外上边距当成是大盒子的上边距。

七布局实战

八总结

九作业

完成如下网站的布局实战

使用 div+css完成装饰摆件的页面设计

相关阅读:
嵌入式开发：选择嵌入式GUI生成器时要注意什么
qemu创建linux虚拟机（亲测有效）
Linux图形界面与字符界面切换
数据库索引的基本操作（sql语句）
Transformer：开源机器学习项目，上千种预训练模型 | 开源日报 No.66
Mybatis | Mybatis 一级缓存、二级缓存、三级自定义缓存(Redis)
数学建模竞赛最全竞赛案例分析总结
微服务保护(Sentinel)
关于python中的几个问题
十年Python老鸟总结的5条Python开发最佳实践

原文地址：https://blog.csdn.net/qq_33396183/article/details/128141885