zoukankan      html  css  js  c++  java
  • 样式、格式布局

    内敛<style>内嵌<style></style>外部css
    样式表的样式可以分为:
    一。控制文字的大小:用宽度和高度来设定文字的大小,宽度和高度的值用像素(px)来表示
    二。背景:
    用background-color:红色;来设定背景的颜色;
    background-image:图片的位置;来选择背景图片
    background-repeat: ;设定背景图片的平铺方式,x横向平铺,y纵向平铺
    background-position: ;来决定图片的位置,可以通个上下左右居中五个方向调整照片在网页中显示的位置,
    background-size:600px 600px;设定背景图片的大小 先写宽度再写高度,也用像素值
    三。字体的控制(微软雅黑是最常用的字体),特殊的文字做成图片才能在网页上面显示。
    用font-family:宋体;来选择字体的样式。
    font-size: ;又来设定文字的大小 要用像素值来决定文字的大小 常用的有12像素 14像素 16像素
    font-weight:b;文字加粗见到weight选b就可以
    font-style:i;让文字倾斜选择I就好。
    color:红色;这个是用来设定文字的颜色。
    text-decoration:underline简写U下划线;overline上划线,line-througn删除线,
    在<a><span>标签中的文字是无法被调整的
    四。对齐方式
    text-align是水平对齐方式
    vertical-align是垂直对平方式 只在行高里进行调整
    line-heigh行高 垂直对平方式和行高是配合使用的缺一不可
    text-indent(缩进,单位是像素) 给段落开头做缩进用的,
    五。边界边框
    margin(外边界 用顺时针方式写距离上右下左)px
    该元素的边界和外边的距离,每个距离之间用空格分割
    <magin: px px px px padding:px px px px >
    padding间距 内边距
    自身的边到里面内容的距离,如果加了内边距要在原有的基础上减去相应的值
    居中的方式
    <* magin: px px px auto;padding:opx>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #d1{400px; height:500px; background-color:#F06; text-align:center; vertical-align:central; line-height:500px;}
    #d2{200px; height:300px; background-color:#6C9;}
    #d3{float:left; 40px; height:80px; background-color:#3F9; margin:60px 20px 20px 20px; padding:60px 30px 30px 20px;}
    #d4{50px; height:100px; background-color:#063}
    </style>
    </head>
    <body>
    /*<div style="600px;height:400px;background-color:#39F;background-image:url(../%E5%9B%BE
    %E7%89%87/2.jpg);background-repeat:no-repeat;background-position:right top;background-size:600px 400px;">测试文字</div>
    <a href="https://www.baidu.com/">你好</a>超链接
    <div>
    <div style="font-fanmily:楷体; font-size:14px; font-weight:bold; font-style:italic; text-decoration:underline;
    color:#F30;">
    <p style="text-indent:30px; ">好好打算打丝毫i和foi啊是多久啊上课了打湿了嗲加分上帝哈撒发哈发哈司法死的哈舒服哈哈父爱和是否啊
    死啊死哦符号IF好IF啊司法好IF好IF爱哦哈佛爱妃哈soi发foi哈市佛ias发hoi啊是覅哦啊是覅哦啊是foi啊哈foi啊好舒服爱哦是佛爱回复奥ihoi
    啊是佛ias哈佛ias方法和宋爱IF很舒服哈撒口i哈佛啊还送开发商的发地方对方的空间放得开减肥的开放的空间发的是会计法的是看风景的发挥空
    间都是废话肯定睡觉废话肯定舒服很多考试东方航空的手机放好的开始减肥好的开始减肥好看的就发挥空间都是发挥空间都是分开就都是分开接
    电话分开的发挥看电视警方很快的时间废话肯定就是发挥空间的话副科级电话费看到回复快点结婚副科级东方航空的减肥好看的电话疯狂的警方
    很快到家发好看的交话费肯定就会分开多久粉红色电话疯狂的减肥好看的金凤凰健康的废话肯定就发挥的空间发挥的开发和肯德基发挥空间都恢
    复快接电话副科级电话费看见的就快点恢复快接电话疯狂的交话费看见的恢复快决定恢复快决定恢复快决定恢复快决定恢复快接电话开发计划的
    空间发挥的空间发挥的空间发货快电话费看见对方会看到回复快点恢复快决定恢复快决定恢复快接电话疯狂的恢复快决定恢复快接电话分开电话
    费看见的废话肯定就会分开决定恢复快决定恢复快决定恢复快接电话分开的</p></div>
    </div>
    <div id="d1">对齐方式</div>
    <div id="d2">
    <div id="d3">
    <div id="d4">
    </div>
    </div>
    </div>*/
    </body>
    </html>
    /**/
    border边框的样式有1.边框的粗细 2.边框的样式 一般用solid实线 3.边框的颜色
    六列表方块
    list-style是把样式前面的序列号去掉
    #u1{list-style:inside;list-style-image(是吧序列号变成图片)}
    格式的与布局
    1.位置position:absolute(绝对位置)相对于浏览器边框的位置来固定自己的位置,方向可以设置为正直,也可以是负值。
    fixed相对浏览器的边界来固定位置
    relativ相对位置 相对于原来出现的位置移动的距离;
    2流 folt:left <div style=“clera:both"></div>清流
    3.z-index分层 他的值越大越考上
    4.其他
    !display显示或隐藏原来的图,不占位置none是隐藏;block是显示。
    inlime-blak主要用在<span><a>标签中,display的属性:inlime-block
    visibilty 隐藏掉原来的背景后,还占原来的位置。
    overflow 设置元素里面的内容超出后用hidden隐藏
    <style type="text/css">
    *{margin:0px auto; padding:0px;}
    #d1{500px; height:400px; border:20px solid #006;}
    #d2{0px; height:0px; border-bottom:400px solid #0C9; border-left:400px solid #3FC; border-right:400px solid #9C6; border-top:400px solid #FF0}
    </style>
    </head>

    <body>
    <div id="d1"></div>
    <div id="d2"></div>
    </body>
    </html>

  • 相关阅读:
    前端到后台ThinkPHP开发整站(4)
    前端到后台ThinkPHP开发整站(2)
    字典树模版
    KMP模版
    EXKMP模版
    Manacher模版
    AC自动机练习题1:地图匹配
    AC自动机模版
    spring.net之aop加单例模式编写无try catch程序
    父类与子类之间赋值转换
  • 原文地址:https://www.cnblogs.com/gdbaby/p/6016468.html
Copyright © 2011-2022 走看看