330 div+css Experience

时间：2022-03-13 12:48:30

今天学习的div，感觉对编辑html更为方便快捷，但还是需要多练，多熟悉一下思路和逻辑方式

越来越感觉，代码不是重要的，重要的是方向和思路，am的float clearfloat 及属性，还有overflow 溢出的三个属性
最重要的是边框左圣诞树 做div的布局算数把我整蒙圈了，用border四个边距设置来做三角形是重点
下午学的盒子 内外边距 边框border margin的重叠取值 和顺序
还有css的初始化

一：div不是功能标签，可以放文字、图片各种元素的块标签，常常用来布局

float浮动：left，right 左右属性

清除浮动：clear：left，right，both左右一起清除

二：溢出

overflow：hidden超出会隐藏 ，scroll 滚动条，auto 超出有滚动，反之。

三：用边框样式做：圣诞树 三角形

border-top：顶

border-left：左

border-right：右

border-bottom：底

PM：

盒子模型：外边距：margin 边框：border 内边距：padding

margin重叠现象：只要有一个元素没有float ，就会出现重叠，这时取相邻最大值

margin的顺序：上有下左（顺时针）

330 div+css Experience

CSS初始化：

*{margin:0px;

padding:0px;}

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>div</title>

        <!-- <div></div>不是功能标签

        可以放文字、图片及各种元素的块标签 常常用来布局 -->

<style>

    #d1{

        background-color:blue;

        width:200px;height:50px;

        float: left;

    }

    #d2{

        background-color:red;

        width:200px;height:50px;

        /* float浮动属性:left,right. */

        float: right;

    }

    #d3{

        background-color:green;

        height: 200px;

        /* 清除浮动 ：left，right，both左右一起清除*/

        clear:both;

        /* 溢出处理

         内容超出div会隐藏

        overflow: hidden; */

    /* 不管内容是否超出,都会加滚动条

        overflow: scroll;

       内容不超出div没有滚动条,超出自动添加滚动条 */

         overflow: auto;

      /* overfl的属性只能有一个存在 */

      }

    #header{

        width: 0px;    height: 0px;

        border-top: 100px solid white;

        border-right: 100px solid white;

        border-bottom: 100px solid green;

        border-left: 100px solid white;

        float: left;

        margin-left: 100px;    }

    #main{    width: 0px;    height: 0px;

        border-top: 200px solid white;

        border-right: 200px solid white;

        border-bottom: 200px solid green;

        border-left: 200px solid white;    }

    #footer{

        width: 100px;

        height: 300px;

        background-color: darkolivegreen;

        margin-left: 150px;    }

        li{

            list-style-type: none;

            float:left;

            margin: 20px;

        }

        /* 盒子模型:

            外边距:margin

语法：

    margin:20px；像素值; --表示4方向外边距都20px

    margin:20px 40px；像素值1 像素值2;表示margin-top和bottom 20px，margin-left和right40px

    margin:20px 40px 60px 80px;像素值1 像素值2 像素值3 像素值4;表示4个方向 top left bottom right 顺时针方向

            边框:border

            内边距:padding

        margin重叠现象：只要有一个元素没有float属性，就会出现重叠现象，这时取相邻最大值*/

        /* CSS初始化:

        *{

            margin: 0px; padding: 0px;

        } */

        #big{

            width: 100px;

            height: 100px;

            background-color: yellow;

        }

        #small1{

            width: 150px;

            height: 150px;

            background-color: red;

            border: 20px solid #00FFFF;

            /* margin值的顺序是 上右下左 */

            margin: 10px 20px 40px;

            padding: 10px;

            }

        #small2{

            width: 100px;

            height: 100px;

            background-color: blue;

            float:left;

            margin: 10px;

        }

        #small3{

            width: 100px;

            height: 100px;

            background-color: magenta;

            margin:30px;}

        #small4    {

            width: 100px;

            height: 100px;

            background-color: pink;

            clear: both;

            margin: 20px;

        }

</style>

    </head>

    <body>

    <body id="big">

        <div id="d1">我是左div</div>

        <div id="d2">我是右div</div>

        <div id="d3">我是第三div</div>

        <div id="header"></div>

        <div id="main"></div>

        <div id="footer"></div>

        <div id="small1">戒指</div>

        <div id="small2"></div>

        <div id="small3"></div>

        <div id="small4"></div>

    </div>

    <ul>

        <li>首页</li>

        <li>新闻</li>

        <li>学校概况</li>

    </ul>

    </body>

</html>
用border做圣诞树
<title>边框样式圣诞树</title>

        <style>

            #a1{

                width: 0px;height: 0px;

                background-color: antiquewhite;

                border-top: 0px solid #00FFFF;

                border-right: 100px solid white;

                border-bottom: 100px solid darkgreen;

                border-left: 100px solid white;

                margin-left: 340px;

            }#a2{

                width: 0px;height: 0px;

                background-color: antiquewhite;

                border-top: 0px solid #00FFFF;

                border-right: 200px solid white;

                border-bottom:200px solid darkgreen;

                border-left: 200px solid white;

                margin-left: 240px;

            }#a3{

                width: 0px;height: 0px;

                background-color: antiquewhite;

                border-top: 00px solid #00FFFF;

                border-right: 300px solid white;

                border-bottom: 300px solid darkgreen;

                border-left: 300px solid white;

                margin-left: 140px;

            }#a4{

                width: 80px;height: 530px;

                background-color: orangered;

                margin-left: 400px;

            }

        </style>

    </head>

    <body>

        <div id="a1"></div>

        <div id="a2"></div>

        <div id="a3"></div>

        <div id="a4"></div>

    </body>

用div做方格子

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>方格子</title>

    <style >

            *{margin:0px;padding:0px;}

        #aa{width: 750px;

            background-color: lightgray;

        }

        #a1{width: 150px;height:150px;

        background-color: red;

        float: left;

        }

        #a2{width: 150px;height:150px;

        background-color: blue;

        float: left;

        }

        #a3{width:150px;height:150px;

        background-color: blanchedalmond;

        float: left;

        }

        #a4{width:150px;height:150px;

        background-color: aquamarine;

        float:left;

        }

        #a5{width:150px;height:150px;

        background-color: palegreen;

        float:right;

        }

        #a6{height:200px;width:480px;

        background-color: cyan;

        float: left;

        }

         #a7{width: 270px;height:275px;

        background-color:ivory;

        float: right;

        }

        #a8{height:200px;width:330px;

        background-color: darkorange;

        float: left;}

        #a10{width: 270px;height:275px;

        background-color: red;

        float: right;    }

        #a11{width: 480px;height:150px;

        background-color: green;

        }

        #a12{width: 100%;height:150px;

        background-color: orchid;

        float: left;

        }

        #a9{height:200px;width:150px;

        background-color: greenyellow;

        float: left;}

    </style>

</head>

    <body id="aa">

        <div id="a1">这是1</div>

        <div id="a2">这是2</div>

        <div id="a3">这是3</div>

        <div id="a4">这是4</div>

        <div id="a5">这是5</div>

        <div id="a6">这是6</div>

        <div id="a7">这是7</div>

        <div id="a8">这是8</div>

        <div id="a9">这是9</div>

        <div id="a10">这是10</div>

        <div id="a11">这是11</div>

        <div id="a12">这是12</div>

    </body>

</html>

330 div+css Experience的更多相关文章

  1. 前端之DIV&plus;CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  2. DIV&plus;CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  3. div&plus;css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  4. DIV&plus;CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  5. DIV&plus;CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  6. 十天学会&lt&semi;div&plus;css&gt&semi;横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  7. DIV&plus;CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. DIV&plus;CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  9. div&plus;css实例教程

    DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...

随机推荐

  1. ipython notebook 显示图

    import random import matplotlib from pylab import * %pylab inline list = [random.random() for i in r ...

  2. java mail

    java mail 1.配置 mvn <dependency> <groupId>javax.mail</groupId> <artifactId>ma ...

  3. html5学习测试

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. PIGCMS提示&OpenCurlyDoubleQuote;你的程序为盗版，非法授权，请联系QQ7530782或者8441010”的修复方法

    最近群里又有人发出来微信平台盗版源码这个问题求解决,其实我本人是一直支持正版的,大家有条件的还是购买正好为好,既然有人问我就顺便解决了下,其实很简单,再换个接口就好了,查看了一下是在\PigCms\L ...

  5. java 线程学习

    转载:详见处http://lavasoft.blog.51cto.com/62575/27069   Java多线程编程总结   下面是Java线程系列博文的一个编目:   Java线程:概念与原理 ...

  6. CH BR4思考熊&lpar;恒等有理式-逆波兰表达式求值&rpar;

    恒等有理式 总时限 10s 内存限制 256MB 出题人 fotile96 提交情况 4/43 描述 给定两个有理式f(X)与g(X),判断他们是否恒等(任意A,如果f(A)与g(A)均有定义,那么f ...

  7. 我博客上的围棋js程序

    作为一个围棋爱好者,就决定在博客里加个围棋js程序.于是,申请了博客的js权限,美化美化我的博客. 好在js的语法像C系的,看了看,写个程序应该还是可以的. 围棋里,设计好基本的数据结构: //a是1 ...

  8. 关于postman各功能的说明及用法以及批量执行

    这玩意功能还不错,可以学学,在测试接口或者配合写代码测接口时是有帮助作用的.今天也去打听了一下,一下我就做了一下记录. 首先,主界面: 分开记录,写的详细一些. 左侧菜单栏: 主菜单(请求部分); 输 ...

  9. Redis入门到高可用（十）—— Spring与Redis的整合

    1.pom文件 <!--redis--> <dependency> <groupId>org.springframework.data</groupId&gt ...

  10. Docker之宿主机ssh至docker容器

    下载docker: https://www.docker.com/products/overview 下载镜像: docker pull centos 查看镜像:docker images 创建镜像对 ...

相关文章