第一次扁平化博客实战练习

在通过学习表严肃的的扁平化风格个人博客的课程之后，第一次将很多个属性一起在网页里体现出来，做网页是非常有成就感的一件事，虽然熬了很多夜，做出来的东西还是那么的不近人意，款式结构上，都没有进行一个初始的系统的策划，而是直接上手，当第一次发现bug，到在学长的指导帮助下，解决bug，当解决完问题真的让人感觉很爽。下面是我这次博客练习的个人经验。

（一）.首先表严肃和我们说过，制作网页要先搭一个整体的框架而不是从一个个小细节上扣起，首先要有个整体的感观之后才能进行下一步详细的规划。

（二）第一部分

1.背景

用background：url设置背景图片（注意路径）

用opacity设置透明度

2. 导航栏

①置顶导航栏

②侧面导航栏

3.文本与按钮

文本：

按钮:

（三）第二部分

1.对于文本内容先设置text-align：center

其次在设置分割线的时候要注意，用<hr>标签的话款是单一，不灵活，所以如果设置了一个div，设置div的高宽颜色边框，即可实现hr的作用，并且通过margin：0 auto的方式去实现居中。

2.三个菱形是通过三个div实现的，先给三个div一个长宽背景颜色，用border-radius设置边角的弧度，然后用transform：rotate（）设置角度达到旋转的效果。

3.三栏式布局

先设置三个div再把右边两个div放在一个div里，把中间的设置成自适应（核心：float、display）

（四）第三部分

（五）第四部分

页脚

第一次扁平化博客实战练习相关推荐

第一次使用51cto博客
阿梅第一次使用51cto博客,以后将学习中的总结写到这里来.加油. 转载于:https://blog.51cto.com/hopit/1690465
【Docker之Swarm详细讲解Swarm集群搭建管理节点工作节点Raft一致性协议overlay网络Docker结合Swarm部署WordPress个人博客实战】
一.知识回顾之前的内容都帮你整理好了,在这里哟! [0.Docker相关目录文章整理,可自行查看,包含多节内容] [1.Docker详细安装部署&阿里镜像地址配置] [2.Docker架构& ...
技术胖React博客实战 - 新版问题解决方式整理
整理了一下新版的变化以及遇到的坑的解决办法. 技术胖的React 博客实战视频 https://www.bilibili.com/video/BV1CJ411377B 文章目录前中台后台后记前 ...
完全免费的基于区块链和 IPFS 的去中心化博客平台
一.前言 xLog是一个基于Crossbell区块链的博客解决方案,专注于Web3数据由用户掌控.Crossbell是一个基于Web3技术的去中心化博客平台,用户可以在该平台上发布文章并进行交流和创作 ...
Go 全栈博客实战项目 gin-vue-blog
Go 全栈博客 gin-vue-blog 写在前面博客介绍在线预览项目介绍技术介绍目录结构环境介绍线上环境开发环境 VsCode 插件快速开始拉取项目前的准备 (Windows) ...
006-Sigle-基于blockstack去中心化博客
本篇文章主要讲解有关基于Blockstack的Sigle是一个去中心化的博客项目: 官网地址:https://www.sigle.io/ Github地址:https://github.com/pra ...
阿里云服务器和 hexo 博客实战
疫情在家,突然看到了阿里云推出了大学生在家实践计划(是心动的感觉).刚好看到别人分享的如何用阿里云建立了个人博客.所以实践了以下,这里做个教程给自己来个不时之需. 整个建立过程涉及到 hexo,ngi ...
第一次CSDN写博客
今天看到一篇博客,非常有感,地址如下: https://blog.csdn.net/ityouknow/article/details/80589552 读完之后,我觉得还是很有必要撰写博客,好 ...
Django简单博客实战（六）---搜索功能
Django-haystack插件实现项目地址:https://github.com/ylpxzx/lifeblog 步骤安装依赖包 pip install whoosh,jieba,django ...

第一次扁平化博客实战练习

第一次扁平化博客实战练习相关推荐

最新文章

热门文章