HTML5和CSS3扁平化风格博客(基础篇)
多学一点总是好的~
自始至终都觉得的css和html效果比较美观，于是在看慕课网教程时，自己也跟着敲了深爱着的前端代码
这部分分为两部分：①基础篇：http://www.imooc.com/learn/445；
②进阶篇：http://www.imooc.com/learn/598；
这里只对基础篇进行记录，下篇则为进阶篇介绍。
学到的something：
1、CSS的常规布局方法；
2、CSS扁平化风格布局方法 ；
3、网页布局特殊情况处理方式 ；
4、HTML5相关标签和CSS3效果。
项目开始：
拿到一个项目，先不要着急动手写代码，而是思考——这是前辈以及自己在工作后，深觉得颇为正确的道理。
1.模块分析：先思考，再动手；
2.重置样式及文件结构（http://cssreset.com/或者normalize.css，但是建议后者，因为前者会将所有标签，包括H1在内的元素样式全部去掉，这点不太合适，故选normalize.css。）
3.宏观布局：
先看最终效果吧：
①布局：
②直接上代码：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<style>
/*css样式重置*/ </style>
</head>
<body>
<div class="main-wrapper">
<header><!--页头开始-->
<nav>
<div class="logo"><a href="">张小窝</a></li></div>
<ul>
<li><a href="" class="active">首页</a></li>
<li><a href="">链接3</a></li>
<li><a href="">链接4</a></li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<h1>张小窝</h1>
<p class="sub-heading">Lorem ipsum dolor sit amet, .</p>
<button>了解我</button>
<div class="more">
更多
</div>
</div>
</div>
</header><!--页头结束--> <div class="content"><!--内容开始-->
<section class="green-section">
<div class="wrapper">
<div>
<h2>标题</h2>
<div class="hr"></div>
<p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut deserunt dicta dolore exercitationem facere fuga, harum impedit maxime molestiae nemo non nostrum obcaecati pariatur possimus quod similique, vel velit.</p>
</div>
<div class="icon-grop">
<span class="icon">items1</span>
<span class="icon">items2</span>
<span class="icon">items3</span>
</div>
</div>
</section>
<section class="gray-section">
<div class="article-preview clearfix">
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">我是副标题</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium architecto dolores dolorum, enim eos esse, expedita fugit minus mollitia necessitatibus pariatur qui recusandae sapiente sequi ullam voluptatibus. Quam, rerum!</p>
</div>
<div class="img-section">
<img src="img/pic01.jpg" alt="">
</div>
</div>
<div class="article-preview clearfix">
<div class="img-section">
<img src="img/pic02.jpg" alt="">
</div>
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">我是副标题</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium architecto dolores dolorum, enim eos esse, expedita fugit minus mollitia necessitatibus pariatur qui recusandae sapiente sequi ullam voluptatibus. Quam, rerum!</p>
</div>
</div>
<div class="article-preview clearfix">
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">我是副标题</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium architecto dolores dolorum, enim eos esse, expedita fugit minus mollitia necessitatibus pariatur qui recusandae sapiente sequi ullam voluptatibus. Quam, rerum!</p>
</div>
<div class="img-section">
<img src="img/pic03.jpg" alt="">
</div>
</div>
</section>
<section class="purple-section">
<div class="wrapper">
<div class="heading-wrapper">
<h2>又一个标题</h2>
<div class="hr"></div>
<div class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, iure odit? Alias aliquam corporis cum dignissimos est et expedita nam, non quidem recusandae reiciendis veniam voluptatem. Enim ipsa nihil quibusdam.</div>
</div>
<div class="card-group clearfix">
<div class="card">
<h3>标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure laudantium maxime rem ut! Aliquid amet atque corporis delectus distinctio omnis quasi, quibusdam sit? Beatae esse eum saepe voluptate? Repellat, soluta.</p>
</div>
<div class="card">
<h3>标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure laudantium maxime rem ut! Aliquid amet atque corporis delectus distinctio omnis quasi, quibusdam sit? Beatae esse eum saepe voluptate? Repellat, soluta.</p>
</div>
<div class="card">
<h3>标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure laudantium maxime rem ut! Aliquid amet atque corporis delectus distinctio omnis quasi, quibusdam sit? Beatae esse eum saepe voluptate? Repellat, soluta.</p>
</div>
<div class="card">
<h3>标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure laudantium maxime rem ut! Aliquid amet atque corporis delectus distinctio omnis quasi, quibusdam sit? Beatae esse eum saepe voluptate? Repellat, soluta.</p>
</div>
<div class="card">
<h3>标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure laudantium maxime rem ut! Aliquid amet atque corporis delectus distinctio omnis quasi, quibusdam sit? Beatae esse eum saepe voluptate? Repellat, soluta.</p>
</div>
<div class="card">
<h3>标题</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure laudantium maxime rem ut! Aliquid amet atque corporis delectus distinctio omnis quasi, quibusdam sit? Beatae esse eum saepe voluptate? Repellat, soluta.</p>
</div>
</div>
</div>
</section>
</div><!--内容结束--> <footer><!--页脚开始-->
<ul class="share-group">
<!--li{item$}-->
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<div class="copy">
©张小窝 - 2017
</div>
</footer><!--页脚结束-->
</div> </body>
</html>
main.css：
/*清除父级影响---清除浮动*/
.clearfix:after { content: ''; display: block; clear: both; }
ul {
margin:;
}
nav {
background-color: transparent;
height: 50px;
}
a {
text-decoration: none;
}
header {
background-color: rgba(0,0,0,0.4);
}
#banner {
background-color: rgba(0,0,0,0.2);
height: 700px;
}
nav ul {
list-style: none;
margin:;
float: right;
}
nav ul li,nav .logo {
display: inline-block;
line-height: 50px;
margin-right: 20px;
}
nav ul li a {
line-height: 50px;
text-decoration: none;
display: inline-block;
/*继承*/
height: inherit;
color: #fff;
}
nav ul li.logo {
float: left;
padding: 10px;
}
#banner .inner {
max-width: 300px;
text-align: center;
margin: 0 auto;
position: relative;
top:160px;
}
#banner .inner h1{
margin:;
}
/*常规button*/
button {
border: none;
background-color: #333;
color: #eee;
padding: 10px;
border-radius: 5px;
}
#banner button {
padding: 14px 60px;
}
#banner .inner .more {
margin-top: 280px;
color: #fff;
font-size: 12px;
}
.sub-heading{
line-height: 30px;
margin: 30px 0;
/*font-size: 18px;*/
}
/*导航栏样式*/
.logo {
font-size: 20px;
font-weight:;
letter-spacing: 1px;
}
.logo a{
color: #fff;
}
/*内容*/
h1 {
padding: 12px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
h2{
font-size: 30px;
}
h3 {
font-size: 24px;
}
p {
font-size: 18px;
letter-spacing: 1px;
}
.hr{
width: 100px;
height: 2px;
margin: 20px auto;
}
.green-section {
background-color: #089DB0;
text-align: center;
color: #fff;
padding: 100px 0;
}
.green-section .hr {
background-color: #028e94;
width: 60%;
}
.green-section .icon-grop .icon{
display: inline-block;width: 80px;
height: 80px;
/*background-color: #0D6F74;*/
border: 1px solid #0D6F74;
transform: rotate(45deg);
margin: 20px;
}
.icon-grop {
margin-top: 60px;
}
.wrapper {
max-width: 1080px;
margin: 0 auto;
}
/*灰色区域*/
.gray-section {
background-color: #252F34;
}
.gray-section .img-section{
width: 45%;
}
.img-section img {
width: 100%
}
.gray-section .text-section{
width: 55%;
}
.article-preview > div {
float: left;
/*两图之间的缝隙（小细节）*/
font-size:;
}
.article-preview:nth-child(odd){
background-color:rgba(255,25,255,0.05);
}
.text-section{
position: relative;
top:68px;
left:50px;
}
.text-section > * {
max-width: 90%;
color: #fff;
}
.text-section h2 {
margin-bottom: 20px;
}
.text-section .sub-heading {
font-size: 22px;
}
.text-section p {
font-size: 18px;
letter-spacing: 1px;
}
/*紫色部分*/
.purple-section {
padding: 80px;
background-color: #3F3965;
color: #fff;
}
.purple-section .heading-wrapper {
text-align: center;
}
.purple-section .hr {
background: #373259;
width: 60%;
}
.card{
float: left;
width: 50%;
min-height: 300px;
padding: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*border:1px solid #fff;*/
}
.card:first-child{
/*不透明度为0.05的黑*/
background
: rgba(0,0,0,0.04);
}
.card:nth-child(2){
background: rgba(0,0,0,0.08);
}
.card:nth-child(3){
background: rgba(0,0,0,0.12);
}
.card:nth-child(4){
background: rgba(0,0,0,0.16);
}
.card:nth-child(5){
background: rgba(0,0,0,0.20);
}
.card:nth-child(6){
background: rgba(0,0,0,0.24);
}
/*页脚*/
footer{
background: #333;
color: #fff;
min-height: 200px;
text-align: center;
}
ul.share-group {
display: block;
width: 1080px;
margin: 0 auto;
padding: 50px;
}
.share-group li {
display: inline-block;
padding: 10px;
}
.copy{
padding: 20px;
}
.main-wrapper {
background: #444 url(../img/banner.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
兴趣真的是位好老师~
其实css以及html方面的知识比较简单，只是过程比较“曲折”，如果有足够的兴趣，花点时间也是可以达到满意的效果的。
HTML5和CSS3扁平化风格博客(基础篇)的更多相关文章
- HTML5和CSS3扁平化风格博客(进阶篇)
趁热打铁,将剩下的部分完结~ 接上篇,增加了一些js特效:侧边栏,返回顶部. 至于效果,也不知道gif的图片怎么显示不上去了 无奈只能直接上代码了,完整版请点击: https://files.cnbl ...
- Html5和Css3扁平化风格网页
前言 扁平化概念的核心意义 去除冗余.厚重和繁杂的装饰效果.而具体表现在去掉了多余的透视.纹理.渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来.同时在设计元素上,则强调了抽 ...
- 一款简易的CSS3扁平化风格联系表单
CSS3扁平化风格联系表单是一款CSS3简易联系表单非常清新,整体外观不是那么华丽,但是表单扁平化的风格让人看了非常舒服,同时利用了HTML5元素的特性,表单的验证功能变得也相当简单.经测试效果相当不 ...
- 利用Github和Hexo搭建独立的个人博客--基础篇
利用Github和Hexo搭建独立的个人博客--基础篇 摘要:本文主要参考了使用hexo和Github上创建自己的博客.如何搭建一个独立博客--简明Github Pages与Hexo教程和使用GitH ...
- 基于Hexo+Node.js+github+coding搭建个人博客——基础篇
附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My ...
- PS绘制扁平化风格相机镜头UI图标
一.新建一个画布,绘制一个460*460图层,圆角半径40像素.填充渐变颜色,加一点点投影,这样就有质感了. 二.接下来我们要来绘制主体部分,绘制一个圆,大小400*400,用内阴影,渐变叠加,投影得 ...
- Docker学习总结（6）——通过 Docker 化一个博客网站来开启我们的 Docker 之旅
通过 Docker 化一个博客网站来开启我们的 Docker 之旅 这篇文章包含 Docker 的基本概念,以及如何通过创建一个定制的 Dockerfile 来 Docker 化Dockerize一个 ...
- 利用Hexo搭建个人博客－博客发布篇
通过 <利用Hexo搭建个人博客-环境搭建篇> 以及 <利用Hexo搭建个人博客-博客初始化篇>,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如 ...
- Android应用开发-小巫CSDN博客clientJsoup篇
Android应用开发-小巫CSDN博客clientJsoup篇 距上一篇博客已经过去了两个星期,小巫也认为很抱歉,由于在忙着做另外一个项目,差点儿抽不出空来,这不小巫会把剩下的博文全部在国庆补上.本 ...
随机推荐
- python2 python3 字符串 编码格式 处理
使用python的ctypes调用c语言中的函数,传入字符串,打印输出异常.解决方法记录于此. 参考连接: http://blog.csdn.net/u011546806/article/detail ...
- MCMC采样理论的一点知识
看了好多相关的知识,大致了解了一下马尔可夫链-蒙特卡罗采样理论,有必要记来下来. 蒙特卡罗积分:(来自:http://blog.csdn.net/itplus/article/details/1916 ...
- Wireshark 捕获过滤器的语法
转自:http://blog.csdn.net/qq_29277155/article/details/52077239 前言 我们都知道,wireshark可以实现本地抓包,同时Wireshark也 ...
- Java如何使用重载方法处理异常？
在Java编程中,如何使用重载方法处理异常? 此示例显示如何使用重载方法来处理异常.需要在每个方法中使用try catch块. package com.yiibai; public class Exc ...
- JDBC PrepareStatement对象执行批量处理实例
以下是使用PrepareStatement对象进行批处理的典型步骤顺序 - 使用占位符创建SQL语句. 使用prepareStatement()方法创建PrepareStatement对象. 使用se ...
- e812. 强制弹出菜单为重组件
By default, Swing popup menus used by JMenu and JPopupMenu are lightweight. If heavyweight component ...
- Ubuntu 14.04 安装 DevStack与遇到的的问题记录
本文总结Ubuntu 14.04下部署DevStack的过程以及一些可能遇到的问题. 一.安装 以下的操作最好在普通用户下进行,至少在git clone devstack的时候使用普通用户,这样可以避 ...
- Mongodb学习笔记(1)--入门
文档 多个键及关联的值有序的放置在一起就是文档,如"greeting":"Hello World!" 特点 文档中键值对是有序的 除了字符串还可以是其他类型:& ...
- mysql 类型
1.bigint 范围(-2^63 (-9223372036854775808) 到 2^63-1 (9223372036854775807) ) 字节大小(8个字节) 2.int 范围(-2^31 ...
- IT运维助力业务增值
随着业务的不断扩展及IT的深化融合,IT运维在企业日常管理中的地位已经显得越发重要.然而,日常的运维工作繁琐.辛苦,还得不到认可.“吃力不讨好!”也成为很多兢兢业业的IT管理人员普遍存在的苦恼. ...