周报-寒假1

本周学习进度

本周对所学的html和css内容进行复习，对常见的布局和网页不同部分的实现进行了练习

练习内容

常规流练习

主要练习了div的居中以及盒模型中各个属性所代表的意义及取值

效果图

html部分

<article class="container">
    <header>
        <h1>这是文章的标题</h1>
        <div class="original-link">
            原文地址:<a href="">https://www.baidu.com</a>
        </div>
    </header>
    <section>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam nisi possimus, rerum nam voluptatibus aspernatur.</p>
        <p>Harum sequi quidem autem assumenda illum, cumque sed impedit eveniet, ratione exercitationem accusamus, dolorum quia.</p>
        <p>Debitis rem aliquid illo quam sunt est reiciendis ipsam quis inventore facilis error, aspernatur eos?</p>
    </section>
    <section>
        <h2>章节1</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam qui quia dolorum velit cum magnam!</p>
        <p>Ipsa perspiciatis nam consectetur quam dignissimos illo et odio, reiciendis labore molestias asperiores illum sit.</p>
        <p>Delectus veniam atque repellat architecto mollitia porro consectetur? Repellat autem delectus voluptatum vel magnam quasi.</p>
    </section>
    <section>
        <h2>章节2</h2>
        <p>Sed quis reiciendis, pariatur magni esse labore perferendis quas unde voluptatum tenetur rerum eos distinctio.</p>
        <p>Corporis veritatis velit, animi tenetur magni iure corrupti aliquam distinctio beatae, blanditiis repellendus dicta quas?</p>
        <p>Expedita, nisi modi debitis cupiditate veniam reprehenderit optio, sunt maiores eius similique nihil minus nostrum!</p>
    </section>
    <section>
        <h2>章节3</h2>
        <p>Molestiae alias facere fuga officiis beatae qui veritatis, possimus aliquid atque autem neque pariatur accusantium?</p>
        <p>Provident est eligendi nihil doloremque aliquam maiores. Enim recusandae laboriosam fuga nam, quia ipsam nemo!</p>
        <p>Non soluta ad quas, veniam dolores at distinctio minima eius vitae expedita incidunt dolor consectetur.</p>
    </section>
    <section>
        <h2>章节4</h2>
        <p>Ex qui hic aliquam voluptas vel velit cum esse corporis voluptatibus necessitatibus, officia neque ducimus?</p>
        <p>Sunt, facilis velit expedita cum vel hic? At similique tenetur itaque ea quasi voluptates facere.</p>
        <p>Tempore, assumenda! Sint dicta rem corrupti fuga nostrum maxime fugit quia. Fugiat cumque ex consequuntur.</p>
    </section>
    <section>
        <h2>章节5</h2>
        <p>Dolorem et vero iure excepturi adipisci, minus quod. Nulla reprehenderit unde fugiat rerum iure blanditiis.</p>
        <p>Aut quis tempore atque minus consequuntur facere accusantium dolore eveniet recusandae, blanditiis quos odio dolores.</p>
        <p>Minus tenetur nostrum molestiae, unde debitis ex, nulla, atque voluptatem architecto assumenda libero optio aliquid?</p>
    </section>
</article>

css部分

body{
    background-color: #4d4a40;
    padding: 20px 0;
    line-height: 2;
    min-width: 1000px;
}

.container{
    background-color: #ffffff;
    width: 90%;
    margin: 0 auto;
    padding: 30px 0;
}

.container header{
    background-color: #267890;
    color:#ffffff;
    text-align: center;
    border: 5px solid #14414e;
    margin: 0 -34px;
}

.container header h1{
    font-size: 42px;
    font-weight: bold;
}

.container header .original-link{
    color: #dbdbdb;
    margin-bottom: 26px;
}

.container header .original-link a{
    text-decoration: underline;
}

.container header .original-link a:link{
    color: #dbdbdb;
}

.container header .original-link a:hover{
    color: #ffffff;
}

.container section{
    width: 90%;
    margin: 0 auto;
}

.container section p{
    margin: 1em 0;
}

.container section h2{
    font-size: 32px;
    font-weight: bold;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
}

总结
可以通过让div上下margin设置为0,左右margin设置为auto的方法,实现div在水平方向上的居中

弹出层

主要对定位的使用进行练习

效果图

html部分

<div class="main">
        <img src="./桌面.png" alt="">
    </div>
    <!-- 遮罩层 -->
    <div class="modal">
        <div class="container">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis dolores ut, eos consequatur fuga vero explicabo dolorem illum itaque cupiditate hic officia earum quas debitis repellat voluptas expedita porro. Sit!
            <div class="close">X</div>
        </div>
    </div>

css部分

.main img{
   width: 100%;
}

.modal{
   position: fixed;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-color: rgba(0,0,0,.5)
}
.modal .container{
   width: 404px;
   height: 512px;
   background-color: white;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
}
.modal .container .close{
   width: 30px;
   height: 30px;
   background-color: red;
   border-radius: 50%;
   color: white;
   text-align: center;
   line-height: 30px;
   position: absolute; 
   right: -15px;
   top: -15px;
   border: 2px solid #ffffff;
   cursor: pointer;
}

总结
通过绝对定位可以实现div的水平垂直居中
通过改变cursor属性来改变鼠标移动到某个元素上所显示的状态

二级菜单

效果图

html部分

<header class="header">
    <ul class="topnav clearfix">
        <li><a href="">Lorem.</a></li>
        <li><a href="">Modi.</a></li>
        <li><a href="">Ullam!</a></li>
        <li>
            <a href="">Aperiam.</a>
            <div class="submenu">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, rem! Veritatis quasi excepturi quidem vel fugit optio suscipit maxime dignissimos rem ullam, rerum quis natus sunt ducimus commodi quos quibusdam!
            </div>
        </li>
        <li><a href="">Porro.</a></li>
    </ul>
</header>

css部分

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.header{
    background-color: #e3e4e5;
    color: #999999;
    height: 40px;
    line-height: 40px;
}
.header .topnav{
    text-align: center;
}
a{
    text-decoration: none;
    color: inherit;
}
li{
    list-style-type: none;
}
.header .topnav>li{
    /* float: left; */
    display: inline-block;
    margin: 0 20px;
    width: 150px;
    text-align: center;
    height: 40px;
    box-sizing: border-box;
    /* background-color: #008c8c; */
    position: relative;
}
.header .topnav>li .submenu{
    text-align: left;
    line-height: 1.5;
    width: 300px;
    display: none;
    border: 2px solid #cccccc;
    box-sizing: border-box;
    position: absolute;
    right: -2px;
    background-color: white;
}

.header .topnav>li:hover{
    background-color: white;
    border: 2px solid #cccccc;
    border-bottom: none;
    line-height: 36px;
}

.header .topnav>li:hover .submenu{
    display: block;
}
.header .topnav>li:hover::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    background-color:white;
    bottom: 0mm;
    left: 0;
}

总结
通过属性选择器,对元素处于鼠标悬停时的状态设置css属性,实现鼠标悬停时出现二级菜单

三栏布局

效果图

html部分

<div class="container clearfix">
    <aside class="left">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quaerat magni ratione excepturi deserunt
        illo
        consequuntur optio! Expedita laudantium consectetur, deserunt iure excepturi eveniet ducimus! Illum mollitia
        exercitationem quia eaque numquam consequatur rerum animi error ab nihil iste ad, laborum possimus libero
        officia!
    </aside>
    <aside class="right">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis et consequuntur, soluta modi
        praesentium
        mollitia aspernatur obcaecati, natus vel voluptatibus quas ipsum! Vitae quae laborum sit nobis consectetur?
        Sunt
        saepe animi quisquam, voluptate vitae voluptatibus alias optio maxime, labore ducimus, illum et distinctio.
        Deleniti a mollitia at culpa nam quisquam molestias dolores eligendi similique nobis impedit facere officia
    </aside>
    <div class="main">
        maiores et dignissimos, saepe
        nam nihil est doloribus excepturi neque eius mollitia provident adipisci? Earum, facere et cumque, esse
        debitis mollitia fugit, voluptatibus ab quod rem dolores facilis tenetur exercitationem distinctio! Ea,
        exercitationem velit ipsum dignissimos iste quos deleniti repudiandae facere laborum tempora, ut veritatis
        dolore dolores optio dicta nam animi iure quo amet doloremque cum sequi illo? Non cumque dolorem eveniet
        similique, deserunt explicabo quae recusandae. Id beatae fuga quae corrupti quo exercitationem incidunt
        reiciendis, magni est doloremque facere tempore ea quod eligendi aspernatur sint dolor eius earum molestias,
        porro commodi? Repudiandae, quos dolorum. Sed saepe atque culpa quas eum ipsam quis, ullam non vero rem
        rerum neque. Corrupti veritatis saepe quisquam quae nemo sint, quibusdam illum ipsum cupiditate recusandae
        eveniet voluptatum distinctio ut vero beatae quaerat officia et repellat praesentium rem earum quo
        voluptate. Molestias, dolores velit! Non eaque laborum sequi sint voluptas ab nam quo inventore ullam, velit
        ipsum exercitationem voluptatem perferendis facilis quas praesentium. Excepturi quidem fugit amet dolore
        tempora pariatur voluptates corporis nihil laudantium. Nulla laboriosam, dolor maxime fuga quidem corrupti
        voluptatibus temporibus odio, vitae ullam enim, ad assumenda ea est optio inventore in sint illo
        repellendus. Ut dolorem velit vitae repellendus repudiandae! Quo omnis iusto quia blanditiis illum rem?
        Mollitia, quis! Fugit dicta aliquam, minima quis rerum est officiis voluptates architecto, omnis aliqui
    </div>
</div>

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    position: relative;
    bottom: 0px;
    height: 30px;
    background-color: white;
}

.container {
    padding: 30px;
    padding-bottom: 0px;
    border: 3px solid;
    overflow: hidden;
}

.left {
    float: left;
    width: 300px;
    background-color: lightblue;
    height: 10000px;
    margin-bottom: -9990px;
}

.right {
    float: right;
    width: 300px;
    background-color: lightblue;
    height: 10000px;
    margin-bottom: -9990px
}

.main {
    overflow: hidden;
    background-color: lightpink;
}

下周计划

下周继续复习html和css,同时进行算法的学习