Day02-网页布局实战

陈云381
130 阅读4分钟

网页布局实战

一 贯穿项目-网页展示

image-20221124145125803

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

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

image-20221124143734250

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

学习的顺序:先保证自己能够实现网页布局，再来控制网页的样式，最后在给网页加上脚本实现动态交互

三 网页的基本结构

2.1 HTML简介

image-20211028141938609

2.2 案例

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

html文档的基础结构如下:

image-20221124155515290

html文档的标准结构

    <!-- doc文档type类型 html指html5, 文档声明：当前文档为html5文档  -->
    <!DOCTYPE html>
    <!-- html标签：说明以下写的是html标签，不是shtml、xml -->
    <html lang="en">
    <!-- head标签：头部标签，放网页描述性信息，这些信息都不是给用户看，它不会显示在网页正文中 -->
    <head>
        <!-- 声明网页编码格式：UTF-8 可以在网页上写任意国家的文字 -->
        <meta charset="UTF-8">
        <!-- 广告 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 可以在pc、平板、手机上都可以以正常1:1的尺寸显示网页 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- title标题：显示在浏览器页卡上的标题 -->
        <title>Document</title>
    </head>
    <!-- body标签：主体，放所有网页正文内容的，只有写在body中的内容才会显示到网页中  -->
    <body>
       正文 
    </body>
    </html>

2.3 HTML语法特点

image-20211028142142513

四 HTML常用标签

    <br>换行
    <b>加粗</b>
    <i>倾斜</i>
    <div>布局容器标签</div>

案例一

image-20221124162546325

<!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>Document</title>
</head>
<body>
    <h1>个人简介</h1>
    <h3>姓  名：小明</h3>
​
    <b>国    籍：中国</b>
    <br>
    <i>民    族：汉族</i>
    <br>
    出生日期：1982.2.22
    <br>
    出生地 ：昆仑
    <br>
</body>
</html>

案例二

image-20221124162508306

五 CSS样式

案例(用这个案例贯穿CSS样式)

image-20221126190324271

1 CSS概念

  • CSS概念

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

2 CSS三种引入方式

从使用CSS的方式来划分，可以分为三种引入方式

  • 内联样式 -- 直接在每个标签上加样式
  • 内部样式 -- 在head标签里面写样式
  • 外部样式 -- 在css文件中写样式,然后引入到HTML文件中使用

内联样式

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

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

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

width代表盒子的宽度，值一般用px来表示

height代表盒子的高度。用px来表示尺寸

background-color：设置盒子的背景颜色

内部样式

我们可以在head标签里面设计style标签,在style标签中写样式

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

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

外部样式

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

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

image-20221124172329759

3 CSS选择器

标签选择器

通过标签名来选择到一类标签

div{
    width: 200px;
    height: 200px;
    background-color: red;
}

类选择器

通过给标签加一个类名(class属性)，通过这个.类名来定义样式。 样式就可以应用到所有叫这个类名的标签上。

.box{
    width: 200px;
    height: 200px;
    background-color: red;
}

4 CSS盒子模型

案例

image-20221126190516409

外边距

外边距也称为外补白，是边框与其它标签之间的距离。 标签与标签之间我们需要隔开，可以使用外边距。

外边距的4个边的边距是可以分开设置的：

  • margin-top:10px; 上边距
  • margin-right:100px; 右边距
  • margin-bottom:50px; 下边距
  • margin-left:0px; 左边距

复合写法4个边不同的情况 margin:10px 100px 50px 0px;

注意：这4个值分别是 上 右 下 左，以一个顺时针方向来设定

复合写法 上下相同/左右相同 margin:30px 10px;

注意：这2个值分别是 上下 左右；

特殊用途

margin:0 auto; 使板块居中

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

六 布局实战

image-20221127115611921

七 作业

完成如下网站的布局实战

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

avatar
文章
阅读
粉丝