web入门知识整理

2021/7/20 6:07:46

编程Tag： 标签 web 入门 div background color 知识 100px

本文主要是介绍web入门知识整理，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

web入门系列

前言
一、初识前端
二、web文件夹结构
三、浅析web结构
四、盒模型 < div >
- - - 4.1 长+宽+背景颜色
    - 4.2 内边距
    - 4.3 边框
    - 4.4 外边距 margin
五、CSS的引入方式
- - - 5.1 内联
    - 5.2 外联
六、三种基本选择器
七、常用标签
- - - 7.1 块标签
    - 7.2 行标签
    - 7.3 行块标签
八、浮动
- - - 8.1 float
    - 8.2 清除浮动
九、定位
十、常见css样式
- - - 10.1 文本
    - 10.2 字体
    - 10.3 背景

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、初识前端

在这里插入图片描述

二、web文件夹结构

在这里插入图片描述

三、浅析web结构

在这里插入图片描述

将建成的project文件夹拖拽至Sublime Test 中.
在index.html中输入html + [ Tab ] 键
在 title 标签中随意输入内容
在 body 标签中输入的内容将被展示在网页中
在文件中以浏览器的形式打开 index.html 就完成了第一个html入门代码.

在这里插入图片描述

四、盒模型 < div >

大块化小块

4.1 长+宽+背景颜色

<!DOCTYPE html>
<html>
<head>
	<title>New World</title>
	<style type="text/css" media="screen">
		div {
			width: 100px;
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

在这里插入图片描述

4.2 内边距

padding

<!DOCTYPE html>
<html>
<head>
	<title>New World</title>
	<style type="text/css" media="screen">
		div {
			width: 100px;
			height: 100px;
			background-color: pink;

			padding: 20px;
		}
	</style>
</head>
<body>
	<div>在本教程中，你将学习如何使用 HTML 来创建站点。</div>
</body>
</html>

在这里插入图片描述

4.3 边框

border:

	border: 10px solid skyblue;
	border-radius: 30px;

在这里插入图片描述

4.4 外边距 margin

用法同padding
不会影响盒子自身大小

五、CSS的引入方式

5.1 内联

<body>
	<div style="width: 200px; height: 100px; background-color: red;">在本教程中，你将学习如何使用 HTML 来创建站点。</div>
</body>

<head>
	<title>New World</title>
	<style type="text/css" media="screen">
		div {
			width: 100px;
			height: 100px;
			background-color: pink;
			padding: 20px;

			border: 10px solid skyblue;
			border-radius: 30px;
		}
	</style>
</head>

5.2 外联

<link rel="stylesheet" type="text/css" href="css/test01.css">

六、三种基本选择器

<!DOCTYPE html>
<html>
<head>
	<title>基本选择器</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.c1{
			background-color: green;
		}
		#one{
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div></div>
	<div class="c1"></div>
	<div class="c1" id="one"></div>
</body>
</html>

在这里插入图片描述