web入门系列
前言
提示：以下是本篇文章正文内容，下面案例可供参考
一、初识前端
二、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>
七、常用标签
7.1 块标签
标签: div,p,h1~h6,ul,ol,li
特点:独占一行,默认,宽度占满父级,高度为0
7.2 行标签
标签: a,span
特点:
- 同排序跟显示,
- 不支持宽高的设置,内容撑开宽高,
- 不支持上下的margin,
- 不正常显示上下的padding,
- 换行被解析
7.3 行块标签
img
特点:
- 同排序跟显示
- 当只设置宽度或高度时,另一边等比缩放
- 换行被解析
- ie6,ie7不支持该属性
八、浮动
8.1 float
8.2 清除浮动
原因: 因子级浮动脱离文档流,父级无法撑开高度
解决方案:
- 为父级添加一个高度(扩展性不好)
- 为父级添加overflow:hidden或者overflow:scroll