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

代码整体效果展示

 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>

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

最后附上原神cos区静态页面展示

国庆七天，悄悄练一手，回到学校耍耍酷，或者在女朋友面前露两手。让对象不仅爱原神，更爱你！

同时附上详细代码以及图片素材：

详细代码https://download.csdn.net/download/qq_60614034/86732367?spm=1001.2014.3001.5501文章来源地址https://www.toymoban.com/news/detail-487861.html

到了这里，关于原 ！神静态网页布局详解，html+css布局实战，附详细代码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！