引言
- CSS编程练习和界面设计
环境
用vs code进行编辑html文件
具体过程
实验题目 2.0：
1.首先新建文本文档，将后缀名改为.html
2.用vs code打开此文件，进行编辑
3.设置一个div中嵌套两个div来实现两个盒子覆盖在一个盒子上
<div class="mainBox">
<div class="leftBox"></div>
<div class="rightBox"></div>
</div>
4.以为三个盒子同样高度所以直接 div {height: 300px;}
5.然后分别对三个盒子进行设置宽度和颜色
6.让第一个盒子浮动在左边，第二个盒子浮动在右边即可
div {height: 300px;}
.mainBox {width: 960px;background:#CFF;}
.leftBox {width: 740px;background:#C9F;float: left;}
.rightBox {width: 210px;background: #FCF;float:right;}
实验题目 2.2：
- .newsBox {min-height: 300px;width: 790px;}
通过设置最小高度300px，超过高度则会自动调整- p {text-indent:2em;line-height:25px;}
设置开头空两格，行间距为25px- .newsTitle {text-align: center;font-size: 20px;}
标题居中且调整字体大小- .newsInfo {text-align: center;color: grey;border-bottom: rgb(128, 128, 128) dotted 0.1px;}
设置颜色为灰色，下方有下划的灰色虚线- .newsContent {font-size: 16px}
所有文字字体大小16px- p:nth-child(2) {font-weight: bolder;}
p:nth-child(7) {font-weight: bolder;}
选中特定的p使小标题加粗- p:nth-child(4) {text-align: center;}
选中特定的p使图片居中
总结
- 可以利用嵌套来实现盒子的重叠
- 利用class来区分不同盒子，方便css渲染时的选择
- 使用不同手段来渲染
