二〇二三·二·十六——日报-CSDN博客

本文链接：https://blog.csdn.net/BEHEMOOTH/article/details/129072787

今天把六个前端静态页面敲完了

用的全是 div + css

今日收获：

某个页面使用了 form 表单

<form class="font_12 ">
            <div>称呼：</div>
            <div>
              <input id="name" type="text" class="inputbox1">
            </div>
            <div>邮箱：</div>
            <div>
              <input id="email" type="email" class="inputbox1">
            </div>
            <div>标题：</div>
            <div>
              <input id="contentTitle" type="text" class="inputbox1">
            </div>
            <div>内容：</div>
            <div>
              <textarea class="textarea"></textarea>
            </div>
            <div>
              <input id="tijiao" name="tijiao" type="submit" value="提交">
            </div>
</form>

input>标签的使用
1. type 属性
2. text属性的input只能单行输入
textarea 标签的使用
1. textarea标签才能多行输入
```
<textarea class="textarea"></textarea>
```

考虑：

如果每个页面都会存在相同的页面样式，则考虑是否可以将相同的代码提取出来
html代码提取应该用一个容器来装，应该用html来装
css代码则用一个css来装
在另一个页面怎么引入相同的页面：推荐用jQuery
$要正常使用，必须使用jQuery包
script 标签写的是js代码 JavaScript，一般情况下，html代码里不应该存在css和js代码
在html里面加载代码的时候是从上到下加载，所以很多时候加载js代码拿不到div对象还没有加载出来

能不能让html加载完成后才去加载js

在js中使用 function()函数

//页面加载完成时执行里面的代码
$(function (){
    // $("#is").load("name")
    //根据id加载名称为name的页面
    $("#top").load("top.html")
    $("#end").load("end.html")
})

如果想让div一直移动，则肯定需要一个函数，一个方法 animation：

知识点：

div页面跳转：

使用window.open()函数

<div onclick="windows.open('home.html','_self')">网站首页</div>

参数	说明
URL	指定页面的名称
name	_blank - URL加载到一个新的窗口。这是默认 _parent - URL加载到父框架 _self - URL替换当前页面 _top - URL替换任何可加载的框架集 name - 窗口名称
space	可选
replace	Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true-URL 替换浏览历史中的当前条目 false-URL 浏览历史中创建新的

图片轮播（需要使用定时器，同时将div设置定宽且隐藏）

定时器

.product{
    /*animation: move 5s linear infinite;*/
    animation-name: move;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes move{
    
}

html代码重用

将 top部分的css代码放入top.css 中

#top{
    width: 1200px;
    height: 90px;
    margin: auto;
}

将页面重复代码复制下来,放在 top.html中，并导入top.css

<link rel="stylesheet" href="../css/top.css">
<div id="top" class="jc-space-between ai-center  fs-five"></div>

导入jquery包（jquery-3.6.3.min.js）,官网下载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DMofunPu-1676556115646)(D:\MarkText\mdPicture\QQ截图20230216215303.png)]

写入js文件

common.js

//页面加载完成时执行里面的代码
$(function (){
    // $("#is").load("name")
    //根据id加载名称为name的页面
    $("#top").load("top.html")
    $("#end").load("end.html")
    $("#body_child_1").load("body_child.html")
})