建设网页网站的收获

原创已于 2024-01-06 23:18:30 修改 · 497 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

于 2024-01-06 23:13:44 首次发布

建设网页网站的收获

建设网页网站前出于考虑各游览器的兼容问题，需要给网站整体初始化，即给标签初始化，可以在初始化的同时引入字体。
网站建设前先给每个页面拟定排版要使用的布局。
通过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%);
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('提交成功啦！感谢您的评价');
    })