网页设计综合应用：自选网站，实现HTML和CSS编码

最新推荐文章于 2023-06-07 22:24:04 发布

Lucivita

最新推荐文章于 2023-06-07 22:24:04 发布

阅读量703

点赞数 1

分类专栏： Web前端 html+css 文章标签： css html 定位列表

本文链接：https://blog.csdn.net/qq_41568313/article/details/112945021

版权

本文详细解析了一次网页设计作业，通过HTML和CSS实现了一个分两大部分的页面布局：左侧侧边栏和右侧主体。侧边栏采用固定定位，内部使用flex布局，而右侧主体部分则分为固定头部和可滚动主体内容。HTML结构清晰，CSS代码覆盖整体布局、侧边栏和主体部分的各个细节，加深了对HTML和CSS布局技巧的理解。

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

一.效果图

二.布局分析

2.1：首先将整个页面分为两大部分

左侧侧边栏部分和右侧主体部分

2.2：左侧侧边栏部分

侧边栏整体分为两大列，第一列为按钮部分，第二列为导航部分，实现思路是：首相将整个侧边栏固定定位到浏览器窗口左边，赋予100%的高度，然后利用flex布局，将内部分为左右两块并排排列
导航栏内部的两列，都采用相对定位，类内部各自分两块，以绝对定位的方式，定位在顶部和底部，接下来细节调整下就好了。需要注意的是，侧边栏的右侧导航部分高度超出了页面的高度，由于默认的滚动太丑了，所以直接采用溢出隐藏的方式。

左侧：上面的按钮和下面的按钮

右侧：上菜单和下面进度条及文字

2.3：右侧主体部分

这个部分首先分为上下两大块，上面采用固定定位的方式定位在浏览器顶部，下面溢出滚动。

下部分划分为左右两大块，依旧采用flex布局

头部：左面文字和右面头像及按钮

主体：左右两侧主体内容

三.HTML代码

3.1左侧侧边栏部分

在左侧定义一个名为button-group的盒子

左侧：上面的按钮和下面的按钮

右侧：上菜单和下面进度条及文字

3.1.1：侧边栏部分左侧

1：上按钮部分

<!-- 上边按钮部分 -->
<div class="classify">
                <ul>
                    <li>
                        <a href="#">
                            <img src="images/button1.png" alt="" class="icon">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/button2.png" alt="" class="icon">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/button3.png" alt="" class="icon">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/button4.png" alt="" class="icon">
                        </a>
                    </li>
                </ul>
            </div>

2：下按钮部分

<!-- 下边按钮部分 -->
            <div class="operation">
                <ul>
                    <li>
                        <a href="#">
                            <img src="images/grid.png" alt="" class="icon">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/Settings.png" alt="" class="icon">
                        </a>
                    </li>
                </ul>
            </div>

3.1.2：侧边栏部分右侧

1：上菜单

<!-- 上菜单 -->
    <section class="content">
        <dl>
            <dt>MENU
                <a href="#">
                    <img src="images/Settings.png" alt="" class="icon">
                </a>
            </dt>
            <dd>
                <a href="#">Overview</a>
            </dd>
            <dd>
                <a href="#">Sales</a>
                <i class="info">54</i>
            </dd>
            <dd>
                <a href="#">Your Staff</a>
            </dd>
            <dd>
                <a href="#">Analytics & Targeting</a>
            </dd>
            <dd class="last-child">
                <a href="#">What’s New</a>
            </dd>
            <dt>YOUR PRODUCTS
                <a href="#">
                    <img src="images/Settings.png" alt="" class="icon">
                </a>
            </dt>
            <dd>
                <i class="icon"></i><a href="#">Books</a>
            </dd>
            <dd>
                <i class="icon video"></i><a href="#">Tutorials</a>
            </dd>
            <dd>
                <i class="icon painting"></i><a href="#">Stocks</a>
            </dd>
            <dd class="last-child">
                <i class="icon chart"></i><a href="">Infographics</a>
            </dd>
            <dt>DASHBOARD
                <a href="#">
                    <img src="images/Settings.png" alt="" class="icon">
                </a>
            </dt>
            <dd>
                <a href="#">Messages</a>
                <i class="info">21</i>
            </dd>
            <dd>
                <a href="#">Connections</a>
            </dd>
            <dd>
                <a href="#">Integrations</a>
                <i class="warm">!</i>
            </dd>
            <dd>
                <a href="#">Account Settings</a>
            </dd>
            <dd>
                <a href="#">App Settings</a>
            </dd>
        </dl>
    </section>

2：下面进度条及文字

<!-- 下面进度条及文字 -->
            <section class="goal">
                <div class="month clear">
                    <span class="key">Monthly Goals</span>
                    <span class="value ">$580/$3200</span>
                </div>
                <div class="progress">
                    <div class="outer">
                        <span class="inner"></span>
                    </div>
                </div>
            </section>