原！神静态网页布局详解，html+css布局实战，附详细代码

代码大帝

已于 2023-01-03 14:31:59 修改

阅读量9.7k

点赞数 19

文章标签： html css 前端

于 2022-10-04 10:31:35 首次发布

本文链接：https://blog.csdn.net/qq_60614034/article/details/127146261

版权

代码整体效果展示

1页面布局思路

本次界面的布局主要采用定位流的方式来进行布局。因为界面具有很多透视效果，以及背景图片的重叠。接下来我将详细讲解布局

第一层定位流：

素材：

此图片作为总体背景应该放在第一层，因为其他的元素都应该在其上面，否则背景图会覆盖其他元素。

第二层定位流：

素材：

第三层：

素材

注意：

中间有一条竖线，是通过定义宽度为1px的容器<div>加上背景色制作而成。

第四层：

到了这一步基本上大功告成了，剩下的就是html页面的常规布局。

分别可以分为左边部分，中间部分，底部部分。

左边部分代码块



 <ul>
               
                    <li class="li1">
                        <div class="hover1">
                            <span>蒙德城</span>
                        </div>
                        <div class="div2"></div>
                        &nbsp;<span class="city">蒙德城</span>
                    </li>
                    <li>
                        <div class="hover1">
                            <span>璃月城</span>
                        </div>
                        <div></div>
                        &nbsp;<span>璃月城</span>
                    </li>
                    <li>
                        <div class="hover1">
                            <span>稻妻城</span>
                        </div>
                        <div></div>
                        &nbsp;<span>稻妻城</span>
                    </li>
                    <li>
                        <div class="hover1">
                            <span>须弥城</span>
                        </div>
                        <div></div>
                        &nbsp;<span>须弥城</span>
                    </li>
                    <li>
                        <div></div>
                        &nbsp;<span>敬请期待</span>
                    </li>
                </ul>

中间部分代码段

 <div class="right-troduction">
                <div class="troduction-border"></div>
                <div class="name"><span>琴</span></div>
                <div class="cv">
                    <div class="left-cv">
                        <div class="cv-symbol"></div>
                        <div class="cv-character">CV: 林溯</div>
                        <div class="voice-symbol">

                        </div>

                    </div>
                    <div class="right-cv">
                        &nbsp;<span>日</span>
                        <div class="circle"></div>
                    </div>
                </div>
                <div class="text">
                    <div class="text-symbol"></div>
                    <div class="text-primary">
                        <p>身为西风骑士团的代理团长，琴一直忠于职守，为人们带来安宁.虽然并非天赋异禀，但通过刻苦训练，如今的她已然能够独当一面。</p>
                        <p>当风魔龙的威胁开始临近，这位可靠的代理团长早已做好了准备，誓要守护蒙德。</p>
                    </div>
                </div>

            </div>
            <div class="wind-listen-to-me">

            </div>
        </div>

底部部分代码块

  <div class="bottom">
            <div class="left-point"></div>
            <div>
                <div class="image qin"></div>
                <div class="span-bg"><span>琴</span></div>
            </div>
            <div>
                <div class="image an"></div>
                <div class="span-bg"><span>安珀</span></div>
            </div>
            <div>
                <div class="image lisha"></div>
                <div class="span-bg"><span>丽莎</span></div>
            </div>
            <div>
                <div class="image kaiya"></div>
                <div class="span-bg"><span>凯亚</span></div>
            </div>
            <div>
                <div class="image babala"></div>
                <div class="span-bg"><span>芭芭拉</span></div>
            </div>
            <div>
                <div class="image diluke"></div>
                <div class="span-bg"><span>迪卢克</span></div>
            </div>
            <div class="right-point"></div>
        </div>

上面的静态网页加入了部分动态效果，可以让自己的网页显得更厉害。