文章目录
网页布局实战
一 贯穿项目-网页展示
演示地址:http://web.woniulab.com:8082/
二 网页设计的三大核心技术
-
HTML：网页基础结构,通过HTML我们可以在网页上显示内容
-
CSS：网页样式，通过CSS我们可以实现网页样式的设计（宽高、颜色、位置、动画等等）
-
JavaScript：网页脚本代码，通过JavaScript我们可以实现网页动态交互
三 初识网页
案例1
我们浏览器上显示出的界面都是由html文档被浏览器引擎渲染后产生
html文档的基础结构如下:
四 VSCode环境搭建
安装
安装过程一直下一步
vscode的插件
1.chinese 中文界面
2.live server 在实时本地服务器中打开网页
3.vscode-icons图标插件
案例1-网页的结构
<!-- ctrl + / -->
<!-- DOC文档TYPE类型 html 表示H5 -->
<!DOCTYPE html>
<!-- 网页的根标签 -->
<html lang="en">
<!-- 网页的头部,用来编写网页的说明信息 -->
<head>
<!-- 编码级 UTF-8用来让网页兼容各个国家的文字-->
<meta charset="UTF-8">
<!-- 浏览器的兼容性设置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 配置视口 让网页在PC端,移动端等设备上能够正常显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页的标题 -->
<title>初识网页-网页的结构</title>
</head>
<!-- 网页的正文 -->
<body>
我的第一个网页
</body>
</html>
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>Document</title>
</head>
<body>
<!-- H 标题标签 自带换行功能 -->
<h1>个人简介</h1>
<h3>姓名:陈云</h3>
<!-- b加粗 -->
<b>国际:中国</b>
<!-- br换行标签 -->
<br>
<!-- 斜体 -->
<i>民族:汉族</i>
<br>
出生日期:1989.10
<br>
出生地:随州
</body>
</html>
案例3-显示一首诗
五 像素px
像素是显示器上单位
六 网页核心布局-基础
CSS
1 CSS概念
-
CSS概念
- 层叠样式表 [Cascading Style Sheet ]
- 作用：控制HTML元素的样式【大小,颜色,位置…】
2 CSS三种引入方式
内联样式
<div style="width: 200px;height:200px;background-color:red"></div>
每个标签都有一个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>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
在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>Document</title>
<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>
元素选择器
<!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元素 */
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>
类选择器
<!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>
/* 类选择器,选择类名为div1的元素 */
.div1{
width: 100px;
height: 100px;
background-color: red;
}
/* 类选择器,选择类名为div2的元素 */
.div2{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!--
给HTML元素取类名
-->
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
知识点
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>Document</title>
<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>
知识点
子元素选择器
案例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>Document</title>
<style>
div{
width: 100px;
height: 100px;
/* 边框的宽度 边框的颜色 边框的样式 */
border: 1px red solid;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
知识点
边框
案例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>Document</title>
<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>
知识点
外边距
案例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>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
/* 让div水平居中 */
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
知识点
外边距
特殊情况：
1.两个盒子的上下外边距会合并，不会重复去加上下外边界
2.当一个大盒子，套了多个小盒子，第一个小盒子设置外上边距时，浏览器会把这个外上边距当成是大盒子的上边距。
七 布局实战
八 总结
九 作业
完成如下网站的布局实战
使用 div+css完成装饰摆件的页面设计
扫一扫
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
