Day4

一、Overflflow

1、溢出x和溢出y

代码：

<style>
div {
 width: 200px;
 height: 200px;
}
#div-x {
 overflow-x: hidden;
}
#div-y {
 overflow-y: hidden;
}
</style>

<body>
    <div id="div-x">
     If this div is too small to display its contents,
     the content to the left and right will be clipped.
    </div>
    <div id="div-y">
     If this div is too small to display its contents,
     the content to the top and bottom will be clipped.
    </div>
</body>

实现：

对X：如果这个div太小，无法显示其内容，则将裁剪左右两侧的内容。

对Y：如果这个div太小而不能显示其内容，那么顶部和底部的内容将被剪切。

 2、溢出——滚动

代码：

<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 200px;
            height: 200px;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div>
        This div is too small to display its contents to display the effects of the overflow property.If this div is too small to display its contents,
        the content to the left and right will be clipped.If this div is too small to display its contents,
        the content to the top and bottom will be clipped
    </div>
</body>

实现：

二、Floats——漂浮

代码：

<head>
    <meta charset="utf-8">
    <style>
       img
       {
        float: left;
        margin-right: 1rem;
       }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed
        cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
        ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia
        arcu eget nulla. </p>
        <img src="D:\私人\图片\光遇\12.jpg" height="100px" width="200px">
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque
        nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin
        ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
        massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
</body>

实现：

 2、明确的属性

代码：

<head>
    <meta charset="utf-8">
    <style>
        img {
            float: left;
        }

        p.clear {
            clear: both;//不允许左右俩边有悬浮的元素
        }
    </style>
</head>

<body>
    <img src="D:\私人\图片\光遇\12.jpg" height="100px" width="200px">
    <p>Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem
        ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>
    <p class="clear">Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum
        Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </p>
</body>

实现：

 3、In-line DIV using float

代码：

CSS:
<div class="outer-div">
 <div class="inner-div1">
 <p>This is DIV 1</p>
 </div>
 <div class="inner-div2">
 <p>This is DIV 2</p>
 </div>
</div>

HTML：
.inner-div1 {
 width: 50%;
 margin-right:0px;
 float:left;
 background : #337ab7;
 padding:50px 0px;
}
.inner-div2 {
 width: 50%;
 margin-right:0px;
 float:left;
 background : #dd2c00;
 padding:50px 0px;
}
p {
 text-align:center;
}

实现：

4、Simple Three Fixed-Width Column Layout

代码：
<head>
    <meta charset="utf-8">
    <style>
        .wrapper{
            width: 600px;
            padding: 20px;
            background-color: pink;
            overflow: hidden;
        }
        .sidebar{
            width: 70%;
            float:left;
            background-color: rgb(199, 105, 223);
        }
        .content{
            width: 70%;
            float: left;
            background-color: rgb(177, 238, 116);
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="sidebar">
            <h2>Sidebar</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
        </div>
        <div class="content">
            <h1>Content</h1>

            <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque
                nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin
                ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
                massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
        </div>
    </div>
</body>
实现：

 三、Typography

 1、font size

修改字体的大小可以用到font-size

 2、Text Transform——文本转换

代码：

<head>
    <meta charset="utf-8">
    <style>
        .example1 {
            text-transform: uppercase;
        }

        .example2 {
            text-transform: capitalize;
        }

        .example3 {
            text-transform: lowercase;
        }
    </style>
</head>

<body>
    <p class="example1">
        all letters in uppercase
    </p>
    <p class="example2">
        all letters in capitalize
    </p>
    <p class="example3">
        all letters in lowercase
    </p>
</body>

实现：

四、Flexible Box Layout (Flexbox)

1、Dynamic Vertical and Horizontal Centering (align-items, justify-content)——动态垂直和水平对中（标志，证明内容）

代码：

<head>
    <meta charset="utf-8">
    <style>
        .aligner{
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .aligner-item{
            max-width: 50%;
        }
    </style>
</head>

<body>
   <div class="aligner">
    <div class="aligner-item">我爱毛主席</div>
</div>
</body>

实现：

 display的属性展示

值描述 
stretch

默认值。元素被拉伸以适应容器。

如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

  
center

元素位于容器的中心。

弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

  
flex-start

元素位于容器的开头。

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

  
flex-end

元素位于容器的结尾。

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

  
baseline

元素位于容器的基线上。

如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

  
initial 设置该属性为它的默认值。请参阅 initial。  
inherit 从父元素继承该属性。请参阅 inherit。

代码：

<head>
    <meta charset="utf-8">
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        .content {
            flex: 1 0 auto;
        }

        .header,
        .footer {
            background-color: grey;
            color: white;
            flex: none;
        }
    </style>
</head>

<body>
    <div class="header">
        <h2>Header</h2>
    </div>
    <div class="content">
        <h1>Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
            Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
            ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia
            arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
            himenaeos. Curabitur sodales ligula in libero. </p>
    </div>
    <div class="footer">
        <h4>Footer</h4>
    </div>
    </div>
</body>

实现：

3、Optimally fifit elements to their container

代码：

<head>
    <meta charset="utf-8">
    <style>
        .flex-container {
            background-color: #000;
            height: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: stretch;
            align-items: stretch;
        }

        .flex-item {
            background-color: #ccf;
            margin: 0.1em;
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: 200px;
        }
    </style>
</head>

<body>
    <div class="header">
        <h2>Header</h2>
    </div>
    <div class="content">
        <div class="flex-container">
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
            <div class="flex-item">3</div>
            <div class="flex-item">4</div>
            <div class="flex-item">5</div>
        </div>
</body>

实现：

列会随着屏幕的改变而改变（第一种情况没试出来）

 代码：

使用vue框架

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <a v-bind：href="url">点击一下!</a>
        <a href="url">点击一下</a>
        <runoob-input v-model="url"></runoob-input>
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                    url:"https://www.baidu.com"
                }
        })
    </script>
</body>

</html>

实现：

 

 

 

posted @ 2023-02-01 10:00  末叶da  阅读(21)  评论(0)    收藏  举报