CSS入门 模仿网页笔记

这篇博客介绍了CSS入门的一些关键知识点,包括导航栏的设置,如何处理inline-block的间距问题,浏览器窗口大小改变时的布局调整,字体颜色、超链接、边框阴影的设置,以及input元素和伪元素的限制。博主分享了在学习过程中遇到的挑战和解决方案,强调了学习总结和代码组织的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

导航栏设置–注意点

  • 当子元素li设置浮动为左浮动时,会导致父元素高度坍塌,注意在父元素中补充overflow:hidden;闭合浮动。
  • line-height设置行间距,用于撑开盒子高度

横向排列

制作导航栏时,需要横向排列三个div。
关于布局方法的问题,是使用display:inline-block;还是浮动属性float,参考链接:css之使用display:inline-block;布局

解决过程中还了解到,inline-block的排列规则参考如下:
在这里插入图片描述

inline-block间距问题

解决办法:让水平间隙消失就是在父级上加font-size:0;让垂直间隙消失,就在子元素上加vertical-align:bottom;
如果子标签内加上任意文字,则display:inline-block元素不会生成垂直方向有空白!

参考链接:【CSS】inline和inline-block的间距

浏览器窗口大小改变布局

在缩小页面时,发现布局会随浏览器大小的改变而变化,想给body设置固定宽度解决布局问题,但是body无法设置宽高,需要另外写div;但是另外写div并没有解决布局变化的问题。
在这里插入图片描述
暂时无法解决以上问题时,又发现logo和daohang这两个元素position应取值为fixed固定在上方,修改代码后,原先的问题就不复存在。但是对于布局的问题还具有疑问尚待解决。

字体颜色

  • 设置color

超链接

  • 是行内元素 无法设置宽高

边框阴影

  • 设置box-shadow
  • 例子:box-shadow:5px 5px 5px rgba(22, 50, 80, 0.3);

input不支持伪元素

参考链接:input不支持伪元素after、before

关于宽度100%的设置

参考链接:width为auto或者100%的区别

CSS设置内容超出后显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

参考链接:CSS设置内容超出后显示省略号

:hover操纵自己包含的子元素以外的元素

  • 通过>与+来控制下个元素,子集元素,下个元素的子集元素的CSS

例子如下:

<html>
<body>
<style>
    #a {color : #FFFF00;}
    #a:hover > #b{color : #FF0000;}    
    #a:hover + #c{color : #00FF00;}
    #a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1
  <div id='b'>元素2</div>
</div>
<div id='c'>元素3
  <div id='b'>元素2</div>
</div>
</body>
</html>

关于链接地址为JavaScript:void(0)的问题

参考链接:关于链接地址为JavaScript:void(0)的问题

学习总结

  • 过程应该注重学习的总结。
  • 提高效率也是学习的最重要目的之一。
  1. 代码很长的时候,注意html、css、js的分离。
  2. 学会自己写css文件,并懂得引用外部样式,不管是自己写的,或是外界的。
  3. 某些标签具备不必要的属性时,运用写好的外部样式,在代码书写开始前就应引入,即重置样式;引用外部样式成为一种必要。
  4. 不同标签具有相同的属性值,例如同样具备margin:8px;这句代码时,可以整合进一个css文件中,即按属性值将其归为一类。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值