建设网页网站的收获
- 建设网页网站前出于考虑各游览器的兼容问题,需要给网站整体初始化,即给标签初始化,可以在初始化的同时引入字体。
- 网站建设前先给每个页面拟定排版要使用的布局。
- 通过css“伪元素+隐藏元素”实现了下拉显示的功能。
- 首次将JavaScript应用在页面中,实现交互效果。
- 通过游览器的网页检查功能提高开发效率。
- 加强了对css属性的认识,对flex和grid布局的运用。
css属性
-
对
<p>
使用word-wrap:break-word — 当文字超出元素宽度时候,单词会被分为两部分,分别显示在两行,防止长单词或者url破坏了布局。 -
在flex布局中align-content对呈多行排列的项目才起作用,当行的用align-items,而主轴方向就只有justify-content。
-
对于定位:相对定位会占据位置空间,绝对定位不会。用定位布局还是很方便的。两个盒子可以尝试对角布局,简洁又美观。
-
下划线的距离和粗细是可以通过css设置的:
text-decoration-line: underline;text-decoration-thickness: 2px; /* 设置下划线粗细为1像素 */
text-decoration-color: red;
text-underline-offset: 5px; /* 设置下划线与文字的距离为2像素 */
-
盒子阴影数值
box:apx bpx cpx dpx rgb(—,—,—);a和b是阴影的水平和垂直偏移量,c是阴影的模糊半径,d是阴影的扩展半径,rgb控制颜色。
-
background-size:常用cover,占满整个容器,而contain则是自适应
backgground-repeat默认repeat,铺满。
background: radial-gradient(circle at center, #333333 0%, #444444 50%, #333333 100%);
radial-gradient
: 表示使用放射状渐变。circle at center
: 指定渐变的形状是圆,并且圆心位于背景区域的中心。- 中间数值分别对应渐变的开始、中心、结束位置。
-
cursor设置鼠标光标样式
none-不显示;pointer抓手;not-allowed不允许操作;wait等待光圈
-
grid-gap:用于控制各项目间的距离
-
:nth-child(n)
- 匹配属于其父元素的第 n 个子元素(n 可以是数字或一个公式,例如even
或odd
)。 -
css中
input[type="reset"]
是一个属性选择器,它选择<input>
元素,并且这些<input>
元素的type
属性必须设置为"reset"
。
实现下拉显示
主要利用元素隐藏和伪元素:hover设置鼠标经过时候设置元素为显示,并设置鼠标经过盒子时,盒子背景颜色改变,且设置z-index保证盒子是显示在最外层的,增强用户体验感。对了,隐藏的盒子要用绝对定位来定位,盒子大小可以用min-width保证在不同游览器都可以正常地实现功能。
引入艺术字
@font-face{
font-family:'字体名称';
src:url('字体文件路径');
}
JavaScript的应用
1.点击按钮显示浮窗内容
// 获取所有按钮
var buttons = document.getElementsByClassName("showFloatingWindow2");
// 循环为每个按钮添加点击事件处理
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
var content = this.getAttribute("data-content"); // 获取浮窗内容
if (this.nextElementSibling && this.nextElementSibling.classList.contains("floatingWindow")) {
this.parentNode.removeChild(this.nextElementSibling); // 如果浮窗已存在,则移除
} else {
var floatingWindow = document.createElement("div"); // 创建浮窗元素
floatingWindow.className = "floatingWindow"; // 添加类名
floatingWindow.innerHTML = content; // 设置浮窗内容
this.parentNode.insertBefore(floatingWindow, this.nextSibling); // 插入浮窗
}
});
}
2.实现点击按钮清楚页面中的文本域的内容以及将单选框的内容清空
// 重置按钮点击事件
document.querySelector('.anniu input[type="reset"]').addEventListener('click', function() {
document.getElementById('myTextarea1').value = ''; // 清空第一个文本框内容
document.getElementById('myTextarea2').value = ''; // 清空第二个文本框内容
var radios1 = document.querySelectorAll('input[name="sheji"]'); // 获取网站设计评分的所有单选框
var radios2 = document.querySelectorAll('input[name="neirong"]'); // 获取网站内容评分的所有单选框
for (var i = 0; i < radios1.length; i++) {
radios1[i].checked = false; // 取消选中网站设计评分的所有单选框
}
for (var i = 0; i < radios2.length; i++) {
radios2[i].checked = false; // 取消选中网站内容评分的所有单选框
}
});
// 提交按钮点击事件
document.querySelector('.anniu2 input[type="submit"]').addEventListener('click', function() {
document.getElementById('myTextarea1').value = ''; // 清空第一个文本框内容
document.getElementById('myTextarea2').value = ''; // 清空第二个文本框内容
var radios1 = document.querySelectorAll('input[name="sheji"]'); // 获取网站设计评分的所有单选框
var radios2 = document.querySelectorAll('input[name="neirong"]'); // 获取网站内容评分的所有单选框
for (var i = 0; i < radios1.length; i++) {
radios1[i].checked = false; // 取消选中网站设计评分的所有单选框
}
for (var i = 0; i < radios2.length; i++) {
radios2[i].checked = false; // 取消选中网站内容评分的所有单选框
}
alert('提交成功啦!感谢您的评价');
})