页面布局 - 随笔分类 - 昨夜小楼听风雨

网页布局------form表单

摘要：1、基础语法 <form></form> （1）表单类型： email ：能够验证当前输⼊的邮箱地址是否合法 url ：验证URL number ：只能输⼊数字，其他输⼊不了，⽽且⾃带上下增⼤减⼩箭头，max属性可以设置为最⼤值，min可以设置为最⼩值，value为默认值。 search ：阅读全文

posted @ 2024-05-31 13:58 昨夜小楼听风雨阅读(79) 评论(0) 推荐(0) 编辑

html------拖拽属性draggable

摘要：draggable用于定义元素是否可以拖拽，在拖拽过程中鼠标会变成禁止标志 <img draggable="true" /> 下面是一个简单的图片拖拽属性添加 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>draggable属阅读全文

posted @ 2024-05-24 13:41 昨夜小楼听风雨阅读(205) 评论(0) 推荐(0) 编辑

网页布局------鼠标悬停标签切换内容

摘要：页面结构 <div class="body-brick"> <div class="body-brick-title"> <h2 class="body-brick-title-h2"> 生活电器</h2> <div class="body-brick-title-right"> <ul> <li> 阅读全文

posted @ 2024-05-22 10:39 昨夜小楼听风雨阅读(107) 评论(0) 推荐(0) 编辑

网页布局------video视频设置

摘要：1、基础语法（1）video标签 <video src='' poster='imgs/aa.jpg' controls></video> 属性： poster：指定视频还没有完全下载完毕，或者⽤户还没有点击播放前显示的封⾯。默认显示当前视频⽂件的第⼀针画⾯，当然通过poster也可以⾃⼰指定。阅读全文

posted @ 2024-05-20 13:12 昨夜小楼听风雨阅读(23) 评论(0) 推荐(0) 编辑

网页布局------小米商城官网

摘要：小米商城官网地址小米商城 - Xiaomi 14 Ultra、Redmi K70、MIX FOLD 3，小米电视官方网站一、头部 1、效果图 2、网页结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na 阅读全文

posted @ 2024-05-18 12:36 昨夜小楼听风雨阅读(468) 评论(0) 推荐(0) 编辑

网页布局------导航栏下标缩放显示

摘要：实现迅雷导航栏下班缩放显示效果https://www.xunlei.com/ .nav-bar li::after{ position:abaolute; bottom:0; left:0; content:""; width:100%; height:2px; background-color:b 阅读全文

posted @ 2024-05-18 08:40 昨夜小楼听风雨阅读(17) 评论(0) 推荐(0) 编辑

网页布局------鼠标点击标签切换内容

摘要：网页结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu 阅读全文

posted @ 2024-05-17 09:48 昨夜小楼听风雨阅读(12) 评论(0) 推荐(0) 编辑

网页布局------小米商城页面布局

摘要：小米商城网址：小米商城 - Xiaomi 14 Ultra、Redmi K70、MIX FOLD 3，小米电视官方网站 ps：自己写的代码，会和网址有所差异网页结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me 阅读全文

posted @ 2024-05-16 12:54 昨夜小楼听风雨阅读(22) 评论(0) 推荐(0) 编辑

网页布局-----引入文件

摘要：1、js文件引入引用js文件需要使用script标签，其中必须要要引入jquery.min.js文件 <script src="./jquery.min.js"></script> <script src="./header.js"></script> 在编写js文件时需要保证DOM加载完成，可以阅读全文

posted @ 2024-05-16 08:41 昨夜小楼听风雨阅读(17) 评论(0) 推荐(0) 编辑

网页布局-------页面滚动到一定位置显示返回顶部按钮

摘要：页面结构 <div class="slide-shop"> <ul> <li> <a> <div class="slide-shop-div">  <i class 阅读全文

posted @ 2024-05-15 22:29 昨夜小楼听风雨阅读(20) 评论(0) 推荐(0) 编辑

网页布局------鼠标悬浮在图片上，图片进行平移

摘要：实现效果：鼠标悬浮在图片上，图片向上移动一段距离通过平移的方式使图片进行移动 transform:translate(x-value,y-value); 内容向左和向右分别移动将参数设置为正值，向右向上移动将参数设为负值也可以通过设置下面内容单独设置平移方向 transform: transla 阅读全文

posted @ 2024-05-14 16:15 昨夜小楼听风雨阅读(143) 评论(0) 推荐(0) 编辑

网页布局------阴影效果显示

摘要：在制作网页的过程中，经常需要对图片添加阴影效果基本语法如下 box-shadow:h-shadow v- shadow blur spread color outset; 具体参数属性如下参数值描述 h-shadow 表示水平阴影的位置们，可以为负值(必选属性) v-shadow 表示垂直阴影阅读全文

posted @ 2024-05-14 16:04 昨夜小楼听风雨阅读(78) 评论(0) 推荐(0) 编辑

网页布局------样式去除

摘要：1、列表前面标点将列表前面的标点去掉 list-style:none; 去除之后 2、超链接下划线去除将超链接的下划线去掉 text-decoration: none; 阅读全文

posted @ 2024-05-14 12:22 昨夜小楼听风雨阅读(13) 评论(0) 推荐(0) 编辑

web前端面试题(一直更新)

摘要：一、Vue 1、v-show和v-if不同（1）实现方式 v-if是一种条件渲染指令，它会根据表达式的值来插入或删除元素。当表达式的值为真时，元素会被插入到DOM中，否则会从DOM中删除。 v-show是一种简单的显示/隐藏指令，它会根据表达式的值来显示或隐藏元素。当表达式的值为真时，元素会被显示阅读全文

posted @ 2024-05-14 12:22 昨夜小楼听风雨阅读(43) 评论(0) 推荐(0) 编辑

网页布局------同一个div下设置两个绝对定义，其中1个不显示

摘要：问题：下面这张图分别给左侧列表和右侧图片设置绝对定位，其中1个不显示在页面中 web文档流是垂直往下的，后面设置的绝对定位层级比前面高所以覆盖了左侧的列表，需要在左侧列表中设置z-index大于右侧轮播图阅读全文

posted @ 2024-05-14 10:54 昨夜小楼听风雨阅读(13) 评论(0) 推荐(0) 编辑

网页布局-----input点击时出现黑色边框

摘要：点击input时出现下面情况在css中设置下面方法去除黑色边框 outline:none 阅读全文

posted @ 2024-05-13 10:16 昨夜小楼听风雨阅读(232) 评论(0) 推荐(0) 编辑

网页布局------点击获取焦点focus使相邻元素和不相邻元素发生变化

摘要：1、相邻元素使用"+" 实现效果：input边框和按钮放在同一个div下，使用hover可以设置悬浮在input边框时的颜色变化，而需要设置按钮边框的颜色变化则需要使用"+"来添加页面结构 <div class="nav-search"> <input type="search" placehol 阅读全文

posted @ 2024-05-09 10:34 昨夜小楼听风雨阅读(28) 评论(0) 推荐(0) 编辑

网页布局-------三角制作

摘要：使用border设置三角形，通过transparent隐藏多余的内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i 阅读全文

posted @ 2024-05-08 10:29 昨夜小楼听风雨阅读(33) 评论(0) 推荐(0) 编辑

网页布局-----头部设置和头部悬浮显示内容

摘要：小米商城官网地址小米商城 - Xiaomi 14 Ultra、Redmi K70、MIX FOLD 3，小米电视官方网站一、头部 1、效果图 2、网页结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na 阅读全文

posted @ 2024-05-07 11:39 昨夜小楼听风雨阅读(171) 评论(0) 推荐(0) 编辑

随笔分类 - web / 页面布局

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论