美文网首页
2019/3/13-人机交互实验四

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

作者: 叶可剑 | 来源:发表于2019-03-15 16:31 被阅读0次

    引言

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

    相关文章

      网友评论

          本文标题:2019/3/13-人机交互实验四

          本文链接:https://www.haomeiwen.com/subject/kcbtmqtx.html