Web实习 实验二 CSS基础及布局应用

已于 2024-08-01 23:59:43 修改
阅读量825 收藏 20
点赞数 24
分类专栏： Web前端开发 文章标签： 前端 css
于 2024-08-01 23:57:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73282541/article/details/140859908
版权

一、实验目的

  • 掌握在网页中引用CSS的方法；
  • 掌握CSS的基本语法规则；
  • 掌握CSS的常用选择器。
  • 掌握CSS网页布局方法。

二、实习题目

  1. 完成以下CSS基本语法的题目：
    1. 请编写一个CSS规则，将页面中的所有段落文字颜色设为蓝色，字体大小设为16px。 
        p{
            color: blue;
            font-size: 16px;
        }
    2. 请编写一个CSS规则，将页面中所有class为"example"的div元素背景色设为红色，同时字体颜色设为白色。 
       .example{
            color: white;
            background-color: red;
        }
    3. 请编写一个CSS规则，将页面中所有在段首的文字设为斜体，颜色为红色。 
       p::first-letter{
            font-style: italic;
            color: red;
        }
    4. 请编写一个CSS规则，将页面中所有在链接（a标签）未被访问前的状态，设置成红色 
        a:link{
            color:red;
        }
    5. 请编写一个CSS规则，将页面中所有class为"highlight"的元素下的第一个子元素文字设置为蓝色。 
       .highlight:first-child{
            color: blue;
        }
    6. 请编写一个CSS规则，将属性type值为text的input元素的字体大小设为20px，且背景色为黄色。 
        input[type="text"]{
            font-size: 20px;
            background-color: yellow;
        }
    7. 请编写一个CSS规则，使得所有具有"data-type"属性值为"warning"的元素显示为红色的警告文本。 
         p[data-type="warning"]{
            color: red;
        }
    8. 请编写一个CSS规则，选择div中具有class值为example的元素，并将该元素中文字的颜色设置为绿色(使用rgb函数)。 
      div[class="example"]{
            color: rgb(0, 255,0)
        }
    9. 请创建一个CSS规则，使得在一个页面中，所有具有"target"类的元素在鼠标悬停时文字显示为红色。 
       *[target]:hover{
            color: red;
        }
    10. 请编写一个CSS规则，选择具有特定兄弟元素（class值为example）的<div>标签，并将该元素的背景色设为绿色。(请在MDN中查阅  :has 伪类的用法) 
        div:has(+p[class = "example"]){
            background-color: green;
        }
    11. 请编写一个CSS规则，将所有的<p>元素（除了具有 class为example元素）的文字颜色设为紫色。(请在MDN中查阅  :not 伪类的用法) 
       p:not(.example){
            color: purple;
        }
    12. 请编写一个CSS规则，选择那些在表格中的第一个<td>元素，并将它们的文本对齐方式设为居中对齐。 
       table td:first-child{
            text-align: center;
        }

      2、利用HTML和CSS技术实现如图2-1所示的网页。素材资源见 “实验2-1.zip”。

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .flex-container{
            flex-direction: column;
            display: flex;
        }
        .flex-container1{
            display: flex;
            flex-direction: row;
            background-image:url(lighthouselogo.jpg) ;
            background-size: auto 100%;
            width: 1200px;
            height: 160px;
            background-repeat: no-repeat;
            flex-basis: 1;
            font-size: 70px;
            background-color: #869dc7;
            align-items: center;
            justify-content: center;
            color:midnightblue
        }
        .flex-container2{
            width: 1200px;
            display: flex;
            flex-direction: row;
        }
        .item1{
           width:200px;
           background-color: #b3c7e6;
            color: white;
            font-size:25px;
            font-weight: bold;
            
        }
        .item2{
            width: 1000px;
           padding-left: 25px;
        }
        .item3{
            background-color: #869dc7;
            display: flex;
            width: 1200px;
            height: 90px;
            align-items: center;
            justify-content: center;
        }
        .right{
            float: right;
        }
        h3{
            font-size: 30px;
            padding:0%;
            color:#869dc7
        }
        p{
            font-size: 17px;
            padding: 10px 0;
        }
       .element{
        position: relative;
        top: 25px;
        left: 25px;
       }
        li:nth-child(1)
        {
            color:darkgrey;
        }
        img{
            float: right;
            height: 550px;
            width: 400px;
            position: relative;
            top: 40px;
            margin-right: 40px;
        }
        .bordered-div{
            border: 17px solid midnightblue;
            width: 1200px;
        }
    </style>
</head>
<body>
    <div class="bordered-div">
        <div class="flex-container1"><strong>Lighthouse Island Bistro</strong></div>
        <div class="flex-container2">
            <div class="item1">  
                <ui class="element">
                    <li style="list-style-type: none;">Home</li>
                    <li style="list-style-type: none;"> Menu</li>
                    <li style="list-style-type: none;">Directions</li>
                    <li style="list-style-type: none;"> Contact</li>
                </ui>
            </div>

            <div class="item2">  
                <img src="lighthouseisland.jpg">
                <h3>Locally Roasted Free-Trade Coffee</h3>
                <p>Indulge in the aroma of freshly ground roast coffee. Specialty 
                     drinks are available hot or cold.</p>
                <h3>Specialty Pastries</h3>
                <p>Enjoy a selection of our fresh-baked, organic pastries, 
                    including fresh-fruit muffins, scones, croissants, and cinammon rolls. </p>   
                <h3>Lunchtime is Anytime</h3>
                <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables.</p>
                <h3>Panoramic View</h3>
                <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. <br/>
                    Challenge your 
                    friends to climb our 100-stair tower.</p>
            </div>
        </div>
        <div class="item3">
            Copyright © 2021
        </div>
    </div>
</body>
</html>

      3、利用HTML和CSS制作如图2-2的图书封面网页。素材资源见 “实验2-2.zip”（荷花图片何选一张即可）。

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .boder{
            border: 2px solid black;
            height: 900px;
            width: 800px;
            overflow: hidden;
        }
        .flex-container-column{
            display: flex;
            flex-direction: column;
        }
        .flex-container-row{
            display: flex;
            flex-direction: row;
        }
        .img-1{
            float: right;
            align-items: center;
            position: relative;
            top: 50px;
            right: 80px;
        }
        .img-2{
            border-radius: 50% 50% 50% 50%;
            position: relative;
            top: 40px;
        }
        .center{
            align-self: center;
            justify-self: center;
        }
        .right{
            float: right;
            text-align: right;
        }
        h4{
            justify-content: center;
            position: relative;
            top: 50px;
            text-align: center;
            color: darkgray;
            font-size: 20px;
        }
        h2{
            font-size: 65px;
            color: dimgrey;
        }
        h1{
            font-size: 110px;
            position: relative;
            bottom: 50px;
            left: 10px;
            color:olivedrab
        }
        .remove{
            position: relative;
            bottom: 230px;
            font-size: 1.5em;
        }
        ul{
            position: relative;
            bottom: 150px;
            left: 90px;
            font-size: 12px;

        }
        li{
            list-style-type: none;
            background-image: url(list-image.png);
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 1.5em;
            padding-left: 2em;
        }
        .color{
            background-color:tomato;
            width: 200px;
            text-align: center;
            color: white;
            line-height: 45px;
        }
        .up{
            position: relative;
            bottom: 230px;
            transform: rotate(45deg);
            right: 45px;

        }
        .up2{
            position: relative;
            bottom: 260px;
            left:550px;
        }
        .up3{
            position: relative;
            bottom: 305px;
            left:650px;
            font-size: 18px;
            color:dimgray
        }
    </style>
</head>
<body>
    <div class="boder flex-container-column">
        <div>
            <img src="pearson.png" width="100px" height="40px" class="img-1">
        </div>       
        <br />
        <div class="center">
            <img src="lotus-2.jpg" width="400px" height="400px" class="img-2">
        </div>
        <h4>Web Development & Design Foundations with HTML5,7th Edition</h4>
        <div class="flex-container-row center">
            <h2>学习</h2>
            <h1>HTML5</h1>
        </div>
        <div class="flex-container-row">        
            <ul>
             <li>网页设计与开发入门经典最新版</li>
             <li>教育学博士&网页设计专家出品</li>
             <li>全面覆盖、深入讲解HTML5所有相关主题</li>
             <li>知识点，自测题，100+动手训练，267道复习题</li>
             <li>四大案例：咖啡屋、宠物医院、度假村、房产公司</li>
             <li>由浅入深，循序渐进，旨在有效锻炼读者的实操能力</li>   
            </ul>
           <pre>   
            <div class="right remove">
                <p><strong> Terry Felke-Morris 著
                潘玉琪 著</strong></p>
            </div>
            </pre> 
        </div>
        <div class = "color up">
            (第<strong>7</strong>版)
        </div>
            <img src="tsinghua.png" class="up2" width="100px" height="40px">
            <p class="up3">出版社</p>
    </div>    
</body>
</html>

      4．利用flex布局技术实现如图2-3所示PPT风格网页。素材资源在“实验2-3.zip中”。

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .boder{
            overflow: hidden;
            border: 1px solid black;
            height: 550px;
            width: 940px;
        }
        .flex_container_row{
            display: flex;
            flex-direction: row;
        }
        .flex_container_column{
            display: flex;
            flex-direction:column;
        }
        h1{
            color: #6EA933;
            font-size: 40px;
            
        }
        .t_r{
            position:relative;
            left: 50px;
        }
        .t_r_1{
            position:relative;
            left: 25px;
        }
        .t_r_2{
            position:relative;
            left: 50px;
            bottom: 10px;
        }
        .j{
            margin-top: 0px;
            position: relative;
            bottom: 25px;
            color:darkgrey;
        }
        .l{
            position: relative;
            left: 30px;;
        }
        .ll{
            position: relative;
            left: 10px;
            bottom: 25px;
            color: darkgray;
        }
        .green{
            background-color: #6EA933;
            color: white;
            height: 35px;
            font-size: 23px;
            font-weight: 400px;
            padding-top: 5px;
            text-align: left;
            text-indent: 1em;
        }
        .green_2{
            background-color: #6EA933;
        }
        span{
            color: black;
            font-weight:550;
        }
        .lll{
            position: relative;
            left: 240px;
            width: 200px;
        }
        .r{
            position: relative;
            right: 160px;
            bottom: 50spx;
        }
        .width{
            width: 490px;
        }
    </style>
</head>
<body>
    <div class="flex_container_row boder">
        <div class="flex_container_column">
            <h1 class="t_r_1">| 乡村旅游业发展的优势</h1>
            <p class="j t_r">  乡村旅游资源类型丰富、旅游体验独特,具备发展特色旅游业的优势条件</p>
                <div class="flex_container_row t_r width" >
                    <div class="flex_container_column">
                            <h2 class="green">旅游资源丰富:</h2>
                            <p class="ll">农村旅游资源分布广、旅游资源类型丰富，<span>自然景现、人文历史、宗教文化、
                                民族风情、农村农业、特色饮食</span>等应有尽有。</p>
                    </div>
                    <div class="flex_container_column l">
                        <h2 class="green">接近本地游客:</h2>
                        <p class="ll">由于疫情的爆发,长途旅行的困难与风险越来越高,本地周末休闲度假游快速
                            爆发,农村发展旅游业承接本地及<span>周边周末度假需求</span>。</p>
                    </div>
                </div>
                <div class="flex_container_row t_r_2 width">
                    <div class="flex_container_column">
                        <h2 class="green">旅游承载能力强:</h2>
                        <p class="ll">旅游消费方式也在发生着巨大的变化,从之前的<span>景点拍照打卡游</span>,向
                            <span>观光休闲度假游</span>转变,农村自然条件优越、可以满足更多游客不同类型
                            的旅游诉求</p>
                    </div>
                    <div class="flex_container_column l">
                        <h2 class="green">提供差异化的体验:</h2>
                        <p class="ll">城市成人与少儿长时间生活在钢铁水泥建设成的城市,缺少与大自然接触的条件与机会,
                        <span>深入农村,亲近大自然</span>,除了放松旅游之外,还可以获得探索世界的快乐。</p>
                    </div>
                </div>
        </div>
            <div class="green_2 lll">
                <img src="tourist.png" width="400px" height="700px" class="r">
        </div>
    </div>
</body>
</html>

      5、利用CSS样式，综合使用其变形、过渡和关键帧动画等技术，结合学校景色或自己的学习生活场景，设计并实现一个网页动画。

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height: 300px;
            width: 300px;
        }
        .red{
            background-color: red;
            width:100px;
            height:100px;
            text-align: center;
            position: relative;
            left: 50px;
            top: 50px;
            font-size: 40px;
            text-align: center;
  
        }
        .bule{
            background-color: blue;
            width:100px;
            height:100px;
            text-align: center;
            position: relative;
            left: 100px;
            top: 50px;
            font-size: 40px;
            text-align: center;

        }
        .blueviolet{
            background-color: blueviolet;
            width:100px;
            height:100px;
            text-align: center;
            position: relative;
            left: 50px;
            top: 100px;
            font-size: 40px;
            text-align: center;

        }
        .green{
            background-color: green;
            width:100px;
            height:100px;
            text-align: center;
            position: relative;
            left: 100px;
            top: 100px;
            font-size: 40px;
            text-align: center;
        }
        .black{
            background-image: url(https://www.nwafu.edu.cn/images/img03.jpg);
            position: relative;
            left:  100px;
            top: 100px;
            height: 400px;
            width: 400px;
        }
        .flex_container_row{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            position: relative;
            left:  30px;
            top: 20px;
        }

        .run{
            animation: spin 10s  infinite;
        }
        @keyframes  spin{
            0%  { transform: rotate(0deg);}
            25% {transform: rotate(90deg);}
            50% {transform: rotate(180deg);}
            75% {transform: rotate(270deg);}
            100% {transform: rotate(360deg);}
        }
    </style>
</head>
<body>
    <h1>我的校园生活</h1>
    <div class="black">
        <div class="flex_container_row">
            <div class="red run">上课</div>
            <div class="bule run">吃饭</div>  
        </div>
        <div class="flex_container_row">
            <div class="blueviolet run">睡觉</div>
            <div class="green run">敲代码</div>
            </div>
    </div>
   
</body>
</html>

      三、实习总结

        经过了本次实习，我逐渐学会了使用MDN工具来查询相关CSS中相关作用，不断提高提高了自主学习的能力。特别是第一个题目，使我对于大多数的CSS规则，特别是类选择器的使用逐渐熟悉起来。在后面页面的制作中，我熟悉并掌握弹性盒子模型，并且可以利用定位来对各个元素进行调整。在第一个实验中，把未打开的链接设成红色，一开始我无论如何设置，链接都是蓝色，即已经打开的颜色，在询问老师后明白这是因为该链接在之前已经打开过导致的。后面的页面海报制作中，逐渐熟悉弹性盒子的使用以及调整，也能较好的完成页面海报的制作。经过本次实习，我对于CSS以及Web制作的理解更深了一步，完成作业的同时，也在不断加强我的自主学习能力，编码能力。

_孙孙孙孙孙SS
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值