2019/3/13-人机交互实验四

引言

• 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渲染时的选择
• 使用不同手段来渲染