如何制作一个漂亮的网页

首先你需要了解的代码规范（不仅自己可以看懂，别人也能看懂）

1. 比如如图所示：最大的盒子（如图所示：红色）可以命名容器container；最上面的导航栏黄色以及内容部分的黄色可以命名为nav，body-content； body-content里面有个蓝色的导航栏怎么办呢，这时候可以命名为content-nav等…；
2. 主要是看个人理解，但是千万不能命名aa，bb，cc类似这种，一定要根据你的页面部分的内容进行命名；
3. 另外命名规范：页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column菜单：menu子菜单：submenu标题: title摘要: summary标志：logo广告：banner登陆：login登录条：loginbar注册：register搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标籤页：tab文章列list　　提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote　　合作伙伴：partner友情链接：link版权：copyright等…；

给页面画框

首先给你需要制作的页面进行画框，千万不要不画框直接画，这样子出来的效果会特别不好看。

代码编写

如图所示，我们首先需要编写nav部分。再编写body部分。
可以看到我们的内容有永远是居中的状态，这是运用了版心。如何制作版心呢？给你需要居中的最大的框框（div）加上样式： width: *px;margin: 0 auto;宽度根据你的需求定义。
导航部分：

我们可以如图所示给它画框，如何浮动起来呢，给float可以浮动，也可以运用flex布局进行浮动。

<div class="nav-box">
                <div class="csdn-icon">
                    <img src="#" alt="">
                </div>
                <ul>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">学院</a></li>
                    <li><a href="#">下载</a></li>
                    <li><a href="#">论坛</a></li>
                    <li><a href="#">问答</a></li>
                    <li><a href="#">代码</a></li>
                    <li><a href="#">招聘</a></li>
                    <li><a href="#">电子书</a></li>
                    <li><a href="#">VIP会员</a></li>
                </ul>
                <div class="search-btn">
                    <input class="search-input" type="text">
                    <span class="search-icon"></span>
                </div>
                <div class="onlyUser">
                    <div class="creation-box">
                        <input class="creation-btn" type="submit" value="创作者中心">
                    </div>
                    <div class="collect-box">
                        <a href="#">收藏</a>
                    </div>
                    <div class="dynamic-box">
                        <a href="#">动态</a>
                    </div>
                    <div class="information-box">
                        <a href="#">消息</a>
                    </div>
                    <div class="user-box">
                       <img src="#" alt="">
                    </div>
                </div>

我们的网页是这样子的，我们给最大的div加上布局：display:flex; flex-direction: row;就浮动起来了。然后我们给他一些样式，width/height（大小）， margin-top/margin-left（边距）、 color（颜色）、position（定位）{定位需要记住子绝夫相，就是relative（相对）与 absolute（绝对）}、height: 32px;line-height: 32px（这是居中效果，编码一般都是配套使用，高度必须和行高一样px）、border-radius: *px（边框效果，圆形把px值设置为50%，如下图所示边框效果为6px；