概述
简单的个人博客 包括 首页、典型实验、用户注册、用户登录、图书推荐、轮播图展示等。
代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="tzyh">
<title> 学习心得</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.mi {
position: relative;
width: 223px;
margin: 100px auto;
}
.mi input {
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
border: 1px solid #e0e0e0;
outline: none;
}
.mi .search {
border: 1px solid #ff6700;
}
.result-list {
display: none;
position: absolute;
left: 0;
top: 48px;
width: 223px;
border: 1px solid #ff6700;
border-top: 0;
background: #fff;
}
.result-list a {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.result-list a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div id="header">
<div id="headerR">
<div id="links">
</div>
<div id="nav">
<ul>
<li><a href="index.html" id="current">首页</a></li>
<li><a href="experiment.html">典型实验</a></li>
<li><a href="register.html">用户注册</a></li>
<li><a href="sign.html" >用户登录</a></li>
<li><a href="recommend.html">图书推荐</a></li>
<li><a href="Carousel map.html"> 轮播图展示</a></li>
</ul>
</div>
</div>
</div>
<div class="mi">
<input type="search" placeholder="搜索框">
<ul class="result-list">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">js</a></li>
<li><a href="#">c语言</a></li>
<li><a href="#">c++</a></li>
</ul>
</div>
<div id="form">
<div id="mid">
<!-- <div id="left">-->
<!-- <div id="sort" class="border">-->
<!-- </div>-->
<!-- </div>-->
<div id="right">
<div id="pro">
<h2>学习心得</h2>
<div style="padding-right:10px;">
<p> HTML</p>
<p>
html介绍：
说明：
html是一个标记语言 不是编程语言
不是编程语言 就算写错了 也能显示 不会报错
扩展：常见的标记语言有（html xml）
<br/>
标签：使用<关键字>括起来
1.双标签：<关键字a>内容</关键字a>
2.单标签：</关键字>
<br/>
属性：描述标签信息
语法：<关键字 属性名=“属性值"内容</关键字>
html骨架标签
html标题标签：
html注释：
<!--注释内容-->
快捷键：ctrl+/
作用：解释相关代码的作用 给程序员自己看 注释不会被浏览器解析
<br/>
超链接标签：
作用：点击文本跳转到指定的页面
语法：<a href="链接跳转网址 必须有协议">链接显示文本</a>
示例：<a href="http://www.itcast.cn">传智播客</a>
注意：1.href:属性的协议必须有
2.点击文本必须有
3.注意文字和属性的位置
<br/>
图片标签：
作用：将图片嵌入到网页中
重点属性：src:加载图片的位置（相对路径/绝对路径）
扩展属性：width:图片宽
height：图片高
alt:图片加载失败显示提示文字
title:鼠标悬停到文字之上显示提示文字
提示：对于web项目测试中 有图片应先考虑title属性用例设计
路径：
路径写法：1.相对路径：相对于当前执行的页面的位置作为起点
基于文件上一个目录（../）
当前文件相同目录（./）
2.绝对路径：基于电脑盘符开始 填写文件的绝对路径 以文件的名及后缀结尾
换行和空格：
换行：<br />
空格： (分号必须是英文分号)
<br/>
布局标签：
div:块级别 独占一行 （作用：布局使用 可以做其他标签的父容器）
span:行内标签容器 一般作为文本容器 一行可以放多个
<br/>
文字标签：
加粗：说明：使文字加粗可以使用b与strong标签都可以
区别：b无语义 strong 特别强调语义
</p>
<br/>
<p> CSS</p>
<p>Css的核心内容：标准流、盒子模型、浮动、定位。
<br/>
标准流：就是标签的排列顺序，代码里面的元素的顺序与网页上的实际排列元素是一致的就是标准流，当使用浮动或其他手段设置元素顺序的时候，元素就脱离了标准流。这里说明两个名词：块级元素和行级元素。
<br/>
块级元素：每个块级元素占据了一行，一行块级元素后面一般无法添加其他元素，只有浮动了的可以添加，且块级元素可以自动换行，一般作为容器出现，可以包含行级元素。最长见的就是div。
<br/>
行级元素：也叫内联元素，一般是基于语义级别的元素，只能容纳文本或其他内联元素。如span就是一个行级元素。
<br/>
盒子模型：盒子模型是css的核心内容，盒子模型所代表的就是网页中的操作元素。
<br/>
在网页上面，元素之间是有距离的这个距离叫margin，是从上下左右四个方向的margin，利用margin可以设置各个元素之间的间距和位置，实现我们的排版。
盒子的边框是border，同样有上下左右四个边，可以设置border的颜色、样式、粗细等属性，实现我们的目的。
而盒子的内部的content是盒子的核心区块，这里放置我们需要展示的主要内容。Content块与盒子的边框之间也是有距离的，这叫padding，同样有上下左右四个边可以设置content在盒子中的位置，实现我们的排版。
<br/>
浮动：float属性定义元素在哪个方向浮动，以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
浮动与盒子模型联合起来，就可以实现网页元素的移动和设计，对一些特殊的排版要求来说，浮动是很有必要的移动手段。
<br/>
定位：分为相对定位、绝对定位和固定定位。
相对定位：元素相对与自己原来的位置进行定位，可以通过设置自己的上下左右的边界距离来实现相对定位，无论是否进行移动，元素仍然占据原来的空间，可能会覆盖其他框。这里要说明一点是，网页都是以左上角为原点，向右为正，向下为正，如下图：
并不是常规的一个坐标，所有在设置元素的位置的时候要注意一点。
绝对定位：是以坐标原点为参照点，进行坐标的设置定位。
还有一种定位是固定定位，
<br>
<p> JAVAScript</p>
<p>JavaScript包含了3个组成部分
<br/>
1) ECMAScript
脚本语言的核心内容，定义了脚本语言的基本语法和基本对象。现在每种浏览器都有对ECMAScript标准的实现。
<br/>
2) DOM（Document Object Model）
文档对象模型，它是HTML和XML文档的应用程序编程接口。浏览器中的DOM把整个网页规划成由节点层级构成的树状结构的文档。用DOM API可以轻松地删除、添加和替换文档树结构中的节点。
<br/>
3) BOM（Browser Object Model）
浏览器对象模型，描述了对浏览器窗口进行访问和操作的方法和接口。
<br/>
JAVAScript 基本事件
1、鼠标单击事件onClick
onClick是一个鼠标单击事件，在当前网页上单击鼠标时，就会发生该事件。同时onClick事件调用的程序块就会执行。鼠标的单击事件（onClick）通常与按钮一起使用。
<br/>
2、文本框内容改变onChange
onChange事件是通过改变文本框的内容来发生事件的，当输入文本框的内容发生改变时，onChange事件调用的程序块就会被执行。
<br/>
3、内容选中事件onSelect
onSelect事件是一个选中事件，当文本框或者文本域中的文字被选中时，onSelect事件调用的程序就会被执行
<br/>
4、聚焦事件onFocus
onfocus事件是一个聚焦事件，网页中的对象获得聚焦时，onFocus事件调用的程序就会被执行。
<br/>
5、装载事件onLoad
onload事件是一个装载事件，当载入一个新的页面文件时，onload事件调用的程序就会被执行。
<br/>
6、卸载事件onUnload
onUnload事件是一个卸载事件，当卸载页面文件时，onUnload事件调用的程序就会被执行。
<br/>
7、失焦事件onBlur
onblur事件是一个与onFocus相对的事件。onblur事件是一个失焦事件，当光标移开当前对象时，onblur事件调用的程序就会执行。
效果显示：
<br/>
8、鼠标事件onMouseOver
onMouseOver事件是一个鼠标事件，当鼠标移到一个对象上时，该对象就会引发鼠标的onMouseOver事件，并执行onMouseOver事件调用的程序。
<br/>
9、鼠标移开事件onMouseOut
onMouseOut事件是一个鼠标事件，当鼠标移开当前对象时，onMouseOut调用的程序就会被执行。
效果说明：输入口令后，移开鼠标会触发“鼠标移开”事件。
</p>
<br/>
<div id="footer">
<p>数字媒体技术</p>
</div>
</div>
</body>
<script>
// 1. 获取元素 js事件
const input = document.querySelector('[type=search]')
const ul = document.querySelector('.result-list')
// console.log(input)
// 2. 监听事件 获得焦点
input.addEventListener('focus', function () {
// ul显示
ul.style.display = 'block'
// 添加一个带有颜色边框的类名
input.classList.add('search')
})
// 3. 监听事件 失去焦点
input.addEventListener('blur', function () {
ul.style.display = 'none'
input.classList.remove('search')
})
</script>
</html>
截图
代码链接
链接: https://pan.baidu.com/s/1c-7nDlgn_I5AektDwkVaHg?pwd=cuii 提取码: cuii
–来自百度网盘超级会员v3的分享
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
