HTML&CSS实验(6)

最新推荐文章于 2022-06-21 18:06:24 发布

Pseudo_Programmer

最新推荐文章于 2022-06-21 18:06:24 发布

阅读量4.2k

点赞数 1

分类专栏：移动web应用设计文章标签：移动web应用设计

本文链接：https://blog.csdn.net/Pseudo_Programmer/article/details/78554410

版权

该实验旨在学习HTML和CSS的布局技巧和动画效果。通过一系列具体任务，包括固定header、三列布局、3D旋转动画、背景图切换等，实践网页设计中的常见问题。实验要求只修改样式，不改动内容，并要求使用多种定位和动画技术。

摘要由CSDN通过智能技术生成

【实验目的】

学习布局和动画。

【实验工具】

浏览器和编辑器。三种可选编辑方式：
（1）本地调试：记事本
（2）在线调试：http://172.18.187.11:8080/lab/html6/
（3）采用Visual Studio或Dreamweaver等具有网页编辑功能的软件。

【屏幕录像】

Camtasia：在上传实验报告的网站目录“软件下载/屏幕录制”中。

【实验内容】

1、(wgw.html)设计一个类似下图（四幅）的页面，涉及的字体：宋体、隶书、楷体。标题栏采用position:relative，其中内容采用position:absolute。中间部分的宽度固定。
(整个网页)

（上）

（下）网页滚动时header不动

（缩窄）中间部分对中

* 用opacity（取值0~1）模糊化div元素。星星采用transform:rotate()进行旋转。
要求只修改样式（给出的部分内容仅供参考），不要修改body的内容。
完成后截屏
整个网页：

上：

下：

缩窄：

样式表如下：

 <style>
        html {
            font-family:宋体;
            font-size:20px;
        }
        h1 {
            font-size:36px;
        }
        body {
           background: rgb(243, 243, 243);
        }
        #header {
            background-color: black;
            height: 50px;
            width: 100%;
            top: 0px;
            position: fixed;
            z-index: 2;
        }
        #header_inner {
            width:980px;
            margin: 0 auto;
            position: relative;
        }

            #header_inner img {
                margin-top: 5px;
                height: 40px;
                left: 2px;
                position: absolute;
                vertical-align: bottom;
            }
            #header_inner .nav {
                float: right;
                margin-top: 15px;
                font-size: 15px;
                right:10px;
                position: absolute;
                vertical-align: bottom;
            }
        #title_inner {
            width: 980px;
            margin: 0 auto;
            margin-top: 60px;
            border: 1px solid #cfbcbc;
            padding: 0 0 0.2% 0;
            position: relative;
        }
            #title_inner .bk {
                background: url(images/wgw_main.jpg);
                max-width: 980px;
                min-width: 300px;
                height: 300px;
                opacity: 0.3; /* 透明度 */
                background-size: cover;
                overflow: hidden;
            }
            #title_inner h1 {
                position: absolute;
                top: 30px;
                left: 375px;
            }
            #title_inner h2 {
                position: absolute;
                top: 60px;
                left: 650px;
                font-size: 15px;
            }
            #title_inner .author {
                position: absolute;
                top: 100px;
                left: 450px;
                width: 80px;
                z-index: 3;
                box-shadow: 2px 2px 10px #cfbcbc;
            }
        #title_inner #star1{
            transform:rotate(30deg);
            position: absolute;
            top: 200px;
            right: 50px;
            width: 30px;
        }
        #title_inner #star2{
            transform:rotate(50deg);
            position: absolute;
            top: 170px;
            right: 100px;
            width: 30px;
        }
        #title_inner #star3{
            transform:rotate(0deg);
            position: absolute;
            top: 150px;
            right: 150px;
            width: 30px;
        }
        #title_inner #star4{
            transform:rotate(30deg);
            position: absolute;
            top: 170px;
            right: 200px;