如何制作一个漂亮的网页
- 首先你需要了解的代码规范（不仅自己可以看懂，别人也能看懂）
- 给页面画框
- 代码编写
- flex布局
首先你需要了解的代码规范（不仅自己可以看懂，别人也能看懂）
- 比如如图所示：最大的盒子（如图所示：红色）可以命名容器container；最上面的导航栏黄色以及内容部分的黄色可以命名为nav，body-content； body-content里面有个蓝色的导航栏怎么办呢，这时候可以命名为content-nav等…；
- 主要是看个人理解，但是千万不能命名aa，bb，cc类似这种，一定要根据你的页面部分的内容进行命名；
- 另外命名规范：页头：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；有时候我们只需要一边为圆形这么这时候我们只需要加上top-left（其他自行理解）就可以了）、等就可以得到下图所示：
body自行理解
全部代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div, span, ul, ol, li, a, img, p, h1, h2, h3, h4, h5, h6{margin: 0; padding: 0;}
body {font-family: 微软雅黑; font-size: 16px; font-weight: normal; background-color: rgb(243, 237, 237);}
ul, ol, li {list-style: none;}
a {text-decoration: none;}
.banx{
width: 100%;
height: 50px;
background-color: white;
}
.nav-box{
width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: row;
}
.nav-box .csdn-icon img{
display: block;
width: 80px;
min-width: 80px;
height: 100%;
}
.nav-box ul {
display: flex;
flex-direction: row;
margin-top: 13px;
margin-left: 8px;
}
.nav-box ul li a{
color: black;
margin-left: 5px;
}
.nav-box .search-btn{
margin-left: 8px;
position: relative;
}
.nav-box .search-btn .search-input{
width: 410px;
height: 32px;
line-height: 32px;
margin-top: calc((44px - 32px)/ 2);
border-radius: 6px;
border: 1px solid gray;
}
.search-icon{
}
.nav-box .onlyUser{
display: flex;
flex-direction: row;
margin-top: 15px;
}
.nav-box .onlyUser .creation-box{
margin-left: 13px;
margin-top: -10px;
}
.nav-box .onlyUser .creation-box .creation-btn{
width: 100px;
height: 40px;
background-color: red;
border-radius: 6px;
border: 1px solid red;
}
.nav-box .onlyUser .collect-box{
color: white;
margin-left: 15px;
}
.nav-box .onlyUser a{
color: black;
margin-left: 15px;
margin-top: 10px;
}
.user-box img{
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: -5px ;
margin-left: 10px;
}
.content-box{
width: 1200px;
margin: 0 auto;
}
.content-box .menu-box{
display: flex;
flex-direction: row;
background-color: white;
margin-top: 5px;
}
.content-box .menu-box .menu-main ul{
display: flex;
flex-direction: row;
width: 180px;
height: 80px;
margin-top: 10px;
margin-left: 20px;
}
.content-box .menu-box .menu-main img{
width: 40px;
height: 40px;
border-radius: 50%;
margin-left: 10px;
}
.content-box .menu-box .menu-main ul li a {
color: black;
margin-left: 12px;
}
.content-box .menu-box .menu-content{
width: 840px;
height: 50px;
line-height: 50px;
}
.content-box .menu-box .menu-content ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.content-box .menu-box .menu-content ul li a{
margin-left: 25px;
color: black;
}
.content-box .menu-box .other-menu{
width: 180px;
height: 50px;
margin-left: 10px;
line-height: 50px;
}
.content-box .menu-box .other-menu ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.content-box .menu-box .other-menu ul a {
margin-left: 20px;
}
.content-box .menu-box .other-menu img{
width: 20px;
height: 20px;
}
.content-box .hot-talk{
width: 100%;
height: 200px;
background-color: white;
}
.content-box .hottalk-title{
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
}
.content-box .hottalk-title img{
width: 40px;
height: 40px;
}
.content-box .hottalk-title a{
font-size: 20px;
font-weight: bold;
color: black;
margin-left: 5px;
margin-top: 5px;
}
.content-box .hot-talk .hottalk-item{
display: flex;
flex-direction: row;
}
.hottalkitem-no1{
width: 300px;
height: 120px;
background:linear-gradient(blue,blueviolet);
border-radius: 10px;
margin-left: 10px;
}
.content-box .hot-talk .hottalk-item .hottalkitem-no1 .title{
font-weight: bold;
}
.content-box .hot-talk .hottalk-item .hottalkitem-no1 .moretalk{
margin-left: 180px;
margin-top: 30px;
}
.content-box .hot-talk .hottalk-item .hottalkitem-no1 ul li a{
color: black;
margin-left: 20px;
}
.choose-stories{
height: 400px;
background-color: white;
}
.choose-stories .stories-item-box{
height: 300px;
display: flex;
flex-direction: row;
}
.choose-stories .stories-item-box .stories-maincontent{
width: 450px;
height: 300px;
}
.choose-stories .stories-item-box .stories-content{
width: 450px;
height: 120px;
}
.choose-stories .stories-item-box .stories-content .stories-item{
display: flex;
flex-direction: row;
}
.choose-stories .stories-item-box .stories-content .stories-item:not(:first-child) {
margin-top: 10px;
}
.choose-stories .stories-item-box .stories-content .stories-item img{
width: 100px;
height: 100px;
}
.choose-stories .stories-item-box .stories-banner{
width: 300px;
height: 300px;
background-color: tomato;
}
.banner{
width: 100%;
height: 100px;
background-color: tomato;
}
</style>
<body>
<div class="container">
<div class="banx">
<div class="nav-box">
<div class="csdn-icon">
<img src="https://csdnimg/cdn/content-toolbar/csdn-logo.png?v=20200416.1" 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="D:\AAA\H\Visual\img\6.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="content-box">
<div class="menu-box">
<div class="menu-main">
<ul>
<li><img src="D:\AAA\H\Visual\img\6.jpg"/><a href="#">首页</a></li>
<li><img src="D:\AAA\H\Visual\img\6.jpg"/><a href="#">动态</a></li>
<li><img src="D:\AAA\H\Visual\img\6.jpg"/><a href="#">排行</a></li>
</ul>
</div>
<div class="menu-content">
<ul>
<li><a href="#">Python</a></li>
<li><a href="#">Java</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="#">区块链</a></li>
<li><a href="#">游戏开发</a></li>
<li><a href="#">运维</a></li>
<li><a href="#">5G</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>
</ul>
</div>
<div class="other-menu">
<ul>
<li><a><img src="https://img-home.csdnimg/images/20200811110251.png"/>直播</a></li>
<li><a><img src="https://img-home.csdnimg/images/20200811110139.png"/>专栏</a></li>
<li><a><img src="https://img-home.csdnimg/images/20200811110217.png"/>活动</a></li>
<li><a><img src="https://img-home.csdnimg/images/20200811103908.png"/>学习</a></li>
</ul>
</div>
</div>
<div class="hot-talk">
<div class="hottalk-title">
<img src="https://img-home.csdnimg/images/20200704010251.png"/>
<a href="#">热门话题</a>
</div>
<div class="hottalk-item">
<div class="hottalkitem-no1">
<ul>
<li class="title"><a href="#">#话题#</a></li>
<li><a href="#">对着答案敲代码是坏习惯嘛？</a></li>
<li class="moretalk"><a href="#">查看更多</a></li>
</ul>
</div>
<div class="hottalkitem-no1">
<ul>
<li class="title"><a href="#">#话题#</a></li>
<li><a href="#">对着答案敲代码是坏习惯嘛？</a></li>
<li class="moretalk"><a href="#">查看更多</a></li>
</ul>
</div>
<div class="hottalkitem-no1">
<ul>
<li class="title"><a href="#">#话题#</a></li>
<li><a href="#">对着答案敲代码是坏习惯嘛？</a></li>
<li class="moretalk"><a href="#">查看更多</a></li>
</ul>
</div>
<div class="hottalkitem-no1">
<ul>
<li class="title"><a href="#">#话题#</a></li>
<li><a href="#">对着答案敲代码是坏习惯嘛？</a></li>
<li class="moretalk"><a href="#">查看更多</a></li>
</ul>
</div>
</div>
</div>
<div class="choose-stories">
<div class="hottalk-title">
<img src=" https://csdnimg/release/cmsfe/public/img/cardList_icon.ba603103.png"/>
<a href="#">精选头条</a>
</div>
<div class="stories-item-box">
<div class="stories-maincontent">
<img src="https://img-home.csdnimg/images/20201117091520.png" alt="" />
<h2>程序员奶爸用Tensorflow、树莓派DIY婴儿监护仪</h2>
<span>育儿任务可以自动化吗？真的可以将给孩子换尿布的任务交给一个机器人吗?</span>
</div>
<div class="stories-content">
<div class="stories-item">
<img src="https://img-home.csdnimg/images/20201117094933.png" alt=""/>
<div class="content-item"> <h2>不再是Python专属！微软发布VS Code Hupyter 插件</h2>
<span>多语言的Jupyter Notebook支持来了！</span></div>
</div>
<div class="stories-item">
<img src="https://img-home.csdnimg/images/20201117094933.png" alt=""/>
<div class="content-item"> <h2>不再是Python专属！微软发布VS Code Hupyter 插件</h2>
<span>多语言的Jupyter Notebook支持来了！</span></div>
</div>
<div class="stories-item">
<img src="https://img-home.csdnimg/images/20201117094933.png" alt=""/>
<div class="content-item"> <h2>不再是Python专属！微软发布VS Code Hupyter 插件</h2>
<span>多语言的Jupyter Notebook支持来了！</span></div>
</div>
</div>
<div class="stories-banner"></div>
</div>
</div>
<div class="banner"></div>
<div class="creat-video">
<div class="hottalk-title">
<img src=" https://csdnimg/release/cmsfe/public/img/cardList_icon.ba603103.png"/>
<a href="#">精选视频</a>
<a href="#">视频热榜</a>
</div>
</div>
</div>
</div>
</body>
</head>
</html>
flex布局
flex布局为弹性布局，小伙伴们需要了解请参考flex布局语法教程
主要就是记住flex-direction: *;(row默认水平、column垂直)、flex-wrap: *;(wrap换行第一行在上面，wrap-reverse第一行在下面)、Justify-content: *;(flex-start（默认值）：左对齐，flex-end：右对齐，center： 居中，space-between：两端对齐，项目之间的间隔都相等。，space-around：每个项目两侧的间隔相等。)
本人新手，有不对的地方请大佬们进行指点
大家一起进步鸭
更多推荐
如何制作一个漂亮的网页
发布评论