css-浮动布局与样式规则

最新推荐文章于 2024-09-12 19:55:46 发布

WDMzyyyu

最新推荐文章于 2024-09-12 19:55:46 发布

阅读量493

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/WDMzyyyu/article/details/107344811

版权

1、css选择器

1)标签选择器
    div{}
2)类名选择器
    .one{}
3)id选择器
    #one{}
4)通配选择器
    *{}
    样式初始化
5）逗号选择器
    div, .one{}
6)组合选择器
    div.one{}
7)子代选择器
    div > .one{}
8)后代选择器
    div .one{}
9)兄弟选择器
    通用兄弟选择器
        div ~ .one{}
    相邻兄弟选择器
        div + .one{}
10）属性选择器
    [type]
    [type=text]
    <input type='text'>
    <input type='password'>
        [type='password']
11)伪类选择器
    :first-child{}
    :last-child{}
    :nth-child(n){}
        1、2、3、4、odd、even
12）伪元素选择器
    ::after{}
    ::before{}
    用法：
        1.导航栏的侧边
        2.清除浮动
jQuery
    $('.div')
    $('#div')

2、浮动布局

文档流
float:left/right;
特点：
    1）使用了浮动的元素会失去对父元素的支撑
    2）使用了浮动的元素的宽高由内容决定
    3）使用了浮动的元素在网页中原本的位置由其他块级元素替代
    4）使用了浮动的元素会在一行从左向右排布，当前行宽度不够时，会自动换行
清除浮动的方式：
    1.浮动元素的父元素
        .parent::after{
            content:'';
            clear:both;
            display:block;
        }
    2.浮动元素的父元素
        .parent{
            overflow:hidden;
        }
    3.浮动元素的下一个相邻兄弟
        .one{
            content:'';
            clear:both;
        }

3、样式规则

1)字体样式 font-
    color 字体颜色
    font-style 字体样式
        italic 斜体
        normal 正常字体【默认】
    font-weight 字体粗细
        normal
        bold 加粗
        lighter 更细的
        100~900 数字越大，字体越粗
    line-height 行高
        取值等于该字体的包裹元素的高度
        <div style='height:200px;'>123</div>
        line-height:200px; //文字垂直居中
    font-size 字体大小
        浏览器默认字体大小为16px
    font-family 字体族
        字体族的名称
        '微软雅黑'
        'Miscrosoft YaHei'
        serif 有衬线
        sans-serif 无衬线
        fangsong 政府文件
    font
        1.必须包含font-size、font-family
        2.font-style、font-weight必须在font-size之前
        3.font-family必须在最后
        速写：
        font：font-style font-weight font-size font-family；
    webfont
        @font-face
            .ttf
            1.下载ttf字体文件
            2.将文件放到相对应的目录下（项目的目录）
            3.通过@font-face引入
                @font-face {
                font-family: 'test';
                src: url('./文件名.ttf');
            }
            4.使用字体
                div{
                    font-family:test;
                }
        字体图标库
            iconfont、fontawesome
        博客总结
    文字居中、元素的居中
2)文本样式 text-
    text-align 当前文本在元素中的对齐方式
        left
        center
        right
        justify
    text-decoration 文本的线
        underline 下划线
        overline 上划线
        line-through 删除线
    text-transform 文本变形
        capitalize 首字母大写
        uppercase 全部大写
        lowercase 全部小写
    text-shadow 文本的阴影
        px x轴偏移量
        px y轴偏移量
        blur 模糊程度
        color 阴影颜色
        text-shadow:10px 5px 5px #333333
3）列表样式
    list-style:none;
4）单位
    1.颜色
        1、关键字
            red、black...
            color:red;
        2、十六进制颜色
            #333333
            color:#333;
        3、rgb函数
            r red
            g green
            b blue
            0~255
            color:rgb(255,255,0);
        4、rgba函数
            r red
            g green
            b blue
            0~255
            a 颜色透明度
            a ~ 1
            color:rgba(0,0,0,0.5);
        5、渐变色
            background-image: linear-gradient(to rigt,red,#ccc);
    2.尺寸
        绝对单位
            px
        相对单位
            em
                等于父元素的font-size
                <div style='font-size:12px;'></div>
                1em = 12px;
                2em = 24px;
            %  相对于父元素
5）文本的水平垂直居中、子元素在父元素中水平垂直居中
    文本
        水平：text-align：center；
        垂直：line-height：父元素的高度；
    标签
        父元素
            display：table-cell;
            vertical-align:middle;
            align-items:center;
        子元素
            display:inline-block;
            
    如何消除a标签的默认样式？
        text-decoration:none;
        color:black；
        cursor:default;
            pointer
            help
            wait
            ...
    rgba和opacity的区别？
        rgba 会给父元素设置透明度，但是不会影响到子元素
        opacity 会给父元素设置透明度，会影响到子元素

4、盒子模型

1）盒子属性
    width
    height
    margin 外边距
        盒子与其他盒子之间的距离
        margin-top 上外边距
        margin-right 右外边距
        margin-bottom 下外边距
        margin-left 左外边距
        margin:10px; 上下左右都为10px
        margin:5px 10px; 上下为5px，左右为10px
        margin:5px 10px 15px; 上为5px，左右为10px，下为15px
        margin:5px 10px 15px 20px; 上为5px，右10px，下15px，左20px
    border 边框
        border-width 边框线宽
            px
        border-style 边框样式
            solid 实线
            dotted 点状线
            dashed
    padding 内边距
        盒子边距与内容之间的距离
    backgro-color   背景颜色
    backgro-image   背景图片
    backgro-repeat   背景图片重复的方式
    backgro-size   背景图片尺寸
        background-size:100% 100%;
2）盒子组成
    width、padding、border、margin
3）盒子分类
    通过box-sizing可以设置盒子的类型
    1.box-sizing:content-box;【内容盒子】【w3c标准盒子】
        width = 内容width
        所占的宽 = width + border + padding + margin
    2.box-sizing：border-box;【边框盒子】【iE盒子】
        width = 内容width + border + padding
4）边框塌陷（margin塌陷）
    10px
    浏览器中，上下排布的两个盒子之间的距离，取其中margin较大的那个值，不会相加
    水平方向则不会出现此现象

1-浮动布局（exercise）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局</title>
</head>
<style>
    .parent{
        background-color: red;
        /* 方式一
        overflow: hidden; */
    }
    /* 方式二
    .parent::after{
        content: '';
        display: block;
        clear: both;
    } */
    .child{
        height: 100px;
        width: 100px;
        background-color: #cccccc;
        float: left;
    }
    /* 方式三
    .parent div:last-child{
        clear: both;
        content: '';
    } */
</style>
<body>
    <div class="parent">
        <div class="child">子元素</div>
        <div></div>
    </div>
</body>
</html>

2-字体样式（exercise）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
</head>
<style>
    div{
        color: blue;
        font-style: italic;
        font-weight: lighter;
        height: 200px;
        background-color: #cccccc;
        line-height: 200px;
        /* font-size: 16px;
        font-family: sans-serif,fangsong; */
        font:italic lighter 17px sans-serif,fangsong;
    }
</style>
<body>
    <div>hello world，你好世界</div>
    <h1>标题</h1>
</body>
</html>

3-网络字体（exercise）
webfont.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络字体</title>
</head>
<style>
    @font-face {
        font-family: 'myfont';
        src: url('./');
    }
    div{
        font-family: myfont;
    }
</style>
<body>
    <div>hello world，你好世界</div>
</body>
</html>

webfont.css：

@font-face {font-family: "iconfont";
    src: url('//at.alicdn.com/t/font_1941489_ela7dk9zb1n.eot?t=1594641647731'); /* IE9 */
    src: url('//at.alicdn.com/t/font_1941489_ela7dk9zb1n.eot?t=1594641647731#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMcAAsAAAAABtAAAALQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBXIFZATYCJAMICwYABCAFhG0HLhv9BRHVk61kX2NsDK0eUaISkolGprJ1WeHdTHGExzLF/ICVQhW8AAAAAABZtZY9e/u0F0CScaiQbXhPBsgCoSNWBOXDlmQcoP3j4Z9j730/0tIT6IMkYIPkNqA1RuOOF/G+0CJXp0ZDU9gAmSyN96OKd/wfJ+l15HoPjuE1zh4gvh4gYPrXDIOw0AIgh0wIDq6p/wuggeQBza0qrTEScGDTgUam8Bpk6BvGLniB84EAgp8YNCyyipDD2c0IQLulVo5cwYHjLGxGjA19U+gWaebEGdtSGIm+T/+SMANjSLLj8hbJVeh+HRwfrXoBAicQNNgAUAAxAA40agzkSCJGUIhAShAcK5rg7fCBCnRUOYj9dXakDQDwgYxnYnqsR41kAIAnldmgZNIZANbxsvW5301On7sUTZmfvKjFON0KV1c2WtdFgb9uiDh4HCcjJs8329xJ+19EVtNU1a9YvNiiKNYWSokbniCLZ4XOe9iK+/ZOMvR8fr6G7d8IpJU0p8LlknS4w6vZ4rj66Chx37xNXZ63ZchprMk6s7oavK5D7I9anJYCLScakSMe9sectBCJLgD0N66Sfr/2Nxi31JXax/8P1RQAeEr2PiOb/iaGmQDzDRgJfiRzYAE32LaSpTRmo4nJntSUAQQB0GGLk9epEte71hFzgcmAMfEFhVkIyvExYKCKBSOzJBCipQ5WOauXRKk8IEoXAOJgDxg7l6BwcINy/AsYuHkHI4dQQCgJ5zFVzFFqjFfBB9y+UN6pM65adBw9Q/tsrpxnR8QVcl+6IQ6icniKHfISHfqXTUQMGKYWCrAYNg2BZ6rwLoET8XkYmqYbBXdqlYbxKvgAty8o79SZoLzoyudnaJ/NlTtS6rQr5L6sHsQC0QB0KugGpTzKIf3LJkQMMEwtKIAOGydAwDfXqvAuATfB53MhKmWGCoLtRe0PpLMMbOkgnOSkVtSiUg==') format('woff2'),
    url('//at.alicdn.com/t/font_1941489_ela7dk9zb1n.woff?t=1594641647731') format('woff'),
    url('//at.alicdn.com/t/font_1941489_ela7dk9zb1n.ttf?t=1594641647731') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('//at.alicdn.com/t/font_1941489_ela7dk9zb1n.svg?t=1594641647731#iconfont') format('svg'); /* iOS 4.1- */
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-home:before {
    content: "\e65c";
  }

4-文本样式（exercise）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
</head>
<style>
    div{
        width: 200px;
        background-color: #cccccc;
        text-align: justify;
        text-decoration: overline;
        text-transform: uppercase;
        text-shadow:10px 5px 5px #333333
    }
    /* 消除a标签的默认样式 */
    a{
        text-decoration: none;
        color: black;
        cursor: default;
    }
</style>
<body>
    <div>hello worldhello worldhello worldhello worldhello world</div>
    <a href="">11112222s</a>
</body>
</html>

5-某易严选（exercise）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易严选</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .center{
        height: 361px;
        width: 1090px;
        margin: auto;
    }
    ul li{
        width: 265px;
        height: 361px;
        float: left;
        margin-right: 10px;
        cursor: pointer;
    }
    ul li:last-child{
        margin: 0;
    }
    .imgUrl{
        background-image: url('https://yanxuan-item.nosdn.127.net/4cf591db7d08ef4787508aff0959189d.png?type=webp&quality=95&thumbnail=265x265&imageView');
        width: 265px;
        height: 265px;
    }
    .imgUrl1{
        background-image: url('https://yanxuan-item.nosdn.127.net/a82912add6abd8a78b34ace57e8ef2ce.png?type=webp&quality=95&thumbnail=265x265&imageView');
        width: 265px;
        height: 265px;
    }
    .imgUrl2{
        background-image: url('https://yanxuan-item.nosdn.127.net/cd8e1e49743f2f2a0067ebb4bc0e58a7.png?type=webp&quality=95&thumbnail=265x265&imageView');
        width: 265px;
        height: 265px;
    }
    .imgUrl3{
        background-image: url('https://yanxuan-item.nosdn.127.net/3af7fadcc544ee7a0ff40990a70cae9e.png?type=webp&quality=95&thumbnail=265x265&imageView');
        width: 265px;
        height: 265px;
    }
    .desc{
        height: 91px;
        margin-top: 5px;
        text-align: center;
    }
    .desc div{
        margin-bottom: 10px;
    }
    ul li:hover .imgUrl{
        background-image: url('https://yanxuan-item.nosdn.127.net/67957d105d7714f31b608d27e2f8cba9.png?type=webp&quality=95&thumbnail=265x265&imageView');
    }
    ul li:hover .imgUrl1{
        background-image: url('https://yanxuan-item.nosdn.127.net/37cef68c46e20f6b9cd916da9b9b32c0.png?type=webp&quality=95&thumbnail=265x265&imageView');
    }
    ul li:hover .imgUrl2{
        background-image: url('https://yanxuan-item.nosdn.127.net/b79aab3d5069f2af948cc2a152a5752b.png?type=webp&quality=95&thumbnail=265x265&imageView');
    }
    ul li:hover .imgUrl3{
        background-image: url('https://yanxuan-item.nosdn.127.net/1ac843077947be05921213f307cf242d.png?type=webp&quality=95&thumbnail=265x265&imageView');
    }
    ul li:hover .desc{
        background-color: #f4f0ea;
    }
    .kong{
        height: 21.0833px;
    }
</style>
<body>
    <div class="container">
        <div class="center">
            <ul>
                <li>
                    <div class="imgUrl"></div>
                    <div class="desc">
                        <div>新品限时购</div>
                        <div>日本超浓缩48小时抗菌消臭洗衣液</div>
                        <div>￥49</div>
                    </div>
                </li>
                <li>
                    <div class="imgUrl1"></div>
                    <div class="desc">
                        <div class="kong"></div>
                        <div>切丝器切蒜器 家用食物多功能料理机</div>
                        <div>￥29.9</div>
                    </div>
                </li>
                <li>
                    <div class="imgUrl2"></div>
                    <div class="desc">
                        <div>新品限时购</div>
                        <div>万古不易，锁味增鲜 日本万古烧饭釜</div>
                        <div>￥129</div>
                    </div>
                </li>
                <li>
                    <div class="imgUrl3"></div>
                    <div class="desc">
                        <div>新品限时购</div>
                        <div>女式可机洗天丝平底鞋</div>
                        <div>￥139</div>
                    </div>
                </li>
            </ul>
        </div> 
    </div>
</body>
</html>

WDMzyyyu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css-浮动布局与样式规则

1、css选择器1)标签选择器 div{}2)类名选择器 .one{}3)id选择器 #one{}4)通配选择器 *{} 样式初始化5）逗号选择器 div, .one{}6)组合选择器 div.one{}7)子代选择器 div > .one{}8)后代选择器 div .one{}9)兄弟选择器通用兄弟选择器 div ~ .one{} 相邻兄弟选择器 div + .
复制链接

扫一扫