前端项目(html+css+js+bootstrap)编写过程-知识补充

为什么input框不用placeholder提示 而用label

https://www.cnblogs.com/ahutyaoyj/p/4453944.html

display:none与visibility: hidden的区别

如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏。隐藏后的元素无法点击,无法使用屏幕阅读器等辅助设备访问,占据的空间消失。

给元素设置visibility: hidden也可以隐藏这个元素,但是隐藏元素仍需占用与未隐藏时一样的空间,也就是说虽然元素不可见了,但是仍然会影响页面布局。

https://blog.csdn.net/qq_38128179/article/details/80794397

只要点了submit就会死板地毫无条件地跳到指定的页面。

当用户名输入为空的时候,经检查后,弹出了提示后,仍然跳到下一页面,那不是毫无意义了吗?有什么其他的解决办法没?

onsubmit 函数名()
在表单的标签里面加入 onsubmit标签
return false :表单不提交;return true;表单提交。在return false 做操作,判断,条件满足则提交,条件不满足,不提交。

<form  method="post"onsubmit="return checkip()">

取消表单submit的刷新

<input type="submit" class="login_btn" value="登录" onclick="func(event)">
<script>
        function func(event) {
            event.preventDefault();
            //执行ajax动作
        }
    </script>

跳转页面,以及路径问题

window.location.href = 'index.html';

上面代码是在js文件中写的,但其路径是要相对于触发该事件的页面

https://www.cnblogs.com/Renyi-Fan/p/9130325.html

实时获取窗口大小

window.addEventListener("resize", function() {
        var h = document.documentElement.clientHeight;
        var w = document.documentElement.clientWidth;

    })

始终在窗口可视区域水平、垂直居中

.login-dialog {
    background-color: #fff;
    left: 50%;
    margin: -114px 0 0 -210px;
    position: fixed;
    top: 50%;
    width: 420px;
    z-index: 101;
}

感谢大佬文章指点
https://blog.csdn.net/wangji5850/article/details/51004531

页面显示时间

 <strong id="datetime"></strong>
var datetime = this.document.querySelector("#datetime");
    var logon_btn=this.document.querySelector(".logon-btn")
    setInterval(function() {
        datetime.innerHTML = new Date().toLocaleString();
    }, 1000);

文字与文本域怎么顶部对齐

textarea{
  vertical-align:top;
}

使用网页嵌套iframe标签,点击左侧导航栏,在右侧动态显示页面的信息

https://blog.csdn.net/qq_36746815/article/details/84062516

子div有内容,父div高度为什么为0/清除浮动

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    *zoom: 1;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我会尽力回答您的问题。由于您的要求比较广泛,我将简单介绍如何使用BootstrapCSS3和JavaScript来编写一个简单的实例网站。 1. 首先,您需要了解Bootstrap是什么,以及如何使用它来构建网站。Bootstrap是一个流行的前端框架,它可以帮助您快速构建现代化的网站。您可以在Bootstrap官网上找到它的文档和示例代码。 2. 接下来,您需要了解CSS3的一些基础知识,例如如何使用CSS3来设置网站的样式和布局。您可以在W3Schools上找到有关CSS3的教程和示例代码。 3. 最后,您需要了解JavaScript的一些基础知识,例如如何使用JavaScript来实现网站的交互效果和动态特效。您可以在MDN Web Docs上找到有关JavaScript的教程和示例代码。 下面是一个简单的示例网站,它使用BootstrapCSS3和JavaScript来创建: ```html <!DOCTYPE html> <html> <head> <title>My Website</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <style> /* 设置网站的样式和布局 */ body { font-family: Arial, Helvetica, sans-serif; } .header { background-color: #f1f1f1; text-align: center; padding: 20px; } .navbar { background-color: #333; } .navbar a { color: white; padding: 12px; text-decoration: none; } .navbar a:hover { background-color: #ddd; color: black; } .content { padding: 10px; } .footer { background-color: #f1f1f1; text-align: center; padding: 10px; } </style> </head> <body> <!-- 网站的头部 --> <div class="header"> <h1>My Website</h1> </div> <!-- 网站的导航栏 --> <nav class="navbar navbar-expand-sm"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </nav> <!-- 网站的内容 --> <div class="content"> <h2>Welcome to My Website</h2> <p>This is a simple example website that demonstrates how to use Bootstrap, CSS3, and JavaScript to create a modern website.</p> <button type="button" class="btn btn-primary" onclick="alert('Hello, World!')">Click Me!</button> </div> <!-- 网站的页脚 --> <div class="footer"> <p>Copyright © 2021</p> </div> </body> </html> ``` 这个示例网站包含一个头部、一个导航栏、一个内容区域和一个页脚。它使用Bootstrap来设置样式和布局,使用CSS3来自定义样式,使用JavaScript来实现点击按钮的交互效果。 希望这个简单的示例能够帮助您了解如何使用BootstrapCSS3和JavaScript来编写一个网站。如果您有任何问题或需要更多帮助,请随时告诉我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值