HTML和CSS —— 2（练习）

最新推荐文章于 2024-07-02 17:48:40 发布

sunhuwh

最新推荐文章于 2024-07-02 17:48:40 发布

阅读量1.9k

点赞数

分类专栏： # css # HTML 文章标签： html css

本文链接：https://blog.csdn.net/sunhuwh/article/details/71037339

版权

HTML 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

Code：
xxx.html

<!DOCTYPE html>
<!-- saved from url=(0079)https://storage.googleapis.com/supplemental_media/udacityu/2872198565/test.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Framework Test page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css" />

<link rel="stylesheet" href="./css/main.css">

<style id="style-1-cropbar-clipper">/* Copyright 2014 Evernote Corporation. All rights reserved. */
    .en-markup-crop-options {
        top: 18px !important;
        left: 50% !important;
        margin-left: -100px !important;
        width: 200px !important;
        border: 2px rgba(255,255,255,.38) solid !important;
        border-radius: 4px !important;
    }

    .en-markup-crop-options div div:first-of-type {
        margin-left: 0px !important;
    }
</style></head>
<body>

    <div class="grid">

        <div class="row">
            <div class="col-2">2 Columns</div>
            <div class="col-10 end">
                <p>Bacon ipsum dolor sit amet tri-tip shankle brisket, pork chop tail ham ribeye short loin bacon strip steak. Meatball landjaeger venison flank. Venison leberkas turducken short ribs corned beef ball tip jerky bresaola jowl, bacon shankle capicola. Fatback pork pancetta, frankfurter beef ribs turducken bresaola sausage ham. T-bone tail ribeye sausage flank pancetta kielbasa fatback beef ribs doner frankfurter sirloin pork belly ham shoulder.</p>
            </div>
        </div>

        <div class="row">
            <div class="col-3">3 Columns</div>
            <div class="col-9 end">9 Columns</div>
        </div>

        <div class="row">
            <div class="col-4">4 Columns</div>
            <div class="col-4">4 Columns</div>
            <div class="col-4 end">4 Columns</div>
        </div>

        <div class="row">
            <div class="col-3">3 Columns</div>
            <div class="col-6">6 Columns</div>
            <div class="col-3 end">3 Columns</div>
        </div>
    </div>
    <script src="./js/flexibility.js"></script>
    <script type="text/javascript">
        flexibility(document.documentElement);
    </script>

</body>

</html>

main.css:

/*
box-sizing三个值：content-box（default），border-box，padding-box。
1.content-box：padding 和 border 的大小都不算进width中
2.padding-box: padding大小算进width中，但border大小不算进width中;
3.border-box : border 和 padding 的大小都算进 width 中;
*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.flex-container {

}

.grid {
}

div {
    border:1px solid red;
    display: block;
}
/*
display: flex 弹性布局，它就像是一个容器，它里面的元素都属于这个容器里面了。
可以填充多余的空间。
兼容性：目前支持IE10+，Firefox 18.0+，chrome21.0+，Safari6.1+
解决方案，使用flexibility来解决。
git：https://github.com/jonathantneal/flexibility
*/
.row {
    -js-display: flex;
    display: flex;
    width: 100%;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 24.99%;
}

.col-4 {
    width: 33.32%;
}

.col-5 {
    width: 41.65%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.31%;
}

.col-8 {
    width: 66.64%;
}

.col-9 {
    width: 74.97%;
}

.col-10 {
    width: 83.3%;
}

.col-11 {
    width: 91.63%;
}

.col-12 {
    width: 100%;
}
/*
媒体查询，以@media开头
关键字only兼容老式浏览器
screen表示适用于所有类型的屏幕，平板，手机，台式机
print 打印页面时的样式
max-width 最大宽度
min-width 最小宽度
orientation 两个值，1.landscape橫屏 2.portrait竖屏
*/
@media only screen and (max-width:500px) {
    p {
        display: none;
    }
}

/* @media only screen and (max-width:500px) and (orientation : landscape) {
    p {
        display: none;
    }
} */

/* @media only screen and (min-width:500px) {
    p {
        display: none;
    }
} */

/* @media only print and (max-width:500px) {
    p {
        display: none;
    }
} */