马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 肖-肖 于 2021-4-26 17:42 编辑
实现效果
简单分析
知识点清单<!-- 3.26
a标签的模式转换,将它原本的行内模式转换为行内块模式，即可设置宽高和在同一行上
连接伪类选择器实现鼠标放上去更换背景图片的效果。注意的是不要设置a的:hover,因为那样的话
会将所有的都改为1个图片不是吗？
-->
五彩导航.zip
(37.24 KB, 下载次数: 0, 售价: 1 鱼币)
我还是觉得这么个小案例太小了,再加一个小案例-》padding应用的小案例
效果图如下:
知识点清单<!--
因为鼠标放上去是一片区域变化且可点击超链接，所以要设置a的宽高，设置宽高就要
改变原有的模式。但是因为文字长度不一样所以不方便给a宽度。所以高度可以给，但是宽度不要给
而是用padding值挤开就可以了。
padding不好的地方如下:
padding-left等等的使用会影响父盒子的宽度或高度。比如你原先的父盒子为230px,但是你设置它内部子盒子的属性为padding-left
那么父盒子的宽度会为260px.
-->
padding应用-新浪导航.zip
(1.54 KB, 下载次数: 0, 售价: 1 鱼币)
现边在说下怎么克服padding带来的不好滴影响!
代码如下:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>padding不影响盒子大小的情况</title>
<style>
h1{
/* 再来假设加了width属性 padding会不会影响宽度 会出现水平滚动条*/
/* width: 100%; *//*所以不写了呗*/
/* 只知定高度而不指定宽度，如果你给一个盒子不指定宽度则默认是根它的父亲是一样宽的 h1的父亲是body
body就是浏览器的宽度 所以h1适合浏览器一样宽的 */
height: 200px;
background-color: pink;
/* 下边给padding值来测试 */
padding:30px;/*发现宽度没有变化 高度变大了变成了260px 因为你上边和下边各有30px嘛*/
}
div{
width: 300px;
height: 100px;
background-color: purple;
}
div p{
/* 加上宽度则会超出60px 超出父亲的宽度 */
/* width: 100%; */
padding:30px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 第一种情况 -->
<h1>
</h1>
<!-- 第二种情况 -->
<div>
<p>
<!-- 按道理来说p是块级元素和父亲是一样宽的 现在没有指定宽度在使用padding值同样道理不会撑大盒子
它的父亲是300px如果在指定p的padding:30px会不会影响宽度变为360px? -->
</p>
</div>
</body>
</html>
完 | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2021-4-26 15:57:24
置顶卡
千斤顶
显身卡