web前端第三周学习

最新推荐文章于 2024-06-18 12:04:57 发布
最新推荐文章于 2024-06-18 12:04:57 发布
阅读量164 收藏
点赞数
文章标签： 前端 学习 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BBsix666/article/details/127608908
版权

web前端第三周学习

四十六、标签群组通配等选择器

标签选择器（TAG选择器）
div{ }
使用的场景：

去掉某些标签的默认样式时
复杂的选择器中，如：层次选择器

群组选择器（分组选择器）

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

通配选择器

*( ) → div ,ul , li ,p ,h1 ,h2
注：尽量避免使用通配选择器，因为会给所有的标签添加样式。
使用场景：去掉所有标签的默认样式时。

四十七、层次选择器

后代 M N { }
父子 M>N { } 当前M下面所有N标签
兄弟 M + N { } 当前所有相邻的N标签

<style>
        div ~ h2 {background-color: aqua;}
    </style>
</head>
<body>
    <div>我是第一行</div>
    <p>我是第二行</p>
    <h2>我是第三行</h2>
</body>

四十八、属性选择器

M[attr] { }
= : 完全匹配
*= ：部分匹配
^= ：起始匹配
$= ：结束匹配
[ ] [ ] [ ] ：组合匹配

<style>
        div[class*=公]{background-color: blue;}
        div[class$=狮子]{border-style: dotted; border-color: brown;}
    </style>
</head>
<body>
    <div class="母狗">我是第一行</div>
    <div class="公狮子">我是第2行</div>
    <div class="公狗">我是第3行</div>
    <div class="公象">我是第4行</div>
    <div class="母狮子">我是第5行</div>

四十九、hover等伪类选择器

:link → 访问前的样式
:visited → 访问后的样式
:hover → 鼠标移入时的样式
:active → 鼠标按下时的样式
在这里插入图片描述

<style>
       div{background-color: red;}
       div:hover{background-color: blue;}
       div:active{background-color: green;}
    </style>
</head>
<body>
    <div>帅哥看见红色，丑鬼看见蓝色</div> 
</body>

五十、after等伪类选择器

:after
:before
:checked
:disabled
:focus

<style>
        div::ter{content: "world"; color: brown;}
    </style>
</head>
<body>
    <div>hello</div>

五十一、结构伪类选择器

:nth-of-type()、 :nth-child()
first-of-type、 :first-child
last-of-type、 :last-child
only-of-type、 :only-child

li:nth-of-type(2n+1) → 指定奇数行

五十二、CSS样式的继承

文字相关的样式可以被继承
布局相关的样式不能被继承
（默认是不能继承的，但可以设置继承属性inherit值）

五十三、单一样式的优先级

在这里插入图片描述

style行间 > id > class > * > 继承
权重：style行间：1000
           id：100
           class：10
           tag：1

五十四、important群组等优先级

在这里插入图片描述
标签 + 类 > 单类

五十五、层次的优先级

1.权重比较
ul   li   .box   p   input{ } → 1+1+10+1+1
2.约分比较
约去等级一样的

五十六、CSS盒子模型

在这里插入图片描述
content物品 → padding填充物 → border包装盒 → margin盒子与盒子之间的间距

content：内容区域 → width和height组成的
padding：内边距（内填充）
    只写一个值：30px（上下左右）
    写两个值：30px 40px（上下、左右）
    写四个值：30px 40px 50px 60px（上、下、左、右）
单一样式只能写一个值：
    padding-left
    padding-right
    padding-top
    padding-bottom
margin：外边距
    margin-left
    margin-right
    margin-top
    margin-bottom

在这里插入图片描述
margin负值可以做区块覆盖。

五十七、box-sizing改变盒模型

盒尺寸，可以改变盒子模型的展示形态。
默认值：content-box ： width、height → content
border-box ： width、height → content   padding   border
 
使用的场景：

1.不用再去计算一些值
2.解决一些100%的问题

五十八、盒模型之margin叠加问题

盒子模型的一些问题
margin叠加问题，出现在上下margin同时存在的时候。（左右没有这个问题）
解决方法：只给一个元素添加间距。

<style> .box1{width: 200px; height: 200px; background-color: red;} .box2{width: 50px; height: 50px; background-color: green;} .box3{width: 50px; height: 50px; background-color: saddlebrown; margin-top: 100px;} .box4{width: 50px; height: 50px; background-color: gold; margin-left: 150px; margin-top: -50px;} .box5{width: 50px; height: 50px; background-color: blue; margin-left: 150px; margin-top: -200px; } </style> <div class="box1"> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </div>

在这里插入图片描述

五十九、盒模型之margin传递问题

在这里插入图片描述

六十、css盒子模型之扩展

margin左右自适应是可以的，但是上下自适应是不行的。
在这里插入图片描述

六十一、盒子模型的嵌套练习

<style>
        #b1{width: 350px; height: 350px; border: 1px black dashed; padding: 27px;}
        #b2{border: 5px #d7effe solid; padding: 20px;}
        #b3{background: #ffa0df; padding: 41px;}
        #b4{border: 1px white dashed; padding: 3px;}
        #b5{border: 1px white dashed; padding: 49px;}
        #b6{border: 100px; height: 100px; background: #96ff38; border: #fcff00 5px solid;}

    </style>

在这里插入图片描述

六十二、按类型划分标签

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

六十三、按内容划分标签

在这里插入图片描述
详情

六十四、按显示划分标签

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。

img 、input …

非替换元素：将内容直接告诉浏览器，将其显示出来。

div 、h1 、p …

六十五、display显示框类型


在这里插入图片描述

六十六、标签嵌套规范

在这里插入图片描述

六十七、overflow溢出隐藏

<style>
       div{width: 300px; height: 200px; border: 1px black solid; overflow: hidden;}
    </style>

在这里插入图片描述

overflow:
visible: 默认
hidden: 隐藏
scroll: 滚动
auto: 自动

六十八、透明度与手势

opacity：0（透明）~ 1（不透明） 0.5（半透明） → （对(div)块中的所有内容）
rgba(255,0,0,0.5) 半透明红色 → （可对背景）
cursor：手势

cursor : pointer ; →鼠标移入时呈手指状

在这里插入图片描述

BBsix666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web前端开发技术储久良第三版答案
12-09
web前端开发技术储久良第三版答案
web前端第三版习题参考答案_.docx.docx
04-04
网页由两部分构成：头部（）和主体（）。...这些都是Web前端开发中不可或缺的部分，对于理解和创建基本的网页内容至关重要。通过练习和实际操作，可以进一步巩固这些知识点，并为更深入的前端学习打下坚实的基础。
web前端技术第三版答案储久良
04-22
全套答案
web前端初级.pdf
05-23
Web 前端开发职业技能标准串讲教案初级，内共有四篇：第一篇web页面制作基础，第二篇html5和css3开发基础与应用，第三篇JavaScript程序设计，第四篇轻量级框架开发应用。
Web前端设计与开发技术课件第3章首页设计与网页布局.pptx
11-12
"Web前端设计与开发技术课件第3章首页设计与网页布局" Web前端设计与开发技术是指使用HTML、CSS、JavaScript等技术来设计和开发网站的前端部分。网页设计是网站的门面，是网站的第一印象，因此首页设计尤为重要。本...
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 424
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1425
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 526
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
Vue3-滑动到最右验证功能
地理信息的专栏
06-13 483
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
快速压缩前端项目
lyd的博客
06-15 383
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
web前端拖拽工具：探索其复杂性、困惑度与爆发度
liyrbtqe_66w的博客
06-12 413
综上所述，Web前端拖拽工具虽然带来了便捷和效率，但同时也伴随着一定的复杂性、困惑度和挑战。对于开发者来说，深入了解拖拽工具的技术原理和应用场景，掌握其使用方法和优化技巧，是提升开发效率和降低项目风险的关键所在。然而，在实际项目中，由于项目需求、技术栈以及团队协作等多种因素的影响，开发者可能会遇到各种复杂的问题和挑战。然而，随着功能的增多和复杂化，开发者在使用拖拽工具时可能会遇到一些困惑和挑战。同时，随着Web组件化、模块化等趋势的普及，拖拽工具也可能会朝着更加标准化、可复用的方向发展。
SortTable.js + vxe-table 实现多条批量排序
小先生编程
06-12 758
环境: 功能: 实现表格拖动排序，支持单条排序，多条排序 实现思路: 官网只有单条排序的例子，网上也都是简单的使用，想要实现多条排序，就要结合着表格的复选框功能，在对其勾选的行统一计算！ 最终效果: 实现代码
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 867
Vue在表单校验中trigger属性指定何时触发校验规则
apex触发器满足条件时弹出对话框
Debug yourself!
06-13 746
在Salesforce中，Apex触发器是在记录的数据库操作（如插入、更新、删除）之前或之后执行的逻辑。由于Apex触发器运行在服务器端，无法直接触发客户端（浏览器）上的对话框。
React.FC`＜ChildComponentProps＞`解释
最新发布
weixin_63681863的博客
06-18 386
通过使用进行类型注解，你可以确保组件的 props 类型安全，并享受更好的开发体验，包括智能提示和自动补全。这种类型注解在团队合作和大型项目中尤其重要，因为它可以显著减少由于类型错误引起的 bug。
vue v-img引用公众号图片时报错 此图片来自微信公众平台
打不死的小五
06-11 333
解决方法so easy，官方一行代码解决，附参考文档。
vue 修改页面 刷新页面 增删改 provide / inject
global_coding的博客
06-13 1067
vue 修改页面 刷新页面 增删改 provide / inject
2406,D2024年二月会议
个人进步之路
06-13 631
2406,D2024年二月会议
Web前端设计的心得：探索、挑战与成长
mrdtearty99的博客
06-12 286
同时，我们也需要反思自己的设计思路和实现方式，不断优化和改进自己的作品。其次，美观性同样重要，优秀的视觉设计能够吸引用户的眼球，提升其对网站的好感度。此外，我们还需关注设计的可访问性和可维护性，确保不同设备和浏览器上的显示效果一致，同时便于后续的更新与维护。在Web前端设计中，技术实现往往是一个巨大的挑战。通过不断探索、挑战自我和持续学习，我们可以不断提升自己的设计水平和技能水平，为用户带来更加优质和出色的体验。同时，我们也需要保持开放的心态和合作的精神，与团队成员共同推动项目的成功和发展。
web前端开发(第三版)电子版
10-14
《Web前端开发（第三版）》是一本介绍网页前端开发的教材，电子版指的是该书的电子版本。 首先，电子版具有便携性。传统纸质书籍需要携带在身上或通过物流运输，而电子版则可以在电子设备上随时阅读，如电脑、平板...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值