当前位置：首页 > news >正文

甘肃网站建设开发 app口碑优化seo

news 2025/7/13 20:52:49

甘肃网站建设开发 app,口碑优化seo,就业服务工作站建设规范,怎么做网站设计程序1、初识HTML HTML:Hyper Text Markup Language(超文本标记语言) 。超文本包括：文字、图片、音频、视频、动画等。 1.1、W3C标准 1.2、HTML基本结构示例：  …

1、初识HTML

HTML:Hyper Text Markup Language(超文本标记语言) 。
超文本包括：文字、图片、音频、视频、动画等。

1.1、W3C标准

在这里插入图片描述

1.2、HTML基本结构

在这里插入图片描述

示例：

<!-- DOCTYPE:告诉浏览器，我们要使用什么规划，这里是HTML -->
<!DOCTYPE html>
<html lang="en"><!-- head标签代表网页头部 -->
<head><!-- meta描述性标签，它用来描述我们网站的一些信息 --><!-- meta一般用来做SEO --><meta charset="UTF-8"><meta name="keywords" content="我爱编程"><meta name="descrption" content=我爱这个世界><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width= , initial-scale=1.0"><title>小羊的网站</title>
</head>
<body><h1>Hello world!</h1>
</body>
</html>

1.3、网页的基本标签

在这里插入图片描述
实例代码：

<!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><!-- 标题标签 --><h1>一级标签</h1><h2>一级标签</h2><h3>一级标签</h3><h4>一级标签</h4><h5>一级标签</h5><h6>一级标签</h6><!-- 段落标签 --><p>我喜欢王许哲</p><p>她很漂亮，也很温柔。</p><!-- 水平线标签 -->
<hr/><!-- 换行标签 -->王许哲很温柔</br>我喜欢她。</br><!-- 粗体，斜体 --><h1>字体样式标签</h1>粗体：<strong>I love you</strong>斜铁：<em>I love you</em><br/><!-- 特殊符号 -->空                         格<br/>空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>&gt;<br/>&lt;<br/>&copy;小羊版权所有
</html>

1.4、图像标签

在这里插入图片描述
实例代码：

<!DOCTYPE html>
<html lang="en"><head><title>图像标签</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="css/style.css" rel="stylesheet"></head><body><!-- img学习src : 图片地址（必填）相对地址（推荐使用），绝对地址../  表示上一级目录alt :图片的名字（必填）--><img src="../html/resources/image/头像.jpg" alt="我的头像" title="首页" width="300" height="200"></body>
</html>

1.5、链接标签

在这里插入图片描述

实例代码：

<!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><!-- a标签href : 必填，表示要跳转到那个页面target: 表示窗口在哪里打开  _blank 在新标签中打开_self 在当前页打开--><a name="top">头部</a><a href="https://www.baidu.com" target="_blank" >百度首页</a><br/><a href="https://www.baidu.com" target="_self"><img src="../html/resources/image/百度.png" alt="我的头像" title="首页"></a><!-- 锚链接 1.需要一个锚标记2.跳转到标记#name --><br/><a href="#top">回到头部</a><!-- 功能性链接邮件链接：mailto--><br/><a href="mailto:1763108660@qq.com">点击联系我</a>  </body>
</html>

1.6、行内元素和块元素

在这里插入图片描述

1.7、列表

在这里插入图片描述
实例代码：

<!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><!-- 有序列表 -->
<ol><li>GO</li><li>JAVA</li><li>Python</li><li>前端</li><li>C/C++</li>
</ol><hr/>
<!-- 无序列表 应用：导航，侧边栏 
-->
<ul><li>GO</li><li>JAVA</li><li>Python</li><li>前端</li><li>C/C++</li>
</ul><!-- 自定义列表 
dl : 标签
dt : 列表名称
dd : 列表内容
公司网站底部
-->
<dl><dt>学科</dt><dd>JAVA</dd><dd>Python</dd><dd>Linux</dd><dd>C</dd><dt>位置</dt><dd>北京</dd><dd>上海</dd><dd>广州</dd><dd>深圳</dd>
</dl>
</body>
</html>

1.8、表格

在这里插入图片描述
实例代码：

<!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><!-- 表格table
行 tr
列 td
-->
<table border="1px"><tr><!--  colspan 跨列--><td colspan="5">1-1</td></tr><tr><!-- rowspan 跨行 --><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td><td>2-6</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
</body>
</html>

在这里插入图片描述

1.9、媒体元素

在这里插入图片描述

<!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><!-- 音频和视频 src ：资源路径controls ：控制条autoplay ：自动播放--><video src="../html/resources/video/欧文.mp4" controls autoplay></video><br/><audio src="../html/resources/audio/bgm.mp3" controls autoplay></audio>
</body>
</html>

1.10、页面结构分析

在这里插入图片描述
实例代码：

<!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><header><h2>网页头部</h2></header><section><h2>网页主体</h2></section><footer><h2>网页脚部</h2></footer>
</body>
</html>

1.11、iframe内联框架

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>iframe</title>
</head>
<body><!-- iframe内联框架src :地址w-h :宽度和高度--><iframe src="https://wwww.baidu.com" frameborder="0" width="200px" height="200px"></iframe>
</body>
</html>

1.12、表单

在这里插入图片描述
表单元素格式：

表单的应用：

表单的初级验证：

实例代码：

<!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><h1>注册</h1>    <!-- 表单formaction :表单提交的位置--><form action="myFirstNet.html" method="post"><p>姓名：<input type="text" name="username" value="王许哲" readonly></p><p>密码：<input type="password" name="pwd" placeholder="请输入密码" required></p><!-- 单选框标签input type="radio"value: 单选框的值name:表示组--><p>性别：<input type="radio" value="boy" name="sex" checked>男<input type="radio" value="girl" name="sex">女</p><!-- 多选框input type="checkbox"--><p>爱好：<input type="checkbox" value="sleep" name="hobby" checked>编程<input type="checkbox" value="sleep" name="hobby">聊天<input type="checkbox" value="sleep" name="hobby">旅游</p><!-- 按钮type="button" 普通按钮type="image"  图片按钮type="submit" 提交按钮type="reset"  重置按钮--><p><input type="button" name="btn1" value="点击"><input type="image" src="../html/resources/image/头像.jpg"></p><!-- 下拉框，列表框 --><p>国家下拉框：<select name="列表名称"><option value="china">中国</option><option value="usa">美国</option><option value="eth" selected>瑞士</option><option value="yingdu">印度</option></select></p><!-- 文本域--><p>反馈：<textarea name="textarea" cols="20" rows="20">文本内容</textarea></p><!-- 文件域 --><p><input type="file" name="files"><input type="button" value="上传" name="upload"></p><!-- 邮件验证 --><p>邮箱：<input type="email" name="email"></p><!-- URL --><p>URL：<input type="url" name="url"></p><!-- 数字 --><p>商品数量：<input type="number" name="num" max="100" min="0" step="1"></p><!-- 滑块input type="range"--><p>音量：<input type="range" name="voice" max="100" min="0" step="2"></p><!-- 搜索 --><p>搜索：<input type="search" name="ser"></p><!-- 增强鼠标可用性 --><p><label for="mark">点我</label><input type="text" id="mark"></p><!--  自定义邮箱--><p>自定义邮箱：<input type="text" name="diymail" pattern="[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?"></p><br/><P><input type="submit"><input type="reset" disabled></P></form>
</body>
</html>

2、CSS3

2.1、什么是CSS？

Cascading Style Sheet 层叠级联样式表。
美化网页

2.2、发展史

CSS1.0
CSS2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO。
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 浏览器兼容性~

2.3、基本语法

<!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> 可以编写css代码语法：选择器{声明1;声明2;声明3;}   --><style>h1{color: cyan;}</style>    <!-- <link rel="stylesheet" href="../html/css/style.css"> -->
</head>
<body><h1>我是标题</h1>
</body> 
</html>

2.4、css的优势：

1、内容和表现分离
2、网页结构表现统一。可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO，容易被搜索引擎收录

2.5、四种css导入方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 2.内部样式 --><style>h1{color: green;}</style><!--  3.外部样式--><link rel="stylesheet" href="../css/style.css">
</head>
<body>
<!--  优先级：行内样式>内部样式>外部样式-->
<!--1.行内样式：在标签元素中，编写一个style属性，编写样式即可  -->
<h1 style="color:red">我是标题</h1>
</body>
</html>

拓展：外部样式两种写法
链接式：html

<!--  3.外部样式-->
<link rel="stylesheet" href="../css/style.css">

导入式：css2.1特有的

        <!-- 4.导式 --><style>@import url("css/style.css");</style>
</head>

2.6、三种选择器（重要）

作用：选择页面上的某一个或者某一类元素

2.6.1、基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 标签选择器，会选择到页面上所有的这个标签的元素 */h1{color: #ce5050;}p{font-size: 80px;}</style>
</head>
<body><h1>学Java</h1><h1>学散打</h1><p>小羊小羊</p>
</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>/*类选择器的格式 .class的名称{}优点：可以多个标签归类，是同一个class*/.title1{color: aquamarine;}.title2{color: blue;}</style></head>
<body><h1 class="title1">标题1</h1><h1 class="title2">标题2</h1><h1 class="title1">标题3</h1><p class="title1">啦啦啦啦</p> 
</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* id选择器 : id必须保证全局唯一格式：#id名称{}不遵循就近原则，固定的id选择器>class类选择器>标签选择器*/#title{color: chartreuse;}.style{color: aqua;}h1{color: brown;}</style>
</head>
<body><h1 class="style" id="title">标题1</h1>
</body>
</html>

2.6.2、层次选择器

后代选择器：在某个元素的后面，（祖爷爷爷爷爸爸儿子）都会改变

        /* 后代选择器 */body p{background: #f45606;}

子选择器：一代，儿子

        /* 子选择器 */body>p{background: #3cbda6;}

相邻兄弟选择器：同辈

        /* 相邻兄弟选择器：只有一个，相邻（向下） */.active+p{background: #3cbda6;}

通用选择器

        /* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素 */.active~p{background: #3cbda6;}

2.6.2、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- 避免使用class类选择器、id选择器 --><style>/* ul的第一个子元素 */ul li:first-child{background: aqua;}/* ul的最后一个子元素 */ul li:last-child{background: #c65e5e;}/* 选中p1:定位到父元素，选择当前的第一个元素？选中当前p元素的f父级元素，再选中父级元素的第一个，并且是当前元素才生效！，按顺序*/p:nth-child(2){background: #e3c3c3;}/* 选中父元素下的p元素的第二个！按类型 */p:nth-of-type(1){background: yellow;}</style>
</head>
<body><h1>h1</h1><p>p1</p><p>p2</p><p>p3</p><ul><li>li1</li><li>li2</li><li>li3</li></ul>
</body>
</html>

2.6.2、属性选择器（重要、常用）
id+class 结合~

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.demo a{float: left;display: block;height: 90px;width: 90px;background: red;text-align: center;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/* 属性名，属性名=属性值（正则）= 绝对等于*= 包含这个元素^= 以这个开头$= 以这个结尾*//* 存在id属性的元素: a[]{} *//* a[id]{background: yellow;} *//* a[id=first]{background: yellow;} *//* class 中有links的元素 *//* a[class *="links"]{background: yellow;} *//* 选中href中以http开头的元素 *//* a[href^=http]{background: yellow;} *//* 选中以pdf结尾的元素 */a[href$=pdf]{background: yellow;}</style>
</head>
<body><p class="demo"><a href="https://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test" id="second">2</a><a href="images/1" class="links item">3</a><a href="images/2" class="links item">4</a><a href="images/3" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="/abc.doc" class="links item">9</a><a href="/abcd.doc" class="links item last">10</a></p>
</body>
</html>

在这里插入图片描述

2.7、CSS的作用及字体样式

1、span标签：重点要突出的字，使用span套起来

2.7.1、字体样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- font-family: 字体font-size: 字体大小font-weight: 字体粗细color:字体颜色--><style>body{font-family: "Arial Black",楷体;color: red;}h1{font-size: 50px;}.p1{font-weight: bold;}</style>
</head>
<body><h1>故事介绍</h1><p class="p1">为天地立心、为生民立命、为往圣继绝学、为万世开太平</p><p>说天亲，天也不算亲，天有日月和星辰。日月穿梭催人老，带走世上多少的人。说地亲，地也不算亲，地长万物似黄金。争名夺利有多少载，看罢新坟看旧坟。说爹妈亲，不算个亲，二老不能永生</p><p>When We Two Parted George Gordon Byron!</p>
</body>
</html>

2.7.2、文本样式

1、颜色 color rgb rgba
2、文本对齐方式
3、首行缩进
4、行高
5、装饰
6 、文本图片水平对齐：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- font-family: 字体font-size: 字体大小font-weight: 字体粗细color:字体颜色--><style>body{font-family: "Arial Black",楷体;color: red;}h1{font-size: 50px;}.p1{font-weight: bold;}/* a标签超链接去下划线 */a{text-decoration: none;  }</style>
</head>
<body><a href="">1234</a><h1>故事介绍</h1><p class="p1">为天地立心、为生民立命、为往圣继绝学、为万世开太平</p><p>说天亲，天也不算亲，天有日月和星辰。日月穿梭催人老，带走世上多少的人。说地亲，地也不算亲，地长万物似黄金。争名夺利有多少载，看罢新坟看旧坟。说爹妈亲，不算个亲，二老不能永生</p><p>When We Two Parted George Gordon Byron!</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 水平对齐需要参照物--><style>img,span{vertical-align: middle;}/* a标签超链接去下划线 */a{text-decoration: none;  }</style>
</head>
<body><a href="">111113</a><p><img src="../resources/image/头像.jpg" alt=""><span>1561656</span></p></body>
</html>

2.8、文本阴影和超链接伪类

<!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</title><style>/* 默认的状态 */a{text-decoration: none;color: aquamarine;}/* 鼠标悬浮的状态 */a:hover{color: blueviolet;}/* 鼠标单击没有释放的状态 */a:active{color: chartreuse;}/* 未访问链接的状态 *//* a:link{color: black;} *//* 已访问链接的状态 *//* a:visited{color: cornflowerblue;} *//* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 */#price{text-shadow: rgb(14, 239, 134) 15px 0px 2px ;}</style>
</head>
<body><a href="https:www.baidu.com"><img src="../resources/image/头像.jpg" alt=""></a><p><a href="https:www.baidu.com">码出高效:JAVA开发手册</a></p>  <p><a href="https:www.baidu.com">作者:孤尽老师</a></p> <p id="price"><a href="">￥99.00</a></p>  
</body>
</html>

在这里插入图片描述

2.9、列表

<!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</title><link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body><div id="nav"><h2></h2><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li><li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li><li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li><li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">化妆品</a></li><li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li><li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li><li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li></ul>
</div>
</body>
</html>

#nav{width: 300px;background: rgb(165, 141, 190);
}
.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 30px;background: greenyellow;
}
/* ul li*/
/* list-style: none 去掉圆点;circle 空心圆decimal 数字square 正方形*/
ul li{height: 30px;list-style: none;text-indent: 1em;
}ul{background: rgb(165, 141, 190);
}a{text-decoration: none;font-size: 14px;color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}

2.10、背景图像应用及渐变

2.10.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>Document</title><style>div{width: 1000px;height: 700px;border: 1ex solid greenyellow;/* 默认是全部平铺的 */background-image: url("../resources/image/头像.jpg");}.div1{background-repeat: repeat-x;}.div2{background-repeat: repeat-y;}.div3{background-repeat: no-repeat;}</style>
</head>
<body><div class="div1"></div><div class="div2"></div><div class="div3"></div>
</body>
</html>

.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 30px;/* 颜色，图片，图片位置，平铺方式 */background: greenyellow  url("../../resources/image/下箭头.gif") 200px 10px no-repeat;
}

2.10.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><!-- 径向渐变，圆形渐变 --><style>body{background-color: #8EC5FC;background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);}</style>
</head>
<body></body>
</html>

渐变色CSS代码取样

2.11、盒子模型及边框使用

1、什么是盒子模型？
在这里插入图片描述
margin:外边距
border:边距
padding:内边距

<!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>/* body总有一个默认的外边距margin：0 */body{margin: 0;padding: 0;text-decoration: none;}h2{font-size: 16px;background-color: aquamarine;line-height: 30px;}/* border:粗细，样式，颜色 */#box{width: 300px;border: 1px solid red;}form{background: greenyellow;}div:nth-of-type(1)>input{border: 3px solid black;}div:nth-of-type(2)>input{border: 3px dashed rgb(212, 44, 44);}div:nth-of-type(3)>input{border: 3px solid rgb(227, 198, 198);}</style>
</head>
<body><div id="box"><h2>会员登录</h2><form><div><span>用户名：</span><input type="text"></div><div><span>密码：</span><input type="text"></div><div><span>邮箱：</span><input type="text"></div></form></div>
</body>
</html>

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>/* body总有一个默认的外边距margin：0要求：块元素，块元素有固定的宽度*/body{padding: 0;text-decoration: none;}/* 边距的参数：顺时针旋转margin:0  上下左右都是0margin: 0 1px 上下是0 左右是1margin: 0 1px 2px 3px;  上下左右各自有唯一的参数*//* 内边距也是一样的规则 */h2{font-size: 16px;background-color: aquamarine;line-height: 30px;margin: 0 1px 2px 3px;}/* border:粗细，样式，颜色 *//* 外边距的妙用：居中元素margin: 0 auto;*/#box{width: 300px;border: 1px solid red;margin: 0 auto;}form{background: greenyellow;}input{border: 1px solid black;}</style>
</head>
<body><div id="box"><h2>会员登录</h2><form><div><span>用户名：</span><input type="text"></div><div><span>密码：</span><input type="text"></div><div><span>邮箱：</span><input type="text"></div></form></div>
</body>
</html>

盒子的计算方式：你这个元素到底多大？
在这里插入图片描述
margin+border+padding+内容宽度
3、圆角边框

<!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>/* border-radius: 10px 20px  30px 40px;顺时针规则：左上，右上，右下，左下*/div{width: 100px;height: 200px;border: 10px solid red;border-radius: 10px 20px  30px 40px;}</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>/* border-radius: 100px;顺时针规则：左上，右上，右下，左下*/div{width: 100px;height: 100px;border: 10px solid red;border-radius: 100px;}img{border-radius: 25px;}</style>
</head>
<body><div></div><img src="../resources//image/头像.jpg">
</body>
</html>

在这里插入图片描述
4、阴影

<!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</title><!-- 阴影 box-shadow: 10px 10px 100px yellow; --><style>div{width: 100px;height: 200px;border: 10px solid red;box-shadow: 10px 10px 100px yellow;}</style>
</head>
<body><div></div>
</body>
</html>

2.12、display和浮动

1、简介
块级元素：独占一行
h1~h6 p div 列表
行内元素：不独占一行
span a img strong…
行内元素可以被包含在块级元素中，反之，则不可以~
2、display

<!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</title><!--  block 块元素display: inline;行内元素display: inline-block; 是块元素，但是可以内联在一行display: none; 消失--><style>div{width: 100px;height: 100px;border: 1px solid red;display: inline;}span{width: 100px;height: 100px;border: 1px solid red;display: inline-block;}</style>
</head>
<body><div>div块元素</div><span>span行内元素</span>
</body>
</html>

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
3、浮动
左右浮动 float

div{margin: 10px;padding: 5px;
}
#father{border: 1px #000 solid;
}
.layer01{border:1px #F00 dashed;display: inline-block;/* 左浮 */float: left; 
}
.layer02{border:1px #00F dashed;display: inline-block;/* 右浮 */float: right;
}
.layer03{border:1px #060 dashed;display: inline-block;
}
.layer04{border:1px #666 dashed;display: inline-block;font-size: 12px;line-height: 23px;display: inline-block;
}

2.13、overflow及父级边框塌陷问题

/*
clear:right; 左侧不允许有浮动元素
clear:right; 右侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
*/
解决方案：
1、增加父级元素的高度

#father{border: 1px #000 solid;height: 800px;
}

2、增将一个空的div标签，清除浮动

.clear{clear: both;margin: 0;padding: 0;
}

3、overflow
在父级元素中增加一个 overflow: hidden;

<!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><!-- overflow: hidden;隐藏滚动条-overflow: scroll; 以滚动条的形式展示--><style>#content{width: 200px;height: 100px;overflow: scroll;}</style>
</head>
<body><div id="content"><img src="../resources/image/头像.jpg" alt=""><p>因为Java是全球排名第一的编程语言，Java工程师也是市场需求最大的软件工程师，选择Java，就是选择了高薪。</p></div>
</body>
</html>

4、父类添加一个伪类：after

#father{border: 1px #000 solid;height: 800px;
}
#father:after{content: '';display: block;clear: both;
}

小结：

浮动元素后面增加空div:简单，代码中尽量避免空div
设置父元素的高度：简单，元素假设有了固定的高度，就会被限制
overflow:简单，下拉的一些场景避免使用
父类添加一个伪类：after(推荐)：没有作用，推荐使用！
5、display和float对比
display:方向不可以控制
float:浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~

2.14、定位

1、相对定位:position: relative;
相对于原来的位置，进行指定的偏移，相对定位后，任然在标准文档流中，原来的位置会被保留

 top: -20px;left: 20px;bottom: -10px;right: 10px;

<!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</title><!-- 相对定位：相对于自己原来的位置进行偏移~--><style>div{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#first{background-color: rgb(18, 227, 175);border: 1px solid #666;position: relative; /* 相对定位 上下左右*/top: -20px;left: 20px;}#second{background-color: rgb(90, 241, 52);border: 1px solid rgb(208, 49, 49);}#third{background-color: rgb(128, 17, 226);border: 1px solid rgb(20, 179, 207);position: relative; /* 相对定位 上下左右*/bottom: -10px;right: 10px;}</style>
</head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div></div>
</body>
</html>

在这里插入图片描述

2、绝对定位
定位：基于xxx定位，上下左右~
相对于父级或浏览器的位置，进行指定的偏移，绝对定位后它不在标准文档流中，原来的位置不会被保留

没有父级元素的前提下，按浏览器的位置定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动

<!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</title><!-- 相对定位：相对于自己原来的位置进行偏移~--><style>div{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father{border: 1px solid #666;padding: 0;position: relative;}#first{background-color: rgb(18, 227, 175);border: 1px solid #666;}#second{background-color: rgb(90, 241, 52);border: 1px solid rgb(208, 49, 49);position: absolute;right: 30px;}#third{background-color: rgb(128, 17, 226);border: 1px dashed rgb(20, 179, 207);}</style>
</head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div></div>
</body>
</html>

3、固定定位：fixed

<!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</title><style>body{height: 1000px;}div:nth-of-type(1){width: 100px;height: 100px;background: red;position: absolute;right: 0;bottom: 0;}/* position: fixed; 固定定位*/div:nth-of-type(2){ width: 100px;height: 100px;background: yellow;position: fixed;right: 0;bottom: 0;}</style>
</head>
<body><div>div1</div><div>div2</div><div>div3</div>
</body>
</html>

4、z-index及透明度
在这里插入图片描述
图层~
z-index: 默认是0，最高无限~999

<!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>123</title><link href="css/style.css" rel="stylesheet">
</head>
<body><div id="content"><ul><li><img src="../../resources/image/头像.jpg"></li><li class="tipText">学微服务</li><li class="tipBg"></li><li>2099-1-1</li><li>地点：月球</li></ul></div>
</body>
</html>

#content{width: 380px;padding: 0px;margin: 0px;overflow: hidden;line-height:25px;border: 1px #000 solid;
}
ul,li{padding: 0px;margin: 0px;list-style: none;
}
/* 父级元素相对定位 */
#content ul{position: relative;
}
.tipText,.tipBg{position: absolute;width: 380px;height: 25px;top: 200px;
}
.tipText{color: white;/* 层级 */z-index: 888;
}
.tipBg{background: black;/* 背景透明度 */opacity: 0.5;
}

在这里插入图片描述

3、JavaScript

3.1、引入javaScript

内部标签

<script>alert("script标签内弹窗！")</script>

外部引入
引入js文件的位置必须要准确。

<script src="../javascript/hello.js"></script>

示例代码：

<!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>第一个javascript程序</title><!-- <script>alert("script标签内弹窗！")</script> --><!-- 外部引入 --><script src="../javascript/hello.js"></script>
</head>
<body></body>
</html>