前端三剑客快速入门(二)

前言

本文书接上回,继续css的知识,序号就重新开始了。上篇内容:前端三剑客快速入门(一)

CSS

  1. 盒子模型
    盒子模型属性:

    • border外框
    • margin外边距
    • padding内边距



    
    
    
    Document
    


    
test

hhhh




    
    
    
    Document
    


   

盒子模型实例:




    
    
    
    Document
    


    

水果列表

  • 苹果
  • 香蕉
  • 鸭梨

水果列表

  • 足球
  • 篮球
  • 排球

实例运行结果:

  1. CSS浮动布局

    • html元素分类:
    • 块元素:可以设置宽度和高度,独立成行。如h1-6、p、div、ul、li
    • 行内元素(内联元素、行级元素):不可以设置宽度和高度,不可以独立成行,如a、span
    • 行内块元素:可以设置宽度和高度,不独立成行img、input、button



    
    
    
    Document
    


    

hello world

百度

hello world

设置元素浮动实例




    
    
    
    Document
    


    
内容
边栏

伪元素清除浮动




    
    
    
    Document
    


    
内容
边栏

浮动布局练习:
html文件




    
    
    
    Document
    


    
  • 前端开发学习

    2022年10月6日

    阅读
  • java学习手册

    2022年10月6日

    阅读

css文件

*{
    margin: 0px;
    padding: 0px;
}
.list .pic img{
    width: 200px;
    height: 150px;
}
.pic{
    width: 200px;
    float: left;
}
.content{
    width: 300px;
    float: left;
}
.box::before,.box::after{
    content: "";
    display: block;
    clear: both;
}
a{
    display: block;
    width: 80px;
    height: 30px;
    background-color: aqua;
    text-align: center;
    color: aliceblue;
    text-decoration: none;
    line-height: 30px;
}
.list{
    display: block;
    width: 700px;
    margin: auto;
    border: 1px solid red;
}
.list{
    list-style: inside;
}

浮动布局练习结果:

  1. 树状结构
    树状结构练习
    html代码:



    
    
    
    树状结构
    


    

精选手册 查看更多

  • java学习手册

    2022年10月6日

    阅读
  • java学习手册

    2022年10月6日

    阅读

css代码:

*{
    margin: 0px;
    padding: 0px;
}
.title{
    width: 800px;
    height: 30px;
    border: 1px solid red;
}
.title h2{
    font-size: 16px;
    line-height: 30px;
}
.title h2 a{
    font-size: 12px;
    color: #aaa;
    float: right;
    text-decoration: none;
}
.pic{
    width: 300px;
    float: left;
}
.list img{
    width: 300px;
    height: 200px;
}
.discribe{
    width: 500px;
    float: left;
}
.clear::after,.clear::before{
    content: "";
    display: block;
    clear: both;
}

运行结果图:

后续

后面还有一个css定位,感觉今晚可能写不完了,就先发布吧,剩下的算到(三)里面,明天就能还原设计稿了。今天的浮动布局真是为难了好一阵,最终经验是浮动的是div块,清除浮动的话要在浮动的父元素处做手脚。web这两天一点也没学,要学的好多,好着急。

原文链接:,转发请注明来源!