建设网页网站的收获

建设网页网站的收获

1. 建设网页网站前出于考虑各游览器的兼容问题，需要给网站整体初始化，即给标签初始化，可以在初始化的同时引入字体。
2. 网站建设前先给每个页面拟定排版要使用的布局。
3. 通过css“伪元素+隐藏元素”实现了下拉显示的功能。
4. 首次将JavaScript应用在页面中，实现交互效果。
5. 通过游览器的网页检查功能提高开发效率。
6. 加强了对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%);

  1. radial-gradient: 表示使用放射状渐变。
  2. circle at center: 指定渐变的形状是圆，并且圆心位于背景区域的中心。
  3. 中间数值分别对应渐变的开始、中心、结束位置。

• 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('提交成功啦！感谢您的评价');
    })