HTML和CSS —— 2（练习）

来源：互联网发布：实现rsaq算法加密实例编辑：程序博客网时间：2024/06/01 09:01

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;    }} */

flexibility.js下载地址：
https://github.com/jonathantneal/flexibility/blob/master/flexibility.js

总结：
1.flexibility解决弹性盒子布局兼容问题;
2.媒体查询（屏幕尺寸问题）
3.12等份;
4.box-sizing（padding,border大小算不算入width中）

0 0