CSS 初体验
- CSS 样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style2.css" /><title>CSS属性</title><style>.litext1 {color: darkgreen;}</style></head><body><nav><ul><img src="icon.jpg" alt="" width="50" height="50" /><li class="litext">首页</li><li class="litext">视频</li><li class="litext">音频</li><li class="litext litext1">留言</li></ul></nav><main class="dream"><h2 style="color: darkred;">欢迎来到你的梦想</h2></main></body></html>
- style1 样式
ul { display: flex; background-color: beige; } ul li { display: flex; height:50px; margin-left: 30px; line-height: 50px; }
- style2 样式
@import url(style1.css); .litext { font-family: "楷体", Arial, Helvetica,sans-serif; font-size: 20px; font-weight: bold; color: midnightblue; } @mediascreen and (max-width: 400px) { ul { display: none; } } .dream {background-image: url(bg.jpg); width: 100%; height: 1080px; }
- 显示效果（屏幕宽度大于400px）
- 显示效果(屏幕宽度小于等于400px)
学习总结：
- 属性值掌握不好，在没有提示的情况下很难写出来，代码不熟练
- 检查源码时对于检查源码的界面操作陌生
- display属性使用难度系数大，缺乏练习，待进一步提高
