CSS入门 模仿网页笔记
导航栏设置–注意点
- 当子元素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不支持伪元素
关于宽度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)的问题
学习总结
- 过程应该注重学习的总结。
- 提高效率也是学习的最重要目的之一。
- 代码很长的时候,注意html、css、js的分离。
- 学会自己写css文件,并懂得引用外部样式,不管是自己写的,或是外界的。
- 某些标签具备不必要的属性时,运用写好的外部样式,在代码书写开始前就应引入,即重置样式;引用外部样式成为一种必要。
- 不同标签具有相同的属性值,例如同样具备
margin:8px;
这句代码时,可以整合进一个css文件中,即按属性值将其归为一类。