zoukankan html css js c++ java

前端-css

页面css排版不错乱：

　　1.最外层div中定义width=980px，当页面缩小以后，就在下面出现滚动条

　　2.使用 media 技术，bootstrp技术。页面自使用

一、css选择器

选择器	样式	说明
类选择器	.page-top	选择class=“page-top”
ID选择器	#pag-1	选择id=“page-1”
标签选择器	p	选择所有<p> 标签
层级选择器	div p	选择 <div> 标签内部的所有 <p> 标签
组合选择器	div，p	选择所有 <div> 标签和所有 <p> 标签
属性选择器	.c1[n='alex']	第一次筛选class=c1，再次通过属性进行筛选

二、导入方式

一个标签可以应用多种样式，当属性重叠的时候，标签上的style优先级最高，head中与link中，重上而下进行覆盖操作！跟读写顺序一致

　　标签上直接应用
　　在head头部中加载
　　在head中引入css文件

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

三、各种样式

3.1 边框

    <div style="border: 1px   red    dotted;">得到</div>
                        宽度  颜色   样式虚线，solid实线
　　　　　　　　border 是有四个防线的

3.2 宽度、高度、内容水平居中，垂直居中　

1     height:          　　 高度  像素 百分比（高度百分比直接使用有问题，要配合父级标签）
2     width：         　　  宽度  像素 百分比
3     text-align       　　 水平方向居中
4     line-height：38px  　 垂直方向，根据标签高度居中 
5     color        　　　　  字体颜色
6     front-size  　　 　　  字体大小
7     front-weight 　　　　  字体加粗

   <div style="
             20%;
            height:40px;
            line-height: 40px;
            text-align: center;
            color: aqua;
            font-size: larger;
            font-weight: bolder;
    ">人呢</div>

列子

3.3 float

　让便签飘起来，让块级标签也能in-line 堆叠。注意：父级标签，因为包含的标签飘起来，撑起来不可控了最后要加上 clear:both

    <div style="background-color: red; 50%;float: left">1</div>
    <div style="background-color: aqua; 30%;float:right">2</div>

    <div style=" 300px;border: red solid;">
        <div style="border: blue solid; 96px;height: 30px;float: left"></div>
        <div style="border: blue solid; 96px;height: 30px;float: left"></div>
        <div style="border: blue solid; 96px;height: 30px;float: left"></div>
        <div style="border: blue solid; 96px;height: 30px;float: left"></div>
        <div style="border: blue solid; 96px;height: 30px;float: left"></div>
        <div style="clear: both"></div>

    </div>

float

3.4 display

行内标签：无法设置宽度（默认文本占多少就是多少），长度，边距
块级标签：可以设置宽度（默认宽度就是占一行），高度，边距

1     display none 让标签消失
2     display inline
3     display block
4     display inline-block
5             具有linline的默认的宽度
6             又具有block的设置高度

3.5 边距

magrin 内边距

pading 外边距增加自己本身

1         <div style="border: red 1px solid; 60px;height: 60px;">
2             <div style="height: 30px; 60px;background-color: blue;padding-top: 0px">123<div>
3         </div>

3.6 position

　　位置属性，直接加上一个<div> 是分区域的，position=fixed类似一个墙体上的吸铁石。

　　进行分层

　　fixed --------------》固定在浏览器窗口的固定位置

　　relative　　　　单独没有意思

　　absolute　　　　第一次定位在指定位置，在

　　relative+basolute 做相对的定位 basolute对relative进行定位

　　　<div style="position"

放回顶部与菜单固定的实例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .caidan{
            width: 100%;
            height: 50px;
            background-color: blue;
            position: fixed;
            top:0;
            left: 0;
        }
    </style>
</head>
<body style="margin: 0">
    <div style=" 40px;height: 40px;background-color: aqua;position: fixed;bottom: 10px;right: 10px;line-height: 40px;">TOP</div>

    <div style="margin-top:52px; 100%;height: 1000px;background-color: #dddddd">内容：我在哪</div>
    <div class="caidan">首页</div>

</body>

View Code

3.7 图层透明度索引

　　在使用position以后，margin：0 auto的居中方式会失效：

　后期，js一点就出现的按钮可以通过图层加上 display：none 一起操作

z-index：图层索引，越大就在顶端

opacity：不透明度

1    <div style="top:20%;left:50%;margin-left: -50px; margin-top:-50px; 200px;height: 50px;position: fixed;background-color: white;z-index: 10"></div>
2    <div style="z-index:8; 100%;height: 5000px;background-color: black;"></div>
3    <div style="z-index:9;opacity:0.5;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: #dddddd"></div>

3.8 overflow

当图片太大把标签撑起来的时候，使用overflow

auto：加上滑动窗口

hidden：把超出部分隐藏起来

1 <div style=" 200px;height: 200px;overflow: auto">
2     <img src="1.jpg">
3 </div>

3.9 hower 当鼠标盘旋到该区域，就把内容显示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .page-top{
            width: 100%;
            height: 45px;
            background-color: #2459a2;
            position:fixed;
            top:0;
            left:0;
            rihgt:0;
        }
        .context{
            margin-top: 48px;
        }
        .page-top .w{
            width: 80%;
            margin:0 auto;
            line-height: 45px;
            color: white;
        }
        .page-top .w .menu{
            display: inline-block;
            /*默认a便签是inline标签，so 无法改变，要改变显示形式*/
            height: 45px;
            padding: 0 10px;
        }
        /*当鼠标盘旋到这一块的时候，就把下面内容显示出来*/
        .page-top .w .menu:hover{
            background-color: #7ca1ff;
        }

    </style>
</head>
<body>
    <div class="page-top">
        <div class="w">
            <a class="menu">全部</a>
            <a class="menu" >42区</a>
            <a class="menu" >段子</a>
            <a class="menu" >图片</a>

        </div>
    </div>
    <div class="context">dead</div>
</body>
</html>

View Code

3.10 backgroud-imag 背景图片

当一个页面中使用多个小图片，加载多个图片，可以把小图片做到一张图片里面，这样就省下了很多下载链接;

1     <div style="background-image: url(tip.png);
2         background-repeat: no-repeat;
3          20px;
4         height: 30px;
5         background-position-x: 0px;
6         background-position-y:-100px ;
7     "></div>

3.11 小练习-登入加图片

    <div style=" 200px;height:40px;position: relative;">
        <input type="text" style="font-size:25px;font-weight:lighter;200px;height:40px;padding-right: 26px">
        <div style="height:40px;40px;position: absolute;right:-44px;top:6px;background-image: url(user.png);background-repeat: no-repeat"></div>
    </div>

查看全文

相关阅读:
Visual Studio技巧之打造拥有自己标识的代码模板
 arcgis 10.1 错误(TCP_NODELAY NOT enabled)
中秋节快乐
 调Windows 7的图片浏览器查看图片
 NetCFSvcUtil.exe and Windows 7
win7下IIS错误："无法访问请求的页面，因为该页的相关配置数据无效"的解决方法(转)
卫星地图下载软件WebImageDowns
出差陕西镇安
 打印完税证明
 c#定义全局条件编译符号

原文地址：https://www.cnblogs.com/louhui/p/8025778.html

前端-css

一、css选择器

二、导入方式

三、各种样式

3.1 边框

3.2 宽度、高度、内容水平居中，垂直居中

3.3 float

3.4 display

3.5 边距

3.6 position

3.7 图层 透明度 索引

3.8 overflow

3.9 hower 当鼠标盘旋到该区域，就把内容显示出来

3.10 backgroud-imag 背景图片

3.11 小练习-登入加图片

3.2 宽度、高度、内容水平居中，垂直居中　

3.7 图层透明度索引