zoukankan      html  css  js  c++  java
  • html基础--css基本属性

    HTML基础--css基本属性
     
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8"> <!-- 指定编码 -->
    <title>liudaozhang</title>
    <link rel="shortcut icon" href="http://www.nnzhp.cn:80/wp-content/themes/QQ/images/logo.jpg">
    <style>
    /*.c1{*/
    /*height: 100px;*/
    /* 100px;*/
    /*border: red 2px solid;*/
    /*text-align: center;*/
    /*line-height: 100px;*/
    /*}*/
    /*text-align: center; 水平方向居中*/
    /*line-height: 100px; chS方向居中*/
     
    /*.c1{*/
    /*height: 100px;*/
    /* 100px;*/
    /*border: red 2px solid;*/
    /*float: right; ;*/
    /*}*/
    /*float:通过浮动可以将块及标签放到一行,相当于不同层,但是超过100%的宽度就会换行,*/
    /*超过100%的宽度,是相对于外层div来判断的。 none:默认不浮动、inherit:父类继承*/
    </style>
    </head>
    <body>
     
    <!--<div style="height: 100px; 100px;kkk</div>-->
    <!--<div style="height: 100px; 100px;font-size: 100px">kkk</div> 字体大小-->
    <!--<div style="height: 100px; 100px;font-weight: bold">kkk</div> 字体粗细-->
    <!--<div style="height: 100px; 100px;border: red 2px solid;text-align: center">kkk</div> 水平方向居中-->
    <!--<div style="height: 100px; 100px;border: red 2px solid;text-align: center;line-height: 100px">kkk</div> 水平方向居中-->
     
    <!--<div class="c1">kkk</div>-->
    <!--<div class="c1">kkk</div>-->
    <!--<div class="c1">kkk</div>-->
     
     
    <!--display 属性行内块级标签的转换 重要 重要 重要-->
    <!--<span style="height: 100px; 100px;border: red 2px solid;display: block"></span>-->
    <!--display:block 行内标签转换为块级标签 行内标签无法设置无法设置高度、宽度、padding、margin,-->
     
    <!--<span style="height: 100px; 100px;border: red 2px solid;display: none"></span>-->
    <!--display:none 隐藏属性-->
     
    <!--<div style="display: inline">qqq</div>-->
    <!--display:inline,块级标签转换为行内标签-->
     
    <!--<span style="height: 100px; 100px;border: 2px red solid;display: inline-block"></span>-->
    <!--display:inline-block,行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性-->
     
     
    <!--<div style="height: 100px; 100% ;border: 2px blue solid;">-->
    <!--<div style="height: 70px; 60% ;margin-left:1px "></div>-->
    <!--<div style="height: 70px; 60% ;padding-left:1px "></div>-->
    <!--</div>-->
    <!--margin 外边距-->
    <!--自己针对外围的div产生变化 外边距撑大外层 top left right bottom-->
    <!--padding 内边距-->
    <!--内边距 自身的边距增加 top:从上到下增加 内边距扩大自身 bottom:从下增加 left:从左增加 right:从右增加-->
     
     
    </body>
    </html>
     
     
    ==============================分割线===========================
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8"> <!-- 指定编码 -->
    <title>liudaozhang</title>
    <link rel="shortcut icon" href="http://www.nnzhp.cn:80/wp-content/themes/QQ/images/logo.jpg">
    <style>
    /*.c1{*/
    /*height: 100px;*/
    /* 100px;*/
    /**/
    /*}*/
    /*.c1:hover{*/
    /**/
    /*}*/
    /*hover属性是当鼠标移动到上面后,设置其样式*/
     
     
    .c2{
    height: 50px;
    50px;
    border: 1px solid;
    background-image: url("http://ui.imdsx.cn/static/image/icon.png");
    background-position-x: 10px;
    background-position-y: 10px;
    }
    /*将 div看做一个窗户 图片在窗户外移动 用于切图*/
    /*background-position-x: 10px;*/
    /*background-position-y: 10px;*/
    </style>
     
    </head>
    <body style="margin: 0">
     
    <!--position-->
     
    <!--<div style="height: 48px; 100%;position: fixed">1234</div> 写法1 -->
    <!--<div style="height: 48px;position: fixed;top: 0;left:0;right: 0"></div> 写法2-->
    <!--<div style="height: 1000px;margin-top: 48px">222</div>-->
    <!--position 分层-->
    <!--position:fixed 固定在窗口的某个位置 top:距离顶部多少像素 left right -->
    <!--position relative absolute-->
    <!--position:relative 与 position:absolute(绝对定位,单用没什么作用 结合relative才牛逼) -->
    <!--absolute的定位针对于于relative的定位 单独relative没有任何意义 见body.html-->
     
    <!--<div style="height: 400px; 400px;border:red 2px solid;position: relative">-->
    <!--<div style="height: 50px; 50px;position: absolute;right: 0;bottom: 0"></div>-->
    <!--<div style="height: 50px; 50px;position: absolute;left: 0;top: 0"></div>-->
    <!--<div style="height: 50px; 50px;position: absolute;right: 0;top: 0"></div>-->
    <!--<div style="height: 50px; 50px;position: absolute;left: 0;bottom: 0"></div>-->
    <!--</div>-->
    <!--position 的absolute 和relative属性 使用这样便于调整布局top left bottom right 按上下键能调整 -->
    <!--relative和absolute必须要连用,relative在外层 absolute在内层-->
     
    <!--<div style="height: 100px; 100px;position: absolute;top: 100px;left: 100px"></div>-->
    <!--<div style="height: 1000px;margin-top: 48px;">2222</div>-->
     
    <!--<div style="height: 100px; 100px;position: relative">-->
    <!--<div style="height: 100px; 100px;z-index: 2 ;position: absolute "></div>-->
    <!--<div style="height: 100px; 100px;z-index: 2 ;position: absolute "></div>-->
    <!--z-index: 2 谁的值大 谁就是在上一层/外层 就显示谁的颜色-->
     
    <!--<input type="button" value="login" style="cursor:pointer"> 这是鼠标变成小手-->
    <!--<input type="button" value="login" style="cursor:move"> 鼠标变成十字架-->
    <!--<input type="button" value="login" style="cursor:crosshair"> 鼠标变成截图-->
     
     
    <!-- auto 自动增加滚动条-->
    <!--<div style="height: 200px; 200px;border: red 1px ;overflow: auto">-->
    <!--hidden 自动截取超出部分的滚动条-->
    <!--<div style="height: 200px; 200px;border: red 1px ;overflow: hidden">-->
    <!--scroll 要求出现滚动条-->
    <!--<div style="height: 400px; 400px;border: red 1px ;overflow: scroll">-->
    <!--<img src="http://www.imdsx.cn:80/wp-content/themes/QQ/images/logo.jpg">-->
    <!--overflow属性设置当div内的内容溢出div的高宽时,如何处理 默认会出现在元素框之外-->
    <!--hidden:溢出部分截取掉 scroll:超出就出现滚动条-->
     
    <!--<div class="c1"></div> /*hover属性是当鼠标移动到上面后,设置其样式*/-->
     
     
    <!--<div style="height: 1000px; 100%;background-image: url('logo.jpg');background-repeat: repeat-x"></div>-->
    <!--<div style="height: 1000px; 100%;background-image: url('logo.jpg');background-repeat: repeat-y"></div>-->
    <!--<div style="height: 1000px; 100%;background-image: url('logo.jpg');background-repeat: no-repeat"></div>-->
    <!--background 是针对背景一些样式设置, background-image:背景图片,-->
    <!--图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠。-->
    <!--可通过background-repeat属性对是否堆叠进行设置-->
    <!--no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)。-->
    <!--background-position 针对div设置图片展示的位置。-->
    <!--background-position-y: 10px 纵向移动图片-->
    <!--background-position-x: 10px 横向移动图片。-->
    <!--也可以不写x或y,默认第一个为x的值 第二个位y的值,-->
    <!--background-position:10px 10px。-->
    <!--可以通过background直接简写,-->
    <!--background 简写 参数分别为 颜色 背景图 postion横向 纵向 是否堆叠-->
     
    <!--<img src="http://www.imdsx.cn:80/wp-content/themes/QQ/images/logo.jpg">-->
    <!--<div style="height: 10px; 10px;border: 1px red solid;background-image: url('http://www.imdsx.cn:80/wp-content/themes/QQ/images/logo.jpg')"-->
     
    <!--<div class="c2"></div> 切图-->
     
    </body>
    </html>
     
     
    <!--hw:-->
    <!--顶层 用-->
    <!--<div align=""-->
    <!--导航用position-->
    <!--文案覆盖的话用margim-top:48px-->
    <!--贴边:margim:0-->
  • 相关阅读:
    Codeforces Round #251 (Div. 2) A
    topcoder SRM 623 DIV2 CatAndRat
    topcoder SRM 623 DIV2 CatchTheBeatEasy
    topcoder SRM 622 DIV2 FibonacciDiv2
    topcoder SRM 622 DIV2 BoxesDiv2
    Leetcode Linked List Cycle II
    leetcode Linked List Cycle
    Leetcode Search Insert Position
    关于vim插件
    Codeforces Round #248 (Div. 2) B. Kuriyama Mirai's Stones
  • 原文地址:https://www.cnblogs.com/zunchang/p/8283987.html
Copyright © 2011-2022 走看看