HTML&CSS实验(8)

最新推荐文章于 2024-07-18 20:16:37 发布

Pseudo_Programmer

最新推荐文章于 2024-07-18 20:16:37 发布

阅读量3.6k

点赞数

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

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

版权

本次实验旨在学习网页版块设计和菜单设计。使用HTML和CSS，通过编辑工具或在线平台实现版块布局和菜单的创建。实验内容包括：使用inline-block布局版块，浮动元素设计菜单，添加背景色和过渡效果。所有任务均已完成，并从中学到CSS3的transition属性和display与visibility的区别。

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

【实验目的】

学习网页的版块设计和菜单设计。

【实验工具】

采用记事本编辑，也可以采用Visual Studio、Dreamweaver等具有网页编辑功能的软件打开并编辑页面，或者直接在Eclipse或netbeans下编辑运行。
或者使用在线试：http://172.18.187.11:8080/lab/html8/

【安全设置】

如果网页中有xss安全问题，在Chrome下运行在线调试会出现xss审计错误。解决方法是，先关闭所有Chrome窗口，然后找到Chrome程序，并使用以下命令启动Chrome：
C:\Users\isszym\AppData\Local\Google\Chrome\Application\chrome.exe
–args –disable-xss-auditor
也可以在快捷方式中加入参数。

【实验内容】

1、（board1.html）参考源码中给出的部分样式，并在只修改样式的情况下按照下图设计一个类似的版块。要求：多个div采用inline-block放于一行，通过增加前面元素的宽度进行对齐。列表图标通过:before加上。 * 这里的修改表示增改删。

* .bulletin加上背景色(WhiteSmoke)参考一下：

特别的样式属性提示：vertical-align
完成后截图：
①　未加入背景色：

②　加入背景色后：

样式源代码（board1.html）：

<style>
        * {
            margin: 0;
            padding: 0;
            line-height: 1.2em;
        }
        *, a:link, a:visited, a:hover, a:active {
            text-decoration: none;
            font-size: 12px;
            font-family: 宋体;
        }
        .clear {
    clear: both;}
        li {
    list-style-type: none;}
        #board1 {
            width: 310px;
            margin: auto;
            margin-top: 25px;
            background-color:whitesmoke;
            padding:7px;
        }
        div div {
    display: inline-block;}
        .boardmenu {
            height: 18px;
            width: 100%;
            border-bottom: dotted #a17525;
            padding-bottom: 7px;
            margin-bottom: 10px;
        }
        .boardmenu .title {
    width:260px;}
        .boardmenu .title img {
            vertical-align: text-top;
            padding-right:7px;
        }
        .boardmenu .title span {
            color: #a17525;
            font-weight: bold;
            font-family: 黑体;
        }
        .boardmenu .more {
    font-weight: bolder; }
        .boardmenu .more a {
            font-size: 13px;
            font-family: sans-serif;
            color: #a17525;
        }
        .boardcontent li {
    height: 26px;}
        .boardcontent a {
            font-size: 12px;
            color: #6f6f6f;
        }
        .boardcontent li:before {
            content: url('images/list_icon.gif');
            padding-right: 7px;
        }
        li  span {
    float: right;}
    </style>

2、(menu1.html) 参考源码中给出的部分样式，并在只修改样式的情况下按照下图设计一个类似的版块，动图见menu1.mp4。要求：菜单项(li)采用浮动方式布局，整个菜单栏#nav采用相对定位，选中的主菜单背景采用过渡设计(background-position-y)，子菜单.subnav采用绝对定位。

特别的样式属性提示：background-position-x，background-position-y，background-clip，vertical-align，transition-property，transition-duration
颜色：#6f4c1b，#f1c149
字体：微软雅黑
完成后截图：