|
如何制作一个漂亮的网页
首先你需要了解的代码规范（不仅自己可以看懂，别人也能看懂）给页面画框代码编写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布局进行浮动。
博客
学院
下载
论坛
问答
代码
招聘
电子书
VIP会员
收藏
动态
消息
 我们的网页是这样子的，我们给最大的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自行理解 全部代码如下：
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;
}
博客
学院
下载
论坛
问答
代码
招聘
电子书
VIP会员
收藏
动态
消息
首页
动态
排行
Python
Java
架构
人工智能
移动开发
程序人生
计算机基础
互联网
前端
区块链
游戏开发
运维
5G
音视频开发
研发管理
信息安全
认证考证
数据库
云计算
更多
 直播
 专栏
 活动
 学习
热门话题
#话题#
对着答案敲代码是坏习惯嘛？
查看更多
#话题#
对着答案敲代码是坏习惯嘛？
查看更多
#话题#
对着答案敲代码是坏习惯嘛？
查看更多
#话题#
对着答案敲代码是坏习惯嘛？
查看更多
精选头条
程序员奶爸用Tensorflow、树莓派DIY婴儿监护仪
育儿任务可以自动化吗？真的可以将给孩子换尿布的任务交给一个机器人吗?
不再是Python专属！微软发布VS Code Hupyter 插件
多语言的Jupyter Notebook支持来了！
不再是Python专属！微软发布VS Code Hupyter 插件
多语言的Jupyter Notebook支持来了！
不再是Python专属！微软发布VS Code Hupyter 插件
多语言的Jupyter Notebook支持来了！
精选视频
视频热榜
flex布局
flex布局为弹性布局，小伙伴们需要了解请参考flex布局语法教程 主要就是记住flex-direction: *;(row默认水平、column垂直)、flex-wrap: *;(wrap换行第一行在上面，wrap-reverse第一行在下面)、Justify-content: *;(flex-start（默认值）：左对齐，flex-end：右对齐，center： 居中，space-between：两端对齐，项目之间的间隔都相等。，space-around：每个项目两侧的间隔相等。)
本人新手，有不对的地方请大佬们进行指点 大家一起进步鸭
|